Add latest changes from gitlab-org/gitlab@master

7 files changed, 50 insertions, 7 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
new file mode 100644
index 00000000000..83b50b2f8eb
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -0,0 +1,23 @@
+<script>
+import { GlNewButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlNewButton,
+  },
+  props: {
+    saveable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+<template>
+  <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
+    <gl-new-button variant="success" :disabled="!saveable">
+      {{ __('Submit Changes') }}
+    </gl-new-button>
+  </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 f06d48ee4f5..80a55d5ee11 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,27 +3,29 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlSkeletonLoader } from '@gitlab/ui';
 
 import EditArea from './edit_area.vue';
+import Toolbar from './publish_toolbar.vue';
 
 export default {
   components: {
     EditArea,
     GlSkeletonLoader,
+    Toolbar,
   },
   computed: {
     ...mapState(['content', 'isLoadingContent']),
-    ...mapGetters(['isContentLoaded']),
+    ...mapGetters(['isContentLoaded', 'contentChanged']),
   },
   mounted() {
     this.loadContent();
   },
   methods: {
-    ...mapActions(['loadContent']),
+    ...mapActions(['loadContent', 'setContent']),
   },
 };
 </script>
 <template>
-  <div class="d-flex justify-content-center h-100">
-    <div v-if="isLoadingContent" class="w-50 h-50 mt-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" />
         <rect y="20" width="375" height="16" rx="4" />
@@ -33,6 +35,13 @@ export default {
         <rect x="410" y="40" width="90" height="16" rx="4" />
       </gl-skeleton-loader>
     </div>
-    <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" />
+    <div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column">
+      <edit-area
+        class="w-75 h-100 shadow-none align-self-center"
+        :value="content"
+        @input="setContent"
+      />
+      <toolbar :saveable="contentChanged" />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/store/actions.js b/app/assets/javascripts/static_site_editor/store/actions.js
index 192345f3749..141148de1e0 100644
--- a/app/assets/javascripts/static_site_editor/store/actions.js
+++ b/app/assets/javascripts/static_site_editor/store/actions.js
@@ -15,4 +15,8 @@ export const loadContent = ({ commit, state: { sourcePath, projectId } }) => {
     });
 };
 
+export const setContent = ({ commit }, content) => {
+  commit(mutationTypes.SET_CONTENT, content);
+};
+
 export default () => {};
diff --git a/app/assets/javascripts/static_site_editor/store/getters.js b/app/assets/javascripts/static_site_editor/store/getters.js
index 8baa2941594..41256201c26 100644
--- a/app/assets/javascripts/static_site_editor/store/getters.js
+++ b/app/assets/javascripts/static_site_editor/store/getters.js
@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
-export const isContentLoaded = ({ content }) => Boolean(content);
+export const isContentLoaded = ({ originalContent }) => Boolean(originalContent);
+export const contentChanged = ({ originalContent, content }) => originalContent !== content;
diff --git a/app/assets/javascripts/static_site_editor/store/mutation_types.js b/app/assets/javascripts/static_site_editor/store/mutation_types.js
index cbe51180541..2bb201f5d24 100644
--- a/app/assets/javascripts/static_site_editor/store/mutation_types.js
+++ b/app/assets/javascripts/static_site_editor/store/mutation_types.js
@@ -1,3 +1,4 @@
 export const LOAD_CONTENT = 'loadContent';
 export const RECEIVE_CONTENT_SUCCESS = 'receiveContentSuccess';
 export const RECEIVE_CONTENT_ERROR = 'receiveContentError';
+export const SET_CONTENT = 'setContent';
diff --git a/app/assets/javascripts/static_site_editor/store/mutations.js b/app/assets/javascripts/static_site_editor/store/mutations.js
index 88cb74d2b11..8b8bacf35c2 100644
--- a/app/assets/javascripts/static_site_editor/store/mutations.js
+++ b/app/assets/javascripts/static_site_editor/store/mutations.js
@@ -8,8 +8,12 @@ export default {
     state.isLoadingContent = false;
     state.title = title;
     state.content = content;
+    state.originalContent = content;
   },
   [types.RECEIVE_CONTENT_ERROR](state) {
     state.isLoadingContent = false;
   },
+  [types.SET_CONTENT](state, content) {
+    state.content = content;
+  },
 };
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
index b68e73f06f5..1ae11b3343d 100644
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ b/app/assets/javascripts/static_site_editor/store/state.js
@@ -3,7 +3,9 @@ const createState = (initialState = {}) => ({
   sourcePath: null,
 
   isLoadingContent: false,
+  isSavingChanges: false,
 
+  originalContent: '',
   content: '',
   title: '',