Skip to content

G
gitlab-ce
Commit 8ffbd4d4 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '212558-sse-error-view' into 'master' 

Add InvalidContentMessage and associated spec

See merge request gitlab-org/gitlab!28691
parents 6bb7c312 42e5fee1
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 29 deletions
app/assets/javascripts/static_site_editor/components/invalid_content_message.vue 0 → 100644
View file @ 8ffbd4d4
<script>
import { GlNewButton } from '@gitlab/ui';
export default {
components: {
GlNewButton,
},
};
</script>
<template>
<div>
<h3>{{ s__('StaticSiteEditor|Incompatible file content') }}</h3>
<p>
{{
s__(
'StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor.',
)
}}
</p>
<div>
<gl-new-button
ref="documentationButton"
href="https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman"
>{{ s__('StaticSiteEditor|View documentation') }}</gl-new-button
>
</div>
</div>
</template>
app/assets/javascripts/static_site_editor/components/static_site_editor.vue
View file @ 8ffbd4d4
......@@ -5,11 +5,13 @@ import { GlSkeletonLoader } from '@gitlab/ui';
import EditArea from './edit_area.vue';
import EditHeader from './edit_header.vue';
import Toolbar from './publish_toolbar.vue';
import InvalidContentMessage from './invalid_content_message.vue';
export default {
components: {
EditArea,
EditHeader,
InvalidContentMessage,
GlSkeletonLoader,
Toolbar,
},
......@@ -19,13 +21,16 @@ export default {
'isLoadingContent',
'isSavingChanges',
'isContentLoaded',
'isSupportedContent',
'returnUrl',
'title',
]),
...mapGetters(['contentChanged']),
},
mounted() {
this.loadContent();
if (this.isSupportedContent) {
this.loadContent();
}
},
methods: {
...mapActions(['loadContent', 'setContent', 'submitChanges']),
......@@ -33,30 +38,33 @@ export default {
};
</script>
<template>
<div class="d-flex justify-content-center h-100 pt-2">
<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">
<edit-header class="w-75 align-self-center py-2" :title="title" />
<edit-area
class="w-75 h-100 shadow-none align-self-center"
:value="content"
@input="setContent"
/>
<toolbar
:return-url="returnUrl"
:saveable="contentChanged"
:saving-changes="isSavingChanges"
@submit="submitChanges"
/>
</div>
<div class="d-flex justify-content-center h-100 pt-2">
<template v-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" />
<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">
<edit-header class="w-75 align-self-center py-2" :title="title" />
<edit-area
class="w-75 h-100 shadow-none align-self-center"
:value="content"
@input="setContent"
/>
<toolbar
:return-url="returnUrl"
:saveable="contentChanged"
:saving-changes="isSavingChanges"
@submit="submitChanges"
/>
</div>
</template>
<invalid-content-message v-else class="w-75" />
</div>
</template>
app/assets/javascripts/static_site_editor/index.js
View file @ 8ffbd4d4
......@@ -3,10 +3,17 @@ import StaticSiteEditor from './components/static_site_editor.vue';
import createStore from './store';
const initStaticSiteEditor = el => {
const { projectId, returnUrl, path: sourcePath } = el.dataset;
const { projectId, path: sourcePath, returnUrl } = el.dataset;
const isSupportedContent = 'isSupportedContent' in el.dataset;
const store = createStore({
initialState: { projectId, returnUrl, sourcePath, username: window.gon.current_username },
initialState: {
isSupportedContent,
projectId,
returnUrl,
sourcePath,
username: window.gon.current_username,
},
});
return new Vue({
......
app/assets/javascripts/static_site_editor/store/state.js
View file @ 8ffbd4d4
......@@ -6,6 +6,7 @@ const createState = (initialState = {}) => ({
isLoadingContent: false,
isSavingChanges: false,
isSupportedContent: false,
isContentLoaded: false,
......
locale/gitlab.pot
View file @ 8ffbd4d4
......@@ -19478,6 +19478,9 @@ msgstr ""
msgid "StaticSiteEditor|Could not create merge request."
msgstr ""
msgid "StaticSiteEditor|Incompatible file content"
msgstr ""
msgid "StaticSiteEditor|Return to site"
msgstr ""
......@@ -19490,9 +19493,15 @@ msgstr ""
msgid "StaticSiteEditor|Summary of changes"
msgstr ""
msgid "StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor."
msgstr ""
msgid "StaticSiteEditor|Update %{sourcePath} file"
msgstr ""
msgid "StaticSiteEditor|View documentation"
msgstr ""
msgid "StaticSiteEditor|View merge request"
msgstr ""
......
spec/frontend/static_site_editor/components/invalid_content_message_spec.js 0 → 100644
View file @ 8ffbd4d4
import { shallowMount } from '@vue/test-utils';
import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
describe('~/static_site_editor/components/invalid_content_message.vue', () => {
let wrapper;
const findDocumentationButton = () => wrapper.find({ ref: 'documentationButton' });
const documentationUrl =
'https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman';
beforeEach(() => {
wrapper = shallowMount(InvalidContentMessage);
});
afterEach(() => {
wrapper.destroy();
});
it('renders the configuration button link', () => {
expect(findDocumentationButton().exists()).toBe(true);
expect(findDocumentationButton().attributes('href')).toBe(documentationUrl);
});
});
spec/frontend/static_site_editor/components/static_site_editor_spec.js
View file @ 8ffbd4d4
......@@ -8,6 +8,7 @@ import createState from '~/static_site_editor/store/state';
import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue';
import EditArea from '~/static_site_editor/components/edit_area.vue';
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 { sourceContent, sourceContentTitle } from '../mock_data';
......@@ -29,7 +30,10 @@ describe('StaticSiteEditor', () => {
submitChangesActionMock = jest.fn();
store = new Vuex.Store({
state: createState(initialState),
state: createState({
isSupportedContent: true,
...initialState,
}),
getters: {
contentChanged: () => false,
...getters,
......@@ -62,6 +66,7 @@ describe('StaticSiteEditor', () => {
const findEditArea = () => wrapper.find(EditArea);
const findEditHeader = () => wrapper.find(EditHeader);
const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage);
const findPublishToolbar = () => wrapper.find(PublishToolbar);
const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
......@@ -151,6 +156,13 @@ describe('StaticSiteEditor', () => {
expect(findPublishToolbar().props('savingChanges')).toBe(true);
});
it('displays invalid content message when content is not supported', () => {
buildStore({ initialState: { isSupportedContent: false } });
buildWrapper();
expect(findInvalidContentMessage().exists()).toBe(true);
});
it('dispatches load content action', () => {
expect(loadContentActionMock).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