From b4819a81164e29d4e7b3ebc84e85110235afcde5 Mon Sep 17 00:00:00 2001
From: Gerardo Navarro <gerardo@b310.de>
Date: Thu, 4 Apr 2024 18:10:21 +0200
Subject: [PATCH] Protected packages + containers: Add count icon to list in
 settings UI

- Adding count icon (package icon + number of entries) to
  the tables `protected packages` and `protected containers`
- This icon element was suggested by @annabeldunstone in
  https://gitlab.com/gitlab-org/gitlab/-/merge_requests/146523#note_1838085406
- This MR addresses on point in the implementation plan, see
  https://gitlab.com/gitlab-org/gitlab/-/issues/413641#checklist-implementation-plan

Changelog: added
---
 .../components/container_protection_rules.vue | 13 +++++++++++-
 .../components/packages_protection_rules.vue  | 13 +++++++++++-
 ...egistry_protection_rules_count_resolver.rb | 15 ++++++++++++++
 app/graphql/types/project_type.rb             |  7 +++++++
 doc/api/graphql/reference/index.md            |  1 +
 .../container_protection_rules_spec.js        | 20 ++++++++++++++-----
 .../packages_protection_rules_spec.js         | 20 ++++++++++++++-----
 7 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 app/graphql/resolvers/project_container_registry_protection_rules_count_resolver.rb

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue
index 4ffd1e6085c9d0..51ae5b93f3ae74 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue
@@ -2,6 +2,7 @@
 import {
   GlAlert,
   GlCard,
+  GlIcon,
   GlTable,
   GlLoadingIcon,
   GlKeysetPagination,
@@ -30,6 +31,7 @@ export default {
   components: {
     GlAlert,
     GlCard,
+    GlIcon,
     GlKeysetPagination,
     GlLoadingIcon,
     GlTable,
@@ -91,6 +93,9 @@ export default {
     protectionRulesQueryResult() {
       return this.protectionRulesQueryPayload.nodes;
     },
+    protectionRulesQueryResultCount() {
+      return this.protectionRulesQueryResult.length;
+    },
     isLoadingprotectionRules() {
       return this.$apollo.queries.protectionRulesQueryPayload.loading;
     },
@@ -180,7 +185,13 @@ export default {
       >
         <template #header>
           <div class="gl-new-card-title-wrapper gl-justify-content-space-between">
-            <h3 class="gl-new-card-title">{{ $options.i18n.settingBlockTitle }}</h3>
+            <h3 class="gl-new-card-title">
+              {{ $options.i18n.settingBlockTitle }}
+              <span class="gl-new-card-count">
+                <gl-icon name="container-image" class="gl-mr-2" />
+                {{ protectionRulesQueryResultCount }}
+              </span>
+            </h3>
           </div>
         </template>
 
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
index 4522b37572d9bf..88fde9438187a5 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
@@ -3,6 +3,7 @@ import {
   GlAlert,
   GlButton,
   GlCard,
+  GlIcon,
   GlTable,
   GlLoadingIcon,
   GlKeysetPagination,
@@ -29,6 +30,7 @@ export default {
     SettingsBlock,
     GlButton,
     GlCard,
+    GlIcon,
     GlAlert,
     GlTable,
     GlLoadingIcon,
@@ -82,6 +84,9 @@ export default {
     packageProtectionRulesQueryResult() {
       return this.packageProtectionRulesQueryPayload.nodes;
     },
+    packageProtectionRulesQueryResultCount() {
+      return this.packageProtectionRulesQueryResult.length;
+    },
     isLoadingPackageProtectionRules() {
       return this.$apollo.queries.packageProtectionRulesQueryPayload.loading;
     },
@@ -269,7 +274,13 @@ export default {
       >
         <template #header>
           <div class="gl-new-card-title-wrapper gl-justify-content-space-between">
-            <h3 class="gl-new-card-title">{{ $options.i18n.settingBlockTitle }}</h3>
+            <h3 class="gl-new-card-title">
+              {{ $options.i18n.settingBlockTitle }}
+              <span class="gl-new-card-count">
+                <gl-icon name="package" class="gl-mr-2" />
+                {{ packageProtectionRulesQueryResultCount }}
+              </span>
+            </h3>
             <div class="gl-new-card-actions">
               <gl-button
                 size="small"
diff --git a/app/graphql/resolvers/project_container_registry_protection_rules_count_resolver.rb b/app/graphql/resolvers/project_container_registry_protection_rules_count_resolver.rb
new file mode 100644
index 00000000000000..1bed761c23664e
--- /dev/null
+++ b/app/graphql/resolvers/project_container_registry_protection_rules_count_resolver.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Resolvers
+  class ProjectContainerRegistryProtectionRulesCountResolver < BaseResolver
+    type Types::ContainerRegistry::Protection::RuleType.connection_type, null: true
+
+    alias_method :project, :object
+
+    def resolve(**_args)
+      return 0 if Feature.disabled?(:container_registry_protected_containers, project)
+
+      project.container_registry_protection_rules.size
+    end
+  end
+end
diff --git a/app/graphql/types/project_type.rb b/app/graphql/types/project_type.rb
index 0406c2ac273598..76008a18e94706 100644
--- a/app/graphql/types/project_type.rb
+++ b/app/graphql/types/project_type.rb
@@ -508,6 +508,13 @@ class ProjectType < BaseObject
       alpha: { milestone: '16.10' },
       resolver: Resolvers::ProjectContainerRegistryProtectionRulesResolver
 
+    field :container_registry_protection_rules_count,
+      Types::ContainerRegistry::Protection::RuleType.connection_type,
+      null: true,
+      description: 'Number of container protection rules in the project.',
+      alpha: { milestone: '16.11' },
+      resolver: Resolvers::ProjectContainerRegistryProtectionRulesCountResolver
+
     field :container_repositories, Types::ContainerRepositoryType.connection_type,
       null: true,
       description: 'Container repositories of the project.',
diff --git a/doc/api/graphql/reference/index.md b/doc/api/graphql/reference/index.md
index 776ba0926e8c6e..dd2fcf56c97d80 100644
--- a/doc/api/graphql/reference/index.md
+++ b/doc/api/graphql/reference/index.md
@@ -25522,6 +25522,7 @@ Check permissions for the current user on a vulnerability finding.
 | <a id="projectcontainerexpirationpolicy"></a>`containerExpirationPolicy` | [`ContainerExpirationPolicy`](#containerexpirationpolicy) | Container expiration policy of the project. |
 | <a id="projectcontainerregistryenabled"></a>`containerRegistryEnabled` | [`Boolean`](#boolean) | Indicates if Container Registry is enabled for the current user. |
 | <a id="projectcontainerregistryprotectionrules"></a>`containerRegistryProtectionRules` **{warning-solid}** | [`ContainerRegistryProtectionRuleConnection`](#containerregistryprotectionruleconnection) | **Introduced** in GitLab 16.10. **Status**: Experiment. Container protection rules for the project. |
+| <a id="projectcontainerregistryprotectionrulescount"></a>`containerRegistryProtectionRulesCount` **{warning-solid}** | [`ContainerRegistryProtectionRuleConnection`](#containerregistryprotectionruleconnection) | **Introduced** in GitLab 16.11. **Status**: Experiment. Number of container protection rules in the project. |
 | <a id="projectcontainerrepositoriescount"></a>`containerRepositoriesCount` | [`Int!`](#int) | Number of container repositories in the project. |
 | <a id="projectcorpuses"></a>`corpuses` | [`CoverageFuzzingCorpusConnection`](#coveragefuzzingcorpusconnection) | Find corpuses of the project. (see [Connections](#connections)) |
 | <a id="projectcreatedat"></a>`createdAt` | [`Time`](#time) | Timestamp of the project creation. |
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js
index 5b95bdc2ea9e5e..f96dc62b8fd3a2 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js
@@ -60,13 +60,23 @@ describe('Container protection rules project settings', () => {
     });
   };
 
-  it('renders the setting block with table', async () => {
-    createComponent();
+  describe('setting block "protected containers"', () => {
+    it('renders the setting block with table', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findSettingsBlock().exists()).toBe(true);
+      expect(findTable().exists()).toBe(true);
+    });
 
-    await waitForPromises();
+    it('renders the setting block with icon and correct number', async () => {
+      createComponent();
 
-    expect(findSettingsBlock().exists()).toBe(true);
-    expect(findTable().exists()).toBe(true);
+      await waitForPromises();
+
+      expect(extendedWrapper(wrapper.findByRole('heading')).text()).toContain('10');
+    });
   });
 
   describe('table "package protection rules"', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
index a7670ef2efc5ca..272ac6b169dc1f 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
@@ -84,13 +84,23 @@ describe('Packages protection rules project settings', () => {
     });
   };
 
-  it('renders the setting block with table', async () => {
-    createComponent();
+  describe('setting block "protected containers"', () => {
+    it('renders the setting block with table', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findSettingsBlock().exists()).toBe(true);
+      expect(findTable().exists()).toBe(true);
+    });
 
-    await waitForPromises();
+    it('renders the setting block with icon and correct number', async () => {
+      createComponent();
 
-    expect(findSettingsBlock().exists()).toBe(true);
-    expect(findTable().exists()).toBe(true);
+      await waitForPromises();
+
+      expect(extendedWrapper(wrapper.findByRole('heading')).text()).toContain('10');
+    });
   });
 
   describe('table "package protection rules"', () => {
-- 
GitLab