Add UI components for Beyond Identity check exclusions by Projects

What does this MR do and why?

This is the first iteration for allowing admins to exclude groups and/or projects from the Beyond Identity check.

In this iteration we:

• Introduce a feature flag called beyond_identity_exclusions
• List the Beyond Identity check exclusions (Projects, no backend integration)
• Ability to exclude a Project (no backend integration)
• Ability to Remove a project from the exclusion list (no backend integration)
• Documentation for exclusions by Projects will be added in a follow-up MR (once the feature is usable)

changes in this MR have not been integrated with the backend, so exclusions will not be persisted. Frontend/backend integration will happen in a follow-up MR.

Implementation breakdown

description	MR
Add UI components for Beyond Identity check exclusions by Projects	this MR
Frontend/backend integration for Beyond Identity check exclusions by Projects + docs	follow-up MR
Add UI components for Beyond Identity check exclusions by Groups	follow-up MR
Frontend/backend integration for Beyond Identity check exclusions by Groups + docs	follow-up MR
Add filtering for the Beyond Identity check exclusions list + docs	follow-up MR/issue

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Enable the beyond_identity_exclusions feature flag
2. Navigate to Admin > Settings > Integrations
3. Click on Beyond Identity > Configure
4. Click on the Exclusions tab
5. Click on Add exclusions to open the Add exclusions Drawer
6. Search and select Projects in the drawer
7. Click on Add exclusions
8. The Project(s) selected in Step 6 should be added to the list of exclusions
9. Removing one or more of the exclusions should remove it from the list

Related to #454372 (closed)

app/assets/javascripts/integrations/beyond_identity/components/beyond_identity_exclusions.vue

 <script>
-import { GlAlert, GlButton } from '@gitlab/ui';
+import { GlAlert, GlButton, GlIcon, GlAvatar } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import BeyondIdentityTabs from './beyond_identity_tabs.vue';
 import AddExclusionsDrawer from './add_exclusions_drawer.vue';
@@ -11,21 +11,51 @@ export default {
     GlButton,
     BeyondIdentityTabs,
     AddExclusionsDrawer,
+    GlAvatar,
+    GlIcon,
   },
   props: {},
   data() {
     return {
       errorMessage: null,
       isDrawerOpen: false,
+      exclusions: [],
+      lastRemovedExclusion: null, // needed for Undo
     };
   },
-  computed: {},
+  computed: {
+    formattedExclusions() {
+      return this.exclusions.map((exclusion) => ({
+        ...exclusion,
+        icon: exclusion.type === 'project' ? 'project' : 'group',
+      }));
+    },
+  },
   created() {
     this.loadExclusions();
   },
   methods: {
     loadExclusions() {
-      // TODO
+      // TODO: replace mock data with real data
+      this.exclusions = [
+        { name: 'Project 1', id: 1, type: 'project', avatarUrl: null },
+        { name: 'Project 2', id: 2, type: 'project', avatarUrl: null },
+      ];
+    },
+    removeExclusion(exclusion) {
+      // TODO: open confirmation modal
+      // TODO: replace with backend call
+      this.lastRemovedExclusion = exclusion;
+      this.exclusions = this.exclusions.filter((item) => item.id !== exclusion);
+
+      // TODO: show toast (with Undo action)
+    },
+    undoRemoveExclusion() {
+      // TODO: replace with backend call
+      this.exclusions.push(this.lastRemovedExclusion);
+    },
+    toggleDrawer() {
+      this.isDrawerOpen = !this.isDrawerOpen;
     },
   },
   i18n: {
@@ -56,7 +86,27 @@ export default {
       {{ errorMessage }}
     </gl-alert>
 
-    <div v-else>TODO: List exclusions here</div>
+    <div
+      v-for="(exclusion, index) in formattedExclusions"
+      v-else
+      :key="index"
+      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="() => removeExclusion(exclusion.id)" />
+    </div>
 
     <add-exclusions-drawer :is-open="isDrawerOpen" @close="isDrawerOpen = false" />
   </div>