From c5e7ccd29ce41ae569ed09fbcd0d6f35187276a3 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 22 Apr 2024 13:18:56 +0200
Subject: [PATCH 1/5] Add UI components for Beyond Identity check exclusions

Added the UI components + tabs for listing the exclusions

Changelog: added
---
 .../components/add_exclusions_drawer.vue      |  83 +++++++++++
 .../components/exclusions_list.vue            | 134 ++++++++++++++++++
 .../components/exclusions_list_item.vue       |  39 +++++
 .../components/exclusions_tabs.vue            |  54 +++++++
 .../remove_exclusion_confirmation_modal.vue   |  58 ++++++++
 .../admin/integrations/overrides/index.js     |  32 +++++
 .../components/list_selector/constants.js     |   7 +
 .../components/list_selector/index.vue        |  79 ++++++++---
 .../components/list_selector/project_item.vue |  56 ++++++++
 app/views/shared/integrations/_tabs.html.haml |   3 +-
 .../shared/integrations/overrides.html.haml   |   6 +-
 .../beta/beyond_identity_exclusions.yml       |   9 ++
 locale/gitlab.pot                             |  36 +++++
 .../components/list_selector/index_spec.js    |   6 +-
 14 files changed, 578 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
 create mode 100644 config/feature_flags/beta/beyond_identity_exclusions.yml

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
new file mode 100644
index 00000000000000..14834912b7dd19
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/components/add_exclusions_drawer.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlDrawer, GlButton } from '@gitlab/ui';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+import { __ } from '~/locale';
+import ListSelector from '~/vue_shared/components/list_selector/index.vue';
+
+export default {
+  DRAWER_Z_INDEX,
+  components: {
+    GlDrawer,
+    GlButton,
+    ListSelector,
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      exclusions: [],
+    };
+  },
+  computed: {
+    getDrawerHeaderHeight() {
+      return getContentWrapperHeight();
+    },
+  },
+  methods: {
+    handleSelectExclusion(exclusion) {
+      this.exclusions.push({ ...exclusion });
+    },
+    handleRemoveExclusion(id) {
+      const exclusionIndex = this.exclusions.findIndex((exclusion) => exclusion.id === id);
+      this.exclusions.splice(exclusionIndex, 1);
+    },
+    async handleAddExclusions() {
+      this.isLoading = true;
+      this.$emit('add', this.exclusions);
+      this.exclusions = [];
+      this.isLoading = false;
+    },
+  },
+  i18n: {
+    addExclusions: __('Add exclusions'),
+  },
+};
+</script>
+
+<template>
+  <gl-drawer
+    :header-height="getDrawerHeaderHeight"
+    :z-index="$options.DRAWER_Z_INDEX"
+    :open="isOpen"
+    v-on="$listeners"
+  >
+    <template #title>
+      <h2 class="gl-font-size-h2 gl-mt-0">{{ $options.i18n.addExclusions }}</h2>
+    </template>
+
+    <template #default>
+      <list-selector
+        type="projects"
+        class="gl-m-5 gl-p-0!"
+        :selected-items="exclusions"
+        @select="handleSelectExclusion"
+        @delete="handleRemoveExclusion"
+      />
+
+      <gl-button
+        class="gl-ml-5"
+        variant="confirm"
+        :loading="isLoading"
+        @click="handleAddExclusions"
+      >
+        {{ $options.i18n.addExclusions }}
+      </gl-button>
+    </template>
+  </gl-drawer>
+</template>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
new file mode 100644
index 00000000000000..ec6acbb8676626
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlAlert, GlButton, GlEmptyState } from '@gitlab/ui';
+import { sortBy } from 'lodash';
+import { s__, __ } from '~/locale';
+import globalToast from '~/vue_shared/plugins/global_toast';
+import ExclusionsTabs from './exclusions_tabs.vue';
+import ExclusionsListItem from './exclusions_list_item.vue';
+import AddExclusionsDrawer from './add_exclusions_drawer.vue';
+import ConfirmRemovalModal from './remove_exclusion_confirmation_modal.vue';
+
+export default {
+  name: 'ExclusionsList',
+  components: {
+    GlAlert,
+    GlButton,
+    GlEmptyState,
+    ExclusionsTabs,
+    ExclusionsListItem,
+    AddExclusionsDrawer,
+    ConfirmRemovalModal,
+  },
+  props: {},
+  data() {
+    return {
+      errorMessage: null,
+      isDrawerOpen: false,
+      isConfirmRemovalModalOpen: false,
+      exclusions: [],
+      exclusionToRemove: null,
+    };
+  },
+  computed: {
+    formattedExclusions() {
+      return sortBy(
+        this.exclusions.map((exclusion) => ({
+          ...exclusion,
+          icon: exclusion.type,
+        })),
+        'name',
+      );
+    },
+  },
+  created() {
+    this.loadExclusions();
+  },
+  methods: {
+    loadExclusions() {
+      // TODO: add backend call for GET/Query (follow-up)
+      this.exclusions = [];
+    },
+    handleAddExclusions(exclusions) {
+      // TODO: add backend call for POST/Mutate (follow-up)
+      this.exclusions.push(...exclusions);
+      this.isDrawerOpen = false;
+    },
+    showRemoveModal(exclusion) {
+      this.exclusionToRemove = exclusion;
+      this.isConfirmRemovalModalOpen = true;
+    },
+    hideRemoveModal() {
+      this.isConfirmRemovalModalOpen = false;
+    },
+    confirmRemoveExclusion() {
+      const { exclusionToRemove } = this;
+      // TODO: add backend call for DELETE/Mutate (follow-up)
+      this.exclusions = this.exclusions.filter((item) => item.id !== exclusionToRemove.id);
+
+      globalToast(this.$options.i18n.exclusionRemoved, {
+        action: {
+          text: __('Undo'),
+          onClick: (_, toast) => {
+            this.handleAddExclusions([exclusionToRemove]);
+            toast.hide();
+          },
+        },
+      });
+    },
+    toggleDrawer() {
+      this.isDrawerOpen = !this.isDrawerOpen;
+    },
+  },
+  i18n: {
+    exclusionRemoved: s__('Integrations|Project exclusion removed'),
+    defaultErrorMessage: s__('Integrations|An error occurred while loading projects.'),
+    emptyText: s__('Integrations|There are no exclusions'),
+    addExclusions: s__('Integrations|Add exclusions'),
+    helpText: s__(
+      'Integrations|Projects included in this list will no longer require commits to be signed.',
+    ),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <exclusions-tabs />
+
+    <div
+      class="gl-display-flex gl-justify-content-space-between gl-bg-gray-10 gl-p-4 gl-py-5 gl-border-b gl-align-items-center"
+    >
+      <span>{{ $options.i18n.helpText }}</span>
+      <gl-button variant="confirm" @click="isDrawerOpen = true">{{
+        $options.i18n.addExclusions
+      }}</gl-button>
+    </div>
+
+    <gl-alert v-if="errorMessage" variant="danger">{{ errorMessage }}</gl-alert>
+
+    <gl-empty-state v-if="!exclusions.length" :title="$options.i18n.emptyText" />
+
+    <exclusions-list-item
+      v-for="(exclusion, index) in formattedExclusions"
+      v-else
+      :key="index"
+      :exclusion="exclusion"
+      @remove="() => showRemoveModal(exclusion)"
+    />
+
+    <add-exclusions-drawer
+      :is-open="isDrawerOpen"
+      @close="isDrawerOpen = false"
+      @add="handleAddExclusions"
+    />
+
+    <confirm-removal-modal
+      v-if="isConfirmRemovalModalOpen"
+      :visible="isConfirmRemovalModalOpen"
+      :name="exclusionToRemove?.name"
+      :type="exclusionToRemove?.type"
+      @primary="confirmRemoveExclusion"
+      @hide="hideRemoveModal"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
new file mode 100644
index 00000000000000..af995807c2fcb9
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlButton, GlIcon, GlAvatar } from '@gitlab/ui';
+
+export default {
+  name: 'ExclusionsListItem',
+  components: {
+    GlButton,
+    GlAvatar,
+    GlIcon,
+  },
+  props: {
+    exclusion: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-p-4 gl-py-3 gl-pl-7 gl-border-b gl-align-items-center gl-gap-3"
+  >
+    <gl-icon :name="exclusion.icon" class="gl-text-secondary" />
+    <gl-avatar
+      :alt="exclusion.name"
+      :entity-name="exclusion.name"
+      :size="32"
+      :src="exclusion.avatarUrl"
+      shape="rect"
+      fallback-on-error
+    />
+    <span class="gl-display-flex gl-flex-direction-column gl-flex-grow-1">
+      <span class="gl-font-weight-bold">{{ exclusion.name }}</span>
+    </span>
+
+    <gl-button icon="remove" category="tertiary" @click="() => $emit('remove')" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
new file mode 100644
index 00000000000000..c98b2ced739e86
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlBadge, GlNavItem, GlTabs, GlTab } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { settingsTabTitle } from '~/integrations/constants';
+
+export default {
+  name: 'ExclusionsTabs',
+  components: {
+    GlBadge,
+    GlNavItem,
+    GlTabs,
+    GlTab,
+  },
+  inject: {
+    editPath: {
+      default: '',
+    },
+  },
+  props: {
+    projectOverridesCount: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
+  },
+  i18n: {
+    settingsTabTitle,
+    projectsTabTitle: s__('Integrations|Exclusions'),
+  },
+};
+</script>
+
+<template>
+  <gl-tabs content-class="gl-p-0">
+    <template #tabs-start>
+      <gl-nav-item role="presentation" link-classes="gl-tab-nav-item" :href="editPath">{{
+        $options.i18n.settingsTabTitle
+      }}</gl-nav-item>
+    </template>
+
+    <gl-tab active>
+      <template #title>
+        {{ $options.i18n.projectsTabTitle }}
+        <gl-badge
+          v-if="projectOverridesCount !== null"
+          variant="muted"
+          size="sm"
+          class="gl-tab-counter-badge"
+          >{{ projectOverridesCount }}</gl-badge
+        >
+      </template>
+    </gl-tab>
+  </gl-tabs>
+</template>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
new file mode 100644
index 00000000000000..aacf2f8f2d2137
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { sprintf, s__, __ } from '~/locale';
+
+export default {
+  name: 'RemoveExclusionConfirmationModal',
+  components: {
+    GlModal,
+    GlSprintf,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    modalTitle() {
+      return sprintf(this.$options.i18n.title, { type: this.type });
+    },
+  },
+  i18n: {
+    body: s__(
+      'Integrations|This will remove %{name} as an exclusion. Are you sure you want to continue?',
+    ),
+    title: s__('Integrations|Confirm %{type} exclusion removal'),
+  },
+  modalOptions: {
+    actionPrimary: {
+      text: s__('Integrations|Remove exclusion'),
+      attributes: { variant: 'danger' },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: { category: 'secondary' },
+    },
+    modalId: 'confirm-remove-deploy-exclusion',
+  },
+};
+</script>
+<template>
+  <gl-modal v-bind="$options.modalOptions" :title="modalTitle" :visible="visible" v-on="$listeners">
+    <gl-sprintf :message="$options.i18n.body">
+      <template #name>
+        <strong>{{ name }}</strong>
+      </template>
+    </gl-sprintf>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/pages/admin/integrations/overrides/index.js b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
index b150470914433f..645f3df79ae7d0 100644
--- a/app/assets/javascripts/pages/admin/integrations/overrides/index.js
+++ b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
@@ -1,3 +1,35 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import initIntegrationOverrides from '~/integrations/overrides';
+import ExclusionsList from '~/integrations/beyond_identity/components/exclusions_list.vue';
+
+const initBeyondIdentityExclusions = () => {
+  const el = document.querySelector('.js-vue-beyond-identity-exclusions');
+
+  if (!el) {
+    return null;
+  }
+
+  const { editPath } = el.dataset;
+
+  return new Vue({
+    el,
+
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(),
+    }),
+    provide: {
+      editPath,
+    },
+    render(createElement) {
+      return createElement(ExclusionsList, {
+        props: {},
+      });
+    },
+  });
+};
+
+initBeyondIdentityExclusions();
 
 initIntegrationOverrides();
diff --git a/app/assets/javascripts/vue_shared/components/list_selector/constants.js b/app/assets/javascripts/vue_shared/components/list_selector/constants.js
index ad826c6f3e56b0..5ff5d59ef6b6e2 100644
--- a/app/assets/javascripts/vue_shared/components/list_selector/constants.js
+++ b/app/assets/javascripts/vue_shared/components/list_selector/constants.js
@@ -2,6 +2,7 @@ import { __ } from '~/locale';
 import UserItem from './user_item.vue';
 import GroupItem from './group_item.vue';
 import DeployKeyItem from './deploy_key_item.vue';
+import ProjectItem from './project_item.vue';
 
 export const CONFIG = {
   users: {
@@ -23,4 +24,10 @@ export const CONFIG = {
     filterKey: 'name',
     component: DeployKeyItem,
   },
+  projects: {
+    title: __('Projects'),
+    icon: 'project',
+    filterKey: 'id',
+    component: ProjectItem,
+  },
 };
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 d79a8d6a00c1c6..67b2e341ce0d26 100644
--- a/app/assets/javascripts/vue_shared/components/list_selector/index.vue
+++ b/app/assets/javascripts/vue_shared/components/list_selector/index.vue
@@ -1,10 +1,11 @@
 <script>
 import { GlCard, GlIcon, GlCollapsibleListbox, GlSearchBoxByType } from '@gitlab/ui';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { createAlert } from '~/alert';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import groupsAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
 import Api from '~/api';
+import { getProjects } from '~/rest_api';
 import { CONFIG } from './constants';
 
 const I18N = {
@@ -49,6 +50,7 @@ export default {
       isProjectNamespace: 'true',
       selected: [],
       items: [],
+      isLoading: false,
     };
   },
   computed: {
@@ -60,23 +62,44 @@ export default {
         ? this.$options.i18n.projectGroups
         : this.$options.i18n.allGroups;
     },
+    searchPlaceholder() {
+      return sprintf(__('Search to add %{title}'), {
+        title: this.config.title.toLowerCase(),
+      });
+    },
+    emptyPlaceholder() {
+      return sprintf(__('No %{title} have been added.'), {
+        title: this.config.title.toLowerCase(),
+      });
+    },
+    filteredItems() {
+      // Filter out selected items
+      return this.items.filter(
+        (item) => !this.selectedItems.some((selectedItem) => selectedItem.id === item.id),
+      );
+    },
   },
   methods: {
-    async handleSearchInput(search) {
+    async handleSearchInput(search = this.searchValue) {
       this.$refs.results.open();
+      this.$refs.search.focusInput();
 
       const searchMethod = {
         users: this.fetchUsersBySearchTerm,
         groups: this.fetchGroupsBySearchTerm,
         deployKeys: this.fetchDeployKeysBySearchTerm,
+        projects: this.fetchProjectsBySearchTerm,
       };
 
       try {
+        this.isLoading = true;
         this.items = await searchMethod[this.type](search);
       } catch (e) {
         createAlert({
           message: this.$options.i18n.apiErrorMessage,
         });
+      } finally {
+        this.isLoading = false;
       }
     },
     async fetchUsersBySearchTerm(search) {
@@ -108,11 +131,23 @@ export default {
       // TODO - implement API request (follow-up)
       // https://gitlab.com/gitlab-org/gitlab/-/issues/432494
     },
+    async fetchProjectsBySearchTerm(search) {
+      const response = await getProjects(search, { membership: false });
+      const projects = response?.data || [];
+
+      return projects.map((project) => ({
+        ...this.convertToCamelCase(project),
+        text: project.name,
+        value: project.id,
+        type: 'project',
+      }));
+    },
     getItemByKey(key) {
       return this.items.find((item) => item[this.config.filterKey] === key);
     },
     handleSelectItem(key) {
       this.$emit('select', this.getItemByKey(key));
+      this.$refs.results.close();
     },
     handleDeleteItem(key) {
       this.$emit('delete', key);
@@ -121,6 +156,9 @@ export default {
       this.items = [];
       this.searchValue = '';
     },
+    convertToCamelCase(data) {
+      return convertObjectPropsToCamelCase(data);
+    },
   },
   namespaceOptions: [
     { text: I18N.projectGroups, value: 'true' },
@@ -143,24 +181,25 @@ export default {
     <div class="gl-display-flex gl-gap-3" :class="{ 'gl-mb-4': selectedItems.length }">
       <gl-collapsible-listbox
         ref="results"
-        v-model="selected"
         class="list-selector gl-display-block gl-flex-grow-1"
-        :items="items"
-        multiple
-        @shown="$refs.search.focusInput()"
+        :items="filteredItems"
+        @select="handleSelectItem"
+        @shown="handleSearchInput"
       >
         <template #toggle>
           <gl-search-box-by-type
             ref="search"
             v-model="searchValue"
+            :placeholder="searchPlaceholder"
             autofocus
             debounce="500"
+            :is-loading="isLoading"
             @input="handleSearchInput"
           />
         </template>
 
         <template #list-item="{ item }">
-          <component :is="config.component" :data="item" @select="handleSelectItem" />
+          <component :is="config.component" :data="item" />
         </template>
       </gl-collapsible-listbox>
 
@@ -173,15 +212,19 @@ export default {
       />
     </div>
 
-    <component
-      :is="config.component"
-      v-for="(item, index) of selectedItems"
-      :key="index"
-      :class="{ 'gl-border-t': index > 0 }"
-      class="gl-p-3"
-      :data="item"
-      can-delete
-      @delete="handleDeleteItem"
-    />
+    <div v-if="selectedItems.length">
+      <component
+        :is="config.component"
+        v-for="(item, index) of selectedItems"
+        :key="index"
+        :class="{ 'gl-border-t': index > 0 }"
+        class="gl-p-3"
+        :data="convertToCamelCase(item)"
+        can-delete
+        @delete="handleDeleteItem"
+      />
+    </div>
+
+    <div v-else class="gl-mt-5 gl-text-secondary">{{ emptyPlaceholder }}</div>
   </gl-card>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue b/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
new file mode 100644
index 00000000000000..115c27d35b8f60
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlAvatar, GlButton } from '@gitlab/ui';
+import { sprintf, __ } from '~/locale';
+
+export default {
+  name: 'ProjectItem',
+  components: {
+    GlAvatar,
+    GlButton,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    deleteButtonLabel() {
+      return sprintf(__('Delete %{name}'), { name: this.name });
+    },
+    name() {
+      return this.data.name;
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="gl-display-flex gl-align-items-center gl-gap-3" @click="$emit('select', name)">
+    <gl-avatar
+      :alt="name"
+      :entity-name="name"
+      :size="32"
+      shape="rect"
+      :src="data.avatarUrl"
+      fallback-on-error
+    />
+    <span class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-max-w-30">
+      <span class="gl-font-weight-bold">{{ name }}</span>
+      <span class="gl-text-gray-600">{{ data.nameWithNamespace }}</span>
+    </span>
+
+    <gl-button
+      v-if="canDelete"
+      icon="remove"
+      :aria-label="deleteButtonLabel"
+      category="tertiary"
+      @click="$emit('delete', name)"
+    />
+  </span>
+</template>
diff --git a/app/views/shared/integrations/_tabs.html.haml b/app/views/shared/integrations/_tabs.html.haml
index 781db59592ea92..bb94590bb9889d 100644
--- a/app/views/shared/integrations/_tabs.html.haml
+++ b/app/views/shared/integrations/_tabs.html.haml
@@ -1,9 +1,10 @@
+- custom_settings_title = @integration.title == 'Beyond Identity' && Feature.enabled?(:beyond_identity_exclusions) ? s_('Integrations|Exclusions') : s_('Integrations|Projects using custom settings')
 - if integration.instance_level?
   .tabs.gl-tabs
     %div
       = gl_tabs_nav({ class: 'gl-mb-5' }) do
         = gl_tab_link_to _('Settings'), scoped_edit_integration_path(integration, project: @project, group: @group)
-        = gl_tab_link_to s_('Integrations|Projects using custom settings'), scoped_overrides_integration_path(integration)
+        = gl_tab_link_to custom_settings_title, scoped_overrides_integration_path(integration)
 
       = yield
 
diff --git a/app/views/shared/integrations/overrides.html.haml b/app/views/shared/integrations/overrides.html.haml
index c25527a605c37f..5d67f63bb2a93d 100644
--- a/app/views/shared/integrations/overrides.html.haml
+++ b/app/views/shared/integrations/overrides.html.haml
@@ -5,4 +5,8 @@
 %h1.page-title.gl-font-size-h-display
   = @integration.title
 
-.js-vue-integration-overrides{ data: integration_overrides_data(@integration, project: @project, group: @group) }
+- if @integration.title == 'Beyond Identity' && Feature.enabled?(:beyond_identity_exclusions)
+  .js-vue-beyond-identity-exclusions{ data: integration_overrides_data(@integration) }
+
+- else
+  .js-vue-integration-overrides{ data: integration_overrides_data(@integration, project: @project, group: @group) }
diff --git a/config/feature_flags/beta/beyond_identity_exclusions.yml b/config/feature_flags/beta/beyond_identity_exclusions.yml
new file mode 100644
index 00000000000000..e599a4a93c1479
--- /dev/null
+++ b/config/feature_flags/beta/beyond_identity_exclusions.yml
@@ -0,0 +1,9 @@
+---
+name: beyond_identity_exclusions
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/454372
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/150664
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/457893
+milestone: '17.0'
+group: group::source code
+type: beta
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d1f4bf53cdd508..a4948d6761fbe0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3094,6 +3094,9 @@ msgstr ""
 msgid "Add environment"
 msgstr ""
 
+msgid "Add exclusions"
+msgstr ""
+
 msgid "Add existing confidential %{issuableType}"
 msgstr ""
 
@@ -27416,6 +27419,9 @@ msgstr ""
 msgid "Integrations|Add an integration"
 msgstr ""
 
+msgid "Integrations|Add exclusions"
+msgstr ""
+
 msgid "Integrations|All details"
 msgstr ""
 
@@ -27431,6 +27437,9 @@ msgstr ""
 msgid "Integrations|An error occurred while loading projects using custom settings."
 msgstr ""
 
+msgid "Integrations|An error occurred while loading projects."
+msgstr ""
+
 msgid "Integrations|An event will be triggered when one of the following items happen."
 msgstr ""
 
@@ -27455,6 +27464,9 @@ msgstr ""
 msgid "Integrations|Configure the scope of notifications."
 msgstr ""
 
+msgid "Integrations|Confirm %{type} exclusion removal"
+msgstr ""
+
 msgid "Integrations|Connection details"
 msgstr ""
 
@@ -27500,6 +27512,9 @@ msgstr ""
 msgid "Integrations|Error: You are trying to upload something other than an allowed file."
 msgstr ""
 
+msgid "Integrations|Exclusions"
+msgstr ""
+
 msgid "Integrations|GitLab administrators can set up integrations that all groups and projects inherit and use by default. These integrations apply to all groups and projects that don't already use custom settings. You can override custom settings for a group or project if the settings are necessary at that level. Learn more about %{integrations_link_start}instance-level integration management%{link_end}."
 msgstr ""
 
@@ -27545,6 +27560,12 @@ msgstr ""
 msgid "Integrations|Perform common tasks with slash commands."
 msgstr ""
 
+msgid "Integrations|Project exclusion removed"
+msgstr ""
+
+msgid "Integrations|Projects included in this list will no longer require commits to be signed."
+msgstr ""
+
 msgid "Integrations|Projects using custom settings"
 msgstr ""
 
@@ -27554,6 +27575,9 @@ msgstr ""
 msgid "Integrations|Projects using custom settings will not be impacted unless the project owner chooses to use parent level defaults."
 msgstr ""
 
+msgid "Integrations|Remove exclusion"
+msgstr ""
+
 msgid "Integrations|Reset integration?"
 msgstr ""
 
@@ -27593,12 +27617,18 @@ msgstr ""
 msgid "Integrations|The slash command verification request has expired. Please run the command again."
 msgstr ""
 
+msgid "Integrations|There are no exclusions"
+msgstr ""
+
 msgid "Integrations|There are no projects using custom settings"
 msgstr ""
 
 msgid "Integrations|This integration, and inheriting projects were reset."
 msgstr ""
 
+msgid "Integrations|This will remove %{name} as an exclusion. Are you sure you want to continue?"
+msgstr ""
+
 msgid "Integrations|To keep this project going, create a new issue."
 msgstr ""
 
@@ -33842,6 +33872,9 @@ msgstr ""
 msgid "No %{providerTitle} repositories found"
 msgstr ""
 
+msgid "No %{title} have been added."
+msgstr ""
+
 msgid "No Epic"
 msgstr ""
 
@@ -45592,6 +45625,9 @@ msgstr ""
 msgid "Search templates"
 msgstr ""
 
+msgid "Search to add %{title}"
+msgstr ""
+
 msgid "Search users"
 msgstr ""
 
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 6de9a77582cd2a..fafef1060c825c 100644
--- a/spec/frontend/vue_shared/components/list_selector/index_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/index_spec.js
@@ -131,7 +131,6 @@ describe('List Selector spec', () => {
 
         it('renders a List box component with the correct props', () => {
           expect(findSearchResultsDropdown().props()).toMatchObject({
-            multiple: true,
             items: searchResponse,
           });
         });
@@ -142,7 +141,7 @@ describe('List Selector spec', () => {
 
         it('emits an event when a search result is selected', () => {
           const firstSearchResult = searchResponse[0];
-          findAllUserComponents().at(0).vm.$emit('select', firstSearchResult.username);
+          findSearchResultsDropdown().vm.$emit('select', firstSearchResult.username);
 
           expect(wrapper.emitted('select')).toEqual([
             [{ ...firstSearchResult, text: 'Administrator', value: 'root' }],
@@ -214,7 +213,6 @@ describe('List Selector spec', () => {
 
       it('renders a dropdown for the search results', () => {
         expect(findSearchResultsDropdown().props()).toMatchObject({
-          multiple: true,
           items: searchResponse,
         });
       });
@@ -225,7 +223,7 @@ describe('List Selector spec', () => {
 
       it('emits an event when a search result is selected', () => {
         const firstSearchResult = searchResponse[0];
-        findAllGroupComponents().at(0).vm.$emit('select', firstSearchResult.name);
+        findSearchResultsDropdown().vm.$emit('select', firstSearchResult.name);
 
         expect(wrapper.emitted('select')).toEqual([
           [{ ...firstSearchResult, text: 'Flightjs', value: 'Flightjs' }],
-- 
GitLab


From 4f589b902929f2d701cf10896285bfa2de686efb Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Thu, 25 Apr 2024 13:21:10 +0200
Subject: [PATCH 2/5] Add unit tests

Added unit tests for the affected components
---
 .../components/add_exclusions_drawer.vue      |   3 +-
 .../components/exclusions_list.vue            |  14 +--
 .../components/exclusions_tabs.vue            |  17 +--
 .../remove_exclusion_confirmation_modal.vue   |   2 +-
 .../admin/integrations/overrides/index.js     |   4 +-
 locale/gitlab.pot                             |   3 -
 .../components/add_exclusions_drawer_spec.js  |  99 +++++++++++++++
 .../components/exclusions_list_item_spec.js   |  57 +++++++++
 .../components/exclusions_list_spec.js        | 113 ++++++++++++++++++
 .../components/exclusions_tabs_spec.js        |  39 ++++++
 .../beyond_identity/components/mock_data.js   |   4 +
 ...emove_exclusion_confirmation_modal_spec.js |  40 +++++++
 .../components/list_selector/index_spec.js    |  90 ++++++++++++++
 .../list_selector/project_item_spec.js        |  59 +++++++++
 14 files changed, 510 insertions(+), 34 deletions(-)
 create mode 100644 spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js
 create mode 100644 spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js
 create mode 100644 spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
 create mode 100644 spec/frontend/integrations/beyond_identity/components/exclusions_tabs_spec.js
 create mode 100644 spec/frontend/integrations/beyond_identity/components/mock_data.js
 create mode 100644 spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
 create mode 100644 spec/frontend/vue_shared/components/list_selector/project_item_spec.js

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 14834912b7dd19..64bbd0e30e6314 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
@@ -58,7 +58,7 @@ export default {
     v-on="$listeners"
   >
     <template #title>
-      <h2 class="gl-font-size-h2 gl-mt-0">{{ $options.i18n.addExclusions }}</h2>
+      <h2 class="gl-font-size-h2 gl-mt-0" data-testid="title">{{ $options.i18n.addExclusions }}</h2>
     </template>
 
     <template #default>
@@ -74,6 +74,7 @@ export default {
         class="gl-ml-5"
         variant="confirm"
         :loading="isLoading"
+        data-testid="add-button"
         @click="handleAddExclusions"
       >
         {{ $options.i18n.addExclusions }}
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 ec6acbb8676626..ab931358bc9378 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAlert, GlButton, GlEmptyState } from '@gitlab/ui';
+import { GlButton, GlEmptyState } from '@gitlab/ui';
 import { sortBy } from 'lodash';
 import { s__, __ } from '~/locale';
 import globalToast from '~/vue_shared/plugins/global_toast';
@@ -11,7 +11,6 @@ import ConfirmRemovalModal from './remove_exclusion_confirmation_modal.vue';
 export default {
   name: 'ExclusionsList',
   components: {
-    GlAlert,
     GlButton,
     GlEmptyState,
     ExclusionsTabs,
@@ -19,10 +18,8 @@ export default {
     AddExclusionsDrawer,
     ConfirmRemovalModal,
   },
-  props: {},
   data() {
     return {
-      errorMessage: null,
       isDrawerOpen: false,
       isConfirmRemovalModalOpen: false,
       exclusions: [],
@@ -81,7 +78,6 @@ export default {
   },
   i18n: {
     exclusionRemoved: s__('Integrations|Project exclusion removed'),
-    defaultErrorMessage: s__('Integrations|An error occurred while loading projects.'),
     emptyText: s__('Integrations|There are no exclusions'),
     addExclusions: s__('Integrations|Add exclusions'),
     helpText: s__(
@@ -104,8 +100,6 @@ export default {
       }}</gl-button>
     </div>
 
-    <gl-alert v-if="errorMessage" variant="danger">{{ errorMessage }}</gl-alert>
-
     <gl-empty-state v-if="!exclusions.length" :title="$options.i18n.emptyText" />
 
     <exclusions-list-item
@@ -123,10 +117,10 @@ export default {
     />
 
     <confirm-removal-modal
-      v-if="isConfirmRemovalModalOpen"
+      v-if="exclusionToRemove && isConfirmRemovalModalOpen"
       :visible="isConfirmRemovalModalOpen"
-      :name="exclusionToRemove?.name"
-      :type="exclusionToRemove?.type"
+      :name="exclusionToRemove.name"
+      :type="exclusionToRemove.type"
       @primary="confirmRemoveExclusion"
       @hide="hideRemoveModal"
     />
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
index c98b2ced739e86..8dd4becee6cbf6 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_tabs.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlBadge, GlNavItem, GlTabs, GlTab } from '@gitlab/ui';
+import { GlNavItem, GlTabs, GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { settingsTabTitle } from '~/integrations/constants';
 
 export default {
   name: 'ExclusionsTabs',
   components: {
-    GlBadge,
     GlNavItem,
     GlTabs,
     GlTab,
@@ -16,13 +15,6 @@ export default {
       default: '',
     },
   },
-  props: {
-    projectOverridesCount: {
-      type: [Number, String],
-      required: false,
-      default: null,
-    },
-  },
   i18n: {
     settingsTabTitle,
     projectsTabTitle: s__('Integrations|Exclusions'),
@@ -41,13 +33,6 @@ export default {
     <gl-tab active>
       <template #title>
         {{ $options.i18n.projectsTabTitle }}
-        <gl-badge
-          v-if="projectOverridesCount !== null"
-          variant="muted"
-          size="sm"
-          class="gl-tab-counter-badge"
-          >{{ projectOverridesCount }}</gl-badge
-        >
       </template>
     </gl-tab>
   </gl-tabs>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
index aacf2f8f2d2137..507ee436924b2f 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
@@ -43,7 +43,7 @@ export default {
       text: __('Cancel'),
       attributes: { category: 'secondary' },
     },
-    modalId: 'confirm-remove-deploy-exclusion',
+    modalId: 'confirm-remove-exclusion',
   },
 };
 </script>
diff --git a/app/assets/javascripts/pages/admin/integrations/overrides/index.js b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
index 645f3df79ae7d0..437c77dd25c1a5 100644
--- a/app/assets/javascripts/pages/admin/integrations/overrides/index.js
+++ b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
@@ -23,9 +23,7 @@ const initBeyondIdentityExclusions = () => {
       editPath,
     },
     render(createElement) {
-      return createElement(ExclusionsList, {
-        props: {},
-      });
+      return createElement(ExclusionsList);
     },
   });
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a4948d6761fbe0..6e6b68becb6628 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27437,9 +27437,6 @@ msgstr ""
 msgid "Integrations|An error occurred while loading projects using custom settings."
 msgstr ""
 
-msgid "Integrations|An error occurred while loading projects."
-msgstr ""
-
 msgid "Integrations|An event will be triggered when one of the following items happen."
 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
new file mode 100644
index 00000000000000..fb153f53343c81
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/add_exclusions_drawer_spec.js
@@ -0,0 +1,99 @@
+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';
+
+jest.mock('~/lib/utils/dom_utils', () => ({
+  getContentWrapperHeight: jest.fn(),
+}));
+
+describe('AddExclusionsDrawer component', () => {
+  let wrapper;
+
+  const findTitle = () => wrapper.findByTestId('title');
+  const findDrawer = () => wrapper.findComponent(GlDrawer);
+  const findListSelector = () => wrapper.findComponent(ListSelector);
+  const findAddExclusionsButton = () => wrapper.findByTestId('add-button');
+
+  const createComponent = (props) => {
+    return shallowMountExtended(AddExclusionsDrawer, {
+      propsData: { isOpen: true, ...props },
+    });
+  };
+
+  describe('default behavior', () => {
+    const mockHeaderHeight = '50px';
+
+    beforeEach(() => {
+      getContentWrapperHeight.mockReturnValue(mockHeaderHeight);
+      wrapper = createComponent();
+    });
+
+    it('configures the drawer with header height and z-index', () => {
+      expect(findDrawer().props()).toMatchObject({
+        headerHeight: mockHeaderHeight,
+        zIndex: DRAWER_Z_INDEX,
+      });
+    });
+  });
+
+  describe('when closed', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isOpen: false });
+    });
+
+    it('the drawer is not shown', () => {
+      expect(findDrawer().props('open')).toBe(false);
+    });
+  });
+
+  describe('when open', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isOpen: true });
+    });
+
+    it('opens the drawer', () => {
+      expect(findDrawer().props('open')).toBe(true);
+    });
+
+    it('renders a title', () => {
+      expect(findTitle().text()).toEqual('Add exclusions');
+    });
+
+    it('renders a project list selector', () => {
+      expect(findListSelector().props('type')).toBe('projects');
+    });
+
+    it('renders a button for adding exclusions', () => {
+      expect(findAddExclusionsButton().exists()).toBe(true);
+    });
+  });
+
+  describe('when exclusions are selected', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ showDrawer: true });
+
+      findListSelector().vm.$emit('select', exclusionsMock[0]);
+      findListSelector().vm.$emit('select', exclusionsMock[1]);
+    });
+
+    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'));
+
+      it('emits the selected exclusions', () => {
+        expect(wrapper.emitted('add')).toEqual([[exclusionsMock]]);
+      });
+
+      it('clears the list of selected exclusions', () => {
+        expect(findListSelector().props('selectedItems')).toEqual([]);
+      });
+    });
+  });
+});
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
new file mode 100644
index 00000000000000..ca0047cbdaa7ce
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_item_spec.js
@@ -0,0 +1,57 @@
+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';
+
+describe('ExclusionsListItem component', () => {
+  let wrapper;
+  const exclusion = exclusionsMock[0];
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findByText = (text) => wrapper.findByText(text);
+  const findFindRemoveButton = () => wrapper.findComponent(GlButton);
+
+  const createComponent = () =>
+    shallowMountExtended(ExclusionsListItem, { propsData: { exclusion } });
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  describe('default behavior', () => {
+    it('renders an icon', () => {
+      expect(findIcon().props('name')).toBe(exclusion.icon);
+    });
+
+    it('renders an avatar', () => {
+      expect(findAvatar().props()).toMatchObject({
+        alt: exclusion.name,
+        entityName: exclusion.name,
+        size: 32,
+        shape: 'rect',
+        src: exclusion.avatarUrl,
+        fallbackOnError: true,
+      });
+    });
+
+    it('renders a name', () => {
+      expect(findByText(exclusion.name).exists()).toBe(true);
+    });
+
+    it('renders a remove button', () => {
+      expect(findFindRemoveButton().props()).toMatchObject({
+        icon: 'remove',
+        category: 'tertiary',
+      });
+    });
+  });
+
+  describe('remove button', () => {
+    it('emits remove event when clicked', () => {
+      findFindRemoveButton().vm.$emit('click');
+
+      expect(wrapper.emitted('remove')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
new file mode 100644
index 00000000000000..a6250907d56327
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -0,0 +1,113 @@
+import { nextTick } from 'vue';
+import { GlEmptyState } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ExclusionsList from '~/integrations/beyond_identity/components/exclusions_list.vue';
+import AddExclusionsDrawer from '~/integrations/beyond_identity/components/add_exclusions_drawer.vue';
+import ExclusionsTabs from '~/integrations/beyond_identity/components/exclusions_tabs.vue';
+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';
+
+jest.mock('~/vue_shared/plugins/global_toast');
+
+describe('ExclusionsList component', () => {
+  let wrapper;
+
+  const findTabs = () => wrapper.findComponent(ExclusionsTabs);
+  const findListItems = () => wrapper.findAllComponents(ExclusionsListItem);
+  const findConfirmRemoveModal = () => wrapper.findComponent(ConfirmRemovalModal);
+  const findByText = (text) => wrapper.findByText(text);
+  const findAddExclusionsButton = () => findByText('Add exclusions');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findDrawer = () => wrapper.findComponent(AddExclusionsDrawer);
+
+  const createComponent = () => shallowMountExtended(ExclusionsList);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  describe('default behavior', () => {
+    it('renders tabs', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+
+    it('renders help text', () => {
+      expect(
+        findByText(
+          'Projects included in this list will no longer require commits to be signed.',
+        ).exists(),
+      ).toBe(true);
+    });
+
+    it('renders an Add exclusions button', () => {
+      expect(findAddExclusionsButton().exists()).toBe(true);
+    });
+
+    it('renders an Empty state', () => {
+      expect(findEmptyState().props('title')).toBe('There are no exclusions');
+    });
+
+    it('does not render an open drawer', () => {
+      expect(findDrawer().props('isOpen')).toBe(false);
+    });
+  });
+
+  describe('adding Exclusions', () => {
+    beforeEach(() => findAddExclusionsButton().vm.$emit('click'));
+
+    it('opens a drawer', () => {
+      expect(findDrawer().props('isOpen')).toBe(true);
+    });
+
+    describe('Exclusions added', () => {
+      beforeEach(() => findDrawer().vm.$emit('add', exclusionsMock));
+
+      it('lists the added exclusions, sorted by name', async () => {
+        await nextTick();
+
+        expect(findListItems().at(0).props('exclusion')).toMatchObject(exclusionsMock[1]);
+        expect(findListItems().at(1).props('exclusion')).toMatchObject(exclusionsMock[0]);
+      });
+
+      it('closes the drawer', () => {
+        expect(findDrawer().props('isOpen')).toBe(false);
+      });
+    });
+  });
+
+  describe('removing Exclusions', () => {
+    beforeEach(async () => {
+      findAddExclusionsButton().vm.$emit('click');
+      findDrawer().vm.$emit('add', exclusionsMock);
+      await nextTick();
+      findListItems().at(1).vm.$emit('remove');
+    });
+
+    it('opens a confirmation modal', () => {
+      expect(findConfirmRemoveModal().props()).toMatchObject({
+        name: 'foo',
+        type: 'project',
+        visible: true,
+      });
+    });
+
+    describe('confirmation modal primary action', () => {
+      beforeEach(() => findConfirmRemoveModal().vm.$emit('primary'));
+
+      it('removes the exclusion', () => {
+        expect(findListItems().length).toBe(1);
+      });
+
+      it('renders a toast', () => {
+        expect(showToast).toHaveBeenCalledWith('Project exclusion removed', {
+          action: {
+            text: 'Undo',
+            onClick: expect.any(Function),
+          },
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/beyond_identity/components/exclusions_tabs_spec.js b/spec/frontend/integrations/beyond_identity/components/exclusions_tabs_spec.js
new file mode 100644
index 00000000000000..271122cd00f8ff
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_tabs_spec.js
@@ -0,0 +1,39 @@
+import { GlNavItem, GlTabs, GlTab } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ExclusionsTabs from '~/integrations/beyond_identity/components/exclusions_tabs.vue';
+
+describe('ExclusionsTabs component', () => {
+  let wrapper;
+  const editPath = 'path/to/edit';
+
+  const findTabs = () => wrapper.findComponent(GlTabs);
+  const findNavItem = () => wrapper.findComponent(GlNavItem);
+  const findTab = () => wrapper.findComponent(GlTab);
+
+  const createComponent = () =>
+    shallowMountExtended(ExclusionsTabs, {
+      provide: {
+        editPath,
+      },
+      stubs: { GlTabs },
+    });
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  describe('default behavior', () => {
+    it('renders a tabs component', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+
+    it('renders a nav item for Settings', () => {
+      expect(findNavItem().text()).toBe('Settings');
+      expect(findNavItem().attributes('href')).toBe(editPath);
+    });
+
+    it('renders a tab for Exclusions', () => {
+      expect(findTab().text()).toBe('Exclusions');
+    });
+  });
+});
diff --git a/spec/frontend/integrations/beyond_identity/components/mock_data.js b/spec/frontend/integrations/beyond_identity/components/mock_data.js
new file mode 100644
index 00000000000000..2759d1ce6caaf6
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/mock_data.js
@@ -0,0 +1,4 @@
+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' },
+];
diff --git a/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js b/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
new file mode 100644
index 00000000000000..fab149838f5a50
--- /dev/null
+++ b/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
@@ -0,0 +1,40 @@
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ConfirmRemovalModal from '~/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue';
+
+describe('ConfirmRemovalModal component', () => {
+  let wrapper;
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const createComponent = () =>
+    shallowMountExtended(ConfirmRemovalModal, {
+      propsData: {
+        visible: true,
+        name: 'Some project',
+        type: 'project',
+      },
+      stubs: { GlSprintf },
+    });
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  describe('default behavior', () => {
+    it('renders a modal component', () => {
+      expect(findModal().props()).toMatchObject({
+        actionPrimary: { text: 'Remove exclusion', attributes: { variant: 'danger' } },
+        actionSecondary: { text: 'Cancel', attributes: { category: 'secondary' } },
+        modalId: 'confirm-remove-exclusion',
+        title: 'Confirm project exclusion removal',
+        visible: true,
+      });
+    });
+
+    it('renders body content', () => {
+      expect(findModal().text()).toBe(
+        'This will remove Some project as an exclusion. Are you sure you want to continue?',
+      );
+    });
+  });
+});
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 fafef1060c825c..a51fd2eb65c42e 100644
--- a/spec/frontend/vue_shared/components/list_selector/index_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/index_spec.js
@@ -2,11 +2,13 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlCard, GlIcon, GlCollapsibleListbox, GlSearchBoxByType } from '@gitlab/ui';
 import Api from '~/api';
+import RestApi from '~/rest_api';
 import { createAlert } from '~/alert';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ListSelector from '~/vue_shared/components/list_selector/index.vue';
 import UserItem from '~/vue_shared/components/list_selector/user_item.vue';
 import GroupItem from '~/vue_shared/components/list_selector/group_item.vue';
+import ProjectItem from '~/vue_shared/components/list_selector/project_item.vue';
 import DeployKeyItem from '~/vue_shared/components/list_selector/deploy_key_item.vue';
 import groupsAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -14,6 +16,14 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { USERS_RESPONSE_MOCK, GROUPS_RESPONSE_MOCK } from './mock_data';
 
 jest.mock('~/alert');
+jest.mock('~/rest_api', () => ({
+  getProjects: jest.fn().mockResolvedValue({
+    data: [
+      { name: 'Project 1', id: '1' },
+      { name: 'Project 2', id: '2' },
+    ],
+  }),
+}));
 Vue.use(VueApollo);
 
 describe('List Selector spec', () => {
@@ -36,6 +46,10 @@ describe('List Selector spec', () => {
     type: 'deployKeys',
   };
 
+  const PROJECTS_MOCK_PROPS = {
+    type: 'projects',
+  };
+
   const groupsAutocompleteQuerySuccess = jest.fn().mockResolvedValue(GROUPS_RESPONSE_MOCK);
 
   const createComponent = async (props) => {
@@ -60,6 +74,7 @@ describe('List Selector spec', () => {
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findAllUserComponents = () => wrapper.findAllComponents(UserItem);
   const findAllGroupComponents = () => wrapper.findAllComponents(GroupItem);
+  const findAllProjectComponents = () => wrapper.findAllComponents(ProjectItem);
   const findAllDeployKeyComponents = () => wrapper.findAllComponents(DeployKeyItem);
 
   beforeEach(() => {
@@ -67,6 +82,14 @@ describe('List Selector spec', () => {
     jest.spyOn(Api, 'groupMembers').mockResolvedValue({ data: USERS_RESPONSE_MOCK });
   });
 
+  describe('empty state', () => {
+    beforeEach(() => createComponent(USERS_MOCK_PROPS));
+
+    it('renders an empty placeholder', () => {
+      expect(wrapper.findByText('No users have been added.').exists()).toBe(true);
+    });
+  });
+
   describe('Users type', () => {
     const search = 'foo';
 
@@ -299,4 +322,71 @@ describe('List Selector spec', () => {
       // https://gitlab.com/gitlab-org/gitlab/-/issues/432494
     });
   });
+
+  describe('Projects type', () => {
+    beforeEach(() => createComponent(PROJECTS_MOCK_PROPS));
+
+    it('renders a correct title', () => {
+      expect(findTitle().text()).toContain('Projects');
+    });
+
+    it('renders the correct icon', () => {
+      expect(findIcon().props('name')).toBe('project');
+    });
+
+    describe('searching', () => {
+      const searchResponse = [
+        { name: 'Project 1', id: '1' },
+        { name: 'Project 2', id: '2' },
+      ];
+      const search = 'Project';
+
+      const emitSearchInput = async () => {
+        findSearchBox().vm.$emit('input', search);
+        await waitForPromises();
+      };
+
+      beforeEach(() => emitSearchInput());
+
+      it('calls query with correct variables when Search box receives an input', () => {
+        expect(RestApi.getProjects).toHaveBeenCalledWith(search, { membership: false });
+      });
+
+      it('renders a dropdown for the search results', () => {
+        expect(findSearchResultsDropdown().props()).toMatchObject({
+          items: searchResponse,
+        });
+      });
+
+      it('renders a project component for each search result', () => {
+        expect(findAllProjectComponents().length).toBe(searchResponse.length);
+      });
+    });
+
+    describe('selected items', () => {
+      const selectedGroup = { name: 'Flightjs' };
+      const selectedItems = [selectedGroup];
+      beforeEach(() => createComponent({ ...GROUPS_MOCK_PROPS, selectedItems }));
+
+      it('renders a heading with the total selected items', () => {
+        expect(findTitle().text()).toContain('Groups');
+        expect(findTitle().text()).toContain('1');
+      });
+
+      it('renders a group component for each selected item', () => {
+        expect(findAllGroupComponents().length).toBe(selectedItems.length);
+        expect(findAllGroupComponents().at(0).props()).toMatchObject({
+          data: selectedGroup,
+          canDelete: true,
+        });
+      });
+
+      it('emits a delete event when a delete event is emitted from the group component', () => {
+        const name = 'Flightjs';
+        findAllGroupComponents().at(0).vm.$emit('delete', name);
+
+        expect(wrapper.emitted('delete')).toEqual([[name]]);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/list_selector/project_item_spec.js b/spec/frontend/vue_shared/components/list_selector/project_item_spec.js
new file mode 100644
index 00000000000000..eeb4e602d74eb9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/list_selector/project_item_spec.js
@@ -0,0 +1,59 @@
+import { GlAvatar } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ProjectItem from '~/vue_shared/components/list_selector/project_item.vue';
+
+describe('GroupItem spec', () => {
+  let wrapper;
+
+  const MOCK_PROJECT = {
+    name: 'Project 1',
+    avatarUrl: 'some/avatar.jpg',
+    id: 1,
+    nameWithNamespace: 'Group 1 / Project 1',
+  };
+
+  const createComponent = (props) => {
+    wrapper = mountExtended(ProjectItem, {
+      propsData: {
+        data: MOCK_PROJECT,
+        ...props,
+      },
+    });
+  };
+
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findDeleteButton = () => wrapper.findByRole('button', { fullName: 'Delete Group 1' });
+
+  beforeEach(() => createComponent());
+
+  it('renders an Avatar component', () => {
+    expect(findAvatar().props('size')).toBe(32);
+    expect(findAvatar().attributes()).toMatchObject({
+      src: MOCK_PROJECT.avatarUrl,
+      alt: MOCK_PROJECT.name,
+    });
+  });
+
+  it('renders a name and namespace', () => {
+    expect(wrapper.text()).toContain(MOCK_PROJECT.name);
+    expect(wrapper.text()).toContain(MOCK_PROJECT.nameWithNamespace);
+  });
+
+  it('does not render a delete button by default', () => {
+    expect(findDeleteButton().exists()).toBe(false);
+  });
+
+  describe('Delete button', () => {
+    beforeEach(() => createComponent({ canDelete: true }));
+
+    it('renders a delete button', () => {
+      expect(findDeleteButton().props('icon')).toBe('remove');
+    });
+
+    it('emits a delete event if the delete button is clicked', () => {
+      findDeleteButton().trigger('click');
+
+      expect(wrapper.emitted('delete')).toEqual([[MOCK_PROJECT.name]]);
+    });
+  });
+});
-- 
GitLab


From cf318acd76026c29c3bb6e059a302bbdafc932e5 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 26 Apr 2024 16:00:59 +0200
Subject: [PATCH 3/5] Improve UI text

General UI text improvements
---
 .../beyond_identity/components/exclusions_list.vue    |  4 +---
 .../remove_exclusion_confirmation_modal.vue           |  2 +-
 .../components/list_selector/project_item.vue         |  4 ++--
 locale/gitlab.pot                                     | 11 +++++++----
 .../components/exclusions_list_spec.js                |  4 +---
 .../remove_exclusion_confirmation_modal_spec.js       |  2 +-
 6 files changed, 13 insertions(+), 14 deletions(-)

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 ab931358bc9378..89d4695b86f3e1 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -80,9 +80,7 @@ export default {
     exclusionRemoved: s__('Integrations|Project exclusion removed'),
     emptyText: s__('Integrations|There are no exclusions'),
     addExclusions: s__('Integrations|Add exclusions'),
-    helpText: s__(
-      'Integrations|Projects included in this list will no longer require commits to be signed.',
-    ),
+    helpText: s__('Integrations|Projects in this list no longer require commits to be signed.'),
   },
 };
 </script>
diff --git a/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
index 507ee436924b2f..6ba61e97b34ca0 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/remove_exclusion_confirmation_modal.vue
@@ -30,7 +30,7 @@ export default {
   },
   i18n: {
     body: s__(
-      'Integrations|This will remove %{name} as an exclusion. Are you sure you want to continue?',
+      "Integrations|You're removing an exclusion for %{name}. Are you sure you want to continue?",
     ),
     title: s__('Integrations|Confirm %{type} exclusion removal'),
   },
diff --git a/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue b/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
index 115c27d35b8f60..6617ec68220ce3 100644
--- a/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
+++ b/app/assets/javascripts/vue_shared/components/list_selector/project_item.vue
@@ -21,7 +21,7 @@ export default {
   },
   computed: {
     deleteButtonLabel() {
-      return sprintf(__('Delete %{name}'), { name: this.name });
+      return sprintf(__('Remove exclusion for %{name}'), { name: this.name });
     },
     name() {
       return this.data.name;
@@ -50,7 +50,7 @@ export default {
       icon="remove"
       :aria-label="deleteButtonLabel"
       category="tertiary"
-      @click="$emit('delete', name)"
+      @click="$emit('delete', data.id)"
     />
   </span>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6e6b68becb6628..6112f55689e11b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27560,7 +27560,7 @@ msgstr ""
 msgid "Integrations|Project exclusion removed"
 msgstr ""
 
-msgid "Integrations|Projects included in this list will no longer require commits to be signed."
+msgid "Integrations|Projects in this list no longer require commits to be signed."
 msgstr ""
 
 msgid "Integrations|Projects using custom settings"
@@ -27623,9 +27623,6 @@ msgstr ""
 msgid "Integrations|This integration, and inheriting projects were reset."
 msgstr ""
 
-msgid "Integrations|This will remove %{name} as an exclusion. Are you sure you want to continue?"
-msgstr ""
-
 msgid "Integrations|To keep this project going, create a new issue."
 msgstr ""
 
@@ -27650,6 +27647,9 @@ msgstr ""
 msgid "Integrations|You haven't activated any integrations yet."
 msgstr ""
 
+msgid "Integrations|You're removing an exclusion for %{name}. Are you sure you want to continue?"
+msgstr ""
+
 msgid "Integrations|You've activated every integration 🎉"
 msgstr ""
 
@@ -42583,6 +42583,9 @@ msgstr ""
 msgid "Remove epic reference"
 msgstr ""
 
+msgid "Remove exclusion for %{name}"
+msgstr ""
+
 msgid "Remove favicon"
 msgstr ""
 
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 a6250907d56327..875e9f0a6f546f 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -35,9 +35,7 @@ describe('ExclusionsList component', () => {
 
     it('renders help text', () => {
       expect(
-        findByText(
-          'Projects included in this list will no longer require commits to be signed.',
-        ).exists(),
+        findByText('Projects in this list no longer require commits to be signed.').exists(),
       ).toBe(true);
     });
 
diff --git a/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js b/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
index fab149838f5a50..92e40fca314c4b 100644
--- a/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/remove_exclusion_confirmation_modal_spec.js
@@ -33,7 +33,7 @@ describe('ConfirmRemovalModal component', () => {
 
     it('renders body content', () => {
       expect(findModal().text()).toBe(
-        'This will remove Some project as an exclusion. Are you sure you want to continue?',
+        "You're removing an exclusion for Some project. Are you sure you want to continue?",
       );
     });
   });
-- 
GitLab


From bab055f32d708075b6a78a70841fd83b1736e6a8 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 26 Apr 2024 16:25:31 +0200
Subject: [PATCH 4/5] Update unit test

Updated the unit test to assert project.id instead of project.name
---
 .../vue_shared/components/list_selector/project_item_spec.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/frontend/vue_shared/components/list_selector/project_item_spec.js b/spec/frontend/vue_shared/components/list_selector/project_item_spec.js
index eeb4e602d74eb9..f0b0b241e5b776 100644
--- a/spec/frontend/vue_shared/components/list_selector/project_item_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/project_item_spec.js
@@ -53,7 +53,7 @@ describe('GroupItem spec', () => {
     it('emits a delete event if the delete button is clicked', () => {
       findDeleteButton().trigger('click');
 
-      expect(wrapper.emitted('delete')).toEqual([[MOCK_PROJECT.name]]);
+      expect(wrapper.emitted('delete')).toEqual([[MOCK_PROJECT.id]]);
     });
   });
 });
-- 
GitLab


From d373a2b479e6c0b9e51e59ed2eb3763f1724e39d Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 29 Apr 2024 10:20:39 +0200
Subject: [PATCH 5/5] Add aria-label to the remove button

Added the label to take care of accessibility warning
---
 .../beyond_identity/components/exclusions_list_item.vue  | 9 ++++++++-
 .../components/exclusions_list_item_spec.js              | 2 ++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
index af995807c2fcb9..e44bf92b7427e4 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list_item.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlIcon, GlAvatar } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   name: 'ExclusionsListItem',
@@ -14,6 +15,7 @@ export default {
       required: true,
     },
   },
+  i18n: { remove: __('Remove') },
 };
 </script>
 
@@ -34,6 +36,11 @@ export default {
       <span class="gl-font-weight-bold">{{ exclusion.name }}</span>
     </span>
 
-    <gl-button icon="remove" category="tertiary" @click="() => $emit('remove')" />
+    <gl-button
+      icon="remove"
+      :aria-label="$options.i18n.remove"
+      category="tertiary"
+      @click="() => $emit('remove')"
+    />
   </div>
 </template>
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 ca0047cbdaa7ce..1fb9141c98379b 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
@@ -40,6 +40,8 @@ describe('ExclusionsListItem component', () => {
     });
 
     it('renders a remove button', () => {
+      expect(findFindRemoveButton().attributes('aria-label')).toBe('Remove');
+
       expect(findFindRemoveButton().props()).toMatchObject({
         icon: 'remove',
         category: 'tertiary',
-- 
GitLab