Add latest changes from gitlab-org/gitlab@master

23 files changed, 321 insertions, 237 deletions

diff --git a/app/assets/javascripts/diff_notes/models/discussion.js b/app/assets/javascripts/diff_notes/models/discussion.js
index daf61e5d467..97296a40d6e 100644
--- a/app/assets/javascripts/diff_notes/models/discussion.js
+++ b/app/assets/javascripts/diff_notes/models/discussion.js
@@ -1,4 +1,4 @@
-/* eslint-disable camelcase, guard-for-in, no-restricted-syntax */
+/* eslint-disable guard-for-in, no-restricted-syntax */
 /* global NoteModel */
 
 import $ from 'jquery';
@@ -40,13 +40,13 @@ class DiscussionModel {
     return true;
   }
 
-  resolveAllNotes(resolved_by) {
+  resolveAllNotes(resolvedBy) {
     for (const noteId in this.notes) {
       const note = this.notes[noteId];
 
       if (!note.resolved) {
         note.resolved = true;
-        note.resolved_by = resolved_by;
+        note.resolved_by = resolvedBy;
       }
     }
   }
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
index 69a972f644d..9bde18c4edf 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -1,4 +1,4 @@
-/* eslint-disable camelcase, no-restricted-syntax, guard-for-in */
+/* eslint-disable no-restricted-syntax, guard-for-in */
 /* global DiscussionModel */
 
 import Vue from 'vue';
@@ -26,11 +26,11 @@ window.CommentsStore = {
 
     discussion.createNote(noteObj);
   },
-  update(discussionId, noteId, resolved, resolved_by) {
+  update(discussionId, noteId, resolved, resolvedBy) {
     const discussion = this.state[discussionId];
     const note = discussion.getNote(noteId);
     note.resolved = resolved;
-    note.resolved_by = resolved_by;
+    note.resolved_by = resolvedBy;
   },
   delete(discussionId, noteId) {
     const discussion = this.state[discussionId];
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index cdf62259479..0a978ab5869 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -41,7 +41,7 @@ export default {
   <div class="environments-container">
     <gl-loading-icon
       v-if="isLoading"
-      :size="3"
+      size="md"
       class="prepend-top-default"
       label="Loading environments"
     />
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 30299ccc7bc..8abc927c500 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -170,7 +170,7 @@ export default {
 
       <template v-if="shouldRenderFolderContent(model)">
         <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
-          <gl-loading-icon :size="2" class="prepend-top-16" />
+          <gl-loading-icon size="md" class="prepend-top-16" />
         </div>
 
         <template v-else>
diff --git a/app/assets/javascripts/error_tracking_settings/utils.js b/app/assets/javascripts/error_tracking_settings/utils.js
index 6613e04ee0e..450e8728121 100644
--- a/app/assets/javascripts/error_tracking_settings/utils.js
+++ b/app/assets/javascripts/error_tracking_settings/utils.js
@@ -13,6 +13,6 @@ export const transformFrontendSettings = ({ apiHost, enabled, token, selectedPro
   return { api_host: apiHost || null, enabled, token: token || null, project };
 };
 
-export const getDisplayName = project => `${project.organizationName} | ${project.name}`;
+export const getDisplayName = project => `${project.organizationName} | ${project.slug}`;
 
 export default () => {};
diff --git a/app/assets/javascripts/helpers/diffs_helper.js b/app/assets/javascripts/helpers/diffs_helper.js
index 9695d01ad3d..d2b8cb11fe0 100644
--- a/app/assets/javascripts/helpers/diffs_helper.js
+++ b/app/assets/javascripts/helpers/diffs_helper.js
@@ -1,9 +1,9 @@
 export function hasInlineLines(diffFile) {
-  return diffFile?.highlighted_diff_lines?.length > 0; /* eslint-disable-line camelcase */
+  return diffFile?.highlighted_diff_lines?.length > 0;
 }
 
 export function hasParallelLines(diffFile) {
-  return diffFile?.parallel_diff_lines?.length > 0; /* eslint-disable-line camelcase */
+  return diffFile?.parallel_diff_lines?.length > 0;
 }
 
 export function isSingleViewStyle(diffFile) {
@@ -11,9 +11,5 @@ export function isSingleViewStyle(diffFile) {
 }
 
 export function hasDiff(diffFile) {
-  return (
-    hasInlineLines(diffFile) ||
-    hasParallelLines(diffFile) ||
-    !diffFile?.blob?.readable_text /* eslint-disable-line camelcase */
-  );
+  return hasInlineLines(diffFile) || hasParallelLines(diffFile) || !diffFile?.blob?.readable_text;
 }
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index d94dccad962..62084892d13 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -133,9 +133,9 @@ export const loadBranch = ({ dispatch, getters }, { projectId, branchId }) =>
         ref: branch.commit.id,
       });
     })
-    .catch(() => {
+    .catch(err => {
       dispatch('showBranchNotFoundError', branchId);
-      return Promise.reject();
+      throw err;
     });
 
 export const openBranch = ({ dispatch, state, getters }, { projectId, branchId, basePath }) => {
diff --git a/app/assets/javascripts/lib/utils/webpack.js b/app/assets/javascripts/lib/utils/webpack.js
index 37b17f0fe23..390294afcb7 100644
--- a/app/assets/javascripts/lib/utils/webpack.js
+++ b/app/assets/javascripts/lib/utils/webpack.js
@@ -8,7 +8,7 @@ export function resetServiceWorkersPublicPath() {
   // see: https://webpack.js.org/guides/public-path/
   const relativeRootPath = (gon && gon.relative_url_root) || '';
   const webpackAssetPath = joinPaths(relativeRootPath, '/assets/webpack/');
-  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
+  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line babel/camelcase
 
   // monaco-editor-webpack-plugin currently (incorrectly) references the
   // public path as a property of `window`.  Once this is fixed upstream we
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
index e7fcc183715..25c357b6073 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-param-reassign, camelcase, no-nested-ternary, no-continue */
+/* eslint-disable no-param-reassign, babel/camelcase, no-nested-ternary, no-continue */
 
 import $ from 'jquery';
 import Vue from 'vue';
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index c301c304409..3cc95168ba1 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, consistent-return, camelcase */
+/* eslint-disable func-names, consistent-return */
 
 import $ from 'jquery';
 import { __ } from '../locale';
@@ -270,14 +270,14 @@ export default class BranchGraph {
       stroke: 'none',
     });
 
-    const avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
-    const avatar_box_y = y - 10;
+    const avatarBoxX = this.offsetX + this.unitSpace * this.mspace + 10;
+    const avatarBoxY = y - 10;
 
-    r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
+    r.rect(avatarBoxX, avatarBoxY, 20, 20).attr({
       stroke: this.colors[commit.space],
       'stroke-width': 2,
     });
-    r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
+    r.image(commit.author.icon, avatarBoxX, avatarBoxY, 20, 20);
     return r
       .text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split('\n')[0])
       .attr({
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 5756532d18d..c01024fc2cd 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-restricted-properties, camelcase,
+/* eslint-disable no-restricted-properties, babel/camelcase,
 no-unused-expressions, default-case,
 consistent-return, no-alert, no-param-reassign, no-else-return,
 no-shadow, no-useless-escape,
diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index 28f4ef62242..2156c4469da 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -3,7 +3,7 @@ import { mapActions, mapState } from 'vuex';
 import { GlAlert } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
-import { FETCH_SETTINGS_ERROR_MESSAGE } from '../constants';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
 
 import SettingsForm from './settings_form.vue';
 
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 6a617f97271..ad2fdb4fd40 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,32 +1,16 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import {
-  GlFormGroup,
-  GlToggle,
-  GlFormSelect,
-  GlFormTextarea,
-  GlButton,
-  GlCard,
-  GlLoadingIcon,
-} from '@gitlab/ui';
-import { s__, __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import {
-  NAME_REGEX_LENGTH,
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
-} from '../constants';
+} from '../../shared/constants';
 import { mapComputed } from '~/vuex_shared/bindings';
+import ExpirationPolicyForm from '../../shared/components/expiration_policy_form.vue';
 
 export default {
   components: {
-    GlFormGroup,
-    GlToggle,
-    GlFormSelect,
-    GlFormTextarea,
-    GlButton,
-    GlCard,
-    GlLoadingIcon,
+    ExpirationPolicyForm,
   },
   mixins: [Tracking.mixin()],
   labelsConfig: {
@@ -43,59 +27,7 @@ export default {
   computed: {
     ...mapState(['formOptions', 'isLoading']),
     ...mapGetters({ isEdited: 'getIsEdited' }),
-    ...mapComputed(
-      [
-        'enabled',
-        { key: 'cadence', getter: 'getCadence' },
-        { key: 'older_than', getter: 'getOlderThan' },
-        { key: 'keep_n', getter: 'getKeepN' },
-        'name_regex',
-      ],
-      'updateSettings',
-      'settings',
-    ),
-    policyEnabledText() {
-      return this.enabled ? __('enabled') : __('disabled');
-    },
-    toggleDescriptionText() {
-      return sprintf(
-        s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'),
-        {
-          toggleStatus: `<strong>${this.policyEnabledText}</strong>`,
-        },
-        false,
-      );
-    },
-    regexHelpText() {
-      return sprintf(
-        s__(
-          'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
-        ),
-        {
-          codeStart: '<code>',
-          codeEnd: '</code>',
-        },
-        false,
-      );
-    },
-    nameRegexPlaceholder() {
-      return '.*';
-    },
-    nameRegexState() {
-      return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
-    },
-    formIsInvalid() {
-      return this.nameRegexState === false;
-    },
-    isFormElementDisabled() {
-      return !this.enabled || this.isLoading;
-    },
-    isSubmitButtonDisabled() {
-      return this.formIsInvalid || this.isLoading;
-    },
-    isCancelButtonDisabled() {
-      return !this.isEdited || this.isLoading;
-    },
+    ...mapComputed([{ key: 'settings', getter: 'getSettings' }], 'updateSettings'),
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
@@ -114,127 +46,12 @@ export default {
 </script>
 
 <template>
-  <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
-    <gl-card>
-      <template #header>
-        {{ s__('ContainerRegistry|Tag expiration policy') }}
-      </template>
-      <template>
-        <gl-form-group
-          id="expiration-policy-toggle-group"
-          :label-cols="$options.labelsConfig.cols"
-          :label-align="$options.labelsConfig.align"
-          label-for="expiration-policy-toggle"
-          :label="s__('ContainerRegistry|Expiration policy:')"
-        >
-          <div class="d-flex align-items-start">
-            <gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="isLoading" />
-            <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
-          </div>
-        </gl-form-group>
-
-        <gl-form-group
-          id="expiration-policy-interval-group"
-          :label-cols="$options.labelsConfig.cols"
-          :label-align="$options.labelsConfig.align"
-          label-for="expiration-policy-interval"
-          :label="s__('ContainerRegistry|Expiration interval:')"
-        >
-          <gl-form-select
-            id="expiration-policy-interval"
-            v-model="older_than"
-            :disabled="isFormElementDisabled"
-          >
-            <option v-for="option in formOptions.olderThan" :key="option.key" :value="option.key">
-              {{ option.label }}
-            </option>
-          </gl-form-select>
-        </gl-form-group>
-
-        <gl-form-group
-          id="expiration-policy-schedule-group"
-          :label-cols="$options.labelsConfig.cols"
-          :label-align="$options.labelsConfig.align"
-          label-for="expiration-policy-schedule"
-          :label="s__('ContainerRegistry|Expiration schedule:')"
-        >
-          <gl-form-select
-            id="expiration-policy-schedule"
-            v-model="cadence"
-            :disabled="isFormElementDisabled"
-          >
-            <option v-for="option in formOptions.cadence" :key="option.key" :value="option.key">
-              {{ option.label }}
-            </option>
-          </gl-form-select>
-        </gl-form-group>
-
-        <gl-form-group
-          id="expiration-policy-latest-group"
-          :label-cols="$options.labelsConfig.cols"
-          :label-align="$options.labelsConfig.align"
-          label-for="expiration-policy-latest"
-          :label="s__('ContainerRegistry|Number of tags to retain:')"
-        >
-          <gl-form-select
-            id="expiration-policy-latest"
-            v-model="keep_n"
-            :disabled="isFormElementDisabled"
-          >
-            <option v-for="option in formOptions.keepN" :key="option.key" :value="option.key">
-              {{ option.label }}
-            </option>
-          </gl-form-select>
-        </gl-form-group>
-
-        <gl-form-group
-          id="expiration-policy-name-matching-group"
-          :label-cols="$options.labelsConfig.cols"
-          :label-align="$options.labelsConfig.align"
-          label-for="expiration-policy-name-matching"
-          :label="
-            s__('ContainerRegistry|Docker tags with names matching this regex pattern will expire:')
-          "
-          :state="nameRegexState"
-          :invalid-feedback="
-            s__('ContainerRegistry|The value of this input should be less than 255 characters')
-          "
-        >
-          <gl-form-textarea
-            id="expiration-policy-name-matching"
-            v-model="name_regex"
-            :placeholder="nameRegexPlaceholder"
-            :state="nameRegexState"
-            :disabled="isFormElementDisabled"
-            trim
-          />
-          <template #description>
-            <span ref="regex-description" v-html="regexHelpText"></span>
-          </template>
-        </gl-form-group>
-      </template>
-      <template #footer>
-        <div class="d-flex justify-content-end">
-          <gl-button
-            ref="cancel-button"
-            type="reset"
-            :disabled="isCancelButtonDisabled"
-            class="mr-2 d-block"
-          >
-            {{ __('Cancel') }}
-          </gl-button>
-          <gl-button
-            ref="save-button"
-            type="submit"
-            :disabled="isSubmitButtonDisabled"
-            variant="success"
-            class="d-flex justify-content-center align-items-center js-no-auto-disable"
-          >
-            {{ __('Save expiration policy') }}
-            <gl-loading-icon v-if="isLoading" class="ml-2" />
-          </gl-button>
-        </div>
-      </template>
-    </gl-card>
-  </form>
+  <expiration-policy-form
+    v-model="settings"
+    :form-options="formOptions"
+    :is-loading="isLoading"
+    :disable-cancel-button="!isEdited"
+    @submit="submit"
+    @reset="reset"
+  />
 </template>
diff --git a/app/assets/javascripts/registry/settings/store/getters.js b/app/assets/javascripts/registry/settings/store/getters.js
index cd6392bd0cc..639becebeec 100644
--- a/app/assets/javascripts/registry/settings/store/getters.js
+++ b/app/assets/javascripts/registry/settings/store/getters.js
@@ -1,10 +1,21 @@
 import { isEqual } from 'lodash';
-import { findDefaultOption } from '../utils';
+import { findDefaultOption } from '../../shared/utils';
 
 export const getCadence = state =>
   state.settings.cadence || findDefaultOption(state.formOptions.cadence);
+
 export const getKeepN = state =>
   state.settings.keep_n || findDefaultOption(state.formOptions.keepN);
+
 export const getOlderThan = state =>
   state.settings.older_than || findDefaultOption(state.formOptions.olderThan);
+
+export const getSettings = (state, getters) => ({
+  enabled: state.settings.enabled,
+  cadence: getters.getCadence,
+  older_than: getters.getOlderThan,
+  keep_n: getters.getKeepN,
+  name_regex: state.settings.name_regex,
+});
+
 export const getIsEdited = state => !isEqual(state.original, state.settings);
diff --git a/app/assets/javascripts/registry/settings/store/mutations.js b/app/assets/javascripts/registry/settings/store/mutations.js
index b773f2dd44c..f562137db1a 100644
--- a/app/assets/javascripts/registry/settings/store/mutations.js
+++ b/app/assets/javascripts/registry/settings/store/mutations.js
@@ -9,8 +9,8 @@ export default {
       olderThan: JSON.parse(initialState.olderThanOptions),
     };
   },
-  [types.UPDATE_SETTINGS](state, settings) {
-    state.settings = { ...state.settings, ...settings };
+  [types.UPDATE_SETTINGS](state, data) {
+    state.settings = { ...state.settings, ...data.settings };
   },
   [types.SET_SETTINGS](state, settings) {
     state.settings = settings;
diff --git a/app/assets/javascripts/registry/settings/utils.js b/app/assets/javascripts/registry/settings/utils.js
deleted file mode 100644
index 75af401e96d..00000000000
--- a/app/assets/javascripts/registry/settings/utils.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const findDefaultOption = options => {
-  const item = options.find(o => o.default);
-  return item ? item.key : null;
-};
-
-export default () => {};
diff --git a/app/assets/javascripts/registry/shared/components/expiration_policy_form.vue b/app/assets/javascripts/registry/shared/components/expiration_policy_form.vue
new file mode 100644
index 00000000000..c044add3759
--- /dev/null
+++ b/app/assets/javascripts/registry/shared/components/expiration_policy_form.vue
@@ -0,0 +1,247 @@
+<script>
+import { uniqueId } from 'lodash';
+import {
+  GlFormGroup,
+  GlToggle,
+  GlFormSelect,
+  GlFormTextarea,
+  GlButton,
+  GlCard,
+  GlLoadingIcon,
+} from '@gitlab/ui';
+import { s__, __, sprintf } from '~/locale';
+import { NAME_REGEX_LENGTH } from '../constants';
+import { mapComputedToEvent } from '../utils';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlToggle,
+    GlFormSelect,
+    GlFormTextarea,
+    GlButton,
+    GlCard,
+    GlLoadingIcon,
+  },
+  props: {
+    formOptions: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    labelCols: {
+      type: [Number, String],
+      required: false,
+      default: 3,
+    },
+    labelAlign: {
+      type: String,
+      required: false,
+      default: 'right',
+    },
+    disableCancelButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  nameRegexPlaceholder: '.*',
+  data() {
+    return {
+      uniqueId: uniqueId(),
+    };
+  },
+  computed: {
+    ...mapComputedToEvent(['enabled', 'cadence', 'older_than', 'keep_n', 'name_regex'], 'value'),
+    policyEnabledText() {
+      return this.enabled ? __('enabled') : __('disabled');
+    },
+    toggleDescriptionText() {
+      return sprintf(
+        s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'),
+        {
+          toggleStatus: `<strong>${this.policyEnabledText}</strong>`,
+        },
+        false,
+      );
+    },
+    regexHelpText() {
+      return sprintf(
+        s__(
+          'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
+        ),
+        {
+          codeStart: '<code>',
+          codeEnd: '</code>',
+        },
+        false,
+      );
+    },
+    nameRegexState() {
+      return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
+    },
+    formIsInvalid() {
+      return this.nameRegexState === false;
+    },
+    isFormElementDisabled() {
+      return !this.enabled || this.isLoading;
+    },
+    isSubmitButtonDisabled() {
+      return this.formIsInvalid || this.isLoading;
+    },
+    isCancelButtonDisabled() {
+      return this.disableCancelButton || this.isLoading;
+    },
+  },
+  methods: {
+    idGenerator(id) {
+      return `${id}_${this.uniqueId}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <form
+    ref="form-element"
+    class="lh-2"
+    @submit.prevent="$emit('submit')"
+    @reset.prevent="$emit('reset')"
+  >
+    <gl-card>
+      <template #header>
+        {{ s__('ContainerRegistry|Tag expiration policy') }}
+      </template>
+      <template>
+        <gl-form-group
+          :id="idGenerator('expiration-policy-toggle-group')"
+          :label-cols="labelCols"
+          :label-align="labelAlign"
+          :label-for="idGenerator('expiration-policy-toggle')"
+          :label="s__('ContainerRegistry|Expiration policy:')"
+        >
+          <div class="d-flex align-items-start">
+            <gl-toggle
+              :id="idGenerator('expiration-policy-toggle')"
+              v-model="enabled"
+              :disabled="isLoading"
+            />
+            <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
+          </div>
+        </gl-form-group>
+
+        <gl-form-group
+          :id="idGenerator('expiration-policy-interval-group')"
+          :label-cols="labelCols"
+          :label-align="labelAlign"
+          :label-for="idGenerator('expiration-policy-interval')"
+          :label="s__('ContainerRegistry|Expiration interval:')"
+        >
+          <gl-form-select
+            :id="idGenerator('expiration-policy-interval')"
+            v-model="older_than"
+            :disabled="isFormElementDisabled"
+          >
+            <option v-for="option in formOptions.olderThan" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          :id="idGenerator('expiration-policy-schedule-group')"
+          :label-cols="labelCols"
+          :label-align="labelAlign"
+          :label-for="idGenerator('expiration-policy-schedule')"
+          :label="s__('ContainerRegistry|Expiration schedule:')"
+        >
+          <gl-form-select
+            :id="idGenerator('expiration-policy-schedule')"
+            v-model="cadence"
+            :disabled="isFormElementDisabled"
+          >
+            <option v-for="option in formOptions.cadence" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          :id="idGenerator('expiration-policy-latest-group')"
+          :label-cols="labelCols"
+          :label-align="labelAlign"
+          :label-for="idGenerator('expiration-policy-latest')"
+          :label="s__('ContainerRegistry|Number of tags to retain:')"
+        >
+          <gl-form-select
+            :id="idGenerator('expiration-policy-latest')"
+            v-model="keep_n"
+            :disabled="isFormElementDisabled"
+          >
+            <option v-for="option in formOptions.keepN" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          :id="idGenerator('expiration-policy-name-matching-group')"
+          :label-cols="labelCols"
+          :label-align="labelAlign"
+          :label-for="idGenerator('expiration-policy-name-matching')"
+          :label="
+            s__('ContainerRegistry|Docker tags with names matching this regex pattern will expire:')
+          "
+          :state="nameRegexState"
+          :invalid-feedback="
+            s__('ContainerRegistry|The value of this input should be less than 255 characters')
+          "
+        >
+          <gl-form-textarea
+            :id="idGenerator('expiration-policy-name-matching')"
+            v-model="name_regex"
+            :placeholder="$options.nameRegexPlaceholder"
+            :state="nameRegexState"
+            :disabled="isFormElementDisabled"
+            trim
+          />
+          <template #description>
+            <span ref="regex-description" v-html="regexHelpText"></span>
+          </template>
+        </gl-form-group>
+      </template>
+      <template #footer>
+        <div class="d-flex justify-content-end">
+          <gl-button
+            ref="cancel-button"
+            type="reset"
+            class="mr-2 d-block"
+            :disabled="isCancelButtonDisabled"
+          >
+            {{ __('Cancel') }}
+          </gl-button>
+          <gl-button
+            ref="save-button"
+            type="submit"
+            :disabled="isSubmitButtonDisabled"
+            variant="success"
+            class="d-flex justify-content-center align-items-center js-no-auto-disable"
+          >
+            {{ __('Save expiration policy') }}
+            <gl-loading-icon v-if="isLoading" class="ml-2" />
+          </gl-button>
+        </div>
+      </template>
+    </gl-card>
+  </form>
+</template>
diff --git a/app/assets/javascripts/registry/settings/constants.js b/app/assets/javascripts/registry/shared/constants.js
index c0dac466b29..c0dac466b29 100644
--- a/app/assets/javascripts/registry/settings/constants.js
+++ b/app/assets/javascripts/registry/shared/constants.js
diff --git a/app/assets/javascripts/registry/shared/utils.js b/app/assets/javascripts/registry/shared/utils.js
new file mode 100644
index 00000000000..d85a3ad28c2
--- /dev/null
+++ b/app/assets/javascripts/registry/shared/utils.js
@@ -0,0 +1,19 @@
+export const findDefaultOption = options => {
+  const item = options.find(o => o.default);
+  return item ? item.key : null;
+};
+
+export const mapComputedToEvent = (list, root) => {
+  const result = {};
+  list.forEach(e => {
+    result[e] = {
+      get() {
+        return this[root][e];
+      },
+      set(value) {
+        this.$emit('input', { ...this[root], [e]: value });
+      },
+    };
+  });
+  return result;
+};
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 6d7d863f273..6821df57b5a 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, prefer-rest-params, consistent-return, no-shadow, no-else-return, no-self-compare, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */
+/* eslint-disable func-names, prefer-rest-params, consistent-return, no-shadow, no-else-return, no-self-compare, no-unused-expressions, yoda, prefer-spread, babel/camelcase, no-param-reassign */
 /* global Issuable */
 /* global emitSidebarEvent */
 
diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
index cdcfff42981..271a375ade2 100644
--- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
+++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
@@ -121,7 +121,7 @@ export default {
     :title="title"
   >
     <slot>
-      <icon name="duplicate" />
+      <icon name="copy-to-clipboard" />
     </slot>
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/webpack.js b/app/assets/javascripts/webpack.js
index ced847294ae..4f558843357 100644
--- a/app/assets/javascripts/webpack.js
+++ b/app/assets/javascripts/webpack.js
@@ -5,5 +5,5 @@
  */
 
 if (gon && gon.webpack_public_path) {
-  __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line camelcase
+  __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line babel/camelcase
 }
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index 044d703630e..ab0b0b02aa8 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,4 +1,4 @@
-/* eslint-disable consistent-return, camelcase, class-methods-use-this */
+/* eslint-disable consistent-return, class-methods-use-this */
 
 // Zen Mode (full screen) textarea
 //
@@ -91,8 +91,8 @@ export default class ZenMode {
     }
   }
 
-  scrollTo(zen_area) {
-    return $.scrollTo(zen_area, 0, {
+  scrollTo(zenArea) {
+    return $.scrollTo(zenArea, 0, {
       offset: -150,
     });
   }