Adds feature flag to reorganise project level registry settings

Added feature-flag `reorganize_project_level_registry_settings`

Added sections for package & container registry settings

app/assets/javascripts/packages_and_registries/settings/project/components/container_registry_section.vue

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+    SettingsBlock,
+  },
+  containerRegistryHelpPath: helpPagePath('user/packages/container_registry/index.md'),
+};
+</script>
+
+<template>
+  <settings-block
+    id="container-registry-settings"
+    :title="s__('ContainerRegistry|Container registry')"
+  >
+    <template #description>
+      <gl-sprintf
+        :message="
+          s__(
+            'ContainerRegistry|The %{linkStart}GitLab Container Registry%{linkEnd} is a secure and private registry for container images. It’s built on open source software and completely integrated within GitLab. Use GitLab CI/CD to create and publish images. Use the GitLab API to manage the registry across groups and projects.',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="$options.containerRegistryHelpPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+  </settings-block>
+</template>

app/assets/javascripts/packages_and_registries/settings/project/components/package_registry_section.vue

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+    SettingsBlock,
+  },
+  supportedPackageManagersHelpPath: helpPagePath(
+    'user/packages/package_registry/supported_package_managers.md',
+  ),
+};
+</script>
+
+<template>
+  <settings-block id="package-registry-settings" :title="s__('PackageRegistry|Package registry')">
+    <template #description>
+      <gl-sprintf
+        :message="
+          s__(
+            'PackageRegistry|With the GitLab package registry, you can use GitLab as a private or public registry for a variety of %{linkStart}supported package managers%{linkEnd}. You can publish and share packages, which can be consumed as a dependency in downstream projects.',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="$options.supportedPackageManagersHelpPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+  </settings-block>
+</template>

app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue

@@ -13,14 +13,18 @@ import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/co
 import PackagesProtectionRules from '~/packages_and_registries/settings/project/components/packages_protection_rules.vue';
 import MetadataDatabaseAlert from '~/packages_and_registries/shared/components/container_registry_metadata_database_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import PackageRegistrySection from '~/packages_and_registries/settings/project/components/package_registry_section.vue';
+import ContainerRegistrySection from '~/packages_and_registries/settings/project/components/container_registry_section.vue';
 
 export default {
   components: {
     ContainerExpirationPolicy,
     ContainerProtectionRules,
+    ContainerRegistrySection,
     DependencyProxyPackagesSettings,
     GlAlert,
     MetadataDatabaseAlert,
+    PackageRegistrySection,
     PackagesCleanupPolicy,
     PackagesProtectionRules,
   },
@@ -45,6 +49,9 @@ export default {
         this.glFeatures.containerRegistryProtectedContainers && this.showContainerRegistrySettings
       );
     },
+    showReorganisedSettings() {
+      return this.glFeatures.reorganizeProjectLevelRegistrySettings;
+    },
   },
   mounted() {
     this.checkAlert();
@@ -68,7 +75,6 @@ export default {
     data-testid="packages-and-registries-project-settings"
     class="js-hide-when-nothing-matches-search"
   >
-    <metadata-database-alert v-if="!isContainerRegistryMetadataDatabaseEnabled" class="gl-mt-5" />
     <gl-alert
       v-if="showAlert"
       variant="success"
@@ -78,12 +84,19 @@ export default {
     >
       {{ $options.i18n.UPDATE_SETTINGS_SUCCESS_MESSAGE }}
     </gl-alert>
-    <template v-if="showPackageRegistrySettings">
-      <packages-protection-rules />
-      <packages-cleanup-policy />
+    <template v-if="showReorganisedSettings">
+      <package-registry-section v-if="showPackageRegistrySettings" />
+      <container-registry-section v-if="showContainerRegistrySettings" />
+    </template>
+    <template v-else>
+      <metadata-database-alert v-if="!isContainerRegistryMetadataDatabaseEnabled" class="gl-mt-5" />
+      <template v-if="showPackageRegistrySettings">
+        <packages-protection-rules />
+        <packages-cleanup-policy />
+      </template>
+      <container-protection-rules v-if="showProtectedContainersSettings" />
+      <container-expiration-policy v-if="showContainerRegistrySettings" />
+      <dependency-proxy-packages-settings v-if="showDependencyProxySettings" />
     </template>
-    <container-protection-rules v-if="showProtectedContainersSettings" />
-    <container-expiration-policy v-if="showContainerRegistrySettings" />
-    <dependency-proxy-packages-settings v-if="showDependencyProxySettings" />
   </div>
 </template>

app/controllers/projects/settings/packages_and_registries_controller.rb

@@ -9,6 +9,7 @@ class PackagesAndRegistriesController < Projects::ApplicationController
       before_action :packages_and_registries_settings_enabled!
       before_action :set_feature_flag_packages_protected_packages, only: :show
       before_action :set_feature_flag_container_registry_protected_containers, only: :show
+      before_action :set_feature_flag_reorganise_settings, only: :show
 
       feature_category :package_registry
       urgency :low
@@ -40,6 +41,10 @@ def set_feature_flag_packages_protected_packages
       def set_feature_flag_container_registry_protected_containers
         push_frontend_feature_flag(:container_registry_protected_containers, project.root_ancestor)
       end
+
+      def set_feature_flag_reorganise_settings
+        push_frontend_feature_flag(:reorganize_project_level_registry_settings, project)
+      end
     end
   end
 end

app/views/projects/settings/packages_and_registries/show.html.haml

@@ -2,4 +2,6 @@
 - page_title _('Packages and registries settings')
 - @force_desktop_expanded_sidebar = true
 
+%h1.gl-sr-only= @breadcrumb_title
+
 #js-registry-settings{ data: settings_data(@project) }

config/feature_flags/wip/reorganize_project_level_registry_settings.yml

+---
+name: reorganize_project_level_registry_settings
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/500217
+introduced_by_url:
+rollout_issue_url:
+milestone: '17.7'
+group: group::container registry
+type: wip
+default_enabled: false

locale/gitlab.pot

@@ -14925,6 +14925,9 @@ msgstr ""
 msgid "ContainerRegistry|Container protection rule updated."
 msgstr ""
+msgid "ContainerRegistry|Container registry"
+msgstr ""
+
 msgid "ContainerRegistry|Container registry cleanup policies"
 msgstr ""
@@ -15179,6 +15182,9 @@ msgstr ""
 msgid "ContainerRegistry|Tags with names that match this regex pattern are removed. %{linkStart}View regex examples.%{linkEnd}"
 msgstr ""
+msgid "ContainerRegistry|The %{linkStart}GitLab Container Registry%{linkEnd} is a secure and private registry for container images. It’s built on open source software and completely integrated within GitLab. Use GitLab CI/CD to create and publish images. Use the GitLab API to manage the registry across groups and projects."
+msgstr ""
+
 msgid "ContainerRegistry|The %{linkStart}next-generation container registry%{linkEnd} is now available for upgrade on self-managed instances. This upgraded registry supports online garbage collection, and has significant performance and reliability improvements."
 msgstr ""
@@ -39288,6 +39294,9 @@ 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|With the GitLab package registry, you can use GitLab as a private or public registry for a variety of %{linkStart}supported package managers%{linkEnd}. You can publish and share packages, which can be consumed as a dependency in downstream projects."
+msgstr ""
+
 msgid "PackageRegistry|Yes, delete package"
 msgstr ""

spec/frontend/packages_and_registries/settings/project/settings/components/container_registry_section_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import ContainerRegistrySection from '~/packages_and_registries/settings/project/components/container_registry_section.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+describe('Container registry project settings section', () => {
+  let wrapper;
+
+  const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
+  const findLink = () => findSettingsBlock().findComponent(GlLink);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(ContainerRegistrySection, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  describe('settings', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('renders with title', () => {
+      expect(findSettingsBlock().props('title')).toBe('Container registry');
+    });
+
+    it('renders with description', () => {
+      expect(findSettingsBlock().text()).toBe(
+        'The GitLab Container Registry is a secure and private registry for container images. It’s built on open source software and completely integrated within GitLab. Use GitLab CI/CD to create and publish images. Use the GitLab API to manage the registry across groups and projects.',
+      );
+    });
+
+    it('renders the help page link with correct href', () => {
+      const link = findLink();
+      const docsPath = helpPagePath('/user/packages/container_registry/index.md');
+
+      expect(link.attributes('href')).toBe(docsPath);
+    });
+  });
+});

spec/frontend/packages_and_registries/settings/project/settings/components/package_registry_section_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import PackageRegistrySection from '~/packages_and_registries/settings/project/components/package_registry_section.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+describe('Package registry project settings section', () => {
+  let wrapper;
+
+  const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
+  const findLink = () => findSettingsBlock().findComponent(GlLink);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(PackageRegistrySection, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  describe('settings', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('renders with title', () => {
+      expect(findSettingsBlock().props('title')).toBe('Package registry');
+    });
+
+    it('renders with description', () => {
+      expect(findSettingsBlock().text()).toBe(
+        'With the GitLab package registry, you can use GitLab as a private or public registry for a variety of supported package managers. You can publish and share packages, which can be consumed as a dependency in downstream projects.',
+      );
+    });
+
+    it('renders the help page link with correct href', () => {
+      const link = findLink();
+      const docsPath = helpPagePath('user/packages/package_registry/supported_package_managers.md');
+
+      expect(link.attributes('href')).toBe(docsPath);
+    });
+  });
+});

spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js

@@ -10,6 +10,8 @@ import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/co
 import PackagesProtectionRules from '~/packages_and_registries/settings/project/components/packages_protection_rules.vue';
 import DependencyProxyPackagesSettings from 'ee_component/packages_and_registries/settings/project/components/dependency_proxy_packages_settings.vue';
 import MetadataDatabaseAlert from '~/packages_and_registries/shared/components/container_registry_metadata_database_alert.vue';
+import PackageRegistrySection from '~/packages_and_registries/settings/project/components/package_registry_section.vue';
+import ContainerRegistrySection from '~/packages_and_registries/settings/project/components/container_registry_section.vue';
 import {
   SHOW_SETUP_SUCCESS_ALERT,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
@@ -28,15 +30,17 @@ describe('Registry Settings app', () => {
     wrapper.findComponent(DependencyProxyPackagesSettings);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findMetadataDatabaseAlert = () => wrapper.findComponent(MetadataDatabaseAlert);
+  const findContainerRegistrySection = () => wrapper.findComponent(ContainerRegistrySection);
+  const findPackageRegistrySection = () => wrapper.findComponent(PackageRegistrySection);
 
   const defaultProvide = {
-    projectPath: 'path',
     showContainerRegistrySettings: true,
     showPackageRegistrySettings: true,
     showDependencyProxySettings: false,
     ...(IS_EE && { showDependencyProxySettings: true }),
     glFeatures: {
       containerRegistryProtectedContainers: true,
+      reorganizeProjectLevelRegistrySettings: false,
     },
     isContainerRegistryMetadataDatabaseEnabled: false,
   };
@@ -153,4 +157,40 @@ describe('Registry Settings app', () => {
       );
     });
   });
+
+  describe('when feature flag "reorganizeProjectLevelRegistrySettings" is enabled', () => {
+    it('does not show existing sections', () => {
+      mountComponent({
+        ...defaultProvide,
+        glFeatures: { reorganizeProjectLevelRegistrySettings: true },
+      });
+
+      expect(findContainerExpirationPolicy().exists()).toBe(false);
+      expect(findContainerProtectionRules().exists()).toBe(false);
+      expect(findPackagesCleanupPolicy().exists()).toBe(false);
+      expect(findPackagesProtectionRules().exists()).toBe(false);
+      expect(findDependencyProxyPackagesSettings().exists()).toBe(false);
+    });
+
+    it.each`
+      showContainerRegistrySettings | showPackageRegistrySettings
+      ${true}                       | ${false}
+      ${true}                       | ${true}
+      ${false}                      | ${true}
+      ${false}                      | ${false}
+    `(
+      'container registry section $showContainerRegistrySettings and package registry section is $showPackageRegistrySettings',
+      ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
+        mountComponent({
+          ...defaultProvide,
+          showContainerRegistrySettings,
+          showPackageRegistrySettings,
+          glFeatures: { reorganizeProjectLevelRegistrySettings: true },
+        });
+
+        expect(findContainerRegistrySection().exists()).toBe(showContainerRegistrySettings);
+        expect(findPackageRegistrySection().exists()).toBe(showPackageRegistrySettings);
+      },
+    );
+  });
 });