Commit 6dd4a4fd authored by Enrique Alcántara's avatar Enrique Alcántara Committed by Paul Slaughter

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
parent 4bc39902
<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>
<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>
// 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' };
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,
},
];
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);
});
});
});
});
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment