From 3bca3b62c1946d823b6032c08cf925e48f266a42 Mon Sep 17 00:00:00 2001
From: Mireya Andres <mandres@gitlab.com>
Date: Mon, 20 Jan 2025 16:33:04 +0800
Subject: [PATCH] Add feature flag
 `authentication_logs_migration_for_allowlist`

This FF is for allowing the user to autopopulate the job token
allowlist using the authentication logs. This MR is just for the
creation of the feature flag. The feature will be further developed
in the following MRs.
---
 .../components/inbound_token_access.vue       | 48 +++++++++++++--
 .../javascripts/token_access/constants.js     |  3 +
 .../vue_shared/components/crud_component.vue  |  2 +-
 .../projects/settings/ci_cd_controller.rb     |  1 +
 ...ntication_logs_migration_for_allowlist.yml |  9 +++
 locale/gitlab.pot                             |  6 ++
 .../token_access/inbound_token_access_spec.js | 58 ++++++++++++++++++-
 .../components/crud_component_spec.js         | 11 ++++
 8 files changed, 131 insertions(+), 7 deletions(-)
 create mode 100644 config/feature_flags/gitlab_com_derisk/authentication_logs_migration_for_allowlist.yml

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 6ad02fedefa489..b927483ade5c1f 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -2,8 +2,9 @@
 import {
   GlAlert,
   GlButton,
-  GlLink,
+  GlCollapsibleListbox,
   GlIcon,
+  GlLink,
   GlLoadingIcon,
   GlSprintf,
   GlTooltipDirective,
@@ -22,6 +23,10 @@ import inboundUpdateCIJobTokenScopeMutation from '../graphql/mutations/inbound_u
 import inboundGetCIJobTokenScopeQuery from '../graphql/queries/inbound_get_ci_job_token_scope.query.graphql';
 import inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery from '../graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql';
 import getCiJobTokenScopeAllowlistQuery from '../graphql/queries/get_ci_job_token_scope_allowlist.query.graphql';
+import {
+  JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT,
+  JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG,
+} from '../constants';
 import TokenAccessTable from './token_access_table.vue';
 import NamespaceForm from './namespace_form.vue';
 
@@ -38,6 +43,7 @@ export default {
     settingDisabledMessage: s__(
       'CICD|Access unrestricted, so users with sufficient permissions in this project can authenticate with a job token generated in any other project.',
     ),
+    add: __('Add'),
     addGroupOrProject: __('Add group or project'),
     projectsFetchError: __('There was a problem fetching the projects'),
     scopeFetchError: __('There was a problem fetching the job token scope value'),
@@ -58,11 +64,22 @@ export default {
       text: s__('CICD|Only this project and any groups and projects in the allowlist'),
     },
   ],
+  crudFormActions: [
+    {
+      text: __('Group or project'),
+      value: JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT,
+    },
+    {
+      text: __('All projects in authentication log'),
+      value: JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG,
+    },
+  ],
   components: {
     GlAlert,
     GlButton,
-    GlLink,
+    GlCollapsibleListbox,
     GlIcon,
+    GlLink,
     GlLoadingIcon,
     GlSprintf,
     CrudComponent,
@@ -132,6 +149,7 @@ export default {
       projectName: '',
       namespaceToEdit: null,
       namespaceToRemove: null,
+      selectedAction: null,
     };
   },
   computed: {
@@ -147,6 +165,9 @@ export default {
       const { groups, projects } = this.groupsAndProjectsWithAccess;
       return [...groups, ...projects];
     },
+    canAutopopulateAuthLog() {
+      return this.glFeatures.authenticationLogsMigrationForAllowlist;
+    },
     groupCount() {
       return this.groupsAndProjectsWithAccess.groups.length;
     },
@@ -169,6 +190,10 @@ export default {
     },
   },
   methods: {
+    hideSelectedAction() {
+      this.namespaceToEdit = null;
+      this.selectedAction = null;
+    },
     mapAllowlistNodes(list) {
       // The defaultPermissions and jobTokenPolicies are separate fields from the target (the group or project in the
       // allowlist). Combine them into a single object.
@@ -235,6 +260,11 @@ export default {
     refetchGroupsAndProjects() {
       this.$apollo.queries.groupsAndProjectsWithAccess.refetch();
     },
+    selectAction(action, showFormFn) {
+      // TODO: render autopopulate modal when selected
+      this.selectedAction = action;
+      showFormFn();
+    },
     showNamespaceForm(namespace, showFormFn) {
       this.namespaceToEdit = namespace;
       showFormFn();
@@ -289,10 +319,20 @@ export default {
       <crud-component
         :title="$options.i18n.cardHeaderTitle"
         :description="$options.i18n.cardHeaderDescription"
-        :toggle-text="$options.i18n.addGroupOrProject"
+        :toggle-text="!canAutopopulateAuthLog ? $options.i18n.addGroupOrProject : undefined"
         class="gl-mt-5"
-        @hideForm="namespaceToEdit = null"
+        @hideForm="hideSelectedAction"
       >
+        <template v-if="canAutopopulateAuthLog" #actions="{ showForm }">
+          <gl-collapsible-listbox
+            v-model="selectedAction"
+            :items="$options.crudFormActions"
+            :toggle-text="$options.i18n.add"
+            data-testid="form-selector"
+            size="small"
+            @select="selectAction($event, showForm)"
+          />
+        </template>
         <template #count>
           <gl-loading-icon v-if="isAllowlistLoading" data-testid="count-loading-icon" />
           <template v-else>
diff --git a/app/assets/javascripts/token_access/constants.js b/app/assets/javascripts/token_access/constants.js
index 46f0e443ac43d0..80c013b2ed4c08 100644
--- a/app/assets/javascripts/token_access/constants.js
+++ b/app/assets/javascripts/token_access/constants.js
@@ -145,3 +145,6 @@ export const JOB_TOKEN_POLICIES = keyBy(
   POLICIES_BY_RESOURCE.flatMap(({ policies }) => policies),
   ({ value }) => value,
 );
+
+export const JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT = 'JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT';
+export const JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG = 'JOB_TOKEN_FORM_AUTOPOPULATE_AUTH_LOG';
diff --git a/app/assets/javascripts/vue_shared/components/crud_component.vue b/app/assets/javascripts/vue_shared/components/crud_component.vue
index aa97eca6141837..671f4f253623a9 100644
--- a/app/assets/javascripts/vue_shared/components/crud_component.vue
+++ b/app/assets/javascripts/vue_shared/components/crud_component.vue
@@ -217,7 +217,7 @@ export default {
         </p>
       </div>
       <div class="gl-flex gl-items-center gl-gap-3" data-testid="crud-actions">
-        <slot name="actions"></slot>
+        <slot name="actions" :show-form="showForm"></slot>
         <gl-button
           v-if="toggleText && !isFormUsedAndVisible"
           size="small"
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 5d093c7fa01dd4..21deac8b74cb8b 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -18,6 +18,7 @@ class CiCdController < Projects::ApplicationController
         push_frontend_feature_flag(:ci_variables_pages, current_user)
         push_frontend_feature_flag(:allow_push_repository_for_job_token, @project)
         push_frontend_feature_flag(:add_policies_to_ci_job_token, @project)
+        push_frontend_feature_flag(:authentication_logs_migration_for_allowlist, @project)
 
         push_frontend_ability(ability: :admin_project, resource: @project, user: current_user)
       end
diff --git a/config/feature_flags/gitlab_com_derisk/authentication_logs_migration_for_allowlist.yml b/config/feature_flags/gitlab_com_derisk/authentication_logs_migration_for_allowlist.yml
new file mode 100644
index 00000000000000..cb3dc67f1bb10c
--- /dev/null
+++ b/config/feature_flags/gitlab_com_derisk/authentication_logs_migration_for_allowlist.yml
@@ -0,0 +1,9 @@
+---
+name: authentication_logs_migration_for_allowlist
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/498125
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/178429
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/514159
+milestone: '17.9'
+group: group::pipeline security
+type: gitlab_com_derisk
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3f188b5b87374f..f264a4326e716c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5826,6 +5826,9 @@ msgid_plural "All projects in %{groupsLength} groups:"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "All projects in authentication log"
+msgstr ""
+
 msgid "All projects selected"
 msgstr ""
 
@@ -27345,6 +27348,9 @@ msgstr ""
 msgid "Group navigation"
 msgstr ""
 
+msgid "Group or project"
+msgstr ""
+
 msgid "Group overview content"
 msgstr ""
 
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
index b907659807101c..0401416a9795ec 100644
--- a/spec/frontend/token_access/inbound_token_access_spec.js
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -6,6 +6,7 @@ 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 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';
@@ -58,6 +59,7 @@ describe('TokenAccess component', () => {
   const failureHandler = jest.fn().mockRejectedValue(error);
   const mockToastShow = jest.fn();
 
+  const findFormSelector = () => wrapper.findByTestId('form-selector');
   const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findToggleFormBtn = () => wrapper.findByTestId('crud-form-toggle');
@@ -72,13 +74,18 @@ describe('TokenAccess component', () => {
 
   const createComponent = (
     requestHandlers,
-    { addPoliciesToCiJobToken = false, enforceAllowlist = false, stubs = {} } = {},
+    {
+      addPoliciesToCiJobToken = false,
+      authenticationLogsMigrationForAllowlist = false,
+      enforceAllowlist = false,
+      stubs = {},
+    } = {},
   ) => {
     wrapper = shallowMountExtended(InboundTokenAccess, {
       provide: {
         fullPath: projectPath,
         enforceAllowlist,
-        glFeatures: { addPoliciesToCiJobToken },
+        glFeatures: { addPoliciesToCiJobToken, authenticationLogsMigrationForAllowlist },
       },
       apolloProvider: createMockApollo(requestHandlers),
       mocks: {
@@ -349,6 +356,53 @@ describe('TokenAccess component', () => {
     });
   });
 
+  describe('when authenticationLogsMigrationForAllowlist feature flag is disabled', () => {
+    beforeEach(() =>
+      createComponent(
+        [
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            inboundGroupsAndProjectsWithScopeResponseHandler,
+          ],
+        ],
+        { authenticationLogsMigrationForAllowlist: false, stubs: { CrudComponent } },
+      ),
+    );
+
+    it('renders toggle form button and hides actions dropdown', () => {
+      expect(findToggleFormBtn().exists()).toBe(true);
+      expect(findFormSelector().exists()).toBe(false);
+    });
+  });
+
+  describe('when authenticationLogsMigrationForAllowlist feature flag is enabled', () => {
+    beforeEach(() =>
+      createComponent(
+        [
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            inboundGroupsAndProjectsWithScopeResponseHandler,
+          ],
+        ],
+        { authenticationLogsMigrationForAllowlist: true, stubs: { CrudComponent } },
+      ),
+    );
+
+    it('toggle form button is replaced by 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);
+
+      findFormSelector().vm.$emit('select', JOB_TOKEN_FORM_ADD_GROUP_OR_PROJECT);
+      await nextTick();
+
+      expect(findNamespaceForm().exists()).toBe(true);
+    });
+  });
+
   describe.each`
     type         | mutation                                       | handler
     ${'Group'}   | ${inboundRemoveGroupCIJobTokenScopeMutation}   | ${inboundRemoveGroupSuccessHandler}
diff --git a/spec/frontend/vue_shared/components/crud_component_spec.js b/spec/frontend/vue_shared/components/crud_component_spec.js
index d7b17bcc77a57b..01bc9914852aab 100644
--- a/spec/frontend/vue_shared/components/crud_component_spec.js
+++ b/spec/frontend/vue_shared/components/crud_component_spec.js
@@ -241,4 +241,15 @@ describe('CRUD Component', () => {
       );
     });
   });
+
+  describe('actions slot', () => {
+    it('passes the showForm function to the actions slot', () => {
+      const actionsSlot = jest.fn();
+      createComponent({}, { actions: actionsSlot });
+
+      expect(actionsSlot).toHaveBeenCalledWith(
+        expect.objectContaining({ showForm: wrapper.vm.showForm }),
+      );
+    });
+  });
 });
-- 
GitLab