Merge branch '216868-improve-success-screen' into 'master'

Improve the IA and styling of the Success screen in the Static Site Editor

See merge request gitlab-org/gitlab!37475

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

+<script>
+export default {
+  props: {
+    mergeRequestsIllustrationPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
 <template>
-  <router-view />
+  <router-view :merge-requests-illustration-path="mergeRequestsIllustrationPath" />
 </template>

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

-<script>
-import { isString } from 'lodash';
-
-import { GlLink, GlButton } from '@gitlab/ui';
-
-const validateUrlAndLabel = value => isString(value.label) && isString(value.url);
-
-export default {
-  components: {
-    GlLink,
-    GlButton,
-  },
-  props: {
-    branch: {
-      type: Object,
-      required: true,
-      validator: validateUrlAndLabel,
-    },
-    commit: {
-      type: Object,
-      required: true,
-      validator: validateUrlAndLabel,
-    },
-    mergeRequest: {
-      type: Object,
-      required: true,
-      validator: validateUrlAndLabel,
-    },
-    returnUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="border-bottom pb-4">
-      <h3>{{ s__('StaticSiteEditor|Success!') }}</h3>
-      <p>
-        {{
-          s__(
-            'StaticSiteEditor|Your changes have been submitted and a merge request has been created. The changes won’t be visible on the site until the merge request has been accepted.',
-          )
-        }}
-      </p>
-      <div class="d-flex justify-content-end">
-        <gl-button v-if="returnUrl" ref="returnToSiteButton" :href="returnUrl">{{
-          s__('StaticSiteEditor|Return to site')
-        }}</gl-button>
-        <gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
-          {{ s__('StaticSiteEditor|View merge request') }}
-        </gl-button>
-      </div>
-    </div>
-
-    <div class="pt-2">
-      <h4>{{ s__('StaticSiteEditor|Summary of changes') }}</h4>
-      <ul>
-        <li>
-          {{ s__('StaticSiteEditor|You created a new branch:') }}
-          <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
-        </li>
-        <li>
-          {{ s__('StaticSiteEditor|You created a merge request:') }}
-          <gl-link ref="mergeRequestLink" :href="mergeRequest.url">{{
-            mergeRequest.label
-          }}</gl-link>
-        </li>
-        <li>
-          {{ s__('StaticSiteEditor|You added a commit:') }}
-          <gl-link ref="commitLink" :href="commit.url">{{ commit.label }}</gl-link>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>

app/assets/javascripts/static_site_editor/index.js

@@ -5,7 +5,14 @@ import createRouter from './router';
 import createApolloProvider from './graphql';
 
 const initStaticSiteEditor = el => {
-  const { isSupportedContent, path: sourcePath, baseUrl, namespace, project } = el.dataset;
+  const {
+    isSupportedContent,
+    path: sourcePath,
+    baseUrl,
+    namespace,
+    project,
+    mergeRequestsIllustrationPath,
+  } = el.dataset;
   const { current_username: username } = window.gon;
   const returnUrl = el.dataset.returnUrl || null;
 
@@ -26,7 +33,11 @@ const initStaticSiteEditor = el => {
       App,
     },
     render(createElement) {
-      return createElement('app');
+      return createElement('app', {
+        props: {
+          mergeRequestsIllustrationPath,
+        },
+      });
     },
   });
 };

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,65 @@ 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);
     }
   },
+  title: s__('StaticSiteEditor|Your merge request has been created'),
+  primaryButtonText: __('View merge request'),
+  returnToSiteBtnText: s__('StaticSiteEditor|Return to site'),
+  mergeRequestInstructionsHeading: s__(
+    'StaticSiteEditor|To see your changes live you will need to do the following things:',
+  ),
+  addTitleInstruction: s__('StaticSiteEditor|1. Add a clear title to describe the change.'),
+  addDescriptionInstruction: s__(
+    'StaticSiteEditor|2. Add a description to explain why the change is being made.',
+  ),
+  assignMergeRequestInstruction: s__(
+    'StaticSiteEditor|3. Assign a person to review and accept the merge request.',
+  ),
 };
 </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
+    v-if="savedContentMeta"
+    class="container gl-flex-grow-1 gl-display-flex gl-flex-direction-column"
+  >
+    <div class="gl-fixed 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.returnToSiteBtnText }}</gl-button
+        >
+        <strong>
+          {{ updatedFileDescription }}
+        </strong>
+      </div>
+    </div>
+    <gl-empty-state
+      class="gl-my-9"
+      :primary-button-text="$options.primaryButtonText"
+      :title="$options.title"
+      :primary-button-link="savedContentMeta.mergeRequest.url"
+      :svg-path="mergeRequestsIllustrationPath"
+    >
+      <template #description>
+        <p>{{ $options.mergeRequestInstructionsHeading }}</p>
+        <p>{{ $options.addTitleInstruction }}</p>
+        <p>{{ $options.addDescriptionInstruction }}</p>
+        <p>{{ $options.assignMergeRequestInstruction }}</p>
+      </template>
+    </gl-empty-state>
   </div>
 </template>

app/views/projects/static_site_editor/show.html.haml

-#static-site-editor{ data: @config.payload }
+#static-site-editor{ data: @config.payload.merge({ merge_requests_illustration_path: image_path('illustrations/merge_requests.svg') }) }

changelogs/unreleased/216868-improve-success-screen.yml

+---
+title: Improve the IA and styling of the Success screen in the Static Site Editor
+merge_request: 37475
+author:
+type: changed

locale/gitlab.pot

@@ -22720,6 +22720,15 @@ msgstr ""
 msgid "Static Application Security Testing (SAST)"
 msgstr ""
 
+msgid "StaticSiteEditor|1. Add a clear title to describe the change."
+msgstr ""
+
+msgid "StaticSiteEditor|2. Add a description to explain why the change is being made."
+msgstr ""
+
+msgid "StaticSiteEditor|3. Assign a person to review and accept the merge request."
+msgstr ""
+
 msgid "StaticSiteEditor|An error occurred while submitting your changes."
 msgstr ""
 
@@ -22741,13 +22750,10 @@ msgstr ""
 msgid "StaticSiteEditor|Static site editor"
 msgstr ""
 
-msgid "StaticSiteEditor|Success!"
+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|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."
+msgid "StaticSiteEditor|To see your changes live you will need to do the following things:"
 msgstr ""
 
 msgid "StaticSiteEditor|Update %{sourcePath} file"
@@ -22756,19 +22762,7 @@ msgstr ""
 msgid "StaticSiteEditor|View documentation"
 msgstr ""
 
-msgid "StaticSiteEditor|View merge request"
-msgstr ""
-
-msgid "StaticSiteEditor|You added a commit:"
-msgstr ""
-
-msgid "StaticSiteEditor|You created a merge request:"
-msgstr ""
-
-msgid "StaticSiteEditor|You created a new branch:"
-msgstr ""
-
-msgid "StaticSiteEditor|Your changes have been submitted and a merge request has been created. The changes won’t be visible on the site until the merge request has been accepted."
+msgid "StaticSiteEditor|Your merge request has been created"
 msgstr ""
 
 msgid "Statistics"
@@ -25689,6 +25683,9 @@ msgstr ""
 msgid "Update"
 msgstr ""
 
+msgid "Update %{sourcePath} file"
+msgstr ""
+
 msgid "Update all"
 msgstr ""
 
@@ -26425,6 +26422,9 @@ msgstr ""
 msgid "View log"
 msgstr ""
 
+msgid "View merge request"
+msgstr ""
+
 msgid "View open merge request"
 msgstr ""
 

spec/frontend/static_site_editor/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import App from '~/static_site_editor/components/app.vue';
+
+describe('static_site_editor/components/app', () => {
+  const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
+  const RouterView = {
+    template: '<div></div>',
+  };
+  let wrapper;
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(App, {
+      stubs: {
+        RouterView,
+      },
+      propsData: {
+        mergeRequestsIllustrationPath,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('passes merge request illustration path to the router view component', () => {
+    buildWrapper();
+
+    expect(wrapper.find(RouterView).attributes()).toMatchObject({
+      'merge-requests-illustration-path': mergeRequestsIllustrationPath,
+    });
+  });
+});

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,
-    commit,
-    mergeRequest,
-    returnUrl,
-  };
-  const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
-  const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });
-  const findBranchLink = () => wrapper.find({ ref: 'branchLink' });
-  const findCommitLink = () => wrapper.find({ ref: 'commitLink' });
-  const findMergeRequestLink = () => wrapper.find({ ref: 'mergeRequestLink' });
-
-  beforeEach(() => {
-    wrapper = shallowMount(SavedChangesMessage, {
-      propsData: props,
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it.each`
-    text                    | findEl                    | url
-    ${'Return to site'}     | ${findReturnToSiteButton} | ${props.returnUrl}
-    ${'View merge request'} | ${findMergeRequestButton} | ${props.mergeRequest.url}
-  `('renders "$text" button link', ({ text, findEl, url }) => {
-    const btn = findEl();
-
-    expect(btn.exists()).toBe(true);
-    expect(btn.text()).toBe(text);
-    expect(btn.attributes('href')).toBe(url);
-  });
-
-  it.each`
-    desc               | findEl                  | prop
-    ${'branch'}        | ${findBranchLink}       | ${props.branch}
-    ${'commit'}        | ${findCommitLink}       | ${props.commit}
-    ${'merge request'} | ${findMergeRequestLink} | ${props.mergeRequest}
-  `('renders $desc link', ({ findEl, prop }) => {
-    const el = findEl();
-
-    expect(el.exists()).toBe(true);
-    expect(el.text()).toBe(prop.label);
-    expect(el.attributes('href')).toBe(prop.url);
-  });
-});

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,50 @@ 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 has been created',
+      svgPath: mergeRequestsIllustrationPath,
+    });
+  });
+
+  it('displays merge request instructions in the empty state', () => {
     buildWrapper();
 
-    expect(findSavedChangesMessage().exists()).toBe(true);
+    expect(findEmptyState().text()).toContain(
+      'To see your changes live you will need to do the following things:',
+    );
+    expect(findEmptyState().text()).toContain('1. Add a clear title to describe the change.');
+    expect(findEmptyState().text()).toContain(
+      '2. Add a description to explain why the change is being made.',
+    );
+    expect(findEmptyState().text()).toContain(
+      '3. Assign a person to review and accept the merge request.',
+    );
   });
 
-  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('');
   });
 });