Add latest changes from gitlab-org/gitlab@master

3 files changed, 25 insertions, 42 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue
index 9f75c65a316..fb80b158b46 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
-import AccessorUtilities from '~/lib/utils/accessor';
 
 export default {
   components: {
@@ -19,55 +18,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      editable: {
-        title: this.title,
-        description: this.description,
-      },
-    };
-  },
-  computed: {
-    editableStorageKey() {
-      return this.getId('local-storage', 'editable');
-    },
-    hasLocalStorage() {
-      return AccessorUtilities.isLocalStorageAccessSafe();
-    },
-  },
   mounted() {
-    this.initCachedEditable();
     this.preSelect();
   },
   methods: {
     getId(type, key) {
       return `sse-merge-request-meta-${type}-${key}`;
     },
-    initCachedEditable() {
-      if (this.hasLocalStorage) {
-        const cachedEditable = JSON.parse(localStorage.getItem(this.editableStorageKey));
-        if (cachedEditable) {
-          this.editable = cachedEditable;
-        }
-      }
-    },
     preSelect() {
       this.$nextTick(() => {
         this.$refs.title.$el.select();
       });
     },
-    resetCachedEditable() {
-      if (this.hasLocalStorage) {
-        window.localStorage.removeItem(this.editableStorageKey);
-      }
-    },
-    onUpdate() {
-      const payload = { ...this.editable };
+    onUpdate(field, value) {
+      const payload = {
+        title: this.title,
+        description: this.description,
+        [field]: value,
+      };
       this.$emit('updateSettings', payload);
-
-      if (this.hasLocalStorage) {
-        window.localStorage.setItem(this.editableStorageKey, JSON.stringify(payload));
-      }
     },
   },
 };
@@ -83,9 +52,9 @@ export default {
       <gl-form-input
         :id="getId('control', 'title')"
         ref="title"
-        v-model.lazy="editable.title"
+        :value="title"
         type="text"
-        @input="onUpdate"
+        @input="onUpdate('title', $event)"
       />
     </gl-form-group>
 
@@ -96,8 +65,8 @@ export default {
     >
       <gl-form-textarea
         :id="getId('control', 'description')"
-        v-model.lazy="editable.description"
-        @input="onUpdate"
+        :value="description"
+        @input="onUpdate('description', $event)"
       />
     </gl-form-group>
   </gl-form>
diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue
index 4e5245bd892..e83af198bf5 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue
@@ -1,13 +1,17 @@
 <script>
 import { GlModal } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 import EditMetaControls from './edit_meta_controls.vue';
 
+import { MR_META_LOCAL_STORAGE_KEY } from '../constants';
+
 export default {
   components: {
     GlModal,
     EditMetaControls,
+    LocalStorageSync,
   },
   props: {
     sourcePath: {
@@ -17,6 +21,7 @@ export default {
   },
   data() {
     return {
+      clearStorage: false,
       mergeRequestMeta: {
         title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), {
           sourcePath: this.sourcePath,
@@ -51,7 +56,7 @@ export default {
     },
     onPrimary() {
       this.$emit('primary', this.mergeRequestMeta);
-      this.$refs.editMetaControls.resetCachedEditable();
+      this.clearStorage = true;
     },
     onSecondary() {
       this.hide();
@@ -60,6 +65,7 @@ export default {
       this.mergeRequestMeta = { ...mergeRequestMeta };
     },
   },
+  storageKey: MR_META_LOCAL_STORAGE_KEY,
 };
 </script>
 
@@ -75,6 +81,12 @@ export default {
     @secondary="onSecondary"
     @hide="() => $emit('hide')"
   >
+    <local-storage-sync
+      v-model="mergeRequestMeta"
+      :storage-key="$options.storageKey"
+      :clear="clearStorage"
+      as-json
+    />
     <edit-meta-controls
       ref="editMetaControls"
       :title="mergeRequestMeta.title"
diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js
index 49db9ab7ca5..78eafe40890 100644
--- a/app/assets/javascripts/static_site_editor/constants.js
+++ b/app/assets/javascripts/static_site_editor/constants.js
@@ -21,3 +21,5 @@ export const TRACKING_ACTION_CREATE_MERGE_REQUEST = 'create_merge_request';
 export const TRACKING_ACTION_INITIALIZE_EDITOR = 'initialize_editor';
 
 export const DEFAULT_IMAGE_UPLOAD_PATH = 'source/images/uploads/';
+
+export const MR_META_LOCAL_STORAGE_KEY = 'sse-merge-request-meta-storage-key';