Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

3 files changed, 81 insertions, 20 deletions

diff --git a/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue b/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
index bc7f8a2b17a..1a85a641dd1 100644
--- a/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
@@ -56,27 +56,29 @@ export default {
 </script>
 
 <template>
-  <div v-if="!multiline" class="gl-mb-3">
+  <div>
     <label v-if="label" :for="generateFormId('instruction-input')">{{ label }}</label>
-    <div class="input-group gl-mb-3">
-      <input
-        :id="generateFormId('instruction-input')"
-        :value="instruction"
-        type="text"
-        class="form-control gl-font-monospace"
-        data-testid="instruction-input"
-        readonly
-        @copy="trackCopy"
-      />
-      <span class="input-group-append" data-testid="instruction-button" @click="trackCopy">
-        <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
-      </span>
+    <div v-if="!multiline" class="gl-mb-3">
+      <div class="input-group gl-mb-3">
+        <input
+          :id="generateFormId('instruction-input')"
+          :value="instruction"
+          type="text"
+          class="form-control gl-font-monospace"
+          data-testid="instruction-input"
+          readonly
+          @copy="trackCopy"
+        />
+        <span class="input-group-append" data-testid="instruction-button" @click="trackCopy">
+          <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
+        </span>
+      </div>
     </div>
-  </div>
 
-  <div v-else>
-    <pre class="gl-font-monospace" data-testid="multiline-instruction" @copy="trackCopy">{{
-      instruction
-    }}</pre>
+    <div v-else>
+      <pre class="gl-font-monospace" data-testid="multiline-instruction" @copy="trackCopy">{{
+        instruction
+      }}</pre>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
index 9db5d6953d7..4ade75e705e 100644
--- a/app/assets/javascripts/vue_shared/components/registry/list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
@@ -54,7 +54,7 @@ export default {
     class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1"
     :class="optionalClasses"
   >
-    <div class="gl-display-flex gl-align-items-center gl-py-3">
+    <div class="gl-display-flex gl-align-items-center gl-py-3 gl-px-5">
       <div
         v-if="$slots['left-action']"
         class="gl-w-7 gl-display-none gl-sm-display-flex gl-justify-content-start gl-pl-2"
diff --git a/app/assets/javascripts/vue_shared/components/registry/persisted_dropdown_selection.vue b/app/assets/javascripts/vue_shared/components/registry/persisted_dropdown_selection.vue
new file mode 100644
index 00000000000..36b1a9c49f4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/persisted_dropdown_selection.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+export default {
+  name: 'PersistedDropdownSelection',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    LocalStorageSync,
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    storageKey: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selected: null,
+    };
+  },
+  computed: {
+    dropdownText() {
+      const selected = this.parsedOptions.find((o) => o.selected);
+      return selected?.label || this.options[0].label;
+    },
+    parsedOptions() {
+      return this.options.map((o) => ({ ...o, selected: o.value === this.selected }));
+    },
+  },
+  methods: {
+    setSelected(value) {
+      this.selected = value;
+      this.$emit('change', value);
+    },
+  },
+};
+</script>
+
+<template>
+  <local-storage-sync :storage-key="storageKey" :value="selected" @input="setSelected">
+    <gl-dropdown :text="dropdownText" lazy>
+      <gl-dropdown-item
+        v-for="option in parsedOptions"
+        :key="option.value"
+        :is-checked="option.selected"
+        :is-check-item="true"
+        @click="setSelected(option.value)"
+      >
+        {{ option.label }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </local-storage-sync>
+</template>