summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/static_site_editor/components/edit_header.vue23
-rw-r--r--app/assets/javascripts/static_site_editor/components/publish_toolbar.vue24
-rw-r--r--app/assets/javascripts/static_site_editor/components/static_site_editor.vue15
-rw-r--r--app/assets/javascripts/static_site_editor/constants.js2
-rw-r--r--app/assets/javascripts/static_site_editor/index.js4
-rw-r--r--app/assets/javascripts/static_site_editor/store/state.js1
-rw-r--r--app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue8
7 files changed, 65 insertions, 12 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_header.vue b/app/assets/javascripts/static_site_editor/components/edit_header.vue
new file mode 100644
index 00000000000..5660bfbe5ae
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_header.vue
@@ -0,0 +1,23 @@
+<script>
+import { DEFAULT_HEADING } from '../constants';
+
+export default {
+ props: {
+ title: {
+ type: String,
+ required: false,
+ default: '',
+ },
+ },
+ computed: {
+ heading() {
+ return this.title || DEFAULT_HEADING;
+ },
+ },
+};
+</script>
+<template>
+ <div>
+ <h3 ref="sseHeading">{{ heading }}</h3>
+ </div>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
index 7f00fb71b04..efb442d4d09 100644
--- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -7,6 +7,11 @@ export default {
GlLoadingIcon,
},
props: {
+ returnUrl: {
+ type: String,
+ required: false,
+ default: '',
+ },
saveable: {
type: Boolean,
required: false,
@@ -23,12 +28,17 @@ export default {
<template>
<div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
<gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
- <gl-new-button
- variant="success"
- :disabled="!saveable || savingChanges"
- @click="$emit('submit')"
- >
- {{ __('Submit Changes') }}
- </gl-new-button>
+ <div>
+ <gl-new-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
+ s__('StaticSiteEditor|Return to site')
+ }}</gl-new-button>
+ <gl-new-button
+ variant="success"
+ :disabled="!saveable || savingChanges"
+ @click="$emit('submit')"
+ >
+ {{ __('Submit Changes') }}
+ </gl-new-button>
+ </div>
</div>
</template>
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
index 8deae2f2c8a..4d912f5c0b5 100644
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
@@ -3,16 +3,25 @@ import { mapState, mapGetters, mapActions } from 'vuex';
import { GlSkeletonLoader } from '@gitlab/ui';
import EditArea from './edit_area.vue';
+import EditHeader from './edit_header.vue';
import Toolbar from './publish_toolbar.vue';
export default {
components: {
EditArea,
+ EditHeader,
GlSkeletonLoader,
Toolbar,
},
computed: {
- ...mapState(['content', 'isLoadingContent', 'isSavingChanges', 'isContentLoaded']),
+ ...mapState([
+ 'content',
+ 'isLoadingContent',
+ 'isSavingChanges',
+ 'isContentLoaded',
+ 'returnUrl',
+ 'title',
+ ]),
...mapGetters(['contentChanged']),
},
mounted() {
@@ -24,7 +33,7 @@ export default {
};
</script>
<template>
- <div class="d-flex justify-content-center h-100 pt-2">
+ <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" />
@@ -36,12 +45,14 @@ export default {
</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"
diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js
index 5081d467016..d7ce2a93a56 100644
--- a/app/assets/javascripts/static_site_editor/constants.js
+++ b/app/assets/javascripts/static_site_editor/constants.js
@@ -10,3 +10,5 @@ export const SUBMIT_CHANGES_COMMIT_ERROR = s__(
export const SUBMIT_CHANGES_MERGE_REQUEST_ERROR = s__(
'StaticSiteEditor|Could not create merge request.',
);
+
+export const DEFAULT_HEADING = s__('StaticSiteEditor|Static site editor');
diff --git a/app/assets/javascripts/static_site_editor/index.js b/app/assets/javascripts/static_site_editor/index.js
index 3d40f3918a4..c6a883c659a 100644
--- a/app/assets/javascripts/static_site_editor/index.js
+++ b/app/assets/javascripts/static_site_editor/index.js
@@ -3,10 +3,10 @@ import StaticSiteEditor from './components/static_site_editor.vue';
import createStore from './store';
const initStaticSiteEditor = el => {
- const { projectId, path: sourcePath } = el.dataset;
+ const { projectId, returnUrl, path: sourcePath } = el.dataset;
const store = createStore({
- initialState: { projectId, sourcePath, username: window.gon.current_username },
+ initialState: { projectId, returnUrl, sourcePath, username: window.gon.current_username },
});
return new Vue({
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
index d48cc8ed1a4..98a84d9f75d 100644
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ b/app/assets/javascripts/static_site_editor/store/state.js
@@ -1,6 +1,7 @@
const createState = (initialState = {}) => ({
username: null,
projectId: null,
+ returnUrl: null,
sourcePath: null,
isLoadingContent: false,
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index 82b3c784f96..a0c161a335a 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -1,4 +1,5 @@
<script>
+import { __ } from '~/locale';
import { roundOffFloat } from '~/lib/utils/common_utils';
import tooltip from '~/vue_shared/directives/tooltip';
@@ -27,6 +28,11 @@ export default {
required: false,
default: 'neutral',
},
+ unavailableLabel: {
+ type: String,
+ required: false,
+ default: __('Not available'),
+ },
successCount: {
type: Number,
required: true,
@@ -103,7 +109,7 @@ export default {
<template>
<div :class="cssClass" class="stacked-progress-bar">
- <span v-if="!totalCount" class="status-unavailable"> {{ __('Not available') }} </span>
+ <span v-if="!totalCount" class="status-unavailable">{{ unavailableLabel }}</span>
<span
v-if="successPercent"
v-tooltip