Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

6 files changed, 133 insertions, 122 deletions

diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
index a5189201112..130d6977936 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
@@ -77,9 +77,6 @@ export default {
         this.updateDependencyProxyImageTtlGroupPolicy(payload);
       },
     },
-    helpText() {
-      return this.enabled ? this.$options.i18n.enabledProxyHelpText : '';
-    },
   },
   methods: {
     mutationVariables(payload) {
@@ -144,11 +141,10 @@ export default {
           v-model="enabled"
           :disabled="isLoading"
           :label="$options.i18n.enabledProxyLabel"
-          :help="helpText"
           data-qa-selector="dependency_proxy_setting_toggle"
           data-testid="dependency-proxy-setting-toggle"
         >
-          <template #help>
+          <template v-if="enabled" #help>
             <span class="gl-overflow-break-word gl-max-w-100vw gl-display-inline-block">
               <gl-sprintf :message="$options.i18n.enabledProxyHelpText">
                 <template #link="{ content }">
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue
new file mode 100644
index 00000000000..fdc7bd39780
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue
@@ -0,0 +1,124 @@
+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { isEqual, get, isEmpty } from 'lodash';
+import {
+  CONTAINER_CLEANUP_POLICY_TITLE,
+  CONTAINER_CLEANUP_POLICY_DESCRIPTION,
+  FETCH_SETTINGS_ERROR_MESSAGE,
+  UNAVAILABLE_FEATURE_TITLE,
+  UNAVAILABLE_FEATURE_INTRO_TEXT,
+  UNAVAILABLE_USER_FEATURE_TEXT,
+  UNAVAILABLE_ADMIN_FEATURE_TEXT,
+} from '~/packages_and_registries/settings/project/constants';
+import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+
+import ContainerExpirationPolicyForm from './container_expiration_policy_form.vue';
+
+export default {
+  components: {
+    SettingsBlock,
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    ContainerExpirationPolicyForm,
+  },
+  inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries', 'helpPagePath'],
+  i18n: {
+    CONTAINER_CLEANUP_POLICY_TITLE,
+    CONTAINER_CLEANUP_POLICY_DESCRIPTION,
+    UNAVAILABLE_FEATURE_TITLE,
+    UNAVAILABLE_FEATURE_INTRO_TEXT,
+    FETCH_SETTINGS_ERROR_MESSAGE,
+  },
+  apollo: {
+    containerExpirationPolicy: {
+      query: expirationPolicyQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update: (data) => data.project?.containerExpirationPolicy,
+      result({ data }) {
+        this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
+      },
+      error(e) {
+        this.fetchSettingsError = e;
+      },
+    },
+  },
+  data() {
+    return {
+      fetchSettingsError: false,
+      containerExpirationPolicy: null,
+      workingCopy: {},
+    };
+  },
+  computed: {
+    isDisabled() {
+      return !(this.containerExpirationPolicy || this.enableHistoricEntries);
+    },
+    showDisabledFormMessage() {
+      return this.isDisabled && !this.fetchSettingsError;
+    },
+    unavailableFeatureMessage() {
+      return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT;
+    },
+    isEdited() {
+      if (isEmpty(this.containerExpirationPolicy) && isEmpty(this.workingCopy)) {
+        return false;
+      }
+      return !isEqual(this.containerExpirationPolicy, this.workingCopy);
+    },
+  },
+  methods: {
+    restoreOriginal() {
+      this.workingCopy = { ...this.containerExpirationPolicy };
+    },
+  },
+};
+</script>
+
+<template>
+  <settings-block :collapsible="false">
+    <template #title> {{ $options.i18n.CONTAINER_CLEANUP_POLICY_TITLE }}</template>
+    <template #description>
+      <span>
+        <gl-sprintf :message="$options.i18n.CONTAINER_CLEANUP_POLICY_DESCRIPTION">
+          <template #link="{ content }">
+            <gl-link :href="helpPagePath">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+    <template #default>
+      <container-expiration-policy-form
+        v-if="!isDisabled"
+        v-model="workingCopy"
+        :is-loading="$apollo.queries.containerExpirationPolicy.loading"
+        :is-edited="isEdited"
+        @reset="restoreOriginal"
+      />
+      <template v-else>
+        <gl-alert
+          v-if="showDisabledFormMessage"
+          :dismissible="false"
+          :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE"
+          variant="tip"
+        >
+          {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }}
+
+          <gl-sprintf :message="unavailableFeatureMessage">
+            <template #link="{ content }">
+              <gl-link :href="adminSettingsPath">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </gl-alert>
+        <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false">
+          <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" />
+        </gl-alert>
+      </template>
+    </template>
+  </settings-block>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy_form.vue
index ae2d5f4fbc5..ae2d5f4fbc5 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy_form.vue
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue
index d6d85189792..3fbbfd75ffb 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue
@@ -104,7 +104,7 @@ export default {
       <span data-testid="description" class="gl-text-gray-400">
         <gl-sprintf :message="description">
           <template #link="{ content }">
-            <gl-link :href="tagsRegexHelpPagePath" target="_blank">{{ content }}</gl-link>
+            <gl-link :href="tagsRegexHelpPagePath">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </span>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
index 854c88b2ad3..95af19e6d85 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
@@ -1,128 +1,15 @@
 <script>
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import { isEqual, get, isEmpty } from 'lodash';
-import {
-  FETCH_SETTINGS_ERROR_MESSAGE,
-  UNAVAILABLE_FEATURE_TITLE,
-  UNAVAILABLE_FEATURE_INTRO_TEXT,
-  UNAVAILABLE_USER_FEATURE_TEXT,
-  UNAVAILABLE_ADMIN_FEATURE_TEXT,
-} from '~/packages_and_registries/settings/project/constants';
-import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
-import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
-
-import SettingsForm from './settings_form.vue';
+import ContainerExpirationPolicy from './container_expiration_policy.vue';
 
 export default {
   components: {
-    SettingsBlock,
-    SettingsForm,
-    GlAlert,
-    GlSprintf,
-    GlLink,
-  },
-  inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries', 'helpPagePath'],
-  i18n: {
-    UNAVAILABLE_FEATURE_TITLE,
-    UNAVAILABLE_FEATURE_INTRO_TEXT,
-    FETCH_SETTINGS_ERROR_MESSAGE,
-  },
-  apollo: {
-    containerExpirationPolicy: {
-      query: expirationPolicyQuery,
-      variables() {
-        return {
-          projectPath: this.projectPath,
-        };
-      },
-      update: (data) => data.project?.containerExpirationPolicy,
-      result({ data }) {
-        this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
-      },
-      error(e) {
-        this.fetchSettingsError = e;
-      },
-    },
-  },
-  data() {
-    return {
-      fetchSettingsError: false,
-      containerExpirationPolicy: null,
-      workingCopy: {},
-    };
-  },
-  computed: {
-    isDisabled() {
-      return !(this.containerExpirationPolicy || this.enableHistoricEntries);
-    },
-    showDisabledFormMessage() {
-      return this.isDisabled && !this.fetchSettingsError;
-    },
-    unavailableFeatureMessage() {
-      return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT;
-    },
-    isEdited() {
-      if (isEmpty(this.containerExpirationPolicy) && isEmpty(this.workingCopy)) {
-        return false;
-      }
-      return !isEqual(this.containerExpirationPolicy, this.workingCopy);
-    },
-  },
-  methods: {
-    restoreOriginal() {
-      this.workingCopy = { ...this.containerExpirationPolicy };
-    },
+    ContainerExpirationPolicy,
   },
 };
 </script>
 
 <template>
   <section data-testid="registry-settings-app">
-    <settings-block :collapsible="false">
-      <template #title> {{ __('Clean up image tags') }}</template>
-      <template #description>
-        <span data-testid="description">
-          <gl-sprintf
-            :message="
-              __(
-                'Save storage space by automatically deleting tags from the container registry and keeping the ones you want. %{linkStart}How does cleanup work?%{linkEnd}',
-              )
-            "
-          >
-            <template #link="{ content }">
-              <gl-link :href="helpPagePath" target="_blank">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </span>
-      </template>
-      <template #default>
-        <settings-form
-          v-if="!isDisabled"
-          v-model="workingCopy"
-          :is-loading="$apollo.queries.containerExpirationPolicy.loading"
-          :is-edited="isEdited"
-          @reset="restoreOriginal"
-        />
-        <template v-else>
-          <gl-alert
-            v-if="showDisabledFormMessage"
-            :dismissible="false"
-            :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE"
-            variant="tip"
-          >
-            {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }}
-
-            <gl-sprintf :message="unavailableFeatureMessage">
-              <template #link="{ content }">
-                <gl-link :href="adminSettingsPath" target="_blank">{{ content }}</gl-link>
-              </template>
-            </gl-sprintf>
-          </gl-alert>
-          <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false">
-            <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" />
-          </gl-alert>
-        </template>
-      </template>
-    </settings-block>
+    <container-expiration-policy />
   </section>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/constants.js b/app/assets/javascripts/packages_and_registries/settings/project/constants.js
index 841585c5646..40f980d15fb 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/constants.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/constants.js
@@ -1,5 +1,9 @@
 import { s__, __ } from '~/locale';
 
+export const CONTAINER_CLEANUP_POLICY_TITLE = s__(`ContainerRegistry|Clean up image tags`);
+export const CONTAINER_CLEANUP_POLICY_DESCRIPTION = s__(
+  `ContainerRegistry|Save storage space by automatically deleting tags from the container registry and keeping the ones you want. %{linkStart}How does cleanup work?%{linkEnd}`,
+);
 export const SET_CLEANUP_POLICY_BUTTON = __('Save');
 export const UNAVAILABLE_FEATURE_TITLE = s__(
   `ContainerRegistry|Cleanup policy for tags is disabled`,