Move success view to a different page

Create a different page to display the submit
changes success message.

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/30533

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

 <script>
 import { mapState, mapActions } from 'vuex';
-
 import SkeletonLoader from '../components/skeleton_loader.vue';
 import EditArea from '../components/edit_area.vue';
-import SavedChangesMessage from '../components/saved_changes_message.vue';
 import InvalidContentMessage from '../components/invalid_content_message.vue';
 import SubmitChangesError from '../components/submit_changes_error.vue';
-
+import { SUCCESS_ROUTE } from '../router/constants';
 import appDataQuery from '../graphql/queries/app_data.query.graphql';
 import sourceContentQuery from '../graphql/queries/source_content.query.graphql';
-
 import createFlash from '~/flash';
-
 import { LOAD_CONTENT_ERROR } from '../constants';
 
 export default {
@@ -19,7 +15,6 @@ export default {
     SkeletonLoader,
     EditArea,
     InvalidContentMessage,
-    SavedChangesMessage,
     SubmitChangesError,
   },
   apollo: {
@@ -50,7 +45,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isSavingChanges', 'submitChangesError', 'savedContentMeta']),
+    ...mapState(['isSavingChanges', 'submitChangesError']),
     isLoadingContent() {
       return this.$apollo.queries.sourceContent.loading;
     },
@@ -62,24 +57,15 @@ export default {
     ...mapActions(['setContent', 'submitChanges', 'dismissSubmitChangesError']),
     onSubmit({ content }) {
       this.setContent(content);
-      this.submitChanges();
+
+      return this.submitChanges().then(() => this.$router.push(SUCCESS_ROUTE));
     },
   },
 };
 </script>
 <template>
   <div class="container d-flex gl-flex-direction-column pt-2 h-100">
-    <!-- Success view -->
-    <saved-changes-message
-      v-if="savedContentMeta"
-      :branch="savedContentMeta.branch"
-      :commit="savedContentMeta.commit"
-      :merge-request="savedContentMeta.mergeRequest"
-      :return-url="appData.returnUrl"
-    />
-
-    <!-- Main view -->
-    <template v-else-if="appData.isSupportedContent">
+    <template v-if="appData.isSupportedContent">
       <skeleton-loader v-if="isLoadingContent" class="w-75 gl-align-self-center gl-mt-5" />
       <submit-changes-error
         v-if="submitChangesError"
@@ -97,7 +83,6 @@ export default {
       />
     </template>
 
-    <!-- Error view -->
     <invalid-content-message v-else class="w-75" />
   </div>
 </template>

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

+<script>
+import { mapState } from 'vuex';
+import SavedChangesMessage from '../components/saved_changes_message.vue';
+import { HOME_ROUTE } from '../router/constants';
+
+export default {
+  components: {
+    SavedChangesMessage,
+  },
+  computed: {
+    ...mapState(['savedContentMeta', 'returnUrl']),
+  },
+  created() {
+    if (!this.savedContentMeta) {
+      this.$router.push(HOME_ROUTE);
+    }
+  },
+};
+</script>
+<template>
+  <div v-if="savedContentMeta" class="container">
+    <saved-changes-message
+      :branch="savedContentMeta.branch"
+      :commit="savedContentMeta.commit"
+      :merge-request="savedContentMeta.mergeRequest"
+      :return-url="returnUrl"
+    />
+  </div>
+</template>

app/assets/javascripts/static_site_editor/router/constants.js

-// eslint-disable-next-line import/prefer-default-export
-export const HOME_ROUTE_NAME = 'home';
+export const HOME_ROUTE = { name: 'home' };
+export const SUCCESS_ROUTE = { name: 'success' };

app/assets/javascripts/static_site_editor/router/routes.js

 import Home from '../pages/home.vue';
-import { HOME_ROUTE_NAME } from './constants';
+import Success from '../pages/success.vue';
+
+import { HOME_ROUTE, SUCCESS_ROUTE } from './constants';
 
 export default [
   {
-    name: HOME_ROUTE_NAME,
+    ...HOME_ROUTE,
     path: '/',
     component: Home,
   },
+  {
+    ...SUCCESS_ROUTE,
+    path: '/success',
+    component: Success,
+  },
 ];

spec/frontend/static_site_editor/pages/home_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-
 import createState from '~/static_site_editor/store/state';
-
+import { SUCCESS_ROUTE } from '~/static_site_editor/router/constants';
 import Home from '~/static_site_editor/pages/home.vue';
-
 import SkeletonLoader from '~/static_site_editor/components/skeleton_loader.vue';
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
 import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
-import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
 
 import {
   returnUrl,
   sourceContent as content,
   sourceContentTitle as title,
-  savedContentMeta,
   submitChangesError,
 } from '../mock_data';
 
@@ -27,6 +23,7 @@ describe('static_site_editor/pages/home', () => {
   let wrapper;
   let store;
   let $apollo;
+  let $router;
   let setContentActionMock;
   let submitChangesActionMock;
   let dismissSubmitChangesErrorActionMock;
@@ -63,12 +60,19 @@ describe('static_site_editor/pages/home', () => {
     };
   };
 
+  const buildRouter = () => {
+    $router = {
+      push: jest.fn(),
+    };
+  };
+
   const buildWrapper = (data = {}) => {
     wrapper = shallowMount(Home, {
       localVue,
       store,
       mocks: {
         $apollo,
+        $router,
       },
       data() {
         return {
@@ -83,10 +87,10 @@ describe('static_site_editor/pages/home', () => {
   const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage);
   const findSkeletonLoader = () => wrapper.find(SkeletonLoader);
   const findSubmitChangesError = () => wrapper.find(SubmitChangesError);
-  const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
 
   beforeEach(() => {
     buildApollo();
+    buildRouter();
     buildStore();
   });
 
@@ -96,23 +100,6 @@ describe('static_site_editor/pages/home', () => {
     $apollo = null;
   });
 
-  it('renders the saved changes message when changes are submitted successfully', () => {
-    buildStore({ initialState: { returnUrl, savedContentMeta } });
-    buildWrapper();
-
-    expect(findSavedChangesMessage().exists()).toBe(true);
-    expect(findSavedChangesMessage().props()).toEqual({
-      returnUrl,
-      ...savedContentMeta,
-    });
-  });
-
-  it('does not render the saved changes message when changes are not submitted', () => {
-    buildWrapper();
-
-    expect(findSavedChangesMessage().exists()).toBe(false);
-  });
-
   describe('when content is loaded', () => {
     beforeEach(() => {
       buildStore({ initialState: { isSavingChanges: true } });
@@ -123,20 +110,14 @@ describe('static_site_editor/pages/home', () => {
       expect(findEditArea().exists()).toBe(true);
     });
 
-    it('provides source content to the edit area', () => {
+    it('provides source content, returnUrl, and isSavingChanges to the edit area', () => {
       expect(findEditArea().props()).toMatchObject({
         title,
         content,
+        returnUrl,
+        savingChanges: true,
       });
     });
-
-    it('provides returnUrl to the edit area', () => {
-      expect(findEditArea().props('returnUrl')).toBe(returnUrl);
-    });
-
-    it('provides isSavingChanges to the edit area', () => {
-      expect(findEditArea().props('savingChanges')).toBe(true);
-    });
   });
 
   it('does not render edit area when content is not loaded', () => {
@@ -210,6 +191,8 @@ describe('static_site_editor/pages/home', () => {
     const newContent = `new ${content}`;
 
     beforeEach(() => {
+      submitChangesActionMock.mockResolvedValueOnce();
+
       buildWrapper({ sourceContent: { title, content } });
       findEditArea().vm.$emit('submit', { content: newContent });
     });
@@ -221,5 +204,11 @@ describe('static_site_editor/pages/home', () => {
     it('dispatches submitChanges action', () => {
       expect(submitChangesActionMock).toHaveBeenCalled();
     });
+
+    it('pushes success route when submitting changes succeeds', () => {
+      return wrapper.vm.$nextTick().then(() => {
+        expect($router.push).toHaveBeenCalledWith(SUCCESS_ROUTE);
+      });
+    });
   });
 });

spec/frontend/static_site_editor/pages/success_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import createState from '~/static_site_editor/store/state';
+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 { HOME_ROUTE } from '~/static_site_editor/router/constants';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('static_site_editor/pages/success', () => {
+  let wrapper;
+  let store;
+  let router;
+
+  const buildRouter = () => {
+    router = {
+      push: jest.fn(),
+    };
+  };
+
+  const buildStore = (initialState = {}) => {
+    store = new Vuex.Store({
+      state: createState({
+        savedContentMeta,
+        returnUrl,
+        ...initialState,
+      }),
+    });
+  };
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(Success, {
+      localVue,
+      store,
+      mocks: {
+        $router: router,
+      },
+    });
+  };
+
+  const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
+
+  beforeEach(() => {
+    buildRouter();
+    buildStore();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders saved changes message', () => {
+    buildWrapper();
+
+    expect(findSavedChangesMessage().exists()).toBe(true);
+  });
+
+  it('passes returnUrl to the saved changes message', () => {
+    buildWrapper();
+
+    expect(findSavedChangesMessage().props('returnUrl')).toBe(returnUrl);
+  });
+
+  it('passes saved content metadata to the saved changes message', () => {
+    buildWrapper();
+
+    expect(findSavedChangesMessage().props('branch')).toBe(savedContentMeta.branch);
+    expect(findSavedChangesMessage().props('commit')).toBe(savedContentMeta.commit);
+    expect(findSavedChangesMessage().props('mergeRequest')).toBe(savedContentMeta.mergeRequest);
+  });
+
+  it('redirects to the HOME route when content has not been submitted', () => {
+    buildStore({ savedContentMeta: null });
+    buildWrapper();
+
+    expect(router.push).toHaveBeenCalledWith(HOME_ROUTE);
+  });
+});