Display empty state in success page

app/assets/javascripts/static_site_editor/pages/success.vue

 <script>
+import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { s__, __, sprintf } from '~/locale';
+
 import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql';
 import appDataQuery from '../graphql/queries/app_data.query.graphql';
-import SavedChangesMessage from '../components/saved_changes_message.vue';
 import { HOME_ROUTE } from '../router/constants';
 
 export default {
   components: {
-    SavedChangesMessage,
+    GlEmptyState,
+    GlButton,
+  },
+  props: {
+    mergeRequestsIllustrationPath: {
+      type: String,
+      required: true,
+    },
   },
   apollo: {
     savedContentMeta: {
@@ -16,20 +25,63 @@ export default {
       query: appDataQuery,
     },
   },
+  computed: {
+    updatedFileDescription() {
+      const { sourcePath } = this.appData;
+
+      return sprintf(s__('Update %{sourcePath} file'), { sourcePath });
+    },
+  },
   created() {
     if (!this.savedContentMeta) {
       this.$router.push(HOME_ROUTE);
     }
   },
+  messages: {
+    title: s__('StaticSiteEditor|Your merge request is ready to be managed'),
+    primaryButtonText: __('View merge request'),
+    returnToSiteBtnText: s__('StaticSiteEditor|Return to site'),
+    mergeRequestInstructionsHeading: s__(
+      'StaticSiteEditor|A couple of things you need to do to get your changes visible:',
+    ),
+    addDescriptionInstruction: s__(
+      'StaticSiteEditor|1. Add a description to this merge request to explain why the change is being made.',
+    ),
+    assignMergeRequestInstruction: s__(
+      'StaticSiteEditor|2. Assign this merge request to a person who can accept the changes so that it can be visible on the site.',
+    ),
+  },
 };
 </script>
 <template>
   <div v-if="savedContentMeta" class="container">
-    <saved-changes-message
-      :branch="savedContentMeta.branch"
-      :commit="savedContentMeta.commit"
-      :merge-request="savedContentMeta.mergeRequest"
-      :return-url="appData.returnUrl"
-    />
+    <div
+      class="gl-absolute gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+    >
+      <div class="container gl-py-4">
+        <gl-button
+          v-if="appData.returnUrl"
+          ref="returnToSiteButton"
+          class="gl-mr-5"
+          :href="appData.returnUrl"
+          >{{ $options.messages.returnToSiteBtnText }}</gl-button
+        >
+        <strong>
+          {{ updatedFileDescription }}
+        </strong>
+      </div>
+    </div>
+    <gl-empty-state
+      :primary-button-text="$options.messages.primaryButtonText"
+      :title="$options.messages.title"
+      :primary-button-link="savedContentMeta.mergeRequest.url"
+      :svg-path="mergeRequestsIllustrationPath"
+    >
+      <template #description>
+        <p>{{ $options.messages.mergeRequestInstructionsHeading }}</p>
+        <p>{{ $options.messages.addDescriptionInstruction }}</p>
+        <p>{{ $options.messages.assignMergeRequestInstruction }}</p>
+      </template>
+    </gl-empty-state>
   </div>
 </template>

spec/frontend/static_site_editor/pages/success_spec.js

-import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
 import Success from '~/static_site_editor/pages/success.vue';
-import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
-import { savedContentMeta, returnUrl } from '../mock_data';
+import { savedContentMeta, returnUrl, sourcePath } from '../mock_data';
 import { HOME_ROUTE } from '~/static_site_editor/router/constants';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
 describe('static_site_editor/pages/success', () => {
+  const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
   let wrapper;
-  let store;
   let router;
 
   const buildRouter = () => {
@@ -22,16 +17,22 @@ describe('static_site_editor/pages/success', () => {
 
   const buildWrapper = (data = {}) => {
     wrapper = shallowMount(Success, {
-      localVue,
-      store,
       mocks: {
         $router: router,
       },
+      stubs: {
+        GlEmptyState,
+        GlButton,
+      },
+      propsData: {
+        mergeRequestsIllustrationPath,
+      },
       data() {
         return {
           savedContentMeta,
           appData: {
             returnUrl,
+            sourcePath,
           },
           ...data,
         };
@@ -39,7 +40,8 @@ describe('static_site_editor/pages/success', () => {
     });
   };
 
-  const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findReturnUrlButton = () => wrapper.find(GlButton);
 
   beforeEach(() => {
     buildRouter();
@@ -50,29 +52,49 @@ describe('static_site_editor/pages/success', () => {
     wrapper = null;
   });
 
-  it('renders saved changes message', () => {
+  it('renders empty state with a link to the created merge request', () => {
+    buildWrapper();
+
+    expect(findEmptyState().exists()).toBe(true);
+    expect(findEmptyState().props()).toMatchObject({
+      primaryButtonText: 'View merge request',
+      primaryButtonLink: savedContentMeta.mergeRequest.url,
+      title: 'Your merge request is ready to be managed',
+      svgPath: mergeRequestsIllustrationPath,
+    });
+  });
+
+  it('displays merge request instructions in the empty state', () => {
     buildWrapper();
 
-    expect(findSavedChangesMessage().exists()).toBe(true);
+    expect(findEmptyState().text()).toContain(
+      'A couple of things you need to do to get your changes visible:',
+    );
+    expect(findEmptyState().text()).toContain(
+      '1. Add a description to this merge request to explain why the change is being made.',
+    );
+    expect(findEmptyState().text()).toContain(
+      '2. Assign this merge request to a person who can accept the changes so that it can be visible on the site.',
+    );
   });
 
-  it('passes returnUrl to the saved changes message', () => {
+  it('displays return to site button', () => {
     buildWrapper();
 
-    expect(findSavedChangesMessage().props('returnUrl')).toBe(returnUrl);
+    expect(findReturnUrlButton().text()).toBe('Return to site');
+    expect(findReturnUrlButton().attributes().href).toBe(returnUrl);
   });
 
-  it('passes saved content metadata to the saved changes message', () => {
+  it('displays source path', () => {
     buildWrapper();
 
-    expect(findSavedChangesMessage().props('branch')).toBe(savedContentMeta.branch);
-    expect(findSavedChangesMessage().props('commit')).toBe(savedContentMeta.commit);
-    expect(findSavedChangesMessage().props('mergeRequest')).toBe(savedContentMeta.mergeRequest);
+    expect(wrapper.text()).toContain(`Update ${sourcePath} file`);
   });
 
   it('redirects to the HOME route when content has not been submitted', () => {
     buildWrapper({ savedContentMeta: null });
 
     expect(router.push).toHaveBeenCalledWith(HOME_ROUTE);
+    expect(wrapper.html()).toBe('');
   });
 });