From d4ad278c25f96ec2070cafb1a0d75c75519e60fd Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Thu, 25 Apr 2024 12:07:10 +0200
Subject: [PATCH 1/5] Frontend/Backend integration for Beyond Identity
 exclusions

Added Frontend/Backend integration for Beyond Identity exclusions
---
 .../components/exclusions_list.vue            | 154 +++++++++++++---
 .../integrations/beyond_identity/constants.js |  10 +
 ...beyond_identity_exclusion.mutation.graphql |  13 ++
 ...beyond_identity_exclusion.mutation.graphql |  10 +
 .../beyond_identity_exclusions.query.graphql  |  22 +++
 .../project/integrations/beyond_identity.md   |  24 +++
 locale/gitlab.pot                             |   9 +
 .../components/exclusions_list_spec.js        | 174 +++++++++++++++---
 .../beyond_identity/components/mock_data.js   |  55 ++++++
 9 files changed, 425 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/constants.js
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql
 create mode 100644 app/assets/javascripts/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql

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 84ad156c26f32f..a81f93d76aa337 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -1,9 +1,23 @@
 <script>
-import { GlButton, GlEmptyState } from '@gitlab/ui';
-import { sortBy, differenceBy } from 'lodash';
+import { GlButton, GlLoadingIcon, GlEmptyState, GlKeysetPagination } from '@gitlab/ui';
+import { differenceBy } from 'lodash';
 import { s__, __, sprintf } from '~/locale';
+import { createAlert } from '~/alert';
+import { fetchPolicies } from '~/lib/graphql';
+import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import globalToast from '~/vue_shared/plugins/global_toast';
+import fetchExclusions from '../graphql/queries/beyond_identity_exclusions.query.graphql';
+import createExclusion from '../graphql/mutations/create_beyond_identity_exclusion.mutation.graphql';
+import deleteExclusion from '../graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql';
+import {
+  BEYOND_IDENTITY_INTEGRATION_NAME,
+  PROJECT_TYPE,
+  GROUP_TYPE,
+  ENTRIES_PER_PAGE,
+  DEFAULT_CURSOR,
+} from '../constants';
 import ExclusionsTabs from './exclusions_tabs.vue';
 import ExclusionsListItem from './exclusions_list_item.vue';
 import AddExclusionsDrawer from './add_exclusions_drawer.vue';
@@ -13,9 +27,11 @@ export default {
   name: 'ExclusionsList',
   components: {
     GlButton,
+    GlLoadingIcon,
     GlEmptyState,
     ExclusionsTabs,
     ExclusionsListItem,
+    GlKeysetPagination,
     AddExclusionsDrawer,
     ConfirmRemovalModal,
   },
@@ -25,33 +41,88 @@ export default {
       isConfirmRemovalModalOpen: false,
       exclusions: [],
       exclusionToRemove: null,
+      pageInfo: {},
+      cursor: DEFAULT_CURSOR,
     };
   },
+  apollo: {
+    exclusions: {
+      query: fetchExclusions,
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      variables() {
+        return this.cursor;
+      },
+      update(data) {
+        this.pageInfo = data?.integrationExclusions?.pageInfo || {};
+        return data?.integrationExclusions?.nodes || [];
+      },
+      error() {
+        this.handleError(this.$options.i18n.errorFetch);
+      },
+    },
+  },
   computed: {
     formattedExclusions() {
-      return sortBy(
-        this.exclusions.map((exclusion) => ({
-          ...exclusion,
-          icon: exclusion.type,
-        })),
-        'type',
-        'desc',
-      );
+      return this.exclusions.map((exclusion) => {
+        const type = exclusion.project ? PROJECT_TYPE : GROUP_TYPE;
+        return {
+          ...exclusion[type],
+          icon: type,
+          type,
+        };
+      });
+    },
+    showPagination() {
+      return this.pageInfo?.hasPreviousPage || this.pageInfo?.hasNextPage;
+    },
+    isLoading() {
+      return this.$apollo.queries.exclusions.loading;
+    },
+    isEmpty() {
+      return !this.isLoading && !this.exclusions.length;
     },
-  },
-  created() {
-    this.loadExclusions();
   },
   methods: {
-    loadExclusions() {
-      // TODO: add backend call for GET/Query (follow-up)
-      this.exclusions = [];
-    },
-    handleAddExclusions(exclusions) {
+    async 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(...uniqueList);
+      const projectIds = uniqueList
+        .filter((exclusion) => exclusion.type === PROJECT_TYPE)
+        .map((exclusion) => convertToGraphQLId(TYPENAME_PROJECT, exclusion.id));
+
+      const { data } = await this.$apollo.mutate({
+        mutation: createExclusion,
+        variables: {
+          input: {
+            projectIds,
+            integrationName: BEYOND_IDENTITY_INTEGRATION_NAME,
+          },
+        },
+      });
+
       this.isDrawerOpen = false;
+
+      if (data?.integrationExclusionCreate?.errors?.length) {
+        this.handleError(this.$options.i18n.errorCreate);
+        return;
+      }
+
+      if (this.pageInfo.hasPreviousPage) {
+        this.resetPagination();
+      } else {
+        this.$apollo.queries.exclusions.refetch();
+      }
+    },
+    nextPage(item) {
+      this.cursor = { first: ENTRIES_PER_PAGE, after: item, last: null, before: null };
+    },
+    prevPage(item) {
+      this.cursor = { first: null, after: null, last: ENTRIES_PER_PAGE, before: item };
+    },
+    resetPagination() {
+      this.cursor = DEFAULT_CURSOR;
+    },
+    handleError(message) {
+      createAlert({ message });
     },
     showRemoveModal(exclusion) {
       this.exclusionToRemove = exclusion;
@@ -60,10 +131,30 @@ export default {
     hideRemoveModal() {
       this.isConfirmRemovalModalOpen = false;
     },
-    confirmRemoveExclusion() {
+    async confirmRemoveExclusion() {
       const { exclusionToRemove } = this;
-      // TODO: add backend call for DELETE/Mutate (follow-up)
-      this.exclusions = this.exclusions.filter((item) => item.id !== exclusionToRemove.id);
+
+      const { data } = await this.$apollo.mutate({
+        mutation: deleteExclusion,
+        variables: {
+          input: {
+            projectId: exclusionToRemove.id,
+            integrationName: BEYOND_IDENTITY_INTEGRATION_NAME,
+          },
+        },
+      });
+
+      if (data?.integrationExclusionDelete?.errors?.length) {
+        this.handleError(this.$options.i18n.errorDelete);
+        return;
+      }
+
+      if (this.exclusions.length === 1 && this.pageInfo.hasPreviousPage) {
+        this.prevPage(this.pageInfo.startCursor);
+      } else {
+        this.$apollo.queries.exclusions.refetch();
+      }
+
       const type = capitalizeFirstCharacter(exclusionToRemove.type);
 
       globalToast(sprintf(this.$options.i18n.exclusionRemoved, { type }), {
@@ -81,6 +172,9 @@ export default {
     },
   },
   i18n: {
+    errorCreate: s__('Integrations|Failed to add the exclusion. Try adding it again.'),
+    errorDelete: s__('Integrations|Failed to remove the exclusion. Try removing it again.'),
+    errorFetch: s__('Integrations|Failed to fetch the exclusions. Try refreshing the page.'),
     exclusionRemoved: s__('Integrations|%{type} exclusion removed'),
     emptyText: s__('Integrations|There are no exclusions'),
     addExclusions: s__('Integrations|Add exclusions'),
@@ -104,7 +198,7 @@ export default {
       }}</gl-button>
     </div>
 
-    <gl-empty-state v-if="!exclusions.length" :title="$options.i18n.emptyText" />
+    <gl-empty-state v-if="isEmpty" :title="$options.i18n.emptyText" />
 
     <exclusions-list-item
       v-for="(exclusion, index) in formattedExclusions"
@@ -114,6 +208,18 @@ export default {
       @remove="() => showRemoveModal(exclusion)"
     />
 
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-5" />
+
+    <div class="gl-mt-5 gl-display-flex gl-justify-content-center">
+      <gl-keyset-pagination
+        v-if="showPagination"
+        :disabled="isLoading"
+        v-bind="pageInfo"
+        @prev="prevPage"
+        @next="nextPage"
+      />
+    </div>
+
     <add-exclusions-drawer
       :is-open="isDrawerOpen"
       @close="isDrawerOpen = false"
diff --git a/app/assets/javascripts/integrations/beyond_identity/constants.js b/app/assets/javascripts/integrations/beyond_identity/constants.js
new file mode 100644
index 00000000000000..3f8b376e9ee3e2
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/constants.js
@@ -0,0 +1,10 @@
+export const BEYOND_IDENTITY_INTEGRATION_NAME = 'BEYOND_IDENTITY';
+export const PROJECT_TYPE = 'project';
+export const GROUP_TYPE = 'group';
+export const ENTRIES_PER_PAGE = 100;
+export const DEFAULT_CURSOR = {
+  first: ENTRIES_PER_PAGE,
+  after: null,
+  last: null,
+  before: null,
+};
diff --git a/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql b/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql
new file mode 100644
index 00000000000000..4b39d5ec72507a
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql
@@ -0,0 +1,13 @@
+mutation integrationExclusionCreate($input: IntegrationExclusionCreateInput!) {
+  integrationExclusionCreate(input: $input) {
+    exclusions {
+      nodes {
+        project {
+          id
+          name
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql b/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql
new file mode 100644
index 00000000000000..d0917f18a17af9
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql
@@ -0,0 +1,10 @@
+mutation integrationExclusionDelete($input: IntegrationExclusionDeleteInput!) {
+  integrationExclusionDelete(input: $input) {
+    exclusion {
+      project {
+        name
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql b/app/assets/javascripts/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql
new file mode 100644
index 00000000000000..03cd2edf233294
--- /dev/null
+++ b/app/assets/javascripts/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql
@@ -0,0 +1,22 @@
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
+
+query integrationExclusion($before: String, $after: String, $first: Int, $last: Int) {
+  integrationExclusions(
+    integrationName: BEYOND_IDENTITY
+    after: $after
+    before: $before
+    first: $first
+    last: $last
+  ) {
+    nodes {
+      project {
+        avatarUrl
+        name
+        id
+      }
+    }
+    pageInfo {
+      ...PageInfo
+    }
+  }
+}
diff --git a/doc/user/project/integrations/beyond_identity.md b/doc/user/project/integrations/beyond_identity.md
index 9fd3ab86e5a8a3..c512260242af25 100644
--- a/doc/user/project/integrations/beyond_identity.md
+++ b/doc/user/project/integrations/beyond_identity.md
@@ -57,3 +57,27 @@ To skip the push check for [service accounts](../../profile/service_accounts.md)
 1. Select **Beyond Identity**.
 1. Select the **Exclude service accounts** checkbox.
 1. Select **Save changes**.
+
+## Exclude projects from the Beyond Identity check
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/454372) in GitLab 17.0 [with a flag](../../../administration/feature_flags.md) named `beyond_identity_exclusions`. Disabled by default.
+
+FLAG:
+The availability of this feature is controlled by a feature flag.
+For more information, see the history.
+This feature is available for testing, but not ready for production use.
+
+Prerequisites:
+
+- You must have administrator access to the GitLab instance.
+
+To exclude projects from the Beyond Identity check:
+
+1. Sign in to GitLab as an administrator.
+1. On the left sidebar, at the bottom, select **Admin Area**.
+1. Select **Settings > Integrations**.
+1. Select **Beyond Identity**.
+1. Select the **Exclusions** tab.
+1. Select **Add exclusions**.
+1. On the drawer, search and select projects to exclude.
+1. Select **Add exclusions**.
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2c3a828ee113c8..475a3ef0a2a7d8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27575,6 +27575,15 @@ msgstr ""
 msgid "Integrations|Exclusions"
 msgstr ""
 
+msgid "Integrations|Failed to add the exclusion. Try adding it again."
+msgstr ""
+
+msgid "Integrations|Failed to fetch the exclusions. Try refreshing the page."
+msgstr ""
+
+msgid "Integrations|Failed to remove the exclusion. Try removing it again."
+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 ""
 
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 41b90eb1247925..99804a3ff3eca8 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -1,32 +1,63 @@
-import { nextTick } from 'vue';
-import { GlEmptyState } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlEmptyState, GlKeysetPagination } from '@gitlab/ui';
+import { createAlert } from '~/alert';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import fetchExclusions from '~/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql';
+import createExclusion from '~/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql';
+import deleteExclusion from '~/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 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 { projectExclusionsMock } from './mock_data';
+import {
+  projectExclusionsMock,
+  fetchExclusionsResponse,
+  createExclusionMutationResponse,
+  deleteExclusionMutationResponse,
+} from './mock_data';
+
+Vue.use(VueApollo);
 
 jest.mock('~/vue_shared/plugins/global_toast');
+jest.mock('~/alert');
 
 describe('ExclusionsList component', () => {
   let wrapper;
+  let fakeApollo;
 
   const findTabs = () => wrapper.findComponent(ExclusionsTabs);
   const findListItems = () => wrapper.findAllComponents(ExclusionsListItem);
+  const findPagination = () => wrapper.findComponent(GlKeysetPagination);
   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();
-  });
+  const fetchExclusionsSuccessHandler = jest.fn().mockResolvedValue(fetchExclusionsResponse);
+  const createMutationMock = jest.fn().mockResolvedValue(createExclusionMutationResponse);
+  const deleteMutationMock = jest.fn().mockResolvedValue(deleteExclusionMutationResponse);
+
+  const createComponent = async ({
+    querySuccessHandler = fetchExclusionsSuccessHandler,
+    createSuccessHandler = createMutationMock,
+    deleteSuccessHandler = deleteMutationMock,
+  } = {}) => {
+    fakeApollo = createMockApollo([
+      [fetchExclusions, querySuccessHandler],
+      [createExclusion, createSuccessHandler],
+      [deleteExclusion, deleteSuccessHandler],
+    ]);
+    wrapper = shallowMountExtended(ExclusionsList, { apolloProvider: fakeApollo });
+    await waitForPromises();
+  };
+
+  beforeEach(() => createComponent());
 
   describe('default behavior', () => {
     it('renders tabs', () => {
@@ -45,16 +76,52 @@ describe('ExclusionsList component', () => {
       expect(findAddExclusionsButton().exists()).toBe(true);
     });
 
-    it('renders an Empty state', () => {
+    it('renders an Empty state', async () => {
+      await createComponent({ querySuccessHandler: jest.fn().mockResolvedValue([]) });
+
       expect(findEmptyState().props('title')).toBe('There are no exclusions');
     });
 
     it('does not render an open drawer', () => {
       expect(findDrawer().props('isOpen')).toBe(false);
     });
+
+    it('does not render pagination by default', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+
+    it('renders pagination', async () => {
+      await createComponent({
+        querySuccessHandler: jest.fn().mockResolvedValue({
+          data: {
+            integrationExclusions: {
+              nodes: [],
+              pageInfo: {
+                __typename: 'PageInfo',
+                startCursor: '12345',
+                endCursor: '6789',
+                hasNextPage: true,
+                hasPreviousPage: true,
+              },
+            },
+          },
+        }),
+      });
+
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('renders an error when fetching exclusions fail', async () => {
+      const error = new Error('Network error!');
+      await createComponent({ querySuccessHandler: jest.fn().mockRejectedValue({ error }) });
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'Failed to fetch the exclusions. Try refreshing the page.',
+      });
+    });
   });
 
-  describe('adding Exclusions', () => {
+  describe('adding Exclusions (success)', () => {
     beforeEach(() => findAddExclusionsButton().vm.$emit('click'));
 
     it('opens a drawer', () => {
@@ -62,26 +129,59 @@ describe('ExclusionsList component', () => {
     });
 
     describe('Exclusions added', () => {
-      beforeEach(() => findDrawer().vm.$emit('add', projectExclusionsMock));
+      beforeEach(async () => {
+        findDrawer().vm.$emit('add', projectExclusionsMock);
+        await waitForPromises();
+      });
 
-      it('lists the added exclusions, sorted by type', async () => {
-        await nextTick();
+      it('calls a GraphQL mutation to add the exclusions', () => {
+        expect(createMutationMock).toHaveBeenCalledWith({
+          input: {
+            integrationName: 'BEYOND_IDENTITY',
+            projectIds: ['gid://gitlab/Project/1', 'gid://gitlab/Project/2'],
+          },
+        });
+      });
 
-        expect(findListItems().at(0).props('exclusion')).toMatchObject(projectExclusionsMock[0]);
-        expect(findListItems().at(1).props('exclusion')).toMatchObject(projectExclusionsMock[1]);
+      it('closes the drawer', () => {
+        expect(findDrawer().props('isOpen')).toBe(false);
+      });
+
+      it('re-fetches the list of exclusions', () => {
+        expect(fetchExclusionsSuccessHandler).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    describe('Error handling', () => {
+      beforeEach(async () => {
+        const response = {
+          data: {
+            integrationExclusionCreate: {
+              ...createExclusionMutationResponse.data.integrationExclusionCreate,
+              errors: ['some error'],
+            },
+          },
+        };
+
+        await createComponent({ createSuccessHandler: jest.fn().mockResolvedValue(response) });
+        findDrawer().vm.$emit('add', projectExclusionsMock);
+        await waitForPromises();
       });
 
       it('closes the drawer', () => {
         expect(findDrawer().props('isOpen')).toBe(false);
       });
+
+      it('renders an error', () => {
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'Failed to add the exclusion. Try adding it again.',
+        });
+      });
     });
   });
 
   describe('removing Exclusions', () => {
-    beforeEach(async () => {
-      findAddExclusionsButton().vm.$emit('click');
-      findDrawer().vm.$emit('add', projectExclusionsMock);
-      await nextTick();
+    beforeEach(() => {
       findListItems().at(1).vm.$emit('remove');
     });
 
@@ -94,10 +194,15 @@ describe('ExclusionsList component', () => {
     });
 
     describe('confirmation modal primary action', () => {
-      beforeEach(() => findConfirmRemoveModal().vm.$emit('primary'));
+      beforeEach(async () => {
+        findConfirmRemoveModal().vm.$emit('primary');
+        await waitForPromises();
+      });
 
-      it('removes the exclusion', () => {
-        expect(findListItems().length).toBe(1);
+      it('calls a GraphQL mutation to remove the exclusion', () => {
+        expect(deleteMutationMock).toHaveBeenCalledWith({
+          input: { integrationName: 'BEYOND_IDENTITY', projectId: 'gid://gitlab/Project/2' },
+        });
       });
 
       it('renders a toast', () => {
@@ -109,5 +214,30 @@ describe('ExclusionsList component', () => {
         });
       });
     });
+
+    describe('Error handling', () => {
+      beforeEach(async () => {
+        const response = {
+          data: {
+            integrationExclusionDelete: {
+              ...deleteExclusionMutationResponse.data.integrationExclusionDelete,
+              errors: ['some error'],
+            },
+          },
+        };
+
+        await createComponent({ deleteSuccessHandler: jest.fn().mockResolvedValue(response) });
+        findListItems().at(1).vm.$emit('remove');
+        await waitForPromises();
+        findConfirmRemoveModal().vm.$emit('primary');
+        await waitForPromises();
+      });
+
+      it('renders an error', () => {
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'Failed to remove the exclusion. Try removing it again.',
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/integrations/beyond_identity/components/mock_data.js b/spec/frontend/integrations/beyond_identity/components/mock_data.js
index 9677ea7926386e..249b50a460f71d 100644
--- a/spec/frontend/integrations/beyond_identity/components/mock_data.js
+++ b/spec/frontend/integrations/beyond_identity/components/mock_data.js
@@ -7,3 +7,58 @@ 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' },
 ];
+
+export const fetchExclusionsResponse = {
+  data: {
+    integrationExclusions: {
+      nodes: [
+        {
+          project: {
+            name: 'project foo',
+            avatarUrl: 'foo.png',
+            id: 'gid://gitlab/Project/1',
+          },
+        },
+        {
+          project: {
+            name: 'project bar',
+            avatarUrl: 'bar.png',
+            id: 'gid://gitlab/Project/2',
+          },
+        },
+      ],
+      pageInfo: {},
+    },
+  },
+};
+
+export const createExclusionMutationResponse = {
+  data: {
+    integrationExclusionCreate: {
+      exclusions: {
+        nodes: [
+          {
+            project: {
+              id: 'gid://gitlab/Project/97',
+              name: 'approval-rules-25096c16cef9687d',
+            },
+          },
+        ],
+      },
+      errors: [],
+    },
+  },
+};
+
+export const deleteExclusionMutationResponse = {
+  data: {
+    integrationExclusionDelete: {
+      exclusion: {
+        project: {
+          name: 'approval-rules-25096c16cef9687d',
+        },
+      },
+      errors: [],
+    },
+  },
+};
-- 
GitLab


From 5344fe554a0ca212435e25c8fe1e2cf8f2b3aa6f Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 3 May 2024 10:03:27 +0200
Subject: [PATCH 2/5] Add new GraphQL schemas to list of known invalid queries

This unblocks the frontend MR which is being merged ahead of the backend
---
 config/known_invalid_graphql_queries.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/config/known_invalid_graphql_queries.yml b/config/known_invalid_graphql_queries.yml
index 579ee08383368b..43b5a685886977 100644
--- a/config/known_invalid_graphql_queries.yml
+++ b/config/known_invalid_graphql_queries.yml
@@ -1,4 +1,7 @@
 ---
 filenames:
+  - app/assets/javascripts/integrations/beyond_identity/graphql/mutations/create_beyond_identity_exclusion.mutation.graphql
+  - app/assets/javascripts/integrations/beyond_identity/graphql/mutations/delete_beyond_identity_exclusion.mutation.graphql
+  - app/assets/javascripts/integrations/beyond_identity/graphql/queries/beyond_identity_exclusions.query.graphql
   - ee/app/assets/javascripts/oncall_schedules/graphql/mutations/update_oncall_schedule_rotation.mutation.graphql
   - app/assets/javascripts/security_configuration/graphql/set_container_scanning_for_registry.graphql
\ No newline at end of file
-- 
GitLab


From 2d964023249b7bc6b1a23e5f370f12d6bc230993 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 3 May 2024 10:58:14 +0200
Subject: [PATCH 3/5] Disable groups selector

Temporarily disables the groups selector as the backend is not ready for groups
---
 .../beyond_identity/components/add_exclusions_drawer.vue    | 3 +++
 .../beyond_identity/components/exclusions_list.vue          | 4 +---
 locale/gitlab.pot                                           | 6 +++---
 .../components/add_exclusions_drawer_spec.js                | 2 +-
 .../beyond_identity/components/exclusions_list_spec.js      | 4 +---
 5 files changed, 9 insertions(+), 10 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 fd4f1daf104b9e..0c4db5ceaf8949 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
@@ -68,7 +68,9 @@ export default {
     </template>
 
     <template #default>
+      <!-- This selector is temporarily disabled until the backend adds support for groups -->
       <list-selector
+        v-show="false"
         type="groups"
         class="gl-m-5 gl-p-0!"
         autofocus
@@ -80,6 +82,7 @@ export default {
       <list-selector
         type="projects"
         class="gl-m-5 gl-p-0!"
+        autofocus
         :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 a81f93d76aa337..4f0c763df2e713 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -178,9 +178,7 @@ export default {
     exclusionRemoved: s__('Integrations|%{type} exclusion removed'),
     emptyText: s__('Integrations|There are no exclusions'),
     addExclusions: s__('Integrations|Add exclusions'),
-    helpText: s__(
-      'Integrations|Groups and projects in this list 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/locale/gitlab.pot b/locale/gitlab.pot
index 475a3ef0a2a7d8..293bc9742a6260 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27602,9 +27602,6 @@ 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 ""
 
@@ -27632,6 +27629,9 @@ msgstr ""
 msgid "Integrations|Perform common tasks with slash commands."
 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 728962f817541d..826a087dd72f5b 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
@@ -76,7 +76,7 @@ describe('AddExclusionsDrawer component', () => {
     it('renders a list selector for projects', () => {
       expect(findProjectsListSelector().props()).toMatchObject({
         type: 'projects',
-        autofocus: false,
+        autofocus: true,
       });
     });
 
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 99804a3ff3eca8..e136ec14b23218 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -66,9 +66,7 @@ describe('ExclusionsList component', () => {
 
     it('renders help text', () => {
       expect(
-        findByText(
-          'Groups and projects in this list no longer require commits to be signed.',
-        ).exists(),
+        findByText('Projects in this list no longer require commits to be signed.').exists(),
       ).toBe(true);
     });
 
-- 
GitLab


From 666191054105c0c54abaa4a8e0a941a58d55d4dc Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 3 May 2024 16:16:03 +0200
Subject: [PATCH 4/5] Address maintainer review comments

General cleanup of the code
---
 .../components/exclusions_list.vue            | 24 +++++++++----------
 .../integrations/beyond_identity/constants.js |  2 --
 2 files changed, 12 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 4f0c763df2e713..e02a4d0a593cac 100644
--- a/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
+++ b/app/assets/javascripts/integrations/beyond_identity/components/exclusions_list.vue
@@ -15,7 +15,6 @@ import {
   BEYOND_IDENTITY_INTEGRATION_NAME,
   PROJECT_TYPE,
   GROUP_TYPE,
-  ENTRIES_PER_PAGE,
   DEFAULT_CURSOR,
 } from '../constants';
 import ExclusionsTabs from './exclusions_tabs.vue';
@@ -52,9 +51,9 @@ export default {
       variables() {
         return this.cursor;
       },
-      update(data) {
-        this.pageInfo = data?.integrationExclusions?.pageInfo || {};
-        return data?.integrationExclusions?.nodes || [];
+      update({ integrationExclusions }) {
+        this.pageInfo = integrationExclusions?.pageInfo || {};
+        return integrationExclusions?.nodes || [];
       },
       error() {
         this.handleError(this.$options.i18n.errorFetch);
@@ -85,15 +84,12 @@ export default {
   methods: {
     async handleAddExclusions(exclusions) {
       const uniqueList = differenceBy(exclusions, this.exclusions, (v) => [v.id, v.type].join());
-      const projectIds = uniqueList
-        .filter((exclusion) => exclusion.type === PROJECT_TYPE)
-        .map((exclusion) => convertToGraphQLId(TYPENAME_PROJECT, exclusion.id));
 
       const { data } = await this.$apollo.mutate({
         mutation: createExclusion,
         variables: {
           input: {
-            projectIds,
+            projectIds: this.extractProjectIds(uniqueList),
             integrationName: BEYOND_IDENTITY_INTEGRATION_NAME,
           },
         },
@@ -112,11 +108,16 @@ export default {
         this.$apollo.queries.exclusions.refetch();
       }
     },
+    extractProjectIds(exclusions) {
+      return exclusions
+        .filter((exclusion) => exclusion.type === PROJECT_TYPE)
+        .map((exclusion) => convertToGraphQLId(TYPENAME_PROJECT, exclusion.id));
+    },
     nextPage(item) {
-      this.cursor = { first: ENTRIES_PER_PAGE, after: item, last: null, before: null };
+      this.cursor = { after: item, last: null, before: null };
     },
     prevPage(item) {
-      this.cursor = { first: null, after: null, last: ENTRIES_PER_PAGE, before: item };
+      this.cursor = { first: null, after: null, before: item };
     },
     resetPagination() {
       this.cursor = DEFAULT_CURSOR;
@@ -208,10 +209,9 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-5" />
 
-    <div class="gl-mt-5 gl-display-flex gl-justify-content-center">
+    <div v-else class="gl-mt-5 gl-display-flex gl-justify-content-center">
       <gl-keyset-pagination
         v-if="showPagination"
-        :disabled="isLoading"
         v-bind="pageInfo"
         @prev="prevPage"
         @next="nextPage"
diff --git a/app/assets/javascripts/integrations/beyond_identity/constants.js b/app/assets/javascripts/integrations/beyond_identity/constants.js
index 3f8b376e9ee3e2..85fd7e7b44b85b 100644
--- a/app/assets/javascripts/integrations/beyond_identity/constants.js
+++ b/app/assets/javascripts/integrations/beyond_identity/constants.js
@@ -1,9 +1,7 @@
 export const BEYOND_IDENTITY_INTEGRATION_NAME = 'BEYOND_IDENTITY';
 export const PROJECT_TYPE = 'project';
 export const GROUP_TYPE = 'group';
-export const ENTRIES_PER_PAGE = 100;
 export const DEFAULT_CURSOR = {
-  first: ENTRIES_PER_PAGE,
   after: null,
   last: null,
   before: null,
-- 
GitLab


From 2959c05b1dcdefe926edb9cd48c37e9b2f9589e5 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Fri, 3 May 2024 16:59:11 +0200
Subject: [PATCH 5/5] Add test for when pagination is not visible

Added a test for when the data is still loading
---
 .../components/exclusions_list_spec.js        | 63 ++++++++++++-------
 1 file changed, 41 insertions(+), 22 deletions(-)

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 e136ec14b23218..060d44ebd8a853 100644
--- a/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
+++ b/spec/frontend/integrations/beyond_identity/components/exclusions_list_spec.js
@@ -43,7 +43,7 @@ describe('ExclusionsList component', () => {
   const createMutationMock = jest.fn().mockResolvedValue(createExclusionMutationResponse);
   const deleteMutationMock = jest.fn().mockResolvedValue(deleteExclusionMutationResponse);
 
-  const createComponent = async ({
+  const createComponent = ({
     querySuccessHandler = fetchExclusionsSuccessHandler,
     createSuccessHandler = createMutationMock,
     deleteSuccessHandler = deleteMutationMock,
@@ -54,10 +54,13 @@ describe('ExclusionsList component', () => {
       [deleteExclusion, deleteSuccessHandler],
     ]);
     wrapper = shallowMountExtended(ExclusionsList, { apolloProvider: fakeApollo });
-    await waitForPromises();
   };
 
-  beforeEach(() => createComponent());
+  beforeEach(async () => {
+    createComponent();
+
+    await waitForPromises();
+  });
 
   describe('default behavior', () => {
     it('renders tabs', () => {
@@ -75,7 +78,9 @@ describe('ExclusionsList component', () => {
     });
 
     it('renders an Empty state', async () => {
-      await createComponent({ querySuccessHandler: jest.fn().mockResolvedValue([]) });
+      createComponent({ querySuccessHandler: jest.fn().mockResolvedValue([]) });
+
+      await waitForPromises();
 
       expect(findEmptyState().props('title')).toBe('There are no exclusions');
     });
@@ -88,30 +93,42 @@ describe('ExclusionsList component', () => {
       expect(findPagination().exists()).toBe(false);
     });
 
-    it('renders pagination', async () => {
-      await createComponent({
-        querySuccessHandler: jest.fn().mockResolvedValue({
-          data: {
-            integrationExclusions: {
-              nodes: [],
-              pageInfo: {
-                __typename: 'PageInfo',
-                startCursor: '12345',
-                endCursor: '6789',
-                hasNextPage: true,
-                hasPreviousPage: true,
+    describe('pagination', () => {
+      beforeEach(() => {
+        createComponent({
+          querySuccessHandler: jest.fn().mockResolvedValue({
+            data: {
+              integrationExclusions: {
+                nodes: [],
+                pageInfo: {
+                  __typename: 'PageInfo',
+                  startCursor: '12345',
+                  endCursor: '6789',
+                  hasNextPage: true,
+                  hasPreviousPage: true,
+                },
               },
             },
-          },
-        }),
+          }),
+        });
       });
 
-      expect(findPagination().exists()).toBe(true);
+      it('does not render pagination while loading', () => {
+        expect(findPagination().exists()).toBe(false);
+      });
+
+      it('renders pagination when done loading', async () => {
+        await waitForPromises();
+
+        expect(findPagination().exists()).toBe(true);
+      });
     });
 
     it('renders an error when fetching exclusions fail', async () => {
       const error = new Error('Network error!');
-      await createComponent({ querySuccessHandler: jest.fn().mockRejectedValue({ error }) });
+      createComponent({ querySuccessHandler: jest.fn().mockRejectedValue({ error }) });
+
+      await waitForPromises();
 
       expect(createAlert).toHaveBeenCalledWith({
         message: 'Failed to fetch the exclusions. Try refreshing the page.',
@@ -161,7 +178,7 @@ describe('ExclusionsList component', () => {
           },
         };
 
-        await createComponent({ createSuccessHandler: jest.fn().mockResolvedValue(response) });
+        createComponent({ createSuccessHandler: jest.fn().mockResolvedValue(response) });
         findDrawer().vm.$emit('add', projectExclusionsMock);
         await waitForPromises();
       });
@@ -224,7 +241,9 @@ describe('ExclusionsList component', () => {
           },
         };
 
-        await createComponent({ deleteSuccessHandler: jest.fn().mockResolvedValue(response) });
+        createComponent({ deleteSuccessHandler: jest.fn().mockResolvedValue(response) });
+        await waitForPromises();
+
         findListItems().at(1).vm.$emit('remove');
         await waitForPromises();
         findConfirmRemoveModal().vm.$emit('primary');
-- 
GitLab