From 52ad49ef9ccecf412556e2bd05fcdf6b7e270f5d Mon Sep 17 00:00:00 2001
From: Mireya Andres <mandres@gitlab.com>
Date: Tue, 21 Jan 2025 22:45:28 +0800
Subject: [PATCH 1/2] Add authentication log entries to job token allowlist

This is developed under the
`authentication_logs_migration_for_allowlist` feature flag.
---
 .../autopopulate_allowlist_modal.vue          | 145 ++++++++++++++++++
 .../components/inbound_token_access.vue       |  20 ++-
 .../autopopulate_allowlist.mutation.graphql   |   6 +
 locale/gitlab.pot                             |  21 +++
 .../token_access/autopopulate_modal_spec.js   | 121 +++++++++++++++
 .../token_access/inbound_token_access_spec.js |  56 +++++--
 spec/frontend/token_access/mock_data.js       |  19 +++
 7 files changed, 376 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
 create mode 100644 app/assets/javascripts/token_access/graphql/mutations/autopopulate_allowlist.mutation.graphql
 create mode 100644 spec/frontend/token_access/autopopulate_modal_spec.js

diff --git a/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue b/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
new file mode 100644
index 00000000000000..c95cd0222af942
--- /dev/null
+++ b/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
@@ -0,0 +1,145 @@
+<script>
+import { GlAlert, GlModal, GlSprintf } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import autopopulateAllowlistMutation from '../graphql/mutations/autopopulate_allowlist.mutation.graphql';
+
+export default {
+  name: 'AutopopulateAllowlistModal',
+  components: {
+    GlAlert,
+    GlModal,
+    GlSprintf,
+  },
+  inject: ['fullPath'],
+  props: {
+    projectName: {
+      type: String,
+      required: true,
+    },
+    showModal: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  apollo: {},
+  data() {
+    return {
+      hasAutopopulationError: false,
+      isAutopopulating: false,
+    };
+  },
+  computed: {
+    modalOptions() {
+      return {
+        actionPrimary: {
+          text: __('Add entries'),
+          attributes: {
+            variant: 'confirm',
+            loading: this.isAutopopulating,
+          },
+        },
+        actionSecondary: {
+          text: __('Cancel'),
+          attributes: {
+            variant: 'default',
+            disabled: this.isAutopopulating,
+          },
+        },
+      };
+    },
+  },
+  methods: {
+    async autopopulateAllowlist(e) {
+      e.preventDefault();
+      this.isAutopopulating = true;
+      this.hasAutopopulationError = false;
+
+      try {
+        const {
+          data: {
+            ciJobTokenScopeAutopopulateAllowlist: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: autopopulateAllowlistMutation,
+          variables: {
+            projectPath: this.fullPath,
+          },
+        });
+
+        if (errors.length) {
+          throw new Error();
+        }
+
+        this.$emit('refetch-allowlist');
+        this.hideModal();
+        this.$toast.show(
+          s__('CICD|Authentication log entries were successfully added to the allowlist.'),
+        );
+      } catch (error) {
+        this.hasAutopopulationError = true;
+      } finally {
+        this.isAutopopulating = false;
+      }
+    },
+    hideModal() {
+      this.hasAutopopulationError = false;
+      this.$emit('hide');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="showModal"
+    :title="s__('CICD|Add all authentication log entries to the allowlist')"
+    :action-primary="modalOptions.actionPrimary"
+    :action-secondary="modalOptions.actionSecondary"
+    modal-id="autopopulate-allowlist-modal"
+    @primary="autopopulateAllowlist"
+    @secondary="hideModal"
+    @canceled="hideModal"
+  >
+    <gl-alert
+      v-if="hasAutopopulationError"
+      variant="danger"
+      class="gl-mb-3 gl-pb-0"
+      :dismissible="false"
+    >
+      <p>
+        {{
+          s__(
+            'CICD|An error occurred while adding the authentication log entries. Please try again.',
+          )
+        }}
+      </p>
+    </gl-alert>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            `CICD|You're about to add all entries from the authentication log to the allowlist for %{projectName}. Duplicate entries will be ignored.`,
+          )
+        "
+      >
+        <template #projectName>
+          <b>{{ projectName }}</b>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p>
+      {{
+        s__(
+          'CICD|Groups and projects on the allowlist are authorized to use a CI/CD job token to authenticate requests to this project. Entries added from the authentication log can be removed later if needed.',
+        )
+      }}
+    </p>
+    <p>
+      {{
+        s__(
+          'CICD|The process to add entries could take a moment to complete with large logs or allowlists.',
+        )
+      }}
+    </p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/token_access/components/inbound_token_access.vue b/app/assets/javascripts/token_access/components/inbound_token_access.vue
index 82d3be7b9f2f72..5409c101a3fd5f 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -29,6 +29,7 @@ import {
 } from '../constants';
 import TokenAccessTable from './token_access_table.vue';
 import NamespaceForm from './namespace_form.vue';
+import AutopopulateAllowlistModal from './autopopulate_allowlist_modal.vue';
 
 export default {
   i18n: {
@@ -75,6 +76,7 @@ export default {
     },
   ],
   components: {
+    AutopopulateAllowlistModal,
     GlAlert,
     GlButton,
     GlCollapsibleListbox,
@@ -195,6 +197,9 @@ export default {
         namespace: this.namespaceToRemove?.fullPath,
       });
     },
+    showAutopopulateModal() {
+      return this.selectedAction === JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG;
+    },
   },
   methods: {
     hideSelectedAction() {
@@ -265,13 +270,18 @@ export default {
       this.refetchGroupsAndProjects();
       return Promise.resolve();
     },
+    refetchAllowlist() {
+      this.$apollo.queries.groupsAndProjectsWithAccess.refetch();
+      this.hideSelectedAction();
+    },
     refetchGroupsAndProjects() {
       this.$apollo.queries.groupsAndProjectsWithAccess.refetch();
     },
     selectAction(action, showFormFn) {
-      // TODO: render autopopulate modal when selected
       this.selectedAction = action;
-      showFormFn();
+      if (action === JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT) {
+        showFormFn();
+      }
     },
     showNamespaceForm(namespace, showFormFn) {
       this.namespaceToEdit = namespace;
@@ -289,6 +299,12 @@ export default {
 
 <template>
   <div class="gl-mt-5">
+    <autopopulate-allowlist-modal
+      :project-name="projectName"
+      :show-modal="showAutopopulateModal"
+      @hide="hideSelectedAction"
+      @refetch-allowlist="refetchAllowlist"
+    />
     <gl-loading-icon v-if="$apollo.queries.inboundJobTokenScopeEnabled.loading" size="md" />
     <template v-else>
       <div class="gl-font-bold">
diff --git a/app/assets/javascripts/token_access/graphql/mutations/autopopulate_allowlist.mutation.graphql b/app/assets/javascripts/token_access/graphql/mutations/autopopulate_allowlist.mutation.graphql
new file mode 100644
index 00000000000000..b808810a8cb130
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/mutations/autopopulate_allowlist.mutation.graphql
@@ -0,0 +1,6 @@
+mutation CiJobTokenScopeAutopopulateAllowlist($projectPath: ID!) {
+  ciJobTokenScopeAutopopulateAllowlist(input: { projectPath: $projectPath }) {
+    status
+    errors
+  }
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c85a2c611175a7..f0c182663cb24e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3369,6 +3369,9 @@ msgstr ""
 msgid "Add email participants that don't have a GitLab account."
 msgstr ""
 
+msgid "Add entries"
+msgstr ""
+
 msgid "Add environment"
 msgstr ""
 
@@ -11060,6 +11063,9 @@ msgstr ""
 msgid "CICD|Add a %{kubernetes_cluster_link_start}Kubernetes cluster integration%{link_end} with a domain, or create an AUTO_DEVOPS_PLATFORM_TARGET CI variable."
 msgstr ""
 
+msgid "CICD|Add all authentication log entries to the allowlist"
+msgstr ""
+
 msgid "CICD|Add an existing project to the scope"
 msgstr ""
 
@@ -11075,6 +11081,9 @@ msgstr ""
 msgid "CICD|Allow Git push requests to the repository"
 msgstr ""
 
+msgid "CICD|An error occurred while adding the authentication log entries. Please try again."
+msgstr ""
+
 msgid "CICD|Are you sure you want to remove %{namespace} from the job token allowlist?"
 msgstr ""
 
@@ -11087,6 +11096,9 @@ msgstr ""
 msgid "CICD|Authentication log"
 msgstr ""
 
+msgid "CICD|Authentication log entries were successfully added to the allowlist."
+msgstr ""
+
 msgid "CICD|Authorized groups and projects"
 msgstr ""
 
@@ -11147,6 +11159,9 @@ msgstr ""
 msgid "CICD|Group or project"
 msgstr ""
 
+msgid "CICD|Groups and projects on the allowlist are authorized to use a CI/CD job token to authenticate requests to this project. Entries added from the authentication log can be removed later if needed."
+msgstr ""
+
 msgid "CICD|Job token permissions"
 msgstr ""
 
@@ -11198,6 +11213,9 @@ msgstr ""
 msgid "CICD|The Auto DevOps pipeline runs if no alternative CI configuration file is found."
 msgstr ""
 
+msgid "CICD|The process to add entries could take a moment to complete with large logs or allowlists."
+msgstr ""
+
 msgid "CICD|There are several CI/CD limits in place."
 msgstr ""
 
@@ -11216,6 +11234,9 @@ msgstr ""
 msgid "CICD|When enabled, all projects must use their allowlist to control CI/CD job token access between projects. The option to allow access from all groups and projects is hidden. %{link_start}Learn More.%{link_end}"
 msgstr ""
 
+msgid "CICD|You're about to add all entries from the authentication log to the allowlist for %{projectName}. Duplicate entries will be ignored."
+msgstr ""
+
 msgid "CICD|group enabled"
 msgstr ""
 
diff --git a/spec/frontend/token_access/autopopulate_modal_spec.js b/spec/frontend/token_access/autopopulate_modal_spec.js
new file mode 100644
index 00000000000000..dc3973612b1148
--- /dev/null
+++ b/spec/frontend/token_access/autopopulate_modal_spec.js
@@ -0,0 +1,121 @@
+import { GlAlert, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { createMockDirective } from 'helpers/vue_mock_directive';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import AutopopulateAllowlistMutation from '~/token_access/graphql/mutations/autopopulate_allowlist.mutation.graphql';
+import AutopopulateAllowlistModal from '~/token_access/components/autopopulate_allowlist_modal.vue';
+import { mockAutopopulateAllowlistResponse, mockAutopopulateAllowlistError } from './mock_data';
+
+const projectName = 'My project';
+const fullPath = 'root/my-repo';
+
+Vue.use(VueApollo);
+const mockToastShow = jest.fn();
+
+describe('AutopopulateAllowlistModal component', () => {
+  let wrapper;
+  let mockApollo;
+  let mockAutopopulateMutation;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const createComponent = ({ props } = {}) => {
+    const handlers = [[AutopopulateAllowlistMutation, mockAutopopulateMutation]];
+    mockApollo = createMockApollo(handlers);
+
+    wrapper = shallowMountExtended(AutopopulateAllowlistModal, {
+      apolloProvider: mockApollo,
+      provide: {
+        fullPath,
+      },
+      mocks: {
+        $toast: { show: mockToastShow },
+      },
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
+      propsData: {
+        projectName,
+        showModal: true,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mockAutopopulateMutation = jest.fn();
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not render alert by default', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('when mutation is called', () => {
+    it('shows loading state for confirm button and disables cancel button', () => {
+      createComponent();
+      findModal().vm.$emit('primary', { preventDefault: jest.fn() });
+
+      expect(findModal().props('actionPrimary').attributes).toEqual(
+        expect.objectContaining({ loading: false }),
+      );
+      expect(findModal().props('actionSecondary').attributes).toEqual(
+        expect.objectContaining({ disabled: false }),
+      );
+    });
+  });
+
+  describe('when mutation is successful', () => {
+    beforeEach(async () => {
+      mockAutopopulateMutation.mockResolvedValue(mockAutopopulateAllowlistResponse);
+
+      createComponent();
+      findModal().vm.$emit('primary', { preventDefault: jest.fn() });
+      await waitForPromises();
+    });
+
+    it('calls the mutation', () => {
+      expect(mockAutopopulateMutation).toHaveBeenCalledWith({ projectPath: fullPath });
+    });
+
+    it('shows toast message', () => {
+      expect(mockToastShow).toHaveBeenCalledWith(
+        'Authentication log entries were successfully added to the allowlist.',
+      );
+    });
+
+    it('emits the proper events', () => {
+      expect(wrapper.emitted('refetch-allowlist')).toHaveLength(1);
+      expect(wrapper.emitted('hide')).toHaveLength(1);
+    });
+  });
+
+  describe('when mutation fails', () => {
+    beforeEach(async () => {
+      createComponent();
+      findModal().vm.$emit('primary', { preventDefault: jest.fn() });
+      await waitForPromises();
+
+      mockAutopopulateMutation.mockResolvedValue(mockAutopopulateAllowlistError);
+    });
+
+    it('renders alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('does not render toast message or emit events', () => {
+      expect(mockToastShow).not.toHaveBeenCalledWith();
+      expect(wrapper.emitted('refetch-allowlist')).toBeUndefined();
+      expect(wrapper.emitted('hide')).toBeUndefined();
+    });
+  });
+});
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
index 0401416a9795ec..556e650a867e9b 100644
--- a/spec/frontend/token_access/inbound_token_access_spec.js
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -6,7 +6,11 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
 import InboundTokenAccess from '~/token_access/components/inbound_token_access.vue';
-import { JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT } from '~/token_access/constants';
+import {
+  JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT,
+  JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG,
+} from '~/token_access/constants';
+import AutopopulateAllowlistModal from '~/token_access/components/autopopulate_allowlist_modal.vue';
 import NamespaceForm from '~/token_access/components/namespace_form.vue';
 import inboundRemoveGroupCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_remove_group_ci_job_token_scope.mutation.graphql';
 import inboundRemoveProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql';
@@ -59,6 +63,7 @@ describe('TokenAccess component', () => {
   const failureHandler = jest.fn().mockRejectedValue(error);
   const mockToastShow = jest.fn();
 
+  const findAutopopulateAllowlistModal = () => wrapper.findComponent(AutopopulateAllowlistModal);
   const findFormSelector = () => wrapper.findByTestId('form-selector');
   const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
@@ -379,6 +384,7 @@ describe('TokenAccess component', () => {
     beforeEach(() =>
       createComponent(
         [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
           [
             inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
             inboundGroupsAndProjectsWithScopeResponseHandler,
@@ -388,18 +394,48 @@ describe('TokenAccess component', () => {
       ),
     );
 
-    it('toggle form button is replaced by actions dropdown', () => {
-      expect(findToggleFormBtn().exists()).toBe(false);
-      expect(findFormSelector().exists()).toBe(true);
-    });
+    describe('autopopulate entries', () => {
+      it('replaces toggle form button with actions dropdown', () => {
+        expect(findToggleFormBtn().exists()).toBe(false);
+        expect(findFormSelector().exists()).toBe(true);
+      });
 
-    it('Add group or project option renders the namespace form', async () => {
-      expect(findNamespaceForm().exists()).toBe(false);
+      it('renders the namespace form when clicking "Add group or project option"', async () => {
+        expect(findNamespaceForm().exists()).toBe(false);
+
+        findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT);
+        await nextTick();
+
+        expect(findNamespaceForm().exists()).toBe(true);
+      });
+
+      it('renders the autopopulate allowlist modal when clicking "All projects in authentication log"', async () => {
+        expect(findAutopopulateAllowlistModal().props('showModal')).toBe(false);
 
-      findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT);
-      await nextTick();
+        findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG);
+        await nextTick();
+
+        expect(findAutopopulateAllowlistModal().props('showModal')).toBe(true);
+      });
+
+      it('unselects dropdown option when autopopulate allowlist modal is hidden', async () => {
+        findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG);
+        findAutopopulateAllowlistModal().vm.$emit('hide');
+        await nextTick();
+
+        expect(findFormSelector().props('selected')).toBe(null);
+      });
+
+      it('refetches allowlist when autopopulate mutation is successful', async () => {
+        expect(inboundGroupsAndProjectsWithScopeResponseHandler).toHaveBeenCalledTimes(1);
+
+        findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG);
+        findAutopopulateAllowlistModal().vm.$emit('refetch-allowlist');
+        await nextTick();
 
-      expect(findNamespaceForm().exists()).toBe(true);
+        expect(inboundGroupsAndProjectsWithScopeResponseHandler).toHaveBeenCalledTimes(2);
+        expect(findFormSelector().props('selected')).toBe(null);
+      });
     });
   });
 
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index 8cb2e1f79f28d0..e54bb69a395bed 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -287,3 +287,22 @@ export const mockAuthLogsResponse = (hasNextPage = false) => ({
     },
   },
 });
+
+export const mockAutopopulateAllowlistResponse = {
+  data: {
+    ciJobTokenScopeAutopopulateAllowlist: {
+      status: 'complete',
+      errors: [],
+      __typename: 'CiJobTokenScopeAutopopulateAllowlistPayload',
+    },
+  },
+};
+
+export const mockAutopopulateAllowlistError = {
+  data: {
+    ciJobTokenScopeAutopopulateAllowlist: {
+      errors: ['An error occurred'],
+      __typename: 'CiJobTokenScopeAutopopulateAllowlistPayload',
+    },
+  },
+};
-- 
GitLab


From 5087b0cb5c5f075a461fd8be9f5975c463948c6c Mon Sep 17 00:00:00 2001
From: Mireya Andres <mandres@gitlab.com>
Date: Tue, 4 Feb 2025 17:33:29 +0800
Subject: [PATCH 2/2] Fix and polish specs

---
 .../autopopulate_allowlist_modal.vue          | 32 ++++++++-----------
 ...s => autopopulate_allowlist_modal_spec.js} | 24 ++++++++------
 spec/frontend/token_access/mock_data.js       |  6 +++-
 3 files changed, 32 insertions(+), 30 deletions(-)
 rename spec/frontend/token_access/{autopopulate_modal_spec.js => autopopulate_allowlist_modal_spec.js} (84%)

diff --git a/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue b/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
index c95cd0222af942..b664b3251fbd14 100644
--- a/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
+++ b/app/assets/javascripts/token_access/components/autopopulate_allowlist_modal.vue
@@ -24,7 +24,7 @@ export default {
   apollo: {},
   data() {
     return {
-      hasAutopopulationError: false,
+      errorMessage: false,
       isAutopopulating: false,
     };
   },
@@ -49,10 +49,9 @@ export default {
     },
   },
   methods: {
-    async autopopulateAllowlist(e) {
-      e.preventDefault();
+    async autopopulateAllowlist() {
       this.isAutopopulating = true;
-      this.hasAutopopulationError = false;
+      this.errorMessage = null;
 
       try {
         const {
@@ -67,7 +66,7 @@ export default {
         });
 
         if (errors.length) {
-          throw new Error();
+          throw new Error(errors[0]);
         }
 
         this.$emit('refetch-allowlist');
@@ -76,13 +75,17 @@ export default {
           s__('CICD|Authentication log entries were successfully added to the allowlist.'),
         );
       } catch (error) {
-        this.hasAutopopulationError = true;
+        this.errorMessage =
+          error?.message ||
+          s__(
+            'CICD|An error occurred while adding the authentication log entries. Please try again.',
+          );
       } finally {
         this.isAutopopulating = false;
       }
     },
     hideModal() {
-      this.hasAutopopulationError = false;
+      this.errorMessage = null;
       this.$emit('hide');
     },
   },
@@ -96,22 +99,13 @@ export default {
     :action-primary="modalOptions.actionPrimary"
     :action-secondary="modalOptions.actionSecondary"
     modal-id="autopopulate-allowlist-modal"
-    @primary="autopopulateAllowlist"
+    @primary.prevent="autopopulateAllowlist"
     @secondary="hideModal"
     @canceled="hideModal"
   >
-    <gl-alert
-      v-if="hasAutopopulationError"
-      variant="danger"
-      class="gl-mb-3 gl-pb-0"
-      :dismissible="false"
-    >
+    <gl-alert v-if="errorMessage" variant="danger" class="gl-mb-3 gl-pb-0" :dismissible="false">
       <p>
-        {{
-          s__(
-            'CICD|An error occurred while adding the authentication log entries. Please try again.',
-          )
-        }}
+        {{ errorMessage }}
       </p>
     </gl-alert>
     <p>
diff --git a/spec/frontend/token_access/autopopulate_modal_spec.js b/spec/frontend/token_access/autopopulate_allowlist_modal_spec.js
similarity index 84%
rename from spec/frontend/token_access/autopopulate_modal_spec.js
rename to spec/frontend/token_access/autopopulate_allowlist_modal_spec.js
index dc3973612b1148..ed3b405335190d 100644
--- a/spec/frontend/token_access/autopopulate_modal_spec.js
+++ b/spec/frontend/token_access/autopopulate_allowlist_modal_spec.js
@@ -1,5 +1,5 @@
 import { GlAlert, GlModal } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -60,17 +60,21 @@ describe('AutopopulateAllowlistModal component', () => {
     });
   });
 
-  describe('when mutation is called', () => {
-    it('shows loading state for confirm button and disables cancel button', () => {
+  describe('when mutation is running', () => {
+    beforeEach(() => {
+      mockAutopopulateMutation.mockResolvedValue(mockAutopopulateAllowlistResponse);
       createComponent();
+    });
+
+    it('shows loading state for confirm button and disables cancel button', async () => {
+      expect(findModal().props('actionPrimary').attributes).toMatchObject({ loading: false });
+      expect(findModal().props('actionSecondary').attributes).toMatchObject({ disabled: false });
+
       findModal().vm.$emit('primary', { preventDefault: jest.fn() });
+      await nextTick();
 
-      expect(findModal().props('actionPrimary').attributes).toEqual(
-        expect.objectContaining({ loading: false }),
-      );
-      expect(findModal().props('actionSecondary').attributes).toEqual(
-        expect.objectContaining({ disabled: false }),
-      );
+      expect(findModal().props('actionPrimary').attributes).toMatchObject({ loading: true });
+      expect(findModal().props('actionSecondary').attributes).toMatchObject({ disabled: true });
     });
   });
 
@@ -93,7 +97,7 @@ describe('AutopopulateAllowlistModal component', () => {
       );
     });
 
-    it('emits the proper events', () => {
+    it('emits events for refetching data and hiding modal', () => {
       expect(wrapper.emitted('refetch-allowlist')).toHaveLength(1);
       expect(wrapper.emitted('hide')).toHaveLength(1);
     });
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index e54bb69a395bed..4fe4b8e2fa6065 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -301,7 +301,11 @@ export const mockAutopopulateAllowlistResponse = {
 export const mockAutopopulateAllowlistError = {
   data: {
     ciJobTokenScopeAutopopulateAllowlist: {
-      errors: ['An error occurred'],
+      errors: [
+        {
+          message: 'An error occurred',
+        },
+      ],
       __typename: 'CiJobTokenScopeAutopopulateAllowlistPayload',
     },
   },
-- 
GitLab