Commit ec45178c authored by derek-knox's avatar derek-knox Committed by Enrique Alcantara

Display saved changes message

When changes are submitted successfully in the Static
Site Editor, display a message indicating that and
providing information about the submitted merge request

Additionally updated the static_site_editor_spec to assert
the saved_changes_message component when a valid
savedContentMeta state exists
parent 27cacbd2
......@@ -4,6 +4,7 @@ import { GlSkeletonLoader } from '@gitlab/ui';
import EditArea from './edit_area.vue';
import EditHeader from './edit_header.vue';
import SavedChangesMessage from './saved_changes_message.vue';
import Toolbar from './publish_toolbar.vue';
import InvalidContentMessage from './invalid_content_message.vue';
import SubmitChangesError from './submit_changes_error.vue';
......@@ -14,6 +15,7 @@ export default {
EditHeader,
InvalidContentMessage,
GlSkeletonLoader,
SavedChangesMessage,
Toolbar,
SubmitChangesError,
},
......@@ -27,6 +29,7 @@ export default {
'returnUrl',
'title',
'submitChangesError',
'savedContentMeta',
]),
...mapGetters(['contentChanged']),
},
......@@ -41,8 +44,18 @@ export default {
};
</script>
<template>
<div class="d-flex justify-content-center h-100 pt-2">
<template v-if="isSupportedContent">
<div class="d-flex justify-content-center h-100 pt-2">
<!-- Success view -->
<saved-changes-message
v-if="savedContentMeta"
:branch="savedContentMeta.branch"
:commit="savedContentMeta.commit"
:merge-request="savedContentMeta.mergeRequest"
:return-url="returnUrl"
/>
<!-- Main view -->
<template v-else-if="isSupportedContent">
<div v-if="isLoadingContent" class="w-50 h-50">
<gl-skeleton-loader :width="500" :height="102">
<rect width="500" height="16" rx="4" />
......@@ -75,6 +88,8 @@ export default {
/>
</div>
</template>
<!-- Error view -->
<invalid-content-message v-else class="w-75" />
</div>
</template>
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: {
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',
branch,
commit,
mergeRequest,
returnUrl,
};
const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });
......
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlSkeletonLoader } from '@gitlab/ui';
import createState from '~/static_site_editor/store/state';
......@@ -11,8 +10,15 @@ import EditHeader from '~/static_site_editor/components/edit_header.vue';
import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
import { sourceContent, sourceContentTitle, submitChangesError } from '../mock_data';
import {
returnUrl,
sourceContent,
sourceContentTitle,
savedContentMeta,
submitChangesError,
} from '../mock_data';
const localVue = createLocalVue();
......@@ -74,6 +80,7 @@ describe('StaticSiteEditor', () => {
const findPublishToolbar = () => wrapper.find(PublishToolbar);
const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
const findSubmitChangesError = () => wrapper.find(SubmitChangesError);
const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
beforeEach(() => {
buildStore();
......@@ -84,6 +91,17 @@ describe('StaticSiteEditor', () => {
wrapper.destroy();
});
it('renders the saved changes message when changes are submitted successfully', () => {
buildStore({ initialState: { returnUrl, savedContentMeta } });
buildWrapper();
expect(findSavedChangesMessage().exists()).toBe(true);
expect(findSavedChangesMessage().props('returnUrl')).toBe(returnUrl);
expect(findSavedChangesMessage().props('commit')).toBe(savedContentMeta.commit);
expect(findSavedChangesMessage().props('branch')).toBe(savedContentMeta.branch);
expect(findSavedChangesMessage().props('mergeRequest')).toBe(savedContentMeta.mergeRequest);
});
describe('when content is not loaded', () => {
it('does not render edit area', () => {
expect(findEditArea().exists()).toBe(false);
......@@ -96,6 +114,10 @@ describe('StaticSiteEditor', () => {
it('does not render toolbar', () => {
expect(findPublishToolbar().exists()).toBe(false);
});
it('does not render saved changes message', () => {
expect(findSavedChangesMessage().exists()).toBe(false);
});
});
describe('when content is loaded', () => {
......
......@@ -21,10 +21,10 @@ export const sourcePath = 'foobar.md.html';
export const savedContentMeta = {
branch: {
label: 'foobar',
url: 'foobar/-/tree/foorbar',
url: 'foobar/-/tree/foobar',
},
commit: {
label: 'c1461b08 ',
label: 'c1461b08',
url: 'foobar/-/c1461b08',
},
mergeRequest: {
......
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