Add InvalidContentMessage and associated spec

The Static Site Editor component leverages this dumb component
to communicate to the user that an invalid file type (non-markdown)
is attempting to be used, additionally added corresponding
localization update

app/assets/javascripts/static_site_editor/components/invalid_content_message.vue

+<script>
+import { GlNewButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlNewButton,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3>{{ s__('StaticSiteEditor|Incompatible file content') }}</h3>
+    <p>
+      {{
+        s__(
+          'StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor.',
+        )
+      }}
+    </p>
+    <div>
+      <gl-new-button
+        ref="documentationButton"
+        href="https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman"
+        >{{ s__('StaticSiteEditor|View documentation') }}</gl-new-button
+      >
+    </div>
+  </div>
+</template>

app/assets/javascripts/static_site_editor/components/static_site_editor.vue

@@ -5,11 +5,13 @@ import { GlSkeletonLoader } from '@gitlab/ui';
 import EditArea from './edit_area.vue';
 import EditHeader from './edit_header.vue';
 import Toolbar from './publish_toolbar.vue';
+import InvalidContentMessage from './invalid_content_message.vue';
 
 export default {
   components: {
     EditArea,
     EditHeader,
+    InvalidContentMessage,
     GlSkeletonLoader,
     Toolbar,
   },
@@ -19,13 +21,16 @@ export default {
       'isLoadingContent',
       'isSavingChanges',
       'isContentLoaded',
+      'isSupportedContent',
       'returnUrl',
       'title',
     ]),
     ...mapGetters(['contentChanged']),
   },
   mounted() {
-    this.loadContent();
+    if (this.isSupportedContent) {
+      this.loadContent();
+    }
   },
   methods: {
     ...mapActions(['loadContent', 'setContent', 'submitChanges']),
@@ -33,30 +38,33 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex justify-content-center h-100 pt-2">
-    <div v-if="isLoadingContent" class="w-50 h-50">
-      <gl-skeleton-loader :width="500" :height="102">
-        <rect width="500" height="16" rx="4" />
-        <rect y="20" width="375" height="16" rx="4" />
-        <rect x="380" y="20" width="120" height="16" rx="4" />
-        <rect y="40" width="250" height="16" rx="4" />
-        <rect x="255" y="40" width="150" height="16" rx="4" />
-        <rect x="410" y="40" width="90" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-    <div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column">
-      <edit-header class="w-75 align-self-center py-2" :title="title" />
-      <edit-area
-        class="w-75 h-100 shadow-none align-self-center"
-        :value="content"
-        @input="setContent"
-      />
-      <toolbar
-        :return-url="returnUrl"
-        :saveable="contentChanged"
-        :saving-changes="isSavingChanges"
-        @submit="submitChanges"
-      />
-    </div>
+  <div class="d-flex justify-content-center h-100  pt-2">
+    <template v-if="isSupportedContent">
+      <div v-if="isLoadingContent" class="w-50 h-50">
+        <gl-skeleton-loader :width="500" :height="102">
+          <rect width="500" height="16" rx="4" />
+          <rect y="20" width="375" height="16" rx="4" />
+          <rect x="380" y="20" width="120" height="16" rx="4" />
+          <rect y="40" width="250" height="16" rx="4" />
+          <rect x="255" y="40" width="150" height="16" rx="4" />
+          <rect x="410" y="40" width="90" height="16" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+      <div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column">
+        <edit-header class="w-75 align-self-center py-2" :title="title" />
+        <edit-area
+          class="w-75 h-100 shadow-none align-self-center"
+          :value="content"
+          @input="setContent"
+        />
+        <toolbar
+          :return-url="returnUrl"
+          :saveable="contentChanged"
+          :saving-changes="isSavingChanges"
+          @submit="submitChanges"
+        />
+      </div>
+    </template>
+    <invalid-content-message v-else class="w-75" />
   </div>
 </template>

app/assets/javascripts/static_site_editor/index.js

@@ -3,10 +3,17 @@ import StaticSiteEditor from './components/static_site_editor.vue';
 import createStore from './store';
 
 const initStaticSiteEditor = el => {
-  const { projectId, returnUrl, path: sourcePath } = el.dataset;
+  const { projectId, path: sourcePath, returnUrl } = el.dataset;
+  const isSupportedContent = 'isSupportedContent' in el.dataset;
 
   const store = createStore({
-    initialState: { projectId, returnUrl, sourcePath, username: window.gon.current_username },
+    initialState: {
+      isSupportedContent,
+      projectId,
+      returnUrl,
+      sourcePath,
+      username: window.gon.current_username,
+    },
   });
 
   return new Vue({

app/assets/javascripts/static_site_editor/store/state.js

@@ -6,6 +6,7 @@ const createState = (initialState = {}) => ({
 
   isLoadingContent: false,
   isSavingChanges: false,
+  isSupportedContent: false,
 
   isContentLoaded: false,
 

locale/gitlab.pot

@@ -19463,6 +19463,9 @@ msgstr ""
 msgid "StaticSiteEditor|Could not create merge request."
 msgstr ""
 
+msgid "StaticSiteEditor|Incompatible file content"
+msgstr ""
+
 msgid "StaticSiteEditor|Return to site"
 msgstr ""
 
@@ -19475,9 +19478,15 @@ msgstr ""
 msgid "StaticSiteEditor|Summary of changes"
 msgstr ""
 
+msgid "StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor."
+msgstr ""
+
 msgid "StaticSiteEditor|Update %{sourcePath} file"
 msgstr ""
 
+msgid "StaticSiteEditor|View documentation"
+msgstr ""
+
 msgid "StaticSiteEditor|View merge request"
 msgstr ""
 

spec/frontend/static_site_editor/components/invalid_content_message_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
+
+describe('~/static_site_editor/components/invalid_content_message.vue', () => {
+  let wrapper;
+  const findDocumentationButton = () => wrapper.find({ ref: 'documentationButton' });
+  const documentationUrl =
+    'https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman';
+
+  beforeEach(() => {
+    wrapper = shallowMount(InvalidContentMessage);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the configuration button link', () => {
+    expect(findDocumentationButton().exists()).toBe(true);
+    expect(findDocumentationButton().attributes('href')).toBe(documentationUrl);
+  });
+});

spec/frontend/static_site_editor/components/static_site_editor_spec.js

@@ -8,6 +8,7 @@ import createState from '~/static_site_editor/store/state';
 import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue';
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
+import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
 import { sourceContent, sourceContentTitle } from '../mock_data';
@@ -29,7 +30,10 @@ describe('StaticSiteEditor', () => {
     submitChangesActionMock = jest.fn();
 
     store = new Vuex.Store({
-      state: createState(initialState),
+      state: createState({
+        isSupportedContent: true,
+        ...initialState,
+      }),
       getters: {
         contentChanged: () => false,
         ...getters,
@@ -62,6 +66,7 @@ describe('StaticSiteEditor', () => {
 
   const findEditArea = () => wrapper.find(EditArea);
   const findEditHeader = () => wrapper.find(EditHeader);
+  const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage);
   const findPublishToolbar = () => wrapper.find(PublishToolbar);
   const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
 
@@ -151,6 +156,13 @@ describe('StaticSiteEditor', () => {
     expect(findPublishToolbar().props('savingChanges')).toBe(true);
   });
 
+  it('displays invalid content message when content is not supported', () => {
+    buildStore({ initialState: { isSupportedContent: false } });
+    buildWrapper();
+
+    expect(findInvalidContentMessage().exists()).toBe(true);
+  });
+
   it('dispatches load content action', () => {
     expect(loadContentActionMock).toHaveBeenCalled();
   });