1 files changed, 63 insertions, 37 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..c6247632b6e 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,9 +1,21 @@
 <script>
-import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
-import AccessorUtilities from '~/lib/utils/accessor';
+import {
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlFormTextarea,
+} from '@gitlab/ui';
+
+import { __ } from '~/locale';
 
 export default {
   components: {
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
     GlForm,
     GlFormGroup,
     GlFormInput,
@@ -18,56 +30,47 @@ export default {
       type: String,
       required: true,
     },
-  },
-  data() {
-    return {
-      editable: {
-        title: this.title,
-        description: this.description,
-      },
-    };
+    templates: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    currentTemplate: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   computed: {
-    editableStorageKey() {
-      return this.getId('local-storage', 'editable');
+    dropdownLabel() {
+      return this.currentTemplate ? this.currentTemplate.name : __('None');
     },
-    hasLocalStorage() {
-      return AccessorUtilities.isLocalStorageAccessSafe();
+    hasTemplates() {
+      return this.templates?.length > 0;
     },
   },
   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);
-      }
+    onChangeTemplate(template) {
+      this.$emit('changeTemplate', template || null);
     },
-    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,21 +86,44 @@ 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>
 
     <gl-form-group
+      v-if="hasTemplates"
+      key="template"
+      :label="__('Description template')"
+      :label-for="getId('control', 'template')"
+    >
+      <gl-dropdown :text="dropdownLabel">
+        <gl-dropdown-item key="none" @click="onChangeTemplate(null)">
+          {{ __('None') }}
+        </gl-dropdown-item>
+
+        <gl-dropdown-divider />
+
+        <gl-dropdown-item
+          v-for="template in templates"
+          :key="template.key"
+          @click="onChangeTemplate(template)"
+        >
+          {{ template.name }}
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </gl-form-group>
+
+    <gl-form-group
       key="description"
       :label="__('Goal of the changes and what reviewers should be aware of')"
       :label-for="getId('control', 'description')"
     >
       <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>