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

1 files changed, 59 insertions, 26 deletions

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>