Display saved changes message

When changes are submitted successfully in the Static
Site Editor, display a message indicating that and
providing information about the submitted merge request

Additionally updated the static_site_editor_spec to assert
the saved_changes_message component when a valid
savedContentMeta state exists

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

@@ -4,6 +4,7 @@ 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';
@@ -14,6 +15,7 @@ export default {
     EditHeader,
     InvalidContentMessage,
     GlSkeletonLoader,
+    SavedChangesMessage,
     Toolbar,
     SubmitChangesError,
   },
@@ -27,6 +29,7 @@ export default {
       'returnUrl',
       'title',
       'submitChangesError',
+      'savedContentMeta',
     ]),
     ...mapGetters(['contentChanged']),
   },
@@ -41,8 +44,18 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex justify-content-center h-100  pt-2">
-    <template v-if="isSupportedContent">
+  <div class="d-flex justify-content-center h-100 pt-2">
+    <!-- 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" />
@@ -75,6 +88,8 @@ export default {
         />
       </div>
     </template>
+
+    <!-- Error view -->
     <invalid-content-message v-else class="w-75" />
   </div>
 </template>

spec/frontend/static_site_editor/components/saved_changes_message_spec.js

 import { shallowMount } from '@vue/test-utils';
+
 import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
 
+import { returnUrl, savedContentMeta } from '../mock_data';
+
 describe('~/static_site_editor/components/saved_changes_message.vue', () => {
   let wrapper;
+  const { branch, commit, mergeRequest } = savedContentMeta;
   const props = {
-    branch: {
-      label: '123-the-branch',
-      url: 'https://gitlab.com/gitlab-org/gitlab/-/tree/123-the-branch',
-    },
-    commit: {
-      label: 'a123',
-      url: 'https://gitlab.com/gitlab-org/gitlab/-/commit/a123',
-    },
-    mergeRequest: {
-      label: '123',
-      url: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/123',
-    },
-    returnUrl: 'https://www.the-static-site.com/post',
+    branch,
+    commit,
+    mergeRequest,
+    returnUrl,
   };
   const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
   const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });

spec/frontend/static_site_editor/components/static_site_editor_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-
 import { GlSkeletonLoader } from '@gitlab/ui';
 
 import createState from '~/static_site_editor/store/state';
@@ -11,8 +10,15 @@ 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 SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
+import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
 
-import { sourceContent, sourceContentTitle, submitChangesError } from '../mock_data';
+import {
+  returnUrl,
+  sourceContent,
+  sourceContentTitle,
+  savedContentMeta,
+  submitChangesError,
+} from '../mock_data';
 
 const localVue = createLocalVue();
 
@@ -74,6 +80,7 @@ describe('StaticSiteEditor', () => {
   const findPublishToolbar = () => wrapper.find(PublishToolbar);
   const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findSubmitChangesError = () => wrapper.find(SubmitChangesError);
+  const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
 
   beforeEach(() => {
     buildStore();
@@ -84,6 +91,17 @@ describe('StaticSiteEditor', () => {
     wrapper.destroy();
   });
 
+  it('renders the saved changes message when changes are submitted successfully', () => {
+    buildStore({ initialState: { returnUrl, savedContentMeta } });
+    buildWrapper();
+
+    expect(findSavedChangesMessage().exists()).toBe(true);
+    expect(findSavedChangesMessage().props('returnUrl')).toBe(returnUrl);
+    expect(findSavedChangesMessage().props('commit')).toBe(savedContentMeta.commit);
+    expect(findSavedChangesMessage().props('branch')).toBe(savedContentMeta.branch);
+    expect(findSavedChangesMessage().props('mergeRequest')).toBe(savedContentMeta.mergeRequest);
+  });
+
   describe('when content is not loaded', () => {
     it('does not render edit area', () => {
       expect(findEditArea().exists()).toBe(false);
@@ -96,6 +114,10 @@ describe('StaticSiteEditor', () => {
     it('does not render toolbar', () => {
       expect(findPublishToolbar().exists()).toBe(false);
     });
+
+    it('does not render saved changes message', () => {
+      expect(findSavedChangesMessage().exists()).toBe(false);
+    });
   });
 
   describe('when content is loaded', () => {

spec/frontend/static_site_editor/mock_data.js

@@ -21,10 +21,10 @@ export const sourcePath = 'foobar.md.html';
 export const savedContentMeta = {
   branch: {
     label: 'foobar',
-    url: 'foobar/-/tree/foorbar',
+    url: 'foobar/-/tree/foobar',
   },
   commit: {
-    label: 'c1461b08 ',
+    label: 'c1461b08',
     url: 'foobar/-/c1461b08',
   },
   mergeRequest: {