Merge branch '212562-saved-changes-messages-component' into 'master'

Added initial implementation of SavedChangesMessages.vue

See merge request gitlab-org/gitlab!28554

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

+<script>
+import { isString } from 'lodash';
+
+import { GlLink, GlNewButton } from '@gitlab/ui';
+
+const validateUrlAndLabel = value => isString(value.label) && isString(value.url);
+
+export default {
+  components: {
+    GlLink,
+    GlNewButton,
+  },
+  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: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <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>
+        <gl-new-button ref="returnToSiteButton" :href="returnUrl">{{
+          s__('StaticSiteEditor|Return to site')
+        }}</gl-new-button>
+        <gl-new-button ref="mergeRequestButton" :href="mergeRequest.url" variant="info">{{
+          s__('StaticSiteEditor|View merge request')
+        }}</gl-new-button>
+      </div>
+    </div>
+
+    <hr />
+
+    <div>
+      <h4>{{ s__('StaticSiteEditor|Summary of changes') }}</h4>
+      <ul>
+        <li>
+          {{ s__('StaticSiteEditor|A new branch was created:') }}
+          <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
+        </li>
+        <li>
+          {{ s__('StaticSiteEditor|Your changes were committed to it:') }}
+          <gl-link ref="commitLink" :href="commit.url">{{ commit.label }}</gl-link>
+        </li>
+        <li>
+          {{ s__('StaticSiteEditor|A merge request was created:') }}
+          <gl-link ref="mergeRequestLink" :href="mergeRequest.url">{{
+            mergeRequest.label
+          }}</gl-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

locale/gitlab.pot

@@ -19172,6 +19172,30 @@ msgstr ""
 msgid "Static Application Security Testing (SAST)"
 msgstr ""
 
+msgid "StaticSiteEditor|A merge request was created:"
+msgstr ""
+
+msgid "StaticSiteEditor|A new branch was created:"
+msgstr ""
+
+msgid "StaticSiteEditor|Return to site"
+msgstr ""
+
+msgid "StaticSiteEditor|Success!"
+msgstr ""
+
+msgid "StaticSiteEditor|Summary of changes"
+msgstr ""
+
+msgid "StaticSiteEditor|View merge request"
+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."
+msgstr ""
+
+msgid "StaticSiteEditor|Your changes were committed to it:"
+msgstr ""
+
 msgid "Statistics"
 msgstr ""
 

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';
+
+describe('~/static_site_editor/components/saved_changes_message.vue', () => {
+  let wrapper;
+  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',
+  };
+  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.attributes('href')).toBe(prop.url);
+    expect(el.text()).toBe(prop.label);
+  });
+});