1 files changed, 60 insertions, 28 deletions
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 edbe9441e57..6da2e3a47e8 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
@@ -9,17 +9,28 @@ import {
   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 CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
 import SettingsForm from './settings_form.vue';
 
 export default {
   components: {
+    SettingsBlock,
     SettingsForm,
+    CleanupPolicyEnabledAlert,
     GlAlert,
     GlSprintf,
     GlLink,
   },
-  inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries'],
+  inject: [
+    'projectPath',
+    'isAdmin',
+    'adminSettingsPath',
+    'enableHistoricEntries',
+    'helpPagePath',
+    'showCleanupPolicyOnAlert',
+  ],
   i18n: {
     UNAVAILABLE_FEATURE_TITLE,
     UNAVAILABLE_FEATURE_INTRO_TEXT,
@@ -75,32 +86,53 @@ export default {
 </script>
 
 <template>
-  <div>
-    <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 }}
+  <section data-testid="registry-settings-app">
+    <cleanup-policy-enabled-alert v-if="showCleanupPolicyOnAlert" :project-path="projectPath" />
+    <settings-block default-expanded>
+      <template #title> {{ __('Clean up image tags') }}</template>
+      <template #description>
+        <span data-testid="description">
+          <gl-sprintf
+            :message="
+              __(
+                'Save space and find images in the container Registry. remove unneeded tags and keep only 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>
-  </div>
+            <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>
+  </section>
 </template>