Add latest changes from gitlab-org/gitlab@12-10-stable-ee

10 files changed, 149 insertions, 53 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue b/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue
new file mode 100644
index 00000000000..fef87057307
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue
@@ -0,0 +1,29 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+  },
+};
+</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-button
+        ref="documentationButton"
+        href="https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman"
+        >{{ s__('StaticSiteEditor|View documentation') }}</gl-button
+      >
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
index efb442d4d09..274d2f71749 100644
--- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlNewButton,
+    GlButton,
     GlLoadingIcon,
   },
   props: {
@@ -29,16 +29,12 @@ export default {
   <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
     <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
     <div>
-      <gl-new-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
+      <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
         s__('StaticSiteEditor|Return to site')
-      }}</gl-new-button>
-      <gl-new-button
-        variant="success"
-        :disabled="!saveable || savingChanges"
-        @click="$emit('submit')"
-      >
+      }}</gl-button>
+      <gl-button variant="success" :disabled="!saveable || savingChanges" @click="$emit('submit')">
         {{ __('Submit Changes') }}
-      </gl-new-button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
index d76c6d9d681..41cb901720c 100644
--- a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
+++ b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
@@ -1,14 +1,14 @@
 <script>
 import { isString } from 'lodash';
 
-import { GlLink, GlNewButton } from '@gitlab/ui';
+import { GlLink, GlButton } from '@gitlab/ui';
 
 const validateUrlAndLabel = value => isString(value.label) && isString(value.url);
 
 export default {
   components: {
     GlLink,
-    GlNewButton,
+    GlButton,
   },
   props: {
     branch: {
@@ -46,16 +46,12 @@ export default {
         }}
       </p>
       <div class="d-flex justify-content-end">
-        <gl-new-button ref="returnToSiteButton" :href="returnUrl">{{
+        <gl-button ref="returnToSiteButton" :href="returnUrl">{{
           s__('StaticSiteEditor|Return to site')
-        }}</gl-new-button>
-        <gl-new-button
-          ref="mergeRequestButton"
-          class="ml-2"
-          :href="mergeRequest.url"
-          variant="success"
-          >{{ s__('StaticSiteEditor|View merge request') }}</gl-new-button
-        >
+        }}</gl-button>
+        <gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
+          {{ s__('StaticSiteEditor|View merge request') }}
+        </gl-button>
       </div>
     </div>
 
@@ -64,7 +60,7 @@ export default {
       <ul>
         <li>
           {{ s__('StaticSiteEditor|You created a new branch:') }}
-          <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
+          <span ref="branchLink">{{ branch.label }}</span>
         </li>
         <li>
           {{ s__('StaticSiteEditor|You created a merge request:') }}
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
index 4d912f5c0b5..82917319fc3 100644
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
@@ -4,14 +4,20 @@ import { GlSkeletonLoader } from '@gitlab/ui';
 
 import EditArea from './edit_area.vue';
 import EditHeader from './edit_header.vue';
+import SavedChangesMessage from './saved_changes_message.vue';
 import Toolbar from './publish_toolbar.vue';
+import InvalidContentMessage from './invalid_content_message.vue';
+import SubmitChangesError from './submit_changes_error.vue';
 
 export default {
   components: {
     EditArea,
     EditHeader,
+    InvalidContentMessage,
     GlSkeletonLoader,
+    SavedChangesMessage,
     Toolbar,
+    SubmitChangesError,
   },
   computed: {
     ...mapState([
@@ -19,44 +25,71 @@ export default {
       'isLoadingContent',
       'isSavingChanges',
       'isContentLoaded',
+      'isSupportedContent',
       'returnUrl',
       'title',
+      'submitChangesError',
+      'savedContentMeta',
     ]),
     ...mapGetters(['contentChanged']),
   },
   mounted() {
-    this.loadContent();
+    if (this.isSupportedContent) {
+      this.loadContent();
+    }
   },
   methods: {
-    ...mapActions(['loadContent', 'setContent', 'submitChanges']),
+    ...mapActions(['loadContent', 'setContent', 'submitChanges', 'dismissSubmitChangesError']),
   },
 };
 </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>
+    <!-- Success view -->
+    <saved-changes-message
+      v-if="savedContentMeta"
+      :branch="savedContentMeta.branch"
+      :commit="savedContentMeta.commit"
+      :merge-request="savedContentMeta.mergeRequest"
+      :return-url="returnUrl"
+    />
+
+    <!-- Main view -->
+    <template v-else-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">
+        <submit-changes-error
+          v-if="submitChangesError"
+          class="w-75 align-self-center"
+          :error="submitChangesError"
+          @retry="submitChanges"
+          @dismiss="dismissSubmitChangesError"
+        />
+        <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>
+
+    <!-- Error view -->
+    <invalid-content-message v-else class="w-75" />
   </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue b/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue
new file mode 100644
index 00000000000..c5b6c685124
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    error: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-alert variant="danger" dismissible @dismiss="$emit('dismiss')">
+    {{ s__('StaticSiteEditor|An error occurred while submitting your changes.') }} {{ error }}
+    <template #actions>
+      <gl-button variant="danger" @click="$emit('retry')">{{ __('Retry') }}</gl-button>
+    </template>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/index.js b/app/assets/javascripts/static_site_editor/index.js
index c6a883c659a..15d668fd431 100644
--- a/app/assets/javascripts/static_site_editor/index.js
+++ b/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({
diff --git a/app/assets/javascripts/static_site_editor/store/actions.js b/app/assets/javascripts/static_site_editor/store/actions.js
index c57ef86f6ef..9f5e9e8c589 100644
--- a/app/assets/javascripts/static_site_editor/store/actions.js
+++ b/app/assets/javascripts/static_site_editor/store/actions.js
@@ -26,9 +26,12 @@ export const submitChanges = ({ state: { projectId, content, sourcePath, usernam
   return submitContentChanges({ content, projectId, sourcePath, username })
     .then(data => commit(mutationTypes.SUBMIT_CHANGES_SUCCESS, data))
     .catch(error => {
-      commit(mutationTypes.SUBMIT_CHANGES_ERROR);
-      createFlash(error.message);
+      commit(mutationTypes.SUBMIT_CHANGES_ERROR, error.message);
     });
 };
 
+export const dismissSubmitChangesError = ({ commit }) => {
+  commit(mutationTypes.DISMISS_SUBMIT_CHANGES_ERROR);
+};
+
 export default () => {};
diff --git a/app/assets/javascripts/static_site_editor/store/mutation_types.js b/app/assets/javascripts/static_site_editor/store/mutation_types.js
index 35eb35ebbe9..9cf356aecc5 100644
--- a/app/assets/javascripts/static_site_editor/store/mutation_types.js
+++ b/app/assets/javascripts/static_site_editor/store/mutation_types.js
@@ -5,3 +5,4 @@ export const SET_CONTENT = 'setContent';
 export const SUBMIT_CHANGES = 'submitChanges';
 export const SUBMIT_CHANGES_SUCCESS = 'submitChangesSuccess';
 export const SUBMIT_CHANGES_ERROR = 'submitChangesError';
+export const DISMISS_SUBMIT_CHANGES_ERROR = 'dismissSubmitChangesError';
diff --git a/app/assets/javascripts/static_site_editor/store/mutations.js b/app/assets/javascripts/static_site_editor/store/mutations.js
index 4727d04439c..72fe71f1c9b 100644
--- a/app/assets/javascripts/static_site_editor/store/mutations.js
+++ b/app/assets/javascripts/static_site_editor/store/mutations.js
@@ -19,13 +19,18 @@ export default {
   },
   [types.SUBMIT_CHANGES](state) {
     state.isSavingChanges = true;
+    state.submitChangesError = '';
   },
   [types.SUBMIT_CHANGES_SUCCESS](state, meta) {
     state.savedContentMeta = meta;
     state.isSavingChanges = false;
     state.originalContent = state.content;
   },
-  [types.SUBMIT_CHANGES_ERROR](state) {
+  [types.SUBMIT_CHANGES_ERROR](state, error) {
+    state.submitChangesError = error;
     state.isSavingChanges = false;
   },
+  [types.DISMISS_SUBMIT_CHANGES_ERROR](state) {
+    state.submitChangesError = '';
+  },
 };
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
index 98a84d9f75d..8c524b4ffe9 100644
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ b/app/assets/javascripts/static_site_editor/store/state.js
@@ -6,6 +6,7 @@ const createState = (initialState = {}) => ({
 
   isLoadingContent: false,
   isSavingChanges: false,
+  isSupportedContent: false,
 
   isContentLoaded: false,
 
@@ -13,6 +14,7 @@ const createState = (initialState = {}) => ({
   content: '',
   title: '',
 
+  submitChangesError: '',
   savedContentMeta: null,
 
   ...initialState,