Merge branch '480926-policies-add-links-to-drawer' into 'master'

Add option to render group scope list with links

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



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

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

 <script>
-import { GlAccordion, GlAccordionItem } from '@gitlab/ui';
-import { uniqueId } from 'lodash';
+import { GlAccordion, GlAccordionItem, GlLink } from '@gitlab/ui';
 import { s__, n__, sprintf } from '~/locale';
+import { getSecurityPolicyListUrl } from '~/editor/extensions/source_editor_security_policy_schema_ext';
 
 export default {
   i18n: {
@@ -14,6 +14,7 @@ export default {
   components: {
     GlAccordion,
     GlAccordionItem,
+    GlLink,
   },
   props: {
     inlineList: {
@@ -31,6 +32,11 @@ export default {
       required: false,
       default: () => [],
     },
+    isLink: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     hasProjects() {
@@ -75,16 +81,10 @@ export default {
         groups: groupsMessage,
       });
     },
-    groupsNames() {
-      return this.groups.map(({ name }) => name);
-    },
-    projectNames() {
-      return this.projects.map(({ name }) => name);
-    },
   },
   methods: {
-    uniqueId(name) {
-      return uniqueId(name);
+    getSecurityPolicyListUrl(source, namespaceType = 'group') {
+      return getSecurityPolicyListUrl({ namespacePath: source?.fullPath || '', namespaceType });
     },
   },
 };
@@ -103,8 +103,13 @@ export default {
       <gl-accordion :header-level="3" :class="{ 'gl-mb-2': hasProjects }">
         <gl-accordion-item :title="$options.i18n.groupsHeader" data-testid="groups-list">
           <ul>
-            <li v-for="name of groupsNames" :key="uniqueId(name)" data-testid="group-item">
-              {{ name }}
+            <li v-for="group of groups" :key="group.fullPath" data-testid="group-item">
+              <template v-if="isLink">
+                <gl-link :href="getSecurityPolicyListUrl(group)" target="_blank">{{
+                  group.name
+                }}</gl-link>
+              </template>
+              <span v-else>{{ group.name }}</span>
             </li>
           </ul>
         </gl-accordion-item>
@@ -113,8 +118,13 @@ export default {
       <gl-accordion v-if="hasProjects" :header-level="3">
         <gl-accordion-item :title="$options.i18n.projectsHeader" data-testid="projects-list">
           <ul>
-            <li v-for="name of projectNames" :key="uniqueId(name)" data-testid="project-item">
-              {{ name }}
+            <li v-for="project of projects" :key="project.fullPath" data-testid="project-item">
+              <template v-if="isLink">
+                <gl-link :href="getSecurityPolicyListUrl(project, 'project')" target="_blank">{{
+                  project.name
+                }}</gl-link>
+              </template>
+              <span v-else>{{ project.name }}</span>
             </li>
           </ul>
         </gl-accordion-item>

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

@@ -134,7 +134,11 @@ export default {
           />
         </template>
         <template v-else-if="policyScopeHasGroups">
-          <groups-toggle-list :groups="policyScopeGroups" :projects="policyExcludingProjects" />
+          <groups-toggle-list
+            is-link
+            :groups="policyScopeGroups"
+            :projects="policyExcludingProjects"
+          />
         </template>
         <template v-else-if="policyHasProjects">
           <projects-toggle-list

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

@@ -21,6 +21,7 @@ fragment PolicyScope on PolicyScope {
     nodes {
       id
       name
+      fullPath
     }
     pageInfo {
       ...PageInfo
@@ -30,6 +31,7 @@ fragment PolicyScope on PolicyScope {
     nodes {
       id
       name
+      fullPath
     }
     pageInfo {
       ...PageInfo
@@ -39,6 +41,7 @@ fragment PolicyScope on PolicyScope {
     nodes {
       id
       name
+      fullPath
     }
     pageInfo {
       ...PageInfo

ee/spec/frontend/security_orchestration/components/policies/list_component_scope_spec.js

@@ -212,6 +212,7 @@ describe('ListComponentScope', () => {
       expect(findGroupsToggleList().props('groups')).toEqual(items);
       expect(findGroupsToggleList().props('projects')).toEqual([]);
       expect(findGroupsToggleList().props('inlineList')).toBe(true);
+      expect(findGroupsToggleList().props('isLink')).toBe(false);
     });
 
     it('renders group scope when groups and project exceptions are provided', () => {

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

+import { GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import GroupsToggleList from 'ee/security_orchestration/components/policy_drawer/groups_toggle_list.vue';
 
@@ -29,6 +30,7 @@ describe('GroupsToggleList', () => {
   const findProjectListHeader = () => wrapper.findByTestId('projects-list-header');
   const findAllGroupItems = () => wrapper.findAllByTestId('group-item');
   const findAllProjectItems = () => wrapper.findAllByTestId('project-item');
+  const findAllLinks = () => wrapper.findAllComponents(GlLink);
 
   describe('default rendering', () => {
     beforeEach(() => {
@@ -95,4 +97,33 @@ describe('GroupsToggleList', () => {
       expect(findGroupListInlineHeader().text()).toBe('All projects in linked groups');
     });
   });
+
+  describe('links', () => {
+    it('renders lists with links', () => {
+      createComponent({
+        propsData: {
+          projects: mockedProjects,
+          isLink: true,
+        },
+      });
+
+      expect(findGroupsList().findAllComponents(GlLink).at(0).props('href')).toBe(
+        mockedGroups[0].full_path,
+      );
+
+      expect(findGroupsList().findAllComponents(GlLink).at(1).props('href')).toBe(
+        mockedGroups[1].full_path,
+      );
+
+      expect(findProjectsList().findAllComponents(GlLink).at(0).props('href')).toBe(
+        mockedProjects[0].full_path,
+      );
+
+      expect(findProjectsList().findAllComponents(GlLink).at(1).props('href')).toBe(
+        mockedProjects[1].full_path,
+      );
+
+      expect(findAllLinks()).toHaveLength(mockedGroups.length + mockedProjects.length);
+    });
+  });
 });

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

@@ -163,6 +163,7 @@ describe('ScopeInfoRow', () => {
         });
 
         expect(findGroupsToggleList().exists()).toBe(true);
+        expect(findGroupsToggleList().props('isLink')).toBe(true);
         expect(findGroupsToggleList().props('groups')).toEqual(items);
         expect(findGroupsToggleList().props('projects')).toEqual([]);
       });