Add latest changes from gitlab-org/gitlab@master

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