Merge branch '501456-polices-bug-complieance-framework-label' into 'master'

Add projects label for exceeding number per page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/171342



Merged-by: Alexander Turinske <aturinske@gitlab.com>
Approved-by: Alexander Turinske <aturinske@gitlab.com>
Co-authored-by: Artur Fedorov <afedorov@gitlab.com>

ee/app/assets/javascripts/security_orchestration/components/policy_drawer/compliance_frameworks_toggle_list.vue

@@ -4,6 +4,7 @@ import { sprintf, __ } from '~/locale';
 import {
   COMPLIANCE_FRAMEWORKS_DESCRIPTION,
   COMPLIANCE_FRAMEWORKS_DESCRIPTION_NO_PROJECTS,
+  COMPLIANCE_FRAMEWORKS_DESCRIPTION_OVER_MAX_NUMBER_OF_PROJECTS,
 } from 'ee/security_orchestration/components/policy_drawer/constants';
 
 export default {
@@ -22,6 +23,11 @@ export default {
       required: false,
       default: 0,
     },
+    defaultProjectPageSize: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
   },
   computed: {
     hasHiddenLabels() {
@@ -51,8 +57,22 @@ export default {
         return COMPLIANCE_FRAMEWORKS_DESCRIPTION_NO_PROJECTS;
       }
 
+      if (this.hasMoreProjects) {
+        return sprintf(COMPLIANCE_FRAMEWORKS_DESCRIPTION_OVER_MAX_NUMBER_OF_PROJECTS, {
+          pageSize: this.defaultProjectPageSize,
+        });
+      }
+
       return COMPLIANCE_FRAMEWORKS_DESCRIPTION(this.projectsLength);
     },
+    hasMoreProjects() {
+      return this.projectsLength >= this.defaultProjectPageSize && this.hasNextPage;
+    },
+    hasNextPage() {
+      return this.complianceFrameworks.some(
+        (framework) => framework.projects.pageInfo?.hasNextPage,
+      );
+    },
     projectsLength() {
       const allProjectsOfComplianceFrameworks = this.complianceFrameworks
         ?.flatMap(({ projects = {} }) => projects?.nodes?.map(({ id }) => id))

ee/app/assets/javascripts/security_orchestration/components/policy_drawer/constants.js

@@ -23,6 +23,10 @@ export const COMPLIANCE_FRAMEWORKS_DESCRIPTION = (projectsCount) =>
     projectsCount,
   );
 
+export const COMPLIANCE_FRAMEWORKS_DESCRIPTION_OVER_MAX_NUMBER_OF_PROJECTS = s__(
+  `SecurityOrchestration|%{pageSize}+ projects which have compliance framework:`,
+);
+
 export const COMPLIANCE_FRAMEWORKS_DESCRIPTION_NO_PROJECTS = s__(
   'SecurityOrchestration|This applies to following compliance frameworks:',
 );

ee/app/assets/javascripts/security_orchestration/graphql/fragments/policy_scope.fragment.graphql

@@ -11,6 +11,9 @@ fragment PolicyScope on PolicyScope {
         nodes {
           id
         }
+        pageInfo {
+          ...PageInfo
+        }
       }
     }
     pageInfo {

ee/spec/frontend/security_orchestration/components/policy_drawer/compliance_frameworks_toggle_list_spec.js

@@ -35,6 +35,18 @@ describe('ComplianceFrameworksToggleList', () => {
     });
   });
 
+  describe('projects exceed page size', () => {
+    it('renders correct label when project list is bigger then default page size', () => {
+      createComponent({
+        propsData: {
+          defaultProjectPageSize: 2,
+        },
+      });
+
+      expect(findHeader().text()).toBe('2+ projects which have compliance framework:');
+    });
+  });
+
   describe('single framework', () => {
     beforeEach(() => {
       createComponent({
@@ -55,8 +67,8 @@ describe('ComplianceFrameworksToggleList', () => {
 
     it.each`
       labelsToShow | expectedLength | expectedText
-      ${2}         | ${2}           | ${'+ 1 more'}
-      ${1}         | ${1}           | ${'+ 2 more'}
+      ${2}         | ${2}           | ${'+ 2 more'}
+      ${1}         | ${1}           | ${'+ 3 more'}
     `('can show only partial list', ({ labelsToShow, expectedLength, expectedText }) => {
       createComponent({
         propsData: {

ee/spec/frontend/security_orchestration/mocks/mock_apollo.js

@@ -128,6 +128,29 @@ export const complianceFrameworksResponse = [
       ],
     },
   },
+  {
+    id: convertToGraphQLId(TYPE_COMPLIANCE_FRAMEWORK, 4),
+    name: 'a4',
+    default: true,
+    description: 'description 4',
+    color: '#cd5b45',
+    pipelineConfigurationFullPath: 'path 4',
+    projects: {
+      nodes: [
+        {
+          id: '1',
+          name: 'project-1',
+        },
+        {
+          id: '2',
+          name: 'project-2',
+        },
+      ],
+      pageInfo: {
+        hasNextPage: true,
+      },
+    },
+  },
 ];
 
 export const mockLinkedSppItemsResponse = ({ projects = [], namespaces = [], groups = [] } = {}) =>

locale/gitlab.pot

@@ -49446,6 +49446,9 @@ msgstr ""
 msgid "SecurityOrchestration|%{frameworkName} has %{projectLength} %{projects}"
 msgstr ""
+msgid "SecurityOrchestration|%{pageSize}+ projects which have compliance framework:"
+msgstr ""
+
 msgid "SecurityOrchestration|%{scanners}"
 msgstr ""