From 5655b6cf283c132c982f2d7bf7ea4ce5c868683a Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Wed, 22 Jun 2022 16:59:53 +1000
Subject: [PATCH 01/12] Adds package cleanup policy project settings

Changelog: added
EE: true
---
 .../container_expiration_policy.vue           |   2 +-
 .../components/expiration_dropdown.vue        |  10 +
 .../components/packages_cleanup_policy.vue    |  68 +++++
 .../packages_cleanup_policy_form.vue          | 134 +++++++++
 .../components/registry_settings_app.vue      |   8 +-
 .../settings/project/constants.js             |  24 ++
 .../packages_cleanup_policy.fragment.graphql  |   4 +
 ...e_packages_cleanup_policy.mutation.graphql |  10 +
 .../get_packages_cleanup_policy.query.graphql |  10 +
 .../project/registry_settings_bundle.js       |   4 +
 .../settings/project/utils.js                 |  23 +-
 app/helpers/packages_helper.rb                |  10 +
 app/policies/project_policy.rb                |   6 +-
 .../packages_and_registries/show.html.haml    |   2 +
 .../settings/registry_settings_spec.rb        |  20 +-
 ...tainer_expiration_policy_form_spec.js.snap |   3 +
 .../packages_cleanup_policy_form_spec.js.snap |  12 +
 .../container_expiration_policy_spec.js       |   7 +-
 .../components/expiration_dropdown_spec.js    |   9 +
 .../packages_cleanup_policy_form_spec.js      | 257 ++++++++++++++++++
 .../packages_cleanup_policy_spec.js           |  82 ++++++
 .../components/registry_settings_app_spec.js  |  49 +++-
 .../settings/project/settings/mock_data.js    |  30 ++
 spec/policies/project_policy_spec.rb          | 133 +++++++--
 24 files changed, 876 insertions(+), 41 deletions(-)
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/graphql/fragments/packages_cleanup_policy.fragment.graphql
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql
 create mode 100644 spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
 create mode 100644 spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
 create mode 100644 spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js

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
index fdc7bd39780cf6..90a18d5cf5a4f5 100644
--- 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
@@ -81,7 +81,7 @@ export default {
 </script>
 
 <template>
-  <settings-block :collapsible="false">
+  <settings-block data-testid="container-expiration-policy-project-settings">
     <template #title> {{ $options.i18n.CONTAINER_CLEANUP_POLICY_TITLE }}</template>
     <template #description>
       <span>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_dropdown.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_dropdown.vue
index d75fb31fd98e6b..7682754fdcb7ca 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_dropdown.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_dropdown.vue
@@ -30,6 +30,11 @@ export default {
       type: String,
       required: true,
     },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 };
 </script>
@@ -46,5 +51,10 @@ export default {
         {{ option.label }}
       </option>
     </gl-form-select>
+    <template v-if="description" #description>
+      <span data-testid="description" class="gl-text-gray-400">
+        {{ description }}
+      </span>
+    </template>
   </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy.vue
new file mode 100644
index 00000000000000..1170407a3492ef
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import {
+  FETCH_SETTINGS_ERROR_MESSAGE,
+  PACKAGES_CLEANUP_POLICY_TITLE,
+  PACKAGES_CLEANUP_POLICY_DESCRIPTION,
+} from '~/packages_and_registries/settings/project/constants';
+import packagesCleanupPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+
+import PackagesCleanupPolicyForm from './packages_cleanup_policy_form.vue';
+
+export default {
+  components: {
+    SettingsBlock,
+    GlAlert,
+    GlSprintf,
+    PackagesCleanupPolicyForm,
+  },
+  inject: ['projectPath'],
+  i18n: {
+    FETCH_SETTINGS_ERROR_MESSAGE,
+    PACKAGES_CLEANUP_POLICY_TITLE,
+    PACKAGES_CLEANUP_POLICY_DESCRIPTION,
+  },
+  apollo: {
+    packagesCleanupPolicy: {
+      query: packagesCleanupPolicyQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update: (data) => data.project?.packagesCleanupPolicy || {},
+      error(e) {
+        this.fetchSettingsError = e;
+      },
+    },
+  },
+  data() {
+    return {
+      fetchSettingsError: false,
+      packagesCleanupPolicy: {},
+    };
+  },
+};
+</script>
+
+<template>
+  <settings-block>
+    <template #title> {{ $options.i18n.PACKAGES_CLEANUP_POLICY_TITLE }}</template>
+    <template #description>
+      <span data-testid="description">
+        <gl-sprintf :message="$options.i18n.PACKAGES_CLEANUP_POLICY_DESCRIPTION" />
+      </span>
+    </template>
+    <template #default>
+      <gl-alert v-if="fetchSettingsError" variant="warning" :dismissible="false">
+        <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" />
+      </gl-alert>
+      <packages-cleanup-policy-form
+        v-else
+        v-model="packagesCleanupPolicy"
+        :is-loading="$apollo.queries.packagesCleanupPolicy.loading"
+      />
+    </template>
+  </settings-block>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
new file mode 100644
index 00000000000000..6e8e1649cfc907
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import {
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+  SET_CLEANUP_POLICY_BUTTON,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
+} from '~/packages_and_registries/settings/project/constants';
+import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
+import { formOptionsGenerator } from '~/packages_and_registries/settings/project/utils';
+import Tracking from '~/tracking';
+import ExpirationDropdown from './expiration_dropdown.vue';
+
+export default {
+  components: {
+    GlButton,
+    ExpirationDropdown,
+  },
+  mixins: [Tracking.mixin()],
+  inject: ['projectPath'],
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  formOptions: formOptionsGenerator(),
+  i18n: {
+    KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
+    KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
+    SET_CLEANUP_POLICY_BUTTON,
+  },
+  data() {
+    return {
+      tracking: {
+        label: 'packages_cleanup_policies',
+      },
+      mutationLoading: false,
+    };
+  },
+  computed: {
+    prefilledForm() {
+      return {
+        ...this.value,
+        keepNDuplicatedPackageFiles: this.findDefaultOption('keepNDuplicatedPackageFiles'),
+      };
+    },
+    showLoadingIcon() {
+      return this.isLoading || this.mutationLoading;
+    },
+    isSubmitButtonDisabled() {
+      return this.showLoadingIcon;
+    },
+    isFieldDisabled() {
+      return this.showLoadingIcon;
+    },
+    mutationVariables() {
+      return {
+        projectPath: this.projectPath,
+        keepNDuplicatedPackageFiles: this.prefilledForm.keepNDuplicatedPackageFiles,
+      };
+    },
+  },
+  methods: {
+    findDefaultOption(option) {
+      return this.value[option] || this.$options.formOptions[option].find((f) => f.default)?.key;
+    },
+    submit() {
+      this.track('submit_form');
+      this.mutationLoading = true;
+      return this.$apollo
+        .mutate({
+          mutation: updatePackagesCleanupPolicyMutation,
+          variables: {
+            input: this.mutationVariables,
+          },
+        })
+        .then(({ data }) => {
+          const errorMessage = data?.updatePackagesCleanupPolicy?.errors[0];
+          if (errorMessage) {
+            throw errorMessage;
+          } else {
+            this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+          }
+        })
+        .catch(() => {
+          this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE);
+        })
+        .finally(() => {
+          this.mutationLoading = false;
+        });
+    },
+    onModelChange(newValue, model) {
+      this.$emit('input', { ...this.value, [model]: newValue });
+    },
+  },
+};
+</script>
+
+<template>
+  <form ref="form-element" @submit.prevent="submit">
+    <div class="gl-md-max-w-50p">
+      <expiration-dropdown
+        v-model="prefilledForm.keepNDuplicatedPackageFiles"
+        :disabled="isFieldDisabled"
+        :form-options="$options.formOptions.keepNDuplicatedPackageFiles"
+        :label="$options.i18n.KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL"
+        :description="$options.i18n.KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION"
+        name="keep-n-duplicated-package-files"
+        data-testid="keep-n-duplicated-package-files-dropdown"
+        @input="onModelChange($event, 'keepNDuplicatedPackageFiles')"
+      />
+    </div>
+    <div class="gl-mt-7 gl-display-flex gl-align-items-center">
+      <gl-button
+        data-testid="save-button"
+        type="submit"
+        :disabled="isSubmitButtonDisabled"
+        :loading="showLoadingIcon"
+        category="primary"
+        variant="confirm"
+        class="js-no-auto-disable gl-mr-4"
+      >
+        {{ $options.i18n.SET_CLEANUP_POLICY_BUTTON }}
+      </gl-button>
+    </div>
+  </form>
+</template>
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 95af19e6d85158..44a5fb9db2ddc5 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,15 +1,19 @@
 <script>
 import ContainerExpirationPolicy from './container_expiration_policy.vue';
+import PackagesCleanupPolicy from './packages_cleanup_policy.vue';
 
 export default {
   components: {
     ContainerExpirationPolicy,
+    PackagesCleanupPolicy,
   },
+  inject: ['showContainerRegistrySettings', 'showPackageRegistrySettings'],
 };
 </script>
 
 <template>
-  <section data-testid="registry-settings-app">
-    <container-expiration-policy />
+  <section>
+    <packages-cleanup-policy v-if="showPackageRegistrySettings" />
+    <container-expiration-policy v-if="showContainerRegistrySettings" />
   </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 40f980d15fb9b5..84294677de51db 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/constants.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/constants.js
@@ -55,6 +55,30 @@ 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 PACKAGES_CLEANUP_POLICY_TITLE = s__(
+  'PackageRegistry|Manage storage used by package assets',
+);
+export const PACKAGES_CLEANUP_POLICY_DESCRIPTION = s__(
+  'PackageRegistry|When a package with same name and version is uploaded to the registry, more assets are added to the package. To save storage space, keep only the most recent assets.',
+);
+export const KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL = s__(
+  'PackageRegistry|Number of duplicate assets to keep',
+);
+export const KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION = s__(
+  'PackageRegistry|Examples of assets include .pom & .jar files',
+);
+
+export const KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS = [
+  { key: 'ONE_PACKAGE_FILE', variable: 1, default: false },
+  { key: 'TEN_PACKAGE_FILES', variable: 10, default: false },
+  { key: 'TWENTY_PACKAGE_FILES', variable: 20, default: false },
+  { key: 'THIRTY_PACKAGE_FILES', variable: 30, default: false },
+  { key: 'FORTY_PACKAGE_FILES', variable: 40, default: false },
+  { key: 'FIFTY_PACKAGE_FILES', variable: 50, default: false },
+  { key: 'SEVENTY', variable: 70, default: false },
+  { key: 'ALL_PACKAGE_FILES', label: __('All'), default: true },
+];
+
 export const KEEP_N_OPTIONS = [
   { key: 'ONE_TAG', variable: 1, default: false },
   { key: 'FIVE_TAGS', variable: 5, default: false },
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/graphql/fragments/packages_cleanup_policy.fragment.graphql b/app/assets/javascripts/packages_and_registries/settings/project/graphql/fragments/packages_cleanup_policy.fragment.graphql
new file mode 100644
index 00000000000000..a77ede37884004
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/graphql/fragments/packages_cleanup_policy.fragment.graphql
@@ -0,0 +1,4 @@
+fragment PackagesCleanupPolicyFields on PackagesCleanupPolicy {
+  keepNDuplicatedPackageFiles
+  nextRunAt
+}
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql
new file mode 100644
index 00000000000000..31cdd67e881fdf
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/packages_cleanup_policy.fragment.graphql"
+
+mutation updatePackagesCleanupPolicy($input: UpdatePackagesCleanupPolicyInput!) {
+  updatePackagesCleanupPolicy(input: $input) {
+    packagesCleanupPolicy {
+      ...PackagesCleanupPolicyFields
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql b/app/assets/javascripts/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql
new file mode 100644
index 00000000000000..0e9af253f2c4b2
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/packages_cleanup_policy.fragment.graphql"
+
+query getProjectPackagesCleanupPolicy($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    id
+    packagesCleanupPolicy {
+      ...PackagesCleanupPolicyFields
+    }
+  }
+}
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_bundle.js b/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_bundle.js
index 17c330736680d3..daf1da6eac8ef8 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_bundle.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_bundle.js
@@ -20,6 +20,8 @@ export default () => {
     adminSettingsPath,
     tagsRegexHelpPagePath,
     helpPagePath,
+    showContainerRegistrySettings,
+    showPackageRegistrySettings,
   } = el.dataset;
   return new Vue({
     el,
@@ -34,6 +36,8 @@ export default () => {
       adminSettingsPath,
       tagsRegexHelpPagePath,
       helpPagePath,
+      showContainerRegistrySettings: parseBoolean(showContainerRegistrySettings),
+      showPackageRegistrySettings: parseBoolean(showPackageRegistrySettings),
     },
     render(createElement) {
       return createElement('registry-settings-app', {});
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/utils.js b/app/assets/javascripts/packages_and_registries/settings/project/utils.js
index b577a051862e08..d76fd5312c3fa2 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/utils.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/utils.js
@@ -1,5 +1,10 @@
 import { n__ } from '~/locale';
-import { KEEP_N_OPTIONS, CADENCE_OPTIONS, OLDER_THAN_OPTIONS } from './constants';
+import {
+  KEEP_N_OPTIONS,
+  CADENCE_OPTIONS,
+  OLDER_THAN_OPTIONS,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS,
+} from './constants';
 
 export const findDefaultOption = (options) => {
   const item = options.find((o) => o.default);
@@ -11,12 +16,17 @@ export const olderThanTranslationGenerator = (variable) => n__('%d day', '%d day
 export const keepNTranslationGenerator = (variable) =>
   n__('%d tag per image name', '%d tags per image name', variable);
 
-export const optionLabelGenerator = (collection, translationFn) => {
+export const keepNDuplicatedPackageFilesTranslationGenerator = (variable) =>
+  n__('%d', '%d', variable);
+
+export const optionLabelGenerator = (collection, translationFn, { withEmptyLabel = true } = {}) => {
   const result = collection.map((option) => ({
     ...option,
-    label: translationFn(option.variable),
+    label: option.label || translationFn(option.variable),
   }));
-  result.unshift({ key: null, label: '' });
+  if (withEmptyLabel) {
+    result.unshift({ key: null, label: '' });
+  }
   return result;
 };
 
@@ -25,5 +35,10 @@ export const formOptionsGenerator = () => {
     olderThan: optionLabelGenerator(OLDER_THAN_OPTIONS, olderThanTranslationGenerator),
     cadence: CADENCE_OPTIONS,
     keepN: optionLabelGenerator(KEEP_N_OPTIONS, keepNTranslationGenerator),
+    keepNDuplicatedPackageFiles: optionLabelGenerator(
+      KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS,
+      keepNDuplicatedPackageFilesTranslationGenerator,
+      { withEmptyLabel: false },
+    ),
   };
 };
diff --git a/app/helpers/packages_helper.rb b/app/helpers/packages_helper.rb
index 20d40626449fba..ec64746d6b65d9 100644
--- a/app/helpers/packages_helper.rb
+++ b/app/helpers/packages_helper.rb
@@ -53,4 +53,14 @@ def show_cleanup_policy_link(project)
     project.container_expiration_policy.nil? &&
     project.container_repositories.exists?
   end
+
+  def show_container_registry_settings(project)
+    Gitlab.config.registry.enabled &&
+    Ability.allowed?(current_user, :admin_container_image, project)
+  end
+
+  def show_package_registry_settings(project)
+    Gitlab.config.packages.enabled &&
+    Ability.allowed?(current_user, :admin_package, project)
+  end
 end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index c54dbefc1ae8f3..ed489ef2fa7125 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -225,6 +225,10 @@ class ProjectPolicy < BasePolicy
     Gitlab.config.registry.enabled
   end
 
+  condition :packages_enabled do
+    Gitlab.config.packages.enabled
+  end
+
   # `:read_project` may be prevented in EE, but `:read_project_for_iids` should
   # not.
   rule { guest | admin }.enable :read_project_for_iids
@@ -790,7 +794,7 @@ class ProjectPolicy < BasePolicy
     enable :import_project_members_from_another_project
   end
 
-  rule { registry_enabled & can?(:admin_container_image) }.policy do
+  rule { (registry_enabled & can?(:admin_container_image)) | (packages_enabled & can?(:admin_package)) }.policy do
     enable :view_package_registry_project_settings
   end
 
diff --git a/app/views/projects/settings/packages_and_registries/show.html.haml b/app/views/projects/settings/packages_and_registries/show.html.haml
index 378bb0f9306448..1a7821d326812e 100644
--- a/app/views/projects/settings/packages_and_registries/show.html.haml
+++ b/app/views/projects/settings/packages_and_registries/show.html.haml
@@ -8,6 +8,8 @@
     keep_n_options: keep_n_options.to_json,
     older_than_options: older_than_options.to_json,
     is_admin: current_user&.admin.to_s,
+    show_container_registry_settings: show_container_registry_settings(@project).to_s,
+    show_package_registry_settings: show_package_registry_settings(@project).to_s,
     admin_settings_path: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'),
     enable_historic_entries: container_expiration_policies_historic_entry_enabled?.to_s,
     help_page_path: help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'cleanup-policy'),
diff --git a/spec/features/projects/settings/registry_settings_spec.rb b/spec/features/projects/settings/registry_settings_spec.rb
index ff28d59ed08854..9468540736f1ab 100644
--- a/spec/features/projects/settings/registry_settings_spec.rb
+++ b/spec/features/projects/settings/registry_settings_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration policy', :js do
+RSpec.describe 'Project > Settings > Packages & Registries > Container registry tag expiration policy', :js do
   let_it_be(:user) { create(:user) }
   let_it_be(:project, reload: true) { create(:project, namespace: user.namespace) }
 
@@ -23,14 +23,15 @@
     it 'shows available section' do
       subject
 
-      settings_block = find('[data-testid="registry-settings-app"]')
+      settings_block = find('[data-testid="container-expiration-policy-project-settings"]')
       expect(settings_block).to have_text 'Clean up image tags'
     end
 
     it 'saves cleanup policy submit the form' do
       subject
 
-      within '[data-testid="registry-settings-app"]' do
+      within '[data-testid="container-expiration-policy-project-settings"]' do
+        click_button('Expand')
         select('Every day', from: 'Run cleanup')
         select('50 tags per image name', from: 'Keep the most recent:')
         fill_in('Keep tags matching:', with: 'stable')
@@ -48,7 +49,8 @@
     it 'does not save cleanup policy submit form with invalid regex' do
       subject
 
-      within '[data-testid="registry-settings-app"]' do
+      within '[data-testid="container-expiration-policy-project-settings"]' do
+        click_button('Expand')
         fill_in('Remove tags matching:', with: '*-production')
 
         submit_button = find('[data-testid="save-button"')
@@ -73,7 +75,8 @@
       it 'displays the related section' do
         subject
 
-        within '[data-testid="registry-settings-app"]' do
+        within '[data-testid="container-expiration-policy-project-settings"]' do
+          click_button('Expand')
           expect(find('[data-testid="enable-toggle"]')).to have_content('Disabled - Tags will not be automatically deleted.')
         end
       end
@@ -87,7 +90,8 @@
       it 'does not display the related section' do
         subject
 
-        within '[data-testid="registry-settings-app"]' do
+        within '[data-testid="container-expiration-policy-project-settings"]' do
+          click_button('Expand')
           expect(find('.gl-alert-title')).to have_content('Cleanup policy for tags is disabled')
         end
       end
@@ -100,7 +104,7 @@
     it 'does not exists' do
       subject
 
-      expect(page).not_to have_selector('[data-testid="registry-settings-app"]')
+      expect(page).not_to have_selector('[data-testid="container-expiration-policy-project-settings"]')
     end
   end
 
@@ -110,7 +114,7 @@
     it 'does not exists' do
       subject
 
-      expect(page).not_to have_selector('[data-testid="registry-settings-app"]')
+      expect(page).not_to have_selector('[data-testid="container-expiration-policy-project-settings"]')
     end
   end
 end
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
index faa313118f3ee1..108d9478788884 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Container Expiration Policy Settings Form Cadence matches snapshot 1`]
 <expiration-dropdown-stub
   class="gl-mr-7 gl-mb-0!"
   data-testid="cadence-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Run cleanup:"
   name="cadence"
@@ -22,6 +23,7 @@ exports[`Container Expiration Policy Settings Form Enable matches snapshot 1`] =
 exports[`Container Expiration Policy Settings Form Keep N matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="keep-n-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Keep the most recent:"
   name="keep-n"
@@ -44,6 +46,7 @@ exports[`Container Expiration Policy Settings Form Keep Regex matches snapshot 1
 exports[`Container Expiration Policy Settings Form OlderThan matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="older-than-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Remove tags older than:"
   name="older-than"
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
new file mode 100644
index 00000000000000..f6b561cd993c4e
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Packages Cleanup Policy Settings Form keepNDuplicatedPackageFiles matches snapshot 1`] = `
+<expiration-dropdown-stub
+  data-testid="keep-n-duplicated-package-files-dropdown"
+  description="Examples of assets include .pom & .jar files"
+  formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+  label="Number of duplicate assets to keep"
+  name="keep-n-duplicated-package-files"
+  value="ALL_PACKAGE_FILES"
+/>
+`;
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
index aa3506771faf71..d83c717da6a52c 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
@@ -43,11 +43,6 @@ describe('Container expiration policy project settings', () => {
         GlSprintf,
         SettingsBlock,
       },
-      mocks: {
-        $toast: {
-          show: jest.fn(),
-        },
-      },
       provide,
       ...config,
     });
@@ -98,7 +93,7 @@ describe('Container expiration policy project settings', () => {
     await waitForPromises();
 
     expect(findFormComponent().exists()).toBe(true);
-    expect(findSettingsBlock().props('collapsible')).toBe(false);
+    expect(findSettingsBlock().exists()).toBe(true);
   });
 
   describe('the form is disabled', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
index 5c9ade7f785464..8b99ac6b06cfdb 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
@@ -16,6 +16,7 @@ describe('ExpirationDropdown', () => {
 
   const findFormSelect = () => wrapper.find(GlFormSelect);
   const findFormGroup = () => wrapper.find(GlFormGroup);
+  const findDescription = () => wrapper.find('[data-testid="description"]');
   const findOptions = () => wrapper.findAll('[data-testid="option"]');
 
   const mountComponent = (props) => {
@@ -47,6 +48,14 @@ describe('ExpirationDropdown', () => {
 
       expect(findOptions()).toHaveLength(defaultProps.formOptions.length);
     });
+
+    it('renders the description if passed', () => {
+      mountComponent({
+        description: 'test description',
+      });
+
+      expect(findDescription().html()).toContain('test description');
+    });
   });
 
   describe('model', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
new file mode 100644
index 00000000000000..3d7d1b28c8cfeb
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -0,0 +1,257 @@
+import { shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import {
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+} from '~/packages_and_registries/settings/project/constants';
+import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
+import Tracking from '~/tracking';
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyMutationPayload } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages Cleanup Policy Settings Form', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const {
+    data: {
+      project: { packagesCleanupPolicy },
+    },
+  } = packagesCleanupPolicyPayload();
+
+  const defaultProps = {
+    value: { ...packagesCleanupPolicy },
+  };
+
+  const trackingPayload = {
+    label: 'packages_cleanup_policies',
+  };
+
+  const findForm = () => wrapper.find({ ref: 'form-element' });
+
+  const findSaveButton = () => wrapper.find('[data-testid="save-button"');
+  const findKeepNDuplicatedPackageFilesDropdown = () =>
+    wrapper.find('[data-testid="keep-n-duplicated-package-files-dropdown"]');
+
+  const submitForm = async () => {
+    findForm().trigger('submit');
+    return waitForPromises();
+  };
+
+  const mountComponent = ({
+    props = defaultProps,
+    data,
+    config,
+    provide = defaultProvidedValues,
+  } = {}) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlLoadingIcon,
+      },
+      propsData: { ...props },
+      provide,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      mocks: {
+        $toast: {
+          show: jest.fn(),
+        },
+      },
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({
+    provide = defaultProvidedValues,
+    mutationResolver,
+    queryPayload = packagesCleanupPolicyPayload(),
+  } = {}) => {
+    const requestHandlers = [[updatePackagesCleanupPolicyMutation, mutationResolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+
+    const {
+      data: {
+        project: { packagesCleanupPolicy: value },
+      },
+    } = queryPayload;
+
+    mountComponent({
+      provide,
+      props: {
+        ...defaultProps,
+        value,
+      },
+      config: {
+        apolloProvider: fakeApollo,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('keepNDuplicatedPackageFiles', () => {
+    it('matches snapshot', () => {
+      mountComponent();
+
+      expect(findKeepNDuplicatedPackageFilesDropdown().element).toMatchSnapshot();
+    });
+
+    it('input event triggers a model update', () => {
+      mountComponent();
+
+      findKeepNDuplicatedPackageFilesDropdown().vm.$emit('input', 'foo');
+      expect(wrapper.emitted('input')[0][0]).toMatchObject({
+        keepNDuplicatedPackageFiles: 'foo',
+      });
+    });
+
+    it('shows the default option when none are selected', () => {
+      mountComponent({ props: { value: {} } });
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('value')).toEqual('ALL_PACKAGE_FILES');
+    });
+
+    it.each`
+      isLoading | mutationLoading
+      ${true}   | ${false}
+      ${true}   | ${true}
+      ${false}  | ${true}
+    `(
+      'is disabled when is loading is $isLoading and mutationLoading is $mutationLoading',
+      ({ isLoading, mutationLoading }) => {
+        mountComponent({
+          props: { isLoading, value: {} },
+          data: { mutationLoading },
+        });
+        expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toEqual(true);
+      },
+    );
+
+    it('has the correct formOptions', () => {
+      mountComponent();
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('formOptions')).toEqual(
+        wrapper.vm.$options.formOptions.keepNDuplicatedPackageFiles,
+      );
+    });
+  });
+
+  describe('form', () => {
+    describe('actions', () => {
+      describe('submit button', () => {
+        it('has type submit', () => {
+          mountComponent();
+
+          expect(findSaveButton().attributes('type')).toBe('submit');
+        });
+
+        it.each`
+          isLoading | mutationLoading | disabled
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is disabled',
+          ({ isLoading, mutationLoading, disabled }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('disabled')).toBe(disabled);
+            expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toBe(disabled);
+          },
+        );
+
+        it.each`
+          isLoading | mutationLoading | showLoading
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is $showLoading that the loading icon is shown',
+          ({ isLoading, mutationLoading, showLoading }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('loading')).toBe(showLoading);
+          },
+        );
+      });
+    });
+
+    describe('form submit event', () => {
+      it('dispatches the correct apollo mutation', () => {
+        const mutationResolver = jest
+          .fn()
+          .mockResolvedValue(packagesCleanupPolicyMutationPayload());
+        mountComponentWithApollo({
+          mutationResolver,
+        });
+
+        findForm().trigger('submit');
+
+        expect(mutationResolver).toHaveBeenCalledWith({
+          input: {
+            keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+            projectPath: 'path',
+          },
+        });
+      });
+
+      it('tracks the submit event', () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        findForm().trigger('submit');
+
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
+      });
+
+      it('show a success toast when submit succeed', async () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        await submitForm();
+
+        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+      });
+
+      describe('when submit fails', () => {
+        it('shows an error', async () => {
+          mountComponentWithApollo({
+            mutationResolver: jest.fn().mockRejectedValue(packagesCleanupPolicyMutationPayload()),
+          });
+
+          await submitForm();
+
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
new file mode 100644
index 00000000000000..fa3db4f1703f1e
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
@@ -0,0 +1,82 @@
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
+import PackagesCleanupPolicyForm from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '~/packages_and_registries/settings/project/constants';
+import packagesCleanupPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyData } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages cleanup policy project settings', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const findFormComponent = () => wrapper.find(PackagesCleanupPolicyForm);
+  const findAlert = () => wrapper.find(GlAlert);
+  const findSettingsBlock = () => wrapper.find(SettingsBlock);
+
+  const mountComponent = (provide = defaultProvidedValues, config) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlSprintf,
+        SettingsBlock,
+      },
+      provide,
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({ provide = defaultProvidedValues, resolver } = {}) => {
+    const requestHandlers = [[packagesCleanupPolicyQuery, resolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+    mountComponent(provide, {
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    fakeApollo = null;
+  });
+
+  it('renders the setting form', async () => {
+    mountComponentWithApollo({
+      resolver: jest.fn().mockResolvedValue(packagesCleanupPolicyPayload()),
+    });
+    await waitForPromises();
+
+    expect(findFormComponent().exists()).toBe(true);
+    expect(findFormComponent().props('value')).toEqual(packagesCleanupPolicyData);
+    expect(findSettingsBlock().exists()).toBe(true);
+  });
+
+  describe('fetchSettingsError', () => {
+    beforeEach(async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+      });
+      await waitForPromises();
+    });
+
+    it('the form is hidden', () => {
+      expect(findFormComponent().exists()).toBe(false);
+    });
+
+    it('shows an alert', () => {
+      expect(findAlert().html()).toContain(FETCH_SETTINGS_ERROR_MESSAGE);
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 337991dfae09a8..bdd2621b17c75f 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -1,19 +1,64 @@
 import { shallowMount } from '@vue/test-utils';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import ContainerExpirationPolicy from '~/packages_and_registries/settings/project/components/container_expiration_policy.vue';
+import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
 
 describe('Registry Settings app', () => {
   let wrapper;
+
   const findContainerExpirationPolicy = () => wrapper.find(ContainerExpirationPolicy);
+  const findPackagesCleanupPolicy = () => wrapper.find(PackagesCleanupPolicy);
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('renders container expiration policy component', () => {
-    wrapper = shallowMount(component);
+  const defaultProvidedValues = {
+    showContainerRegistrySettings: false,
+    showPackageRegistrySettings: false,
+  };
+
+  const mountComponent = (provide = defaultProvidedValues) => {
+    wrapper = shallowMount(component, {
+      provide,
+    });
+  };
+
+  it('does not render any component', () => {
+    mountComponent();
+
+    expect(findContainerExpirationPolicy().exists()).toBe(false);
+    expect(findPackagesCleanupPolicy().exists()).toBe(false);
+  });
+
+  it('renders only packages cleanup policy component', () => {
+    mountComponent({
+      showContainerRegistrySettings: false,
+      showPackageRegistrySettings: true,
+    });
+
+    expect(findContainerExpirationPolicy().exists()).toBe(false);
+    expect(findPackagesCleanupPolicy().exists()).toBe(true);
+  });
+
+  it('renders only container expiration policy component', () => {
+    mountComponent({
+      showContainerRegistrySettings: true,
+      showPackageRegistrySettings: false,
+    });
+
+    expect(findContainerExpirationPolicy().exists()).toBe(true);
+    expect(findPackagesCleanupPolicy().exists()).toBe(false);
+  });
+
+  it('renders both components', () => {
+    mountComponent({
+      showContainerRegistrySettings: true,
+      showPackageRegistrySettings: true,
+    });
 
     expect(findContainerExpirationPolicy().exists()).toBe(true);
+    expect(findPackagesCleanupPolicy().exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index 33406c98f4b74c..d4b6c66ddeb53d 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -40,3 +40,33 @@ export const expirationPolicyMutationPayload = ({ override, errors = [] } = {})
     },
   },
 });
+
+export const packagesCleanupPolicyData = {
+  keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+  nextRunAt: '2020-11-19T07:37:03.941Z',
+};
+
+export const packagesCleanupPolicyPayload = (override) => ({
+  data: {
+    project: {
+      id: '1',
+      packagesCleanupPolicy: {
+        __typename: 'PackagesCleanupPolicy',
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+    },
+  },
+});
+
+export const packagesCleanupPolicyMutationPayload = ({ override, errors = [] } = {}) => ({
+  data: {
+    updatePackagesCleanupPolicy: {
+      packagesCleanupPolicy: {
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+      errors,
+    },
+  },
+});
diff --git a/spec/policies/project_policy_spec.rb b/spec/policies/project_policy_spec.rb
index de36b755e88ba4..c041c72a0be143 100644
--- a/spec/policies/project_policy_spec.rb
+++ b/spec/policies/project_policy_spec.rb
@@ -1480,43 +1480,142 @@ def set_access_level(access_level)
   end
 
   describe 'view_package_registry_project_settings' do
-    context 'with registry enabled' do
+    context 'with packages disabled and' do
       before do
-        stub_config(registry: { enabled: true })
+        stub_config(packages: { enabled: false })
       end
 
-      context 'with an admin user' do
-        let(:current_user) { admin }
+      context 'with registry enabled' do
+        before do
+          stub_config(registry: { enabled: true })
+        end
 
-        context 'when admin mode enabled', :enable_admin_mode do
-          it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+        context 'with an admin user' do
+          let(:current_user) { admin }
+
+          context 'when admin mode enabled', :enable_admin_mode do
+            it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+          end
+
+          context 'when admin mode disabled' do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
         end
 
-        context 'when admin mode disabled' do
-          it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+        %i[owner maintainer].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+          end
+        end
+
+        %i[developer reporter guest non_member anonymous].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
         end
       end
 
-      %i[owner maintainer].each do |role|
-        context "with #{role}" do
-          let(:current_user) { public_send(role) }
+      context 'with registry disabled' do
+        before do
+          stub_config(registry: { enabled: false })
+        end
+
+        context 'with admin user' do
+          let(:current_user) { admin }
+
+          context 'when admin mode enabled', :enable_admin_mode do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+
+          context 'when admin mode disabled' do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+        end
 
-          it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+        %i[owner maintainer developer reporter guest non_member anonymous].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
         end
       end
+    end
 
-      %i[developer reporter guest non_member anonymous].each do |role|
-        context "with #{role}" do
-          let(:current_user) { public_send(role) }
+    context 'with registry disabled and' do
+      before do
+        stub_config(registry: { enabled: false })
+      end
 
-          it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+      context 'with packages enabled' do
+        before do
+          stub_config(packages: { enabled: true })
+        end
+
+        context 'with an admin user' do
+          let(:current_user) { admin }
+
+          context 'when admin mode enabled', :enable_admin_mode do
+            it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+          end
+
+          context 'when admin mode disabled' do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+        end
+
+        %i[owner maintainer].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_allowed(:view_package_registry_project_settings) }
+          end
+        end
+
+        %i[developer reporter guest non_member anonymous].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+        end
+      end
+
+      context 'with packages disabled' do
+        before do
+          stub_config(packages: { enabled: false })
+        end
+
+        context 'with admin user' do
+          let(:current_user) { admin }
+
+          context 'when admin mode enabled', :enable_admin_mode do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+
+          context 'when admin mode disabled' do
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
+        end
+
+        %i[owner maintainer developer reporter guest non_member anonymous].each do |role|
+          context "with #{role}" do
+            let(:current_user) { public_send(role) }
+
+            it { is_expected.to be_disallowed(:view_package_registry_project_settings) }
+          end
         end
       end
     end
 
-    context 'with registry disabled' do
+    context 'with registry & packages both disabled' do
       before do
         stub_config(registry: { enabled: false })
+        stub_config(packages: { enabled: false })
       end
 
       context 'with admin user' do
-- 
GitLab


From c57ee13eba4c72eeebb7dc2e63385cd99db4c17d Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Wed, 22 Jun 2022 17:20:54 +1000
Subject: [PATCH 02/12] Adds output of bin/rake gettext:regenerate

---
 .../settings/project/constants.js               |  1 -
 locale/gitlab.pot                               | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

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 84294677de51db..18aa2f033a21d3 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/constants.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/constants.js
@@ -75,7 +75,6 @@ export const KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS = [
   { key: 'THIRTY_PACKAGE_FILES', variable: 30, default: false },
   { key: 'FORTY_PACKAGE_FILES', variable: 40, default: false },
   { key: 'FIFTY_PACKAGE_FILES', variable: 50, default: false },
-  { key: 'SEVENTY', variable: 70, default: false },
   { key: 'ALL_PACKAGE_FILES', label: __('All'), default: true },
 ];
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 035792e23df999..de6bd143b376db 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -73,6 +73,11 @@ msgstr ""
 msgid "#general, #development"
 msgstr ""
 
+msgid "%d"
+msgid_plural "%d"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d Alert"
 msgid_plural "%d Alerts"
 msgstr[0] ""
@@ -27659,6 +27664,9 @@ msgstr ""
 msgid "PackageRegistry|Error publishing"
 msgstr ""
 
+msgid "PackageRegistry|Examples of assets include .pom & .jar files"
+msgstr ""
+
 msgid "PackageRegistry|Failed to load the package data"
 msgstr ""
 
@@ -27716,6 +27724,9 @@ msgstr ""
 msgid "PackageRegistry|License information located at %{link}"
 msgstr ""
 
+msgid "PackageRegistry|Manage storage used by package assets"
+msgstr ""
+
 msgid "PackageRegistry|Manually Published"
 msgstr ""
 
@@ -27734,6 +27745,9 @@ msgstr ""
 msgid "PackageRegistry|NuGet Command"
 msgstr ""
 
+msgid "PackageRegistry|Number of duplicate assets to keep"
+msgstr ""
+
 msgid "PackageRegistry|Package Registry"
 msgstr ""
 
@@ -27859,6 +27873,9 @@ msgstr ""
 msgid "PackageRegistry|Unable to load package"
 msgstr ""
 
+msgid "PackageRegistry|When a package with same name and version is uploaded to the registry, more assets are added to the package. To save storage space, keep only the most recent assets."
+msgstr ""
+
 msgid "PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?"
 msgstr ""
 
-- 
GitLab


From 64019284c1801521e0a49b7acbb91425177a4456 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Wed, 22 Jun 2022 17:37:14 +1000
Subject: [PATCH 03/12] Use it.each for registry settings app spec

---
 .../components/registry_settings_app_spec.js  | 61 ++++++-------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index bdd2621b17c75f..f576bc79eaea0e 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -14,51 +14,28 @@ describe('Registry Settings app', () => {
     wrapper = null;
   });
 
-  const defaultProvidedValues = {
-    showContainerRegistrySettings: false,
-    showPackageRegistrySettings: false,
-  };
-
-  const mountComponent = (provide = defaultProvidedValues) => {
+  const mountComponent = (provide) => {
     wrapper = shallowMount(component, {
       provide,
     });
   };
 
-  it('does not render any component', () => {
-    mountComponent();
-
-    expect(findContainerExpirationPolicy().exists()).toBe(false);
-    expect(findPackagesCleanupPolicy().exists()).toBe(false);
-  });
-
-  it('renders only packages cleanup policy component', () => {
-    mountComponent({
-      showContainerRegistrySettings: false,
-      showPackageRegistrySettings: true,
-    });
-
-    expect(findContainerExpirationPolicy().exists()).toBe(false);
-    expect(findPackagesCleanupPolicy().exists()).toBe(true);
-  });
-
-  it('renders only container expiration policy component', () => {
-    mountComponent({
-      showContainerRegistrySettings: true,
-      showPackageRegistrySettings: false,
-    });
-
-    expect(findContainerExpirationPolicy().exists()).toBe(true);
-    expect(findPackagesCleanupPolicy().exists()).toBe(false);
-  });
-
-  it('renders both components', () => {
-    mountComponent({
-      showContainerRegistrySettings: true,
-      showPackageRegistrySettings: true,
-    });
-
-    expect(findContainerExpirationPolicy().exists()).toBe(true);
-    expect(findPackagesCleanupPolicy().exists()).toBe(true);
-  });
+  it.each`
+    showContainerRegistrySettings | showPackageRegistrySettings
+    ${true}                       | ${false}
+    ${true}                       | ${true}
+    ${false}                      | ${true}
+    ${false}                      | ${false}
+  `(
+    'container expiration policy $showContainerRegistrySettings and package cleanup policy is $showPackageRegistrySettings',
+    ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
+      mountComponent({
+        showContainerRegistrySettings,
+        showPackageRegistrySettings,
+      });
+
+      expect(findContainerExpirationPolicy().exists()).toBe(showContainerRegistrySettings);
+      expect(findPackagesCleanupPolicy().exists()).toBe(showPackageRegistrySettings);
+    },
+  );
 });
-- 
GitLab


From b9efa3a79316d8949b523c51920e8e0061a74447 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Wed, 22 Jun 2022 21:46:29 +1000
Subject: [PATCH 04/12] Fix failing tests

Update feature specs related to navbar
---
 ee/spec/features/projects/navbar_spec.rb      | 24 +++++++++----------
 spec/features/projects/navbar_spec.rb         | 18 ++++++++------
 .../packages_cleanup_policy_form_spec.js.snap |  2 +-
 .../projects/menus/settings_menu_spec.rb      | 19 +++++++++++++--
 .../navbar_structure_context.rb               |  1 +
 .../nav/sidebar/_project.html.haml_spec.rb    | 14 +++++++++++
 6 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/ee/spec/features/projects/navbar_spec.rb b/ee/spec/features/projects/navbar_spec.rb
index 38bd28951db7f6..87b3189743efcd 100644
--- a/ee/spec/features/projects/navbar_spec.rb
+++ b/ee/spec/features/projects/navbar_spec.rb
@@ -97,25 +97,23 @@
   context 'when packages are available' do
     before do
       stub_config(packages: { enabled: true }, registry: { enabled: false })
-    end
 
-    context 'when container registry is available' do
-      before do
-        stub_config(registry: { enabled: true })
+      visit project_path(project)
+    end
 
-        insert_container_nav
+    it_behaves_like 'verified navigation bar'
+  end
 
-        insert_after_sub_nav_item(
-          _('CI/CD'),
-          within: _('Settings'),
-          new_sub_nav_item_name: _('Packages & Registries')
-        )
+  context 'when container registry is available' do
+    before do
+      stub_config(packages: { enabled: true }, registry: { enabled: true })
 
-        visit project_path(project)
-      end
+      insert_container_nav
 
-      it_behaves_like 'verified navigation bar'
+      visit project_path(project)
     end
+
+    it_behaves_like 'verified navigation bar'
   end
 
   context 'when harbor registry is available' do
diff --git a/spec/features/projects/navbar_spec.rb b/spec/features/projects/navbar_spec.rb
index 023601b0b1eff5..e07a5d09405595 100644
--- a/spec/features/projects/navbar_spec.rb
+++ b/spec/features/projects/navbar_spec.rb
@@ -49,7 +49,7 @@
       stub_config(pages: { enabled: true })
 
       insert_after_sub_nav_item(
-        _('CI/CD'),
+        _('Packages & Registries'),
         within: _('Settings'),
         new_sub_nav_item_name: _('Pages')
       )
@@ -60,18 +60,22 @@
     it_behaves_like 'verified navigation bar'
   end
 
+  context 'when package registry is available' do
+    before do
+      stub_config(packages: { enabled: true })
+
+      visit project_path(project)
+    end
+
+    it_behaves_like 'verified navigation bar'
+  end
+
   context 'when container registry is available' do
     before do
       stub_config(registry: { enabled: true })
 
       insert_container_nav
 
-      insert_after_sub_nav_item(
-        _('CI/CD'),
-        within: _('Settings'),
-        new_sub_nav_item_name: _('Packages & Registries')
-      )
-
       visit project_path(project)
     end
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
index f6b561cd993c4e..750f036af910ce 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
@@ -4,7 +4,7 @@ exports[`Packages Cleanup Policy Settings Form keepNDuplicatedPackageFiles match
 <expiration-dropdown-stub
   data-testid="keep-n-duplicated-package-files-dropdown"
   description="Examples of assets include .pom & .jar files"
-  formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+  formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Number of duplicate assets to keep"
   name="keep-n-duplicated-package-files"
   value="ALL_PACKAGE_FILES"
diff --git a/spec/lib/sidebars/projects/menus/settings_menu_spec.rb b/spec/lib/sidebars/projects/menus/settings_menu_spec.rb
index d6136dddf4055e..f41f7a01d88afd 100644
--- a/spec/lib/sidebars/projects/menus/settings_menu_spec.rb
+++ b/spec/lib/sidebars/projects/menus/settings_menu_spec.rb
@@ -135,18 +135,20 @@
 
     describe 'Packages & Registries' do
       let(:item_id) { :packages_and_registries }
+      let(:packages_enabled) { false }
 
       before do
         stub_container_registry_config(enabled: container_enabled)
+        stub_config(packages: { enabled: packages_enabled })
       end
 
-      describe 'when config registry setting is disabled' do
+      describe 'when container registry setting is disabled' do
         let(:container_enabled) { false }
 
         specify { is_expected.to be_nil }
       end
 
-      describe 'when config registry setting is enabled' do
+      describe 'when container registry setting is enabled' do
         let(:container_enabled) { true }
 
         specify { is_expected.not_to be_nil }
@@ -157,6 +159,19 @@
           specify { is_expected.to be_nil }
         end
       end
+
+      describe 'when package registry setting is enabled' do
+        let(:container_enabled) { false }
+        let(:packages_enabled) { true }
+
+        specify { is_expected.not_to be_nil }
+
+        describe 'when the user does not have access' do
+          let(:user) { nil }
+
+          specify { is_expected.to be_nil }
+        end
+      end
     end
 
     describe 'Usage Quotas' do
diff --git a/spec/support/shared_contexts/navbar_structure_context.rb b/spec/support/shared_contexts/navbar_structure_context.rb
index b523af385f48e2..6c2ed79b343b3c 100644
--- a/spec/support/shared_contexts/navbar_structure_context.rb
+++ b/spec/support/shared_contexts/navbar_structure_context.rb
@@ -110,6 +110,7 @@
           _('Access Tokens'),
           _('Repository'),
           _('CI/CD'),
+          _('Packages & Registries'),
           _('Monitor'),
           s_('UsageQuota|Usage Quotas')
         ]
diff --git a/spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb b/spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb
index e3c2466f8073b2..9ae3f814679199 100644
--- a/spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb
+++ b/spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb
@@ -909,8 +909,11 @@
     end
 
     describe 'Packages & Registries' do
+      let(:packages_enabled) { false }
+
       before do
         stub_container_registry_config(enabled: registry_enabled)
+        stub_config(packages: { enabled: packages_enabled })
       end
 
       context 'when registry is enabled' do
@@ -932,6 +935,17 @@
           expect(rendered).not_to have_link('Packages & Registries', href: project_settings_packages_and_registries_path(project))
         end
       end
+
+      context 'when packages config is enabled' do
+        let(:registry_enabled) { false }
+        let(:packages_enabled) { true }
+
+        it 'has a link to the Packages & Registries settings' do
+          render
+
+          expect(rendered).to have_link('Packages & Registries', href: project_settings_packages_and_registries_path(project))
+        end
+      end
     end
 
     describe 'Usage Quotas' do
-- 
GitLab


From 0fbab9edfb02f95b73df04a6422109e1d769a62e Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Mon, 27 Jun 2022 14:12:38 +1000
Subject: [PATCH 05/12] Convert wrapping section to div

---
 .../settings/project/components/registry_settings_app.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 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 44a5fb9db2ddc5..710cfe7b1eb5c2 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
@@ -12,8 +12,8 @@ export default {
 </script>
 
 <template>
-  <section>
+  <div>
     <packages-cleanup-policy v-if="showPackageRegistrySettings" />
     <container-expiration-policy v-if="showContainerRegistrySettings" />
-  </section>
+  </div>
 </template>
-- 
GitLab


From a55aecb3d27b9a7cc7e21591658ede412bbd5304 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Wed, 29 Jun 2022 14:37:07 +1000
Subject: [PATCH 06/12] Update policy rule

---
 app/policies/project_policy.rb | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index ed489ef2fa7125..5e9ffb07092b0f 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -794,7 +794,11 @@ class ProjectPolicy < BasePolicy
     enable :import_project_members_from_another_project
   end
 
-  rule { (registry_enabled & can?(:admin_container_image)) | (packages_enabled & can?(:admin_package)) }.policy do
+  rule { registry_enabled & can?(:admin_container_image) }.policy do
+    enable :view_package_registry_project_settings
+  end
+
+  rule { packages_enabled & can?(:admin_package) }.policy do
     enable :view_package_registry_project_settings
   end
 
-- 
GitLab


From 59a53c4fbfbffe3fec6f4b49ec136e3ad5380ae4 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Fri, 1 Jul 2022 20:34:24 +1000
Subject: [PATCH 07/12] Address MR feedback

---
 .../project/components/packages_cleanup_policy_form.vue    | 2 +-
 .../components/packages_cleanup_policy_form_spec.js        | 2 +-
 .../settings/components/packages_cleanup_policy_spec.js    | 7 +++----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
index 6e8e1649cfc907..978778ea68abfe 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -82,7 +82,7 @@ export default {
           },
         })
         .then(({ data }) => {
-          const errorMessage = data?.updatePackagesCleanupPolicy?.errors[0];
+          const [errorMessage] = data?.updatePackagesCleanupPolicy?.errors;
           if (errorMessage) {
             throw errorMessage;
           } else {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
index 3d7d1b28c8cfeb..67e36233e63ea1 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -38,7 +38,6 @@ describe('Packages Cleanup Policy Settings Form', () => {
   };
 
   const findForm = () => wrapper.find({ ref: 'form-element' });
-
   const findSaveButton = () => wrapper.find('[data-testid="save-button"');
   const findKeepNDuplicatedPackageFilesDropdown = () =>
     wrapper.find('[data-testid="keep-n-duplicated-package-files-dropdown"]');
@@ -107,6 +106,7 @@ describe('Packages Cleanup Policy Settings Form', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    fakeApollo = null;
   });
 
   describe('keepNDuplicatedPackageFiles', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
index fa3db4f1703f1e..6dfeeca68620b8 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
@@ -22,9 +22,9 @@ describe('Packages cleanup policy project settings', () => {
     projectPath: 'path',
   };
 
-  const findFormComponent = () => wrapper.find(PackagesCleanupPolicyForm);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findSettingsBlock = () => wrapper.find(SettingsBlock);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findFormComponent = () => wrapper.findComponent(PackagesCleanupPolicyForm);
+  const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
 
   const mountComponent = (provide = defaultProvidedValues, config) => {
     wrapper = shallowMount(component, {
@@ -48,7 +48,6 @@ describe('Packages cleanup policy project settings', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
     fakeApollo = null;
   });
 
-- 
GitLab


From 6bf058faaf081405fb11d78b519e290eafc08159 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Mon, 4 Jul 2022 15:12:52 +1000
Subject: [PATCH 08/12] Remove translation for numbers in dropdown

Removed snapshot test & added assertion
---
 .../packages_cleanup_policy_form.vue           |  7 +++++--
 .../settings/project/constants.js              | 14 ++++++++------
 .../settings/project/utils.js                  | 18 +++++-------------
 locale/gitlab.pot                              |  5 -----
 .../packages_cleanup_policy_form_spec.js.snap  | 12 ------------
 .../packages_cleanup_policy_form_spec.js       | 10 ++++++++--
 6 files changed, 26 insertions(+), 40 deletions(-)
 delete mode 100644 spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
index 978778ea68abfe..a0d818289ee235 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -4,8 +4,9 @@ import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
   SET_CLEANUP_POLICY_BUTTON,
-  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
   KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
 } from '~/packages_and_registries/settings/project/constants';
 import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
 import { formOptionsGenerator } from '~/packages_and_registries/settings/project/utils';
@@ -48,7 +49,9 @@ export default {
     prefilledForm() {
       return {
         ...this.value,
-        keepNDuplicatedPackageFiles: this.findDefaultOption('keepNDuplicatedPackageFiles'),
+        [KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME]: this.findDefaultOption(
+          'keepNDuplicatedPackageFiles',
+        ),
       };
     },
     showLoadingIcon() {
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 18aa2f033a21d3..948520151ceb2a 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/constants.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/constants.js
@@ -68,13 +68,15 @@ export const KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION = s__(
   'PackageRegistry|Examples of assets include .pom & .jar files',
 );
 
+export const KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME = 'keepNDuplicatedPackageFiles';
+
 export const KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS = [
-  { key: 'ONE_PACKAGE_FILE', variable: 1, default: false },
-  { key: 'TEN_PACKAGE_FILES', variable: 10, default: false },
-  { key: 'TWENTY_PACKAGE_FILES', variable: 20, default: false },
-  { key: 'THIRTY_PACKAGE_FILES', variable: 30, default: false },
-  { key: 'FORTY_PACKAGE_FILES', variable: 40, default: false },
-  { key: 'FIFTY_PACKAGE_FILES', variable: 50, default: false },
+  { key: 'ONE_PACKAGE_FILE', label: 1, default: false },
+  { key: 'TEN_PACKAGE_FILES', label: 10, default: false },
+  { key: 'TWENTY_PACKAGE_FILES', label: 20, default: false },
+  { key: 'THIRTY_PACKAGE_FILES', label: 30, default: false },
+  { key: 'FORTY_PACKAGE_FILES', label: 40, default: false },
+  { key: 'FIFTY_PACKAGE_FILES', label: 50, default: false },
   { key: 'ALL_PACKAGE_FILES', label: __('All'), default: true },
 ];
 
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/utils.js b/app/assets/javascripts/packages_and_registries/settings/project/utils.js
index d76fd5312c3fa2..847965454e987e 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/utils.js
+++ b/app/assets/javascripts/packages_and_registries/settings/project/utils.js
@@ -3,6 +3,7 @@ import {
   KEEP_N_OPTIONS,
   CADENCE_OPTIONS,
   OLDER_THAN_OPTIONS,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME,
   KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS,
 } from './constants';
 
@@ -16,17 +17,12 @@ export const olderThanTranslationGenerator = (variable) => n__('%d day', '%d day
 export const keepNTranslationGenerator = (variable) =>
   n__('%d tag per image name', '%d tags per image name', variable);
 
-export const keepNDuplicatedPackageFilesTranslationGenerator = (variable) =>
-  n__('%d', '%d', variable);
-
-export const optionLabelGenerator = (collection, translationFn, { withEmptyLabel = true } = {}) => {
+export const optionLabelGenerator = (collection, translationFn) => {
   const result = collection.map((option) => ({
     ...option,
-    label: option.label || translationFn(option.variable),
+    label: translationFn(option.variable),
   }));
-  if (withEmptyLabel) {
-    result.unshift({ key: null, label: '' });
-  }
+  result.unshift({ key: null, label: '' });
   return result;
 };
 
@@ -35,10 +31,6 @@ export const formOptionsGenerator = () => {
     olderThan: optionLabelGenerator(OLDER_THAN_OPTIONS, olderThanTranslationGenerator),
     cadence: CADENCE_OPTIONS,
     keepN: optionLabelGenerator(KEEP_N_OPTIONS, keepNTranslationGenerator),
-    keepNDuplicatedPackageFiles: optionLabelGenerator(
-      KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS,
-      keepNDuplicatedPackageFilesTranslationGenerator,
-      { withEmptyLabel: false },
-    ),
+    [KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME]: KEEP_N_DUPLICATED_PACKAGE_FILES_OPTIONS,
   };
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index de6bd143b376db..d2b1e966e51a8b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -73,11 +73,6 @@ msgstr ""
 msgid "#general, #development"
 msgstr ""
 
-msgid "%d"
-msgid_plural "%d"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "%d Alert"
 msgid_plural "%d Alerts"
 msgstr[0] ""
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
deleted file mode 100644
index 750f036af910ce..00000000000000
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/packages_cleanup_policy_form_spec.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Packages Cleanup Policy Settings Form keepNDuplicatedPackageFiles matches snapshot 1`] = `
-<expiration-dropdown-stub
-  data-testid="keep-n-duplicated-package-files-dropdown"
-  description="Examples of assets include .pom & .jar files"
-  formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-  label="Number of duplicate assets to keep"
-  name="keep-n-duplicated-package-files"
-  value="ALL_PACKAGE_FILES"
-/>
-`;
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
index 67e36233e63ea1..c3cbfb9154dac5 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -8,6 +8,8 @@ import component from '~/packages_and_registries/settings/project/components/pac
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
 } from '~/packages_and_registries/settings/project/constants';
 import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
 import Tracking from '~/tracking';
@@ -110,10 +112,14 @@ describe('Packages Cleanup Policy Settings Form', () => {
   });
 
   describe('keepNDuplicatedPackageFiles', () => {
-    it('matches snapshot', () => {
+    it('renders dropdown', () => {
       mountComponent();
 
-      expect(findKeepNDuplicatedPackageFilesDropdown().element).toMatchSnapshot();
+      const element = findKeepNDuplicatedPackageFilesDropdown();
+
+      expect(element.exists()).toBe(true);
+      expect(element.props('label')).toMatchInterpolatedText(KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL);
+      expect(element.props('description')).toEqual(KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION);
     });
 
     it('input event triggers a model update', () => {
-- 
GitLab


From 5f458e83859d02e30d1cf874c92806d628789cbe Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Mon, 4 Jul 2022 15:16:19 +1000
Subject: [PATCH 09/12] change usage of constant

---
 .../project/components/packages_cleanup_policy_form.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
index a0d818289ee235..6c7cae99ebec69 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -49,8 +49,8 @@ export default {
     prefilledForm() {
       return {
         ...this.value,
-        [KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME]: this.findDefaultOption(
-          'keepNDuplicatedPackageFiles',
+        keepNDuplicatedPackageFiles: this.findDefaultOption(
+          KEEP_N_DUPLICATED_PACKAGE_FILES_FIELDNAME,
         ),
       };
     },
-- 
GitLab


From 093c119748630e3448d7b9f28a0212acb60a9f2a Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Mon, 4 Jul 2022 17:55:11 +1000
Subject: [PATCH 10/12] Remove unsafe usages of optional chaining

---
 .../project/components/packages_cleanup_policy_form.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
index 6c7cae99ebec69..1aa5bdefa32df7 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -85,7 +85,7 @@ export default {
           },
         })
         .then(({ data }) => {
-          const [errorMessage] = data?.updatePackagesCleanupPolicy?.errors;
+          const [errorMessage] = data?.updatePackagesCleanupPolicy?.errors ?? [];
           if (errorMessage) {
             throw errorMessage;
           } else {
-- 
GitLab


From 627f7c57633cb9b96ab81b6b7fc51c75a1210b67 Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Tue, 5 Jul 2022 19:06:03 +1000
Subject: [PATCH 11/12] Use findByTestId method instead of data-testid

---
 .../components/packages_cleanup_policy_form_spec.js       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
index c3cbfb9154dac5..a1c6706c246be4 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -1,7 +1,7 @@
-import { shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import Vue from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
 import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
@@ -40,9 +40,9 @@ describe('Packages Cleanup Policy Settings Form', () => {
   };
 
   const findForm = () => wrapper.find({ ref: 'form-element' });
-  const findSaveButton = () => wrapper.find('[data-testid="save-button"');
+  const findSaveButton = () => wrapper.findByTestId('save-button');
   const findKeepNDuplicatedPackageFilesDropdown = () =>
-    wrapper.find('[data-testid="keep-n-duplicated-package-files-dropdown"]');
+    wrapper.findByTestId('keep-n-duplicated-package-files-dropdown');
 
   const submitForm = async () => {
     findForm().trigger('submit');
@@ -55,7 +55,7 @@ describe('Packages Cleanup Policy Settings Form', () => {
     config,
     provide = defaultProvidedValues,
   } = {}) => {
-    wrapper = shallowMount(component, {
+    wrapper = shallowMountExtended(component, {
       stubs: {
         GlLoadingIcon,
       },
-- 
GitLab


From d02a5e329e3ec5dc5f04c61b96a3ef768e23e2ed Mon Sep 17 00:00:00 2001
From: Rahul Chanila <rchanila@gitlab.com>
Date: Tue, 19 Jul 2022 13:17:46 +1000
Subject: [PATCH 12/12] Modify event name so that it is unique

---
 .../project/components/packages_cleanup_policy_form.vue     | 2 +-
 .../components/packages_cleanup_policy_form_spec.js         | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
index 1aa5bdefa32df7..b1751d5174a07c 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue
@@ -75,7 +75,7 @@ export default {
       return this.value[option] || this.$options.formOptions[option].find((f) => f.default)?.key;
     },
     submit() {
-      this.track('submit_form');
+      this.track('submit_packages_cleanup_form');
       this.mutationLoading = true;
       return this.$apollo
         .mutate({
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
index a1c6706c246be4..86f45d78bae84c 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -234,7 +234,11 @@ describe('Packages Cleanup Policy Settings Form', () => {
 
         findForm().trigger('submit');
 
-        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
+        expect(Tracking.event).toHaveBeenCalledWith(
+          undefined,
+          'submit_packages_cleanup_form',
+          trackingPayload,
+        );
       });
 
       it('show a success toast when submit succeed', async () => {
-- 
GitLab