Add latest changes from gitlab-org/gitlab@master

6 files changed, 40 insertions, 348 deletions

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 e236834d8e1..ac6a0871153 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -2,16 +2,16 @@
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import { isEqual, get, isEmpty } from 'lodash';
 import expirationPolicyQuery from '../graphql/queries/get_expiration_policy.graphql';
-import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
-
-import SettingsForm from './settings_form.vue';
 import {
+  FETCH_SETTINGS_ERROR_MESSAGE,
   UNAVAILABLE_FEATURE_TITLE,
   UNAVAILABLE_FEATURE_INTRO_TEXT,
   UNAVAILABLE_USER_FEATURE_TEXT,
   UNAVAILABLE_ADMIN_FEATURE_TEXT,
 } from '../constants';
 
+import SettingsForm from './settings_form.vue';
+
 export default {
   components: {
     SettingsForm,
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 3eab7e6d038..c46c633d274 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -4,8 +4,6 @@ import Tracking from '~/tracking';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
-} from '~/registry/shared/constants';
-import {
   SET_CLEANUP_POLICY_BUTTON,
   KEEP_HEADER_TEXT,
   KEEP_INFO_TEXT,
@@ -21,7 +19,7 @@ import {
   CADENCE_LABEL,
   EXPIRATION_POLICY_FOOTER_NOTE,
 } from '~/registry/settings/constants';
-import { formOptionsGenerator } from '~/registry/shared/utils';
+import { formOptionsGenerator } from '~/registry/settings/utils';
 import updateContainerExpirationPolicyMutation from '~/registry/settings/graphql/mutations/update_container_expiration_policy.graphql';
 import { updateContainerExpirationPolicy } from '~/registry/settings/graphql/utils/cache_update';
 import ExpirationDropdown from './expiration_dropdown.vue';
diff --git a/app/assets/javascripts/registry/settings/constants.js b/app/assets/javascripts/registry/settings/constants.js
index 1dd533ce665..21c54299632 100644
--- a/app/assets/javascripts/registry/settings/constants.js
+++ b/app/assets/javascripts/registry/settings/constants.js
@@ -52,4 +52,40 @@ export const EXPIRATION_POLICY_FOOTER_NOTE = s__(
   'ContainerRegistry|Note: Any policy update will result in a change to the scheduled run date and time',
 );
 
+export const KEEP_N_OPTIONS = [
+  { key: 'ONE_TAG', variable: 1, default: false },
+  { key: 'FIVE_TAGS', variable: 5, default: false },
+  { key: 'TEN_TAGS', variable: 10, default: true },
+  { key: 'TWENTY_FIVE_TAGS', variable: 25, default: false },
+  { key: 'FIFTY_TAGS', variable: 50, default: false },
+  { key: 'ONE_HUNDRED_TAGS', variable: 100, default: false },
+];
+
+export const CADENCE_OPTIONS = [
+  { key: 'EVERY_DAY', label: __('Every day'), default: true },
+  { key: 'EVERY_WEEK', label: __('Every week'), default: false },
+  { key: 'EVERY_TWO_WEEKS', label: __('Every two weeks'), default: false },
+  { key: 'EVERY_MONTH', label: __('Every month'), default: false },
+  { key: 'EVERY_THREE_MONTHS', label: __('Every three months'), default: false },
+];
+
+export const OLDER_THAN_OPTIONS = [
+  { key: 'SEVEN_DAYS', variable: 7, default: false },
+  { key: 'FOURTEEN_DAYS', variable: 14, default: false },
+  { key: 'THIRTY_DAYS', variable: 30, default: false },
+  { key: 'NINETY_DAYS', variable: 90, default: true },
+];
+
+export const FETCH_SETTINGS_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Something went wrong while fetching the cleanup policy.',
+);
+
+export const UPDATE_SETTINGS_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Something went wrong while updating the cleanup policy.',
+);
+
+export const UPDATE_SETTINGS_SUCCESS_MESSAGE = s__(
+  'ContainerRegistry|Cleanup policy successfully saved.',
+);
+
 export const NAME_REGEX_LENGTH = 255;
diff --git a/app/assets/javascripts/registry/shared/utils.js b/app/assets/javascripts/registry/settings/utils.js
index 5c8c505f835..51b4fb6bdb8 100644
--- a/app/assets/javascripts/registry/shared/utils.js
+++ b/app/assets/javascripts/registry/settings/utils.js
@@ -6,21 +6,6 @@ export const findDefaultOption = options => {
   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', { newValue: { ...this[root], [e]: value }, modified: e });
-      },
-    };
-  });
-  return result;
-};
-
 export const olderThanTranslationGenerator = variable => n__('%d day', '%d days', variable);
 
 export const keepNTranslationGenerator = variable =>
diff --git a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
deleted file mode 100644
index 2b8e9f6ff64..00000000000
--- a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<script>
-import { uniqueId } from 'lodash';
-import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlSprintf } from '@gitlab/ui';
-import {
-  NAME_REGEX_LENGTH,
-  ENABLED_TEXT,
-  DISABLED_TEXT,
-  TEXT_AREA_INVALID_FEEDBACK,
-  EXPIRATION_INTERVAL_LABEL,
-  EXPIRATION_SCHEDULE_LABEL,
-  KEEP_N_LABEL,
-  NAME_REGEX_LABEL,
-  NAME_REGEX_PLACEHOLDER,
-  NAME_REGEX_DESCRIPTION,
-  NAME_REGEX_KEEP_LABEL,
-  NAME_REGEX_KEEP_PLACEHOLDER,
-  NAME_REGEX_KEEP_DESCRIPTION,
-  ENABLE_TOGGLE_LABEL,
-  ENABLE_TOGGLE_DESCRIPTION,
-} from '../constants';
-import { mapComputedToEvent } from '../utils';
-
-export default {
-  components: {
-    GlFormGroup,
-    GlToggle,
-    GlFormSelect,
-    GlFormTextarea,
-    GlSprintf,
-  },
-  props: {
-    formOptions: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    apiErrors: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    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',
-    },
-  },
-  i18n: {
-    ENABLE_TOGGLE_LABEL,
-    ENABLE_TOGGLE_DESCRIPTION,
-  },
-  selectList: [
-    {
-      name: 'expiration-policy-interval',
-      label: EXPIRATION_INTERVAL_LABEL,
-      model: 'olderThan',
-    },
-    {
-      name: 'expiration-policy-schedule',
-      label: EXPIRATION_SCHEDULE_LABEL,
-      model: 'cadence',
-    },
-    {
-      name: 'expiration-policy-latest',
-      label: KEEP_N_LABEL,
-      model: 'keepN',
-    },
-  ],
-  textAreaList: [
-    {
-      name: 'expiration-policy-name-matching',
-      label: NAME_REGEX_LABEL,
-      model: 'nameRegex',
-      placeholder: NAME_REGEX_PLACEHOLDER,
-      description: NAME_REGEX_DESCRIPTION,
-    },
-    {
-      name: 'expiration-policy-keep-name',
-      label: NAME_REGEX_KEEP_LABEL,
-      model: 'nameRegexKeep',
-      placeholder: NAME_REGEX_KEEP_PLACEHOLDER,
-      description: NAME_REGEX_KEEP_DESCRIPTION,
-    },
-  ],
-  data() {
-    return {
-      uniqueId: uniqueId(),
-    };
-  },
-  computed: {
-    ...mapComputedToEvent(
-      ['enabled', 'cadence', 'olderThan', 'keepN', 'nameRegex', 'nameRegexKeep'],
-      'value',
-    ),
-    policyEnabledText() {
-      return this.enabled ? ENABLED_TEXT : DISABLED_TEXT;
-    },
-    textAreaValidation() {
-      const nameRegexErrors = this.apiErrors?.nameRegex || this.validateRegexLength(this.nameRegex);
-      const nameKeepRegexErrors =
-        this.apiErrors?.nameRegexKeep || this.validateRegexLength(this.nameRegexKeep);
-
-      return {
-        /*
-         * The state has this form:
-         * null: gray border, no message
-         * true: green border, no message ( because none is configured)
-         * false: red border, error message
-         * So in this function we keep null if the are no message otherwise we 'invert' the error message
-         */
-        nameRegex: {
-          state: nameRegexErrors === null ? null : !nameRegexErrors,
-          message: nameRegexErrors,
-        },
-        nameRegexKeep: {
-          state: nameKeepRegexErrors === null ? null : !nameKeepRegexErrors,
-          message: nameKeepRegexErrors,
-        },
-      };
-    },
-    fieldsValidity() {
-      return (
-        this.textAreaValidation.nameRegex.state !== false &&
-        this.textAreaValidation.nameRegexKeep.state !== false
-      );
-    },
-    isFormElementDisabled() {
-      return !this.enabled || this.isLoading;
-    },
-  },
-  watch: {
-    fieldsValidity: {
-      immediate: true,
-      handler(valid) {
-        if (valid) {
-          this.$emit('validated');
-        } else {
-          this.$emit('invalidated');
-        }
-      },
-    },
-  },
-  methods: {
-    validateRegexLength(value) {
-      if (!value) {
-        return null;
-      }
-      return value.length <= NAME_REGEX_LENGTH ? '' : TEXT_AREA_INVALID_FEEDBACK;
-    },
-    idGenerator(id) {
-      return `${id}_${this.uniqueId}`;
-    },
-    updateModel(value, key) {
-      this[key] = value;
-    },
-  },
-};
-</script>
-
-<template>
-  <div ref="form-elements" class="gl-line-height-20">
-    <gl-form-group
-      :id="idGenerator('expiration-policy-toggle-group')"
-      :label-cols="labelCols"
-      :label-align="labelAlign"
-      :label-for="idGenerator('expiration-policy-toggle')"
-      :label="$options.i18n.ENABLE_TOGGLE_LABEL"
-    >
-      <div class="gl-display-flex">
-        <gl-toggle
-          :id="idGenerator('expiration-policy-toggle')"
-          v-model="enabled"
-          :disabled="isLoading"
-        />
-        <span class="gl-mb-3 gl-ml-3 gl-line-height-20">
-          <gl-sprintf :message="$options.i18n.ENABLE_TOGGLE_DESCRIPTION">
-            <template #toggleStatus>
-              <strong>{{ policyEnabledText }}</strong>
-            </template>
-          </gl-sprintf>
-        </span>
-      </div>
-    </gl-form-group>
-
-    <gl-form-group
-      v-for="select in $options.selectList"
-      :id="idGenerator(`${select.name}-group`)"
-      :key="select.name"
-      :label-cols="labelCols"
-      :label-align="labelAlign"
-      :label-for="idGenerator(select.name)"
-      :label="select.label"
-    >
-      <gl-form-select
-        :id="idGenerator(select.name)"
-        :value="value[select.model]"
-        :disabled="isFormElementDisabled"
-        @input="updateModel($event, select.model)"
-      >
-        <option v-for="option in formOptions[select.model]" :key="option.key" :value="option.key">
-          {{ option.label }}
-        </option>
-      </gl-form-select>
-    </gl-form-group>
-
-    <gl-form-group
-      v-for="textarea in $options.textAreaList"
-      :id="idGenerator(`${textarea.name}-group`)"
-      :key="textarea.name"
-      :label-cols="labelCols"
-      :label-align="labelAlign"
-      :label-for="idGenerator(textarea.name)"
-      :state="textAreaValidation[textarea.model].state"
-      :invalid-feedback="textAreaValidation[textarea.model].message"
-    >
-      <template #label>
-        <gl-sprintf :message="textarea.label">
-          <template #italic="{content}">
-            <i>{{ content }}</i>
-          </template>
-        </gl-sprintf>
-      </template>
-      <gl-form-textarea
-        :id="idGenerator(textarea.name)"
-        :value="value[textarea.model]"
-        :placeholder="textarea.placeholder"
-        :state="textAreaValidation[textarea.model].state"
-        :disabled="isFormElementDisabled"
-        trim
-        @input="updateModel($event, textarea.model)"
-      />
-      <template #description>
-        <span ref="regex-description">
-          <gl-sprintf :message="textarea.description">
-            <template #code="{content}">
-              <code>{{ content }}</code>
-            </template>
-          </gl-sprintf>
-        </span>
-      </template>
-    </gl-form-group>
-  </div>
-</template>
diff --git a/app/assets/javascripts/registry/shared/constants.js b/app/assets/javascripts/registry/shared/constants.js
deleted file mode 100644
index d1e3d93938b..00000000000
--- a/app/assets/javascripts/registry/shared/constants.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { s__, __ } from '~/locale';
-
-export const FETCH_SETTINGS_ERROR_MESSAGE = s__(
-  'ContainerRegistry|Something went wrong while fetching the cleanup policy.',
-);
-
-export const UPDATE_SETTINGS_ERROR_MESSAGE = s__(
-  'ContainerRegistry|Something went wrong while updating the cleanup policy.',
-);
-
-export const UPDATE_SETTINGS_SUCCESS_MESSAGE = s__(
-  'ContainerRegistry|Cleanup policy successfully saved.',
-);
-
-export const NAME_REGEX_LENGTH = 255;
-
-export const ENABLED_TEXT = __('Enabled');
-export const DISABLED_TEXT = __('Disabled');
-
-export const ENABLE_TOGGLE_LABEL = s__('ContainerRegistry|Cleanup policy:');
-export const ENABLE_TOGGLE_DESCRIPTION = s__(
-  'ContainerRegistry|%{toggleStatus} - Tags matching the patterns defined below will be scheduled for deletion',
-);
-
-export const TEXT_AREA_INVALID_FEEDBACK = s__(
-  'ContainerRegistry|The value of this input should be less than 256 characters',
-);
-
-export const EXPIRATION_INTERVAL_LABEL = s__('ContainerRegistry|Expiration interval:');
-export const EXPIRATION_SCHEDULE_LABEL = s__('ContainerRegistry|Expiration schedule:');
-export const KEEP_N_LABEL = s__('ContainerRegistry|Number of tags to retain:');
-export const NAME_REGEX_LABEL = s__(
-  'ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}expire:%{italicEnd}',
-);
-export const NAME_REGEX_PLACEHOLDER = '';
-export const NAME_REGEX_DESCRIPTION = s__(
-  'ContainerRegistry|Wildcards such as %{codeStart}.*-test%{codeEnd} or %{codeStart}dev-.*%{codeEnd} are supported. To select all tags, use %{codeStart}.*%{codeEnd}',
-);
-export const NAME_REGEX_KEEP_LABEL = s__(
-  'ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}be preserved:%{italicEnd}',
-);
-export const NAME_REGEX_KEEP_PLACEHOLDER = '';
-export const NAME_REGEX_KEEP_DESCRIPTION = s__(
-  'ContainerRegistry|Wildcards such as %{codeStart}.*-master%{codeEnd} or %{codeStart}release-.*%{codeEnd} are supported',
-);
-
-export const KEEP_N_OPTIONS = [
-  { variable: 1, key: 'ONE_TAG', default: false },
-  { variable: 5, key: 'FIVE_TAGS', default: false },
-  { variable: 10, key: 'TEN_TAGS', default: true },
-  { variable: 25, key: 'TWENTY_FIVE_TAGS', default: false },
-  { variable: 50, key: 'FIFTY_TAGS', default: false },
-  { variable: 100, key: 'ONE_HUNDRED_TAGS', default: false },
-];
-
-export const CADENCE_OPTIONS = [
-  { key: 'EVERY_DAY', label: __('Every day'), default: true },
-  { key: 'EVERY_WEEK', label: __('Every week'), default: false },
-  { key: 'EVERY_TWO_WEEKS', label: __('Every two weeks'), default: false },
-  { key: 'EVERY_MONTH', label: __('Every month'), default: false },
-  { key: 'EVERY_THREE_MONTHS', label: __('Every three months'), default: false },
-];
-
-export const OLDER_THAN_OPTIONS = [
-  { key: 'SEVEN_DAYS', variable: 7, default: false },
-  { key: 'FOURTEEN_DAYS', variable: 14, default: false },
-  { key: 'THIRTY_DAYS', variable: 30, default: false },
-  { key: 'NINETY_DAYS', variable: 90, default: true },
-];