Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

3 files changed, 191 insertions, 2 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
new file mode 100644
index 00000000000..9f75c65a316
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue
@@ -0,0 +1,104 @@
+<script>
+import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
+import AccessorUtilities from '~/lib/utils/accessor';
+
+export default {
+  components: {
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormTextarea,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      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 };
+      this.$emit('updateSettings', payload);
+
+      if (this.hasLocalStorage) {
+        window.localStorage.setItem(this.editableStorageKey, JSON.stringify(payload));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form>
+    <gl-form-group
+      key="title"
+      :label="__('Brief title about the change')"
+      :label-for="getId('control', 'title')"
+    >
+      <gl-form-input
+        :id="getId('control', 'title')"
+        ref="title"
+        v-model.lazy="editable.title"
+        type="text"
+        @input="onUpdate"
+      />
+    </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"
+      />
+    </gl-form-group>
+  </gl-form>
+</template>
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
new file mode 100644
index 00000000000..4e5245bd892
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+
+import EditMetaControls from './edit_meta_controls.vue';
+
+export default {
+  components: {
+    GlModal,
+    EditMetaControls,
+  },
+  props: {
+    sourcePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      mergeRequestMeta: {
+        title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), {
+          sourcePath: this.sourcePath,
+        }),
+        description: s__('StaticSiteEditor|Copy update'),
+      },
+    };
+  },
+  computed: {
+    disabled() {
+      return this.mergeRequestMeta.title === '';
+    },
+    primaryProps() {
+      return {
+        text: __('Submit changes'),
+        attributes: [{ variant: 'success' }, { disabled: this.disabled }],
+      };
+    },
+    secondaryProps() {
+      return {
+        text: __('Keep editing'),
+        attributes: [{ variant: 'default' }],
+      };
+    },
+  },
+  methods: {
+    hide() {
+      this.$refs.modal.hide();
+    },
+    show() {
+      this.$refs.modal.show();
+    },
+    onPrimary() {
+      this.$emit('primary', this.mergeRequestMeta);
+      this.$refs.editMetaControls.resetCachedEditable();
+    },
+    onSecondary() {
+      this.hide();
+    },
+    onUpdateSettings(mergeRequestMeta) {
+      this.mergeRequestMeta = { ...mergeRequestMeta };
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    modal-id="edit-meta-modal"
+    :title="__('Submit your changes')"
+    :action-primary="primaryProps"
+    :action-secondary="secondaryProps"
+    size="sm"
+    @primary="onPrimary"
+    @secondary="onSecondary"
+    @hide="() => $emit('hide')"
+  >
+    <edit-meta-controls
+      ref="editMetaControls"
+      :title="mergeRequestMeta.title"
+      :description="mergeRequestMeta.description"
+      @updateSettings="onUpdateSettings"
+    />
+  </gl-modal>
+</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 2d62964cb3b..3bb5a0b8fd5 100644
--- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -41,7 +41,7 @@ export default {
         :disabled="savingChanges"
         @click="$emit('editSettings')"
       >
-        {{ __('Settings') }}
+        {{ __('Page settings') }}
       </gl-button>
       <gl-button
         ref="submit"
@@ -50,7 +50,7 @@ export default {
         :loading="savingChanges"
         @click="$emit('submit')"
       >
-        {{ __('Submit changes') }}
+        {{ __('Submit changes...') }}
       </gl-button>
     </div>
   </div>