From 748e52c1cb80a0a01c3ee16170b360a10fcfde56 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 30 Apr 2024 09:38:50 +0200
Subject: [PATCH] Add UI components for Beyond Identity group exclusions

Added the UI components for Beyond Identity group exclusions
---
 .../components/add_exclusions_drawer.vue      | 17 +++++-
 .../components/exclusions_list.vue            | 20 ++++---
 .../components/list_selector/group_item.vue   | 13 +++--
 .../components/list_selector/index.vue        |  8 ++-
 locale/gitlab.pot                             | 12 ++---
 .../components/add_exclusions_drawer_spec.js  | 54 +++++++++++--------
 .../components/exclusions_list_item_spec.js   |  4 +-
 .../components/exclusions_list_spec.js        | 18 ++++---
 .../beyond_identity/components/mock_data.js   | 11 ++--
 .../list_selector/group_item_spec.js          |  2 +-
 .../components/list_selector/index_spec.js    |  2 +-
 11 files changed, 105 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue b/app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue
index 64bbd0e30e6314..fd4f1daf104b9e 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue
@@ -28,6 +28,12 @@ export default {
     getDrawerHeaderHeight() {
       return getContentWrapperHeight();
     },
+    groupExclusions() {
+      return this.exclusions.filter((exclusion) => exclusion.type === 'group');
+    },
+    projectExclusions() {
+      return this.exclusions.filter((exclusion) => exclusion.type === 'project');
+    },
   },
   methods: {
     handleSelectExclusion(exclusion) {
@@ -62,10 +68,19 @@ export default {
     </template>
 
     <template #default>
+      <list-selector
+        type="groups"
+        class="gl-m-5 gl-p-0!"
+        autofocus
+        :selected-items="groupExclusions"
+        @select="handleSelectExclusion"
+        @delete="handleRemoveExclusion"
+      />
+
       <list-selector
         type="projects"
         class="gl-m-5 gl-p-0!"
-        :selected-items="exclusions"
+        :selected-items="projectExclusions"
         @select="handleSelectExclusion"
         @delete="handleRemoveExclusion"
       />
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
index 89d4695b86f3e1..84ad156c26f32f 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlButton, GlEmptyState } from '@gitlab/ui';
-import { sortBy } from 'lodash';
-import { s__, __ } from '~/locale';
+import { sortBy, differenceBy } from 'lodash';
+import { s__, __, sprintf } from '~/locale';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import globalToast from '~/vue_shared/plugins/global_toast';
 import ExclusionsTabs from './exclusions_tabs.vue';
 import ExclusionsListItem from './exclusions_list_item.vue';
@@ -33,7 +34,8 @@ export default {
           ...exclusion,
           icon: exclusion.type,
         })),
-        'name',
+        'type',
+        'desc',
       );
     },
   },
@@ -46,8 +48,9 @@ export default {
       this.exclusions = [];
     },
     handleAddExclusions(exclusions) {
+      const uniqueList = differenceBy(exclusions, this.exclusions, (v) => [v.id, v.type].join());
       // TODO: add backend call for POST/Mutate (follow-up)
-      this.exclusions.push(...exclusions);
+      this.exclusions.push(...uniqueList);
       this.isDrawerOpen = false;
     },
     showRemoveModal(exclusion) {
@@ -61,8 +64,9 @@ export default {
       const { exclusionToRemove } = this;
       // TODO: add backend call for DELETE/Mutate (follow-up)
       this.exclusions = this.exclusions.filter((item) => item.id !== exclusionToRemove.id);
+      const type = capitalizeFirstCharacter(exclusionToRemove.type);
 
-      globalToast(this.$options.i18n.exclusionRemoved, {
+      globalToast(sprintf(this.$options.i18n.exclusionRemoved, { type }), {
         action: {
           text: __('Undo'),
           onClick: (_, toast) => {
@@ -77,10 +81,12 @@ export default {
     },
   },
   i18n: {
-    exclusionRemoved: s__('Integrations|Project exclusion removed'),
+    exclusionRemoved: s__('Integrations|%{type} exclusion removed'),
     emptyText: s__('Integrations|There are no exclusions'),
     addExclusions: s__('Integrations|Add exclusions'),
-    helpText: s__('Integrations|Projects in this list no longer require commits to be signed.'),
+    helpText: s__(
+      'Integrations|Groups and projects in this list no longer require commits to be signed.',
+    ),
   },
 };
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/list_selector/group_item.vue b/app/assets/javascripts/vue_shared/components/list_selector/group_item.vue
index 2d24cc5553b07c..fd467eb857673f 100644
--- a/app/assets/javascripts/vue_shared/components/list_selector/group_item.vue
+++ b/app/assets/javascripts/vue_shared/components/list_selector/group_item.vue
@@ -38,10 +38,17 @@ export default {
 
 <template>
   <span class="gl-display-flex gl-align-items-center gl-gap-3" @click="$emit('select', name)">
-    <gl-avatar :alt="fullName" :size="32" :src="avatarUrl" />
+    <gl-avatar
+      :alt="fullName"
+      :entity-name="fullName"
+      :size="32"
+      shape="rect"
+      :src="avatarUrl"
+      fallback-on-error
+    />
     <span class="gl-display-flex gl-flex-direction-column gl-flex-grow-1">
-      <span class="gl-font-weight-bold">{{ fullName }}</span>
-      <span class="gl-text-gray-600">@{{ name }}</span>
+      <span class="gl-font-weight-bold">{{ name }}</span>
+      <span class="gl-text-gray-600">{{ fullName }}</span>
     </span>
 
     <gl-button
diff --git a/app/assets/javascripts/vue_shared/components/list_selector/index.vue b/app/assets/javascripts/vue_shared/components/list_selector/index.vue
index 67b2e341ce0d26..b53b573e175c05 100644
--- a/app/assets/javascripts/vue_shared/components/list_selector/index.vue
+++ b/app/assets/javascripts/vue_shared/components/list_selector/index.vue
@@ -43,6 +43,11 @@ export default {
       required: false,
       default: null,
     },
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -123,6 +128,7 @@ export default {
           data?.groups.nodes.map((group) => ({
             text: group.fullName,
             value: group.name,
+            type: 'group',
             ...group,
           })),
         );
@@ -191,7 +197,7 @@ export default {
             ref="search"
             v-model="searchValue"
             :placeholder="searchPlaceholder"
-            autofocus
+            :autofocus="autofocus"
             debounce="500"
             :is-loading="isLoading"
             @input="handleSearchInput"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 182cd4b11e3cba..893b9e55f4fb57 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27431,6 +27431,9 @@ msgstr ""
 msgid "Integrations|%{integration} settings saved, but not active."
 msgstr ""
 
+msgid "Integrations|%{type} exclusion removed"
+msgstr ""
+
 msgid "Integrations|Active integrations"
 msgstr ""
 
@@ -27548,6 +27551,9 @@ msgstr ""
 msgid "Integrations|Group-level integration management"
 msgstr ""
 
+msgid "Integrations|Groups and projects in this list no longer require commits to be signed."
+msgstr ""
+
 msgid "Integrations|Includes Standard, plus the entire commit message, commit hash, and issue IDs"
 msgstr ""
 
@@ -27575,12 +27581,6 @@ msgstr ""
 msgid "Integrations|Perform common tasks with slash commands."
 msgstr ""
 
-msgid "Integrations|Project exclusion removed"
-msgstr ""
-
-msgid "Integrations|Projects in this list no longer require commits to be signed."
-msgstr ""
-
 msgid "Integrations|Projects using custom settings"
 msgstr ""
 
diff --git a/spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js b/spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js
index fb153f53343c81..728962f817541d 100644
--- a/spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js
@@ -1,10 +1,11 @@
+import { nextTick } from 'vue';
 import { GlDrawer } from '@gitlab/ui';
 import AddExclusionsDrawer from '~/integrations/beyond_identity/components/add_exclusions_drawer.vue';
 import ListSelector from '~/vue_shared/components/list_selector/index.vue';
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
-import { exclusionsMock } from './mock_data';
+import { groupExclusionsMock, projectExclusionsMock } from './mock_data';
 
 jest.mock('~/lib/utils/dom_utils', () => ({
   getContentWrapperHeight: jest.fn(),
@@ -15,7 +16,9 @@ describe('AddExclusionsDrawer component', () => {
 
   const findTitle = () => wrapper.findByTestId('title');
   const findDrawer = () => wrapper.findComponent(GlDrawer);
-  const findListSelector = () => wrapper.findComponent(ListSelector);
+  const findListSelectors = () => wrapper.findAllComponents(ListSelector);
+  const findGroupsListSelector = () => findListSelectors().at(0);
+  const findProjectsListSelector = () => findListSelectors().at(1);
   const findAddExclusionsButton = () => wrapper.findByTestId('add-button');
 
   const createComponent = (props) => {
@@ -63,8 +66,18 @@ describe('AddExclusionsDrawer component', () => {
       expect(findTitle().text()).toEqual('Add exclusions');
     });
 
-    it('renders a project list selector', () => {
-      expect(findListSelector().props('type')).toBe('projects');
+    it('renders a list selector for groups', () => {
+      expect(findGroupsListSelector().props()).toMatchObject({
+        type: 'groups',
+        autofocus: true,
+      });
+    });
+
+    it('renders a list selector for projects', () => {
+      expect(findProjectsListSelector().props()).toMatchObject({
+        type: 'projects',
+        autofocus: false,
+      });
     });
 
     it('renders a button for adding exclusions', () => {
@@ -72,28 +85,23 @@ describe('AddExclusionsDrawer component', () => {
     });
   });
 
-  describe('when exclusions are selected', () => {
-    beforeEach(() => {
-      wrapper = createComponent({ showDrawer: true });
+  it.each`
+    type         | findSelector                | mockData
+    ${'group'}   | ${findGroupsListSelector}   | ${groupExclusionsMock}
+    ${'project'} | ${findProjectsListSelector} | ${projectExclusionsMock}
+  `('handles selected $type exclusions', async ({ findSelector, mockData }) => {
+    wrapper = createComponent({ showDrawer: true });
 
-      findListSelector().vm.$emit('select', exclusionsMock[0]);
-      findListSelector().vm.$emit('select', exclusionsMock[1]);
-    });
+    findSelector().vm.$emit('select', mockData[0]);
+    findSelector().vm.$emit('select', mockData[1]);
+    await nextTick();
 
-    it('adds it to the list of selected exclusions', () => {
-      expect(findListSelector().props('selectedItems')).toEqual(exclusionsMock);
-    });
-
-    describe('when Add exclusions button is clicked', () => {
-      beforeEach(() => findAddExclusionsButton().vm.$emit('click'));
+    expect(findSelector().props('selectedItems')).toEqual(mockData);
 
-      it('emits the selected exclusions', () => {
-        expect(wrapper.emitted('add')).toEqual([[exclusionsMock]]);
-      });
+    findAddExclusionsButton().vm.$emit('click');
+    await nextTick();
 
-      it('clears the list of selected exclusions', () => {
-        expect(findListSelector().props('selectedItems')).toEqual([]);
-      });
-    });
+    expect(wrapper.emitted('add')).toEqual([[mockData]]);
+    expect(findSelector().props('selectedItems').length).toBe(0);
   });
 });
diff --git a/spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js b/spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js
index 1fb9141c98379b..8a1ff73e42279c 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js
@@ -1,11 +1,11 @@
 import { GlButton, GlIcon, GlAvatar } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ExclusionsListItem from '~/integrations/beyond_identity/components/exclusions_list_item.vue';
-import { exclusionsMock } from './mock_data';
+import { projectExclusionsMock } from './mock_data';
 
 describe('ExclusionsListItem component', () => {
   let wrapper;
-  const exclusion = exclusionsMock[0];
+  const exclusion = projectExclusionsMock[0];
 
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findAvatar = () => wrapper.findComponent(GlAvatar);
diff --git a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
index 875e9f0a6f546f..41b90eb1247925 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -7,7 +7,7 @@ import ExclusionsTabs from '~/integrations/beyond_identity/components/exclusions
 import ExclusionsListItem from '~/integrations/beyond_identity/components/exclusions_list_item.vue';
 import ConfirmRemovalModal from '~/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue';
 import showToast from '~/vue_shared/plugins/global_toast';
-import { exclusionsMock } from './mock_data';
+import { projectExclusionsMock } from './mock_data';
 
 jest.mock('~/vue_shared/plugins/global_toast');
 
@@ -35,7 +35,9 @@ describe('ExclusionsList component', () => {
 
     it('renders help text', () => {
       expect(
-        findByText('Projects in this list no longer require commits to be signed.').exists(),
+        findByText(
+          'Groups and projects in this list no longer require commits to be signed.',
+        ).exists(),
       ).toBe(true);
     });
 
@@ -60,13 +62,13 @@ describe('ExclusionsList component', () => {
     });
 
     describe('Exclusions added', () => {
-      beforeEach(() => findDrawer().vm.$emit('add', exclusionsMock));
+      beforeEach(() => findDrawer().vm.$emit('add', projectExclusionsMock));
 
-      it('lists the added exclusions, sorted by name', async () => {
+      it('lists the added exclusions, sorted by type', async () => {
         await nextTick();
 
-        expect(findListItems().at(0).props('exclusion')).toMatchObject(exclusionsMock[1]);
-        expect(findListItems().at(1).props('exclusion')).toMatchObject(exclusionsMock[0]);
+        expect(findListItems().at(0).props('exclusion')).toMatchObject(projectExclusionsMock[0]);
+        expect(findListItems().at(1).props('exclusion')).toMatchObject(projectExclusionsMock[1]);
       });
 
       it('closes the drawer', () => {
@@ -78,14 +80,14 @@ describe('ExclusionsList component', () => {
   describe('removing Exclusions', () => {
     beforeEach(async () => {
       findAddExclusionsButton().vm.$emit('click');
-      findDrawer().vm.$emit('add', exclusionsMock);
+      findDrawer().vm.$emit('add', projectExclusionsMock);
       await nextTick();
       findListItems().at(1).vm.$emit('remove');
     });
 
     it('opens a confirmation modal', () => {
       expect(findConfirmRemoveModal().props()).toMatchObject({
-        name: 'foo',
+        name: 'project bar',
         type: 'project',
         visible: true,
       });
diff --git a/spec/frontend/integrations/beyond_identity/components/mock_data.js b/spec/frontend/integrations/beyond_identity/components/mock_data.js
index 2759d1ce6caaf6..9677ea7926386e 100644
--- a/spec/frontend/integrations/beyond_identity/components/mock_data.js
+++ b/spec/frontend/integrations/beyond_identity/components/mock_data.js
@@ -1,4 +1,9 @@
-export const exclusionsMock = [
-  { id: 1, name: 'foo', type: 'project', icon: 'project', avatarUrl: 'foo.png' },
-  { id: 2, name: 'bar', type: 'project', icon: 'project', avatarUrl: 'bar.png' },
+export const projectExclusionsMock = [
+  { id: 1, name: 'project foo', type: 'project', icon: 'project', avatarUrl: 'project-foo.png' },
+  { id: 2, name: 'project bar', type: 'project', icon: 'project', avatarUrl: 'project-bar.png' },
+];
+
+export const groupExclusionsMock = [
+  { id: 1, name: 'group foo', type: 'group', icon: 'group', avatarUrl: 'group-foo.png' },
+  { id: 2, name: 'group bar', type: 'group', icon: 'group', avatarUrl: 'group-bar.png' },
 ];
diff --git a/spec/frontend/vue_shared/components/list_selector/group_item_spec.js b/spec/frontend/vue_shared/components/list_selector/group_item_spec.js
index b59e4c734c1836..04c68355916c32 100644
--- a/spec/frontend/vue_shared/components/list_selector/group_item_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/group_item_spec.js
@@ -31,7 +31,7 @@ describe('GroupItem spec', () => {
 
   it('renders a fullName and name', () => {
     expect(wrapper.text()).toContain('Group 1');
-    expect(wrapper.text()).toContain('@group1');
+    expect(wrapper.text()).toContain('group1');
   });
 
   it('does not render a delete button by default', () => {
diff --git a/spec/frontend/vue_shared/components/list_selector/index_spec.js b/spec/frontend/vue_shared/components/list_selector/index_spec.js
index a51fd2eb65c42e..ca1cacdac6f326 100644
--- a/spec/frontend/vue_shared/components/list_selector/index_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/index_spec.js
@@ -249,7 +249,7 @@ describe('List Selector spec', () => {
         findSearchResultsDropdown().vm.$emit('select', firstSearchResult.name);
 
         expect(wrapper.emitted('select')).toEqual([
-          [{ ...firstSearchResult, text: 'Flightjs', value: 'Flightjs' }],
+          [{ ...firstSearchResult, text: 'Flightjs', value: 'Flightjs', type: 'group' }],
         ]);
       });
     });
-- 
GitLab