UX and FE review feedback

- Fix layout on mobile screens
- Simplify property passing to pages
- Simplify copy

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

@@ -9,5 +9,5 @@ export default {
 };
 </script>
 <template>
-  <router-view v-bind="$props" />
+  <router-view :merge-requests-illustration-path="mergeRequestsIllustrationPath" />
 </template>

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

@@ -37,34 +37,34 @@ export default {
       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.',
-    ),
-  },
+  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">
-    <div
-      class="gl-absolute gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-    >
+  <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.messages.returnToSiteBtnText }}</gl-button
+          >{{ $options.returnToSiteBtnText }}</gl-button
         >
         <strong>
           {{ updatedFileDescription }}
@@ -72,15 +72,17 @@ export default {
       </div>
     </div>
     <gl-empty-state
-      :primary-button-text="$options.messages.primaryButtonText"
-      :title="$options.messages.title"
+      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.messages.mergeRequestInstructionsHeading }}</p>
-        <p>{{ $options.messages.addDescriptionInstruction }}</p>
-        <p>{{ $options.messages.assignMergeRequestInstruction }}</p>
+        <p>{{ $options.mergeRequestInstructionsHeading }}</p>
+        <p>{{ $options.addTitleInstruction }}</p>
+        <p>{{ $options.addDescriptionInstruction }}</p>
+        <p>{{ $options.assignMergeRequestInstruction }}</p>
       </template>
     </gl-empty-state>
   </div>

locale/gitlab.pot

@@ -22585,13 +22585,13 @@ msgstr ""
 msgid "Static Application Security Testing (SAST)"
 msgstr ""
 
-msgid "StaticSiteEditor|1. Add a description to this merge request to explain why the change is being made."
+msgid "StaticSiteEditor|1. Add a clear title to describe the change."
 msgstr ""
 
-msgid "StaticSiteEditor|2. Assign this merge request to a person who can accept the changes so that it can be visible on the site."
+msgid "StaticSiteEditor|2. Add a description to explain why the change is being made."
 msgstr ""
 
-msgid "StaticSiteEditor|A couple of things you need to do to get your changes visible:"
+msgid "StaticSiteEditor|3. Assign a person to review and accept the merge request."
 msgstr ""
 
 msgid "StaticSiteEditor|An error occurred while submitting your changes."
@@ -22618,13 +22618,16 @@ 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."
 msgstr ""
 
+msgid "StaticSiteEditor|To see your changes live you will need to do the following things:"
+msgstr ""
+
 msgid "StaticSiteEditor|Update %{sourcePath} file"
 msgstr ""
 
 msgid "StaticSiteEditor|View documentation"
 msgstr ""
 
-msgid "StaticSiteEditor|Your merge request is ready to be managed"
+msgid "StaticSiteEditor|Your merge request has been created"
 msgstr ""
 
 msgid "Statistics"

spec/frontend/static_site_editor/app_spec.js → spec/frontend/static_site_editor/components/app_spec.js

@@ -28,7 +28,7 @@ describe('static_site_editor/components/app', () => {
     buildWrapper();
 
     expect(wrapper.find(RouterView).attributes()).toMatchObject({
-      mergerequestsillustrationpath: mergeRequestsIllustrationPath,
+      'merge-requests-illustration-path': mergeRequestsIllustrationPath,
     });
   });
 });

spec/frontend/static_site_editor/pages/success_spec.js

@@ -59,7 +59,7 @@ describe('static_site_editor/pages/success', () => {
     expect(findEmptyState().props()).toMatchObject({
       primaryButtonText: 'View merge request',
       primaryButtonLink: savedContentMeta.mergeRequest.url,
-      title: 'Your merge request is ready to be managed',
+      title: 'Your merge request has been created',
       svgPath: mergeRequestsIllustrationPath,
     });
   });
@@ -68,13 +68,14 @@ describe('static_site_editor/pages/success', () => {
     buildWrapper();
 
     expect(findEmptyState().text()).toContain(
-      'A couple of things you need to do to get your changes visible:',
+      '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(
-      '1. Add a description to this merge request to explain why the change is being made.',
+      '2. Add a description 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.',
+      '3. Assign a person to review and accept the merge request.',
     );
   });