Skip to content

G
gitlab-ce
Commit 91ffb0be authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '216186-remove-vuex-load-source-content' into 'master' 

Use VueApollo to load source content in the Static Site Editor

Closes #216186

See merge request gitlab-org/gitlab!31401
parents 68101773 40b58a5a
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 175 deletions
app/assets/javascripts/static_site_editor/components/edit_area.vue
View file @ 91ffb0be
<script>
import { GlFormTextarea } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
import PublishToolbar from '../components/publish_toolbar.vue';
import EditHeader from '../components/edit_header.vue';
export default {
components: {
GlFormTextarea,
RichContentEditor,
PublishToolbar,
EditHeader,
},
mixins: [glFeatureFlagsMixin()],
props: {
value: {
title: {
type: String,
required: true,
},
content: {
type: String,
required: true,
},
savingChanges: {
type: Boolean,
required: true,
},
returnUrl: {
type: String,
required: false,
default: '',
},
},
data() {
return {
editableContent: this.content,
saveable: false,
};
},
computed: {
modified() {
return this.content !== this.editableContent;
},
},
methods: {
onSubmit() {
this.$emit('submit', { content: this.editableContent });
},
},
};
</script>
<template>
<gl-form-textarea :value="value" v-on="$listeners" />
<div class="d-flex flex-grow-1 flex-column">
<edit-header class="py-2" :title="title" />
<rich-content-editor v-if="glFeatures.richContentEditor" v-model="editableContent" />
<gl-form-textarea v-else v-model="editableContent" class="h-100 shadow-none" />
<publish-toolbar
class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
:return-url="returnUrl"
:saveable="modified"
:saving-changes="savingChanges"
@submit="onSubmit"
/>
</div>
</template>
app/assets/javascripts/static_site_editor/components/skeleton_loader.vue 0 → 100644
View file @ 91ffb0be
<script>
import { GlSkeletonLoader } from '@gitlab/ui';
export default {
components: {
GlSkeletonLoader,
},
};
</script>
<template>
<gl-skeleton-loader :width="500" :height="102">
<rect width="500" height="16" rx="4" />
<rect y="20" width="375" height="16" rx="4" />
<rect x="380" y="20" width="120" height="16" rx="4" />
<rect y="40" width="250" height="16" rx="4" />
<rect x="255" y="40" width="150" height="16" rx="4" />
<rect x="410" y="40" width="90" height="16" rx="4" />
</gl-skeleton-loader>
</template>
app/assets/javascripts/static_site_editor/pages/home.vue
View file @ 91ffb0be
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import { GlSkeletonLoader } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
import SkeletonLoader from '../components/skeleton_loader.vue';
import EditArea from '../components/edit_area.vue';
import EditHeader from '../components/edit_header.vue';
import SavedChangesMessage from '../components/saved_changes_message.vue';
import PublishToolbar from '../components/publish_toolbar.vue';
import InvalidContentMessage from '../components/invalid_content_message.vue';
import SubmitChangesError from '../components/submit_changes_error.vue';
......@@ -20,16 +16,12 @@ import { LOAD_CONTENT_ERROR } from '../constants';
export default {
components: {
RichContentEditor,
SkeletonLoader,
EditArea,
EditHeader,
InvalidContentMessage,
GlSkeletonLoader,
SavedChangesMessage,
PublishToolbar,
SubmitChangesError,
},
mixins: [glFeatureFlagsMixin()],
apollo: {
appData: {
query: appDataQuery,
......@@ -58,80 +50,51 @@ export default {
},
},
computed: {
...mapState([
'content',
'isLoadingContent',
'isSavingChanges',
'isContentLoaded',
'returnUrl',
'title',
'submitChangesError',
'savedContentMeta',
]),
...mapGetters(['contentChanged']),
},
mounted() {
if (this.appData.isSupportedContent) {
this.loadContent();
}
...mapState(['isSavingChanges', 'submitChangesError', 'savedContentMeta']),
isLoadingContent() {
return this.$apollo.queries.sourceContent.loading;
},
isContentLoaded() {
return Boolean(this.sourceContent);
},
},
methods: {
...mapActions(['loadContent', 'setContent', 'submitChanges', 'dismissSubmitChangesError']),
...mapActions(['setContent', 'submitChanges', 'dismissSubmitChangesError']),
onSubmit({ content }) {
this.setContent(content);
this.submitChanges();
},
},
};
</script>
<template>
<div class="d-flex justify-content-center h-100 pt-2">
<div class="container d-flex gl-flex-direction-column pt-2 h-100">
<!-- Success view -->
<saved-changes-message
v-if="savedContentMeta"
class="w-75"
:branch="savedContentMeta.branch"
:commit="savedContentMeta.commit"
:merge-request="savedContentMeta.mergeRequest"
:return-url="returnUrl"
:return-url="appData.returnUrl"
/>
<!-- Main view -->
<template v-else-if="appData.isSupportedContent">
<div v-if="isLoadingContent" class="w-50 h-50">
<gl-skeleton-loader :width="500" :height="102">
<rect width="500" height="16" rx="4" />
<rect y="20" width="375" height="16" rx="4" />
<rect x="380" y="20" width="120" height="16" rx="4" />
<rect y="40" width="250" height="16" rx="4" />
<rect x="255" y="40" width="150" height="16" rx="4" />
<rect x="410" y="40" width="90" height="16" rx="4" />
</gl-skeleton-loader>
</div>
<div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column">
<submit-changes-error
v-if="submitChangesError"
class="w-75 align-self-center"
:error="submitChangesError"
@retry="submitChanges"
@dismiss="dismissSubmitChangesError"
/>
<edit-header class="w-75 align-self-center py-2" :title="title" />
<rich-content-editor
v-if="glFeatures.richContentEditor"
class="w-75 gl-align-self-center"
:value="content"
@input="setContent"
/>
<edit-area
v-else
class="w-75 h-100 shadow-none align-self-center"
:value="content"
@input="setContent"
/>
<publish-toolbar
:return-url="returnUrl"
:saveable="contentChanged"
:saving-changes="isSavingChanges"
@submit="submitChanges"
/>
</div>
<skeleton-loader v-if="isLoadingContent" class="w-75 gl-align-self-center gl-mt-5" />
<submit-changes-error
v-if="submitChangesError"
:error="submitChangesError"
@retry="submitChanges"
@dismiss="dismissSubmitChangesError"
/>
<edit-area
v-if="isContentLoaded"
:title="sourceContent.title"
:content="sourceContent.content"
:saving-changes="isSavingChanges"
:return-url="appData.returnUrl"
@submit="onSubmit"
/>
</template>
<!-- Error view -->
......
spec/frontend/static_site_editor/components/edit_area_spec.js 0 → 100644
View file @ 91ffb0be
import { shallowMount } from '@vue/test-utils';
import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
import EditArea from '~/static_site_editor/components/edit_area.vue';
import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
import EditHeader from '~/static_site_editor/components/edit_header.vue';
import { sourceContentTitle as title, sourceContent as content, returnUrl } from '../mock_data';
describe('~/static_site_editor/components/edit_area.vue', () => {
let wrapper;
const savingChanges = true;
const newContent = `new ${content}`;
const buildWrapper = (propsData = {}) => {
wrapper = shallowMount(EditArea, {
provide: {
glFeatures: { richContentEditor: true },
},
propsData: {
title,
content,
returnUrl,
savingChanges,
...propsData,
},
});
};
const findEditHeader = () => wrapper.find(EditHeader);
const findRichContentEditor = () => wrapper.find(RichContentEditor);
const findPublishToolbar = () => wrapper.find(PublishToolbar);
beforeEach(() => {
buildWrapper();
});
afterEach(() => {
wrapper.destroy();
});
it('renders edit header', () => {
expect(findEditHeader().exists()).toBe(true);
expect(findEditHeader().props('title')).toBe(title);
});
it('renders rich content editor', () => {
expect(findRichContentEditor().exists()).toBe(true);
expect(findRichContentEditor().props('value')).toBe(content);
});
it('renders publish toolbar', () => {
expect(findPublishToolbar().exists()).toBe(true);
expect(findPublishToolbar().props('returnUrl')).toBe(returnUrl);
expect(findPublishToolbar().props('savingChanges')).toBe(savingChanges);
expect(findPublishToolbar().props('saveable')).toBe(false);
});
describe('when content changes', () => {
beforeEach(() => {
findRichContentEditor().vm.$emit('input', newContent);
return wrapper.vm.$nextTick();
});
it('sets publish toolbar as saveable when content changes', () => {
expect(findPublishToolbar().props('saveable')).toBe(true);
});
it('sets publish toolbar as not saveable when content changes are rollback', () => {
findRichContentEditor().vm.$emit('input', content);
return wrapper.vm.$nextTick().then(() => {
expect(findPublishToolbar().props('saveable')).toBe(false);
});
});
});
});
spec/frontend/static_site_editor/pages/home_spec.js
View file @ 91ffb0be
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlSkeletonLoader } from '@gitlab/ui';
import createState from '~/static_site_editor/store/state';
import Home from '~/static_site_editor/pages/home.vue';
import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
import EditHeader from '~/static_site_editor/components/edit_header.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 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 {
returnUrl,
sourceContent,
sourceContentTitle,
sourceContent as content,
sourceContentTitle as title,
savedContentMeta,
submitChangesError,
} from '../mock_data';
......@@ -27,13 +26,12 @@ localVue.use(Vuex);
describe('static_site_editor/pages/home', () => {
let wrapper;
let store;
let loadContentActionMock;
let $apollo;
let setContentActionMock;
let submitChangesActionMock;
let dismissSubmitChangesErrorActionMock;
const buildStore = ({ initialState, getters } = {}) => {
loadContentActionMock = jest.fn();
setContentActionMock = jest.fn();
submitChangesActionMock = jest.fn();
dismissSubmitChangesErrorActionMock = jest.fn();
......@@ -47,53 +45,55 @@ describe('static_site_editor/pages/home', () => {
...getters,
},
actions: {
loadContent: loadContentActionMock,
setContent: setContentActionMock,
submitChanges: submitChangesActionMock,
dismissSubmitChangesError: dismissSubmitChangesErrorActionMock,
},
});
};
const buildContentLoadedStore = ({ initialState, getters } = {}) => {
buildStore({
initialState: {
isContentLoaded: true,
...initialState,
},
getters: {
...getters,
const buildApollo = (queries = {}) => {
$apollo = {
queries: {
sourceContent: {
loading: false,
},
...queries,
},
});
};
};
const buildWrapper = (data = { appData: { isSupportedContent: true } }) => {
const buildWrapper = (data = {}) => {
wrapper = shallowMount(Home, {
localVue,
store,
provide: {
glFeatures: { richContentEditor: true },
mocks: {
$apollo,
},
data() {
return data;
return {
appData: { isSupportedContent: true, returnUrl },
...data,
};
},
});
};
const findRichContentEditor = () => wrapper.find(RichContentEditor);
const findEditHeader = () => wrapper.find(EditHeader);
const findEditArea = () => wrapper.find(EditArea);
const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage);
const findPublishToolbar = () => wrapper.find(PublishToolbar);
const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
const findSkeletonLoader = () => wrapper.find(SkeletonLoader);
const findSubmitChangesError = () => wrapper.find(SubmitChangesError);
const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
beforeEach(() => {
buildApollo();
buildStore();
buildWrapper();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
$apollo = null;
});
it('renders the saved changes message when changes are submitted successfully', () => {
......@@ -107,103 +107,69 @@ describe('static_site_editor/pages/home', () => {
});
});
describe('when content is not loaded', () => {
it('does not render rich content editor', () => {
expect(findRichContentEditor().exists()).toBe(false);
});
it('does not render edit header', () => {
expect(findEditHeader().exists()).toBe(false);
});
it('does not render toolbar', () => {
expect(findPublishToolbar().exists()).toBe(false);
});
it('does not render the saved changes message when changes are not submitted', () => {
buildWrapper();
it('does not render saved changes message', () => {
expect(findSavedChangesMessage().exists()).toBe(false);
});
expect(findSavedChangesMessage().exists()).toBe(false);
});
describe('when content is loaded', () => {
const content = sourceContent;
const title = sourceContentTitle;
beforeEach(() => {
buildContentLoadedStore({ initialState: { content, title } });
buildWrapper();
buildStore({ initialState: { isSavingChanges: true } });
buildWrapper({ sourceContent: { title, content } });
});
it('renders the rich content editor', () => {
expect(findRichContentEditor().exists()).toBe(true);
it('renders edit area', () => {
expect(findEditArea().exists()).toBe(true);
});
it('renders the edit header', () => {
expect(findEditHeader().exists()).toBe(true);
it('provides source content to the edit area', () => {
expect(findEditArea().props()).toMatchObject({
title,
content,
});
});
it('does not render skeleton loader', () => {
expect(findSkeletonLoader().exists()).toBe(false);
it('provides returnUrl to the edit area', () => {
expect(findEditArea().props('returnUrl')).toBe(returnUrl);
});
it('passes page content to the rich content editor', () => {
expect(findRichContentEditor().props('value')).toBe(content);
it('provides isSavingChanges to the edit area', () => {
expect(findEditArea().props('savingChanges')).toBe(true);
});
});
it('passes page title to edit header', () => {
expect(findEditHeader().props('title')).toBe(title);
});
it('does not render edit area when content is not loaded', () => {
buildWrapper({ sourceContent: null });
it('renders toolbar', () => {
expect(findPublishToolbar().exists()).toBe(true);
});
expect(findEditArea().exists()).toBe(false);
});
it('sets toolbar as saveable when content changes', () => {
buildContentLoadedStore({
getters: {
contentChanged: () => true,
it('renders skeleton loader when content is not loading', () => {
buildApollo({
sourceContent: {
loading: true,
},
});
buildWrapper();
expect(findPublishToolbar().props('saveable')).toBe(true);
});
it('displays skeleton loader when loading content', () => {
buildStore({ initialState: { isLoadingContent: true } });
buildWrapper();
expect(findSkeletonLoader().exists()).toBe(true);
});
it('does not display submit changes error when an error does not exist', () => {
buildContentLoadedStore();
buildWrapper();
expect(findSubmitChangesError().exists()).toBe(false);
});
it('sets toolbar as saving when saving changes', () => {
buildContentLoadedStore({
initialState: {
isSavingChanges: true,
it('does not render skeleton loader when content is not loading', () => {
buildApollo({
sourceContent: {
loading: false,
},
});
buildWrapper();
expect(findPublishToolbar().props('savingChanges')).toBe(true);
});
it('displays invalid content message when content is not supported', () => {
buildWrapper({ appData: { isSupportedContent: false } });
expect(findInvalidContentMessage().exists()).toBe(true);
expect(findSkeletonLoader().exists()).toBe(false);
});
describe('when submitting changes fail', () => {
beforeEach(() => {
buildContentLoadedStore({
buildStore({
initialState: {
submitChangesError,
},
......@@ -228,24 +194,32 @@ describe('static_site_editor/pages/home', () => {
});
});
it('dispatches load content action', () => {
expect(loadContentActionMock).toHaveBeenCalled();
});
it('dispatches setContent action when rich content editor emits input event', () => {
buildContentLoadedStore();
it('does not display submit changes error when an error does not exist', () => {
buildWrapper();
findRichContentEditor().vm.$emit('input', sourceContent);
expect(findSubmitChangesError().exists()).toBe(false);
});
expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), sourceContent, undefined);
it('displays invalid content message when content is not supported', () => {
buildWrapper({ appData: { isSupportedContent: false } });
expect(findInvalidContentMessage().exists()).toBe(true);
});
it('dispatches submitChanges action when toolbar emits submit event', () => {
buildContentLoadedStore();
buildWrapper();
findPublishToolbar().vm.$emit('submit');
describe('when edit area emits submit event', () => {
const newContent = `new ${content}`;
expect(submitChangesActionMock).toHaveBeenCalled();
beforeEach(() => {
buildWrapper({ sourceContent: { title, content } });
findEditArea().vm.$emit('submit', { content: newContent });
});
it('dispatches setContent property', () => {
expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), newContent, undefined);
});
it('dispatches submitChanges action', () => {
expect(submitChangesActionMock).toHaveBeenCalled();
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7