Skip to content

G
gitlab-ce
Commit bbba9eb3 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch '216868-improve-success-screen' into 'master' 

Improve the IA and styling of the Success screen in the Static Site Editor

See merge request gitlab-org/gitlab!37475
parents c566de6b acb3bc65
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 186 deletions
app/assets/javascripts/static_site_editor/components/app.vue
View file @ bbba9eb3
<script>
export default {
props: {
mergeRequestsIllustrationPath: {
type: String,
required: true,
},
},
};
</script>
<template>
<router-view />
<router-view :merge-requests-illustration-path="mergeRequestsIllustrationPath" />
</template>
app/assets/javascripts/static_site_editor/components/saved_changes_message.vue deleted 100644 → 0
View file @ c566de6b
<script>
import { isString } from 'lodash';
import { GlLink, GlButton } from '@gitlab/ui';
const validateUrlAndLabel = value => isString(value.label) && isString(value.url);
export default {
components: {
GlLink,
GlButton,
},
props: {
branch: {
type: Object,
required: true,
validator: validateUrlAndLabel,
},
commit: {
type: Object,
required: true,
validator: validateUrlAndLabel,
},
mergeRequest: {
type: Object,
required: true,
validator: validateUrlAndLabel,
},
returnUrl: {
type: String,
required: false,
default: '',
},
},
};
</script>
<template>
<div>
<div class="border-bottom pb-4">
<h3>{{ s__('StaticSiteEditor|Success!') }}</h3>
<p>
{{
s__(
'StaticSiteEditor|Your changes have been submitted and a merge request has been created. The changes won’t be visible on the site until the merge request has been accepted.',
)
}}
</p>
<div class="d-flex justify-content-end">
<gl-button v-if="returnUrl" ref="returnToSiteButton" :href="returnUrl">{{
s__('StaticSiteEditor|Return to site')
}}</gl-button>
<gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
{{ s__('StaticSiteEditor|View merge request') }}
</gl-button>
</div>
</div>
<div class="pt-2">
<h4>{{ s__('StaticSiteEditor|Summary of changes') }}</h4>
<ul>
<li>
{{ s__('StaticSiteEditor|You created a new branch:') }}
<gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
</li>
<li>
{{ s__('StaticSiteEditor|You created a merge request:') }}
<gl-link ref="mergeRequestLink" :href="mergeRequest.url">{{
mergeRequest.label
}}</gl-link>
</li>
<li>
{{ s__('StaticSiteEditor|You added a commit:') }}
<gl-link ref="commitLink" :href="commit.url">{{ commit.label }}</gl-link>
</li>
</ul>
</div>
</div>
</template>
app/assets/javascripts/static_site_editor/index.js
View file @ bbba9eb3
......@@ -5,7 +5,14 @@ import createRouter from './router';
import createApolloProvider from './graphql';
const initStaticSiteEditor = el => {
const { isSupportedContent, path: sourcePath, baseUrl, namespace, project } = el.dataset;
const {
isSupportedContent,
path: sourcePath,
baseUrl,
namespace,
project,
mergeRequestsIllustrationPath,
} = el.dataset;
const { current_username: username } = window.gon;
const returnUrl = el.dataset.returnUrl || null;
......@@ -26,7 +33,11 @@ const initStaticSiteEditor = el => {
App,
},
render(createElement) {
return createElement('app');
return createElement('app', {
props: {
mergeRequestsIllustrationPath,
},
});
},
});
};
......
app/assets/javascripts/static_site_editor/pages/success.vue
View file @ bbba9eb3
<script>
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { s__, __, sprintf } from '~/locale';
import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql';
import appDataQuery from '../graphql/queries/app_data.query.graphql';
import SavedChangesMessage from '../components/saved_changes_message.vue';
import { HOME_ROUTE } from '../router/constants';
export default {
components: {
SavedChangesMessage,
GlEmptyState,
GlButton,
},
props: {
mergeRequestsIllustrationPath: {
type: String,
required: true,
},
},
apollo: {
savedContentMeta: {
......@@ -16,20 +25,65 @@ export default {
query: appDataQuery,
},
},
computed: {
updatedFileDescription() {
const { sourcePath } = this.appData;
return sprintf(s__('Update %{sourcePath} file'), { sourcePath });
},
},
created() {
if (!this.savedContentMeta) {
this.$router.push(HOME_ROUTE);
}
},
title: s__('StaticSiteEditor|Your merge request has been created'),
primaryButtonText: __('View merge request'),
returnToSiteBtnText: s__('StaticSiteEditor|Return to site'),
mergeRequestInstructionsHeading: s__(
'StaticSiteEditor|To see your changes live you will need to do the following things:',
),
addTitleInstruction: s__('StaticSiteEditor|1. Add a clear title to describe the change.'),
addDescriptionInstruction: s__(
'StaticSiteEditor|2. Add a description to explain why the change is being made.',
),
assignMergeRequestInstruction: s__(
'StaticSiteEditor|3. Assign a person to review and accept the merge request.',
),
};
</script>
<template>
<div v-if="savedContentMeta" class="container">
<saved-changes-message
:branch="savedContentMeta.branch"
:commit="savedContentMeta.commit"
:merge-request="savedContentMeta.mergeRequest"
:return-url="appData.returnUrl"
/>
<div
v-if="savedContentMeta"
class="container gl-flex-grow-1 gl-display-flex gl-flex-direction-column"
>
<div class="gl-fixed gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100">
<div class="container gl-py-4">
<gl-button
v-if="appData.returnUrl"
ref="returnToSiteButton"
class="gl-mr-5"
:href="appData.returnUrl"
>{{ $options.returnToSiteBtnText }}</gl-button
>
<strong>
{{ updatedFileDescription }}
</strong>
</div>
</div>
<gl-empty-state
class="gl-my-9"
:primary-button-text="$options.primaryButtonText"
:title="$options.title"
:primary-button-link="savedContentMeta.mergeRequest.url"
:svg-path="mergeRequestsIllustrationPath"
>
<template #description>
<p>{{ $options.mergeRequestInstructionsHeading }}</p>
<p>{{ $options.addTitleInstruction }}</p>
<p>{{ $options.addDescriptionInstruction }}</p>
<p>{{ $options.assignMergeRequestInstruction }}</p>
</template>
</gl-empty-state>
</div>
</template>
app/views/projects/static_site_editor/show.html.haml
View file @ bbba9eb3
#static-site-editor{ data: @config.payload }
#static-site-editor{ data: @config.payload.merge({ merge_requests_illustration_path: image_path('illustrations/merge_requests.svg') }) }
changelogs/unreleased/216868-improve-success-screen.yml 0 → 100644
View file @ bbba9eb3
---
title: Improve the IA and styling of the Success screen in the Static Site Editor
merge_request: 37475
author:
type: changed
locale/gitlab.pot
View file @ bbba9eb3
......@@ -22720,6 +22720,15 @@ msgstr ""
msgid "Static Application Security Testing (SAST)"
msgstr ""
msgid "StaticSiteEditor|1. Add a clear title to describe the change."
msgstr ""
msgid "StaticSiteEditor|2. Add a description to explain why the change is being made."
msgstr ""
msgid "StaticSiteEditor|3. Assign a person to review and accept the merge request."
msgstr ""
msgid "StaticSiteEditor|An error occurred while submitting your changes."
msgstr ""
......@@ -22741,13 +22750,10 @@ msgstr ""
msgid "StaticSiteEditor|Static site editor"
msgstr ""
msgid "StaticSiteEditor|Success!"
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|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."
msgid "StaticSiteEditor|To see your changes live you will need to do the following things:"
msgstr ""
msgid "StaticSiteEditor|Update %{sourcePath} file"
......@@ -22756,19 +22762,7 @@ msgstr ""
msgid "StaticSiteEditor|View documentation"
msgstr ""
msgid "StaticSiteEditor|View merge request"
msgstr ""
msgid "StaticSiteEditor|You added a commit:"
msgstr ""
msgid "StaticSiteEditor|You created a merge request:"
msgstr ""
msgid "StaticSiteEditor|You created a new branch:"
msgstr ""
msgid "StaticSiteEditor|Your changes have been submitted and a merge request has been created. The changes won’t be visible on the site until the merge request has been accepted."
msgid "StaticSiteEditor|Your merge request has been created"
msgstr ""
msgid "Statistics"
......@@ -25689,6 +25683,9 @@ msgstr ""
msgid "Update"
msgstr ""
msgid "Update %{sourcePath} file"
msgstr ""
msgid "Update all"
msgstr ""
......@@ -26425,6 +26422,9 @@ msgstr ""
msgid "View log"
msgstr ""
msgid "View merge request"
msgstr ""
msgid "View open merge request"
msgstr ""
......
spec/frontend/static_site_editor/components/app_spec.js 0 → 100644
View file @ bbba9eb3
import { shallowMount } from '@vue/test-utils';
import App from '~/static_site_editor/components/app.vue';
describe('static_site_editor/components/app', () => {
const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
const RouterView = {
template: '<div></div>',
};
let wrapper;
const buildWrapper = () => {
wrapper = shallowMount(App, {
stubs: {
RouterView,
},
propsData: {
mergeRequestsIllustrationPath,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('passes merge request illustration path to the router view component', () => {
buildWrapper();
expect(wrapper.find(RouterView).attributes()).toMatchObject({
'merge-requests-illustration-path': mergeRequestsIllustrationPath,
});
});
});
spec/frontend/static_site_editor/components/saved_changes_message_spec.js deleted 100644 → 0
View file @ c566de6b
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,
commit,
mergeRequest,
returnUrl,
};
const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });
const findBranchLink = () => wrapper.find({ ref: 'branchLink' });
const findCommitLink = () => wrapper.find({ ref: 'commitLink' });
const findMergeRequestLink = () => wrapper.find({ ref: 'mergeRequestLink' });
beforeEach(() => {
wrapper = shallowMount(SavedChangesMessage, {
propsData: props,
});
});
afterEach(() => {
wrapper.destroy();
});
it.each`
text | findEl | url
${'Return to site'} | ${findReturnToSiteButton} | ${props.returnUrl}
${'View merge request'} | ${findMergeRequestButton} | ${props.mergeRequest.url}
`('renders "$text" button link', ({ text, findEl, url }) => {
const btn = findEl();
expect(btn.exists()).toBe(true);
expect(btn.text()).toBe(text);
expect(btn.attributes('href')).toBe(url);
});
it.each`
desc | findEl | prop
${'branch'} | ${findBranchLink} | ${props.branch}
${'commit'} | ${findCommitLink} | ${props.commit}
${'merge request'} | ${findMergeRequestLink} | ${props.mergeRequest}
`('renders $desc link', ({ findEl, prop }) => {
const el = findEl();
expect(el.exists()).toBe(true);
expect(el.text()).toBe(prop.label);
expect(el.attributes('href')).toBe(prop.url);
});
});
spec/frontend/static_site_editor/pages/success_spec.js
View file @ bbba9eb3
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { shallowMount } from '@vue/test-utils';
import { GlEmptyState, GlButton } from '@gitlab/ui';
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 { savedContentMeta, returnUrl, sourcePath } from '../mock_data';
import { HOME_ROUTE } from '~/static_site_editor/router/constants';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('static_site_editor/pages/success', () => {
const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
let wrapper;
let store;
let router;
const buildRouter = () => {
......@@ -22,16 +17,22 @@ describe('static_site_editor/pages/success', () => {
const buildWrapper = (data = {}) => {
wrapper = shallowMount(Success, {
localVue,
store,
mocks: {
$router: router,
},
stubs: {
GlEmptyState,
GlButton,
},
propsData: {
mergeRequestsIllustrationPath,
},
data() {
return {
savedContentMeta,
appData: {
returnUrl,
sourcePath,
},
...data,
};
......@@ -39,7 +40,8 @@ describe('static_site_editor/pages/success', () => {
});
};
const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
const findEmptyState = () => wrapper.find(GlEmptyState);
const findReturnUrlButton = () => wrapper.find(GlButton);
beforeEach(() => {
buildRouter();
......@@ -50,29 +52,50 @@ describe('static_site_editor/pages/success', () => {
wrapper = null;
});
it('renders saved changes message', () => {
it('renders empty state with a link to the created merge request', () => {
buildWrapper();
expect(findEmptyState().exists()).toBe(true);
expect(findEmptyState().props()).toMatchObject({
primaryButtonText: 'View merge request',
primaryButtonLink: savedContentMeta.mergeRequest.url,
title: 'Your merge request has been created',
svgPath: mergeRequestsIllustrationPath,
});
});
it('displays merge request instructions in the empty state', () => {
buildWrapper();
expect(findSavedChangesMessage().exists()).toBe(true);
expect(findEmptyState().text()).toContain(
'To see your changes live you will need to do the following things:',
);
expect(findEmptyState().text()).toContain('1. Add a clear title to describe the change.');
expect(findEmptyState().text()).toContain(
'2. Add a description to explain why the change is being made.',
);
expect(findEmptyState().text()).toContain(
'3. Assign a person to review and accept the merge request.',
);
});
it('passes returnUrl to the saved changes message', () => {
it('displays return to site button', () => {
buildWrapper();
expect(findSavedChangesMessage().props('returnUrl')).toBe(returnUrl);
expect(findReturnUrlButton().text()).toBe('Return to site');
expect(findReturnUrlButton().attributes().href).toBe(returnUrl);
});
it('passes saved content metadata to the saved changes message', () => {
it('displays source path', () => {
buildWrapper();
expect(findSavedChangesMessage().props('branch')).toBe(savedContentMeta.branch);
expect(findSavedChangesMessage().props('commit')).toBe(savedContentMeta.commit);
expect(findSavedChangesMessage().props('mergeRequest')).toBe(savedContentMeta.mergeRequest);
expect(wrapper.text()).toContain(`Update ${sourcePath} file`);
});
it('redirects to the HOME route when content has not been submitted', () => {
buildWrapper({ savedContentMeta: null });
expect(router.push).toHaveBeenCalledWith(HOME_ROUTE);
expect(wrapper.html()).toBe('');
});
});
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