From 34ef726cdf7cd5eedfbe692dc8d61604522656fa Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Wed, 1 May 2024 22:22:41 -0600
Subject: [PATCH 1/8] Improve the look of the token access table

Add group/project icon
Add group/project avatar
Make project path a link to the project

Changelog: changed
---
 .../components/token_access_table.vue         | 24 +++++++++++++++++--
 ...ects_with_ci_job_token_scope.query.graphql |  2 ++
 .../token_access/token_access_table_spec.js   | 10 +++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 700c6b9ef39581..8217d5fb4a63cb 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -1,11 +1,15 @@
 <script>
-import { GlButton, GlTableLite } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlTableLite } from '@gitlab/ui';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import { sprintf, s__ } from '~/locale';
 
 export default {
   components: {
     GlButton,
+    GlIcon,
+    GlLink,
     GlTableLite,
+    ProjectAvatar,
   },
   inject: {
     fullPath: {
@@ -51,7 +55,23 @@ export default {
     fixed
   >
     <template #cell(fullPath)="{ item }">
-      <span :data-testid="`token-access-${itemType}-name`">{{ item.fullPath }}</span>
+      <div class="gl-display-inline-flex gl-align-items-center">
+        <gl-icon :name="itemType" class="gl-mr-3" :data-testid="`token-access-${itemType}-icon`" />
+        <project-avatar
+          :alt="item.name"
+          :project-avatar-url="item.avatarUrl"
+          :project-id="item.id"
+          :project-name="item.name"
+          class="gl-mr-3"
+          :data-testid="`token-access-${itemType}-avatar`"
+        />
+        <gl-link
+          class="gl-text-black-normal"
+          :href="`/${item.fullPath}`"
+          :data-testid="`token-access-${itemType}-name`"
+          >{{ item.fullPath }}</gl-link
+        >
+      </div>
     </template>
 
     <template #cell(actions)="{ item }">
diff --git a/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql b/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
index 641642ffc7677b..c42a5590f449ca 100644
--- a/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
+++ b/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
@@ -7,6 +7,7 @@ query inboundGetGroupsAndProjectsWithCIJobTokenScope($fullPath: ID!) {
           id
           name
           fullPath
+          avatarUrl
         }
       }
       inboundAllowlist {
@@ -14,6 +15,7 @@ query inboundGetGroupsAndProjectsWithCIJobTokenScope($fullPath: ID!) {
           id
           name
           fullPath
+          avatarUrl
         }
       }
     }
diff --git a/spec/frontend/token_access/token_access_table_spec.js b/spec/frontend/token_access/token_access_table_spec.js
index df5c19028b30e8..99bd2507f36364 100644
--- a/spec/frontend/token_access/token_access_table_spec.js
+++ b/spec/frontend/token_access/token_access_table_spec.js
@@ -20,6 +20,8 @@ describe('Token access table', () => {
   const findTable = () => wrapper.findComponent(GlTableLite);
   const findDeleteButton = () => wrapper.findComponent(GlButton);
   const findAllTableRows = (type) => wrapper.findAllByTestId(`${type}s-token-table-row`);
+  const findIcon = (type) => wrapper.findByTestId(`token-access-${type}-icon`);
+  const findProjectAvatar = (type) => wrapper.findByTestId(`token-access-${type}-avatar`);
   const findName = (type) => wrapper.findByTestId(`token-access-${type}-name`);
 
   describe.each`
@@ -49,8 +51,14 @@ describe('Token access table', () => {
       expect(wrapper.emitted('removeItem')).toEqual([[items[0]]]);
     });
 
-    it('displays fullpath', () => {
+    it('displays icon and avatar', () => {
+      expect(findIcon(type).props('name')).toBe(type);
+      expect(findProjectAvatar(type).props('projectName')).toBe(items[0].name);
+    });
+
+    it('displays fullpath as a link to the project', () => {
       expect(findName(type).text()).toBe(items[0].fullPath);
+      expect(findName(type).attributes('href')).toBe(`/${items[0].fullPath}`);
     });
   });
 });
-- 
GitLab


From c3c5b52ace17209926b1007e9c604e750333a4c2 Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Thu, 9 May 2024 13:55:37 -0600
Subject: [PATCH 2/8] Update mock data to match query

Project id should be an integer
Groups and projects should have avatarUrls
---
 spec/frontend/token_access/mock_data.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index a3521f49eb7d6d..1f5d9ccea1f72a 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -1,7 +1,7 @@
 export const enabledJobTokenScope = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         jobTokenScopeEnabled: true,
         __typename: 'ProjectCiCdSetting',
@@ -14,7 +14,7 @@ export const enabledJobTokenScope = {
 export const disabledJobTokenScope = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         jobTokenScopeEnabled: false,
         __typename: 'ProjectCiCdSetting',
@@ -28,14 +28,14 @@ export const projectsWithScope = {
   data: {
     project: {
       __typename: 'Project',
-      id: '1',
+      id: 1,
       ciJobTokenScope: {
         __typename: 'CiJobTokenScopeType',
         projects: {
           __typename: 'ProjectConnection',
           nodes: [
             {
-              id: '2',
+              id: 2,
               fullPath: 'root/332268-test',
               name: 'root/332268-test',
               namespace: {
@@ -141,7 +141,7 @@ export const mockFields = [
 export const inboundJobTokenScopeEnabledResponse = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         inboundJobTokenScopeEnabled: true,
         __typename: 'ProjectCiCdSetting',
@@ -154,7 +154,7 @@ export const inboundJobTokenScopeEnabledResponse = {
 export const inboundJobTokenScopeDisabledResponse = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         inboundJobTokenScopeEnabled: false,
         __typename: 'ProjectCiCdSetting',
@@ -168,7 +168,7 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
   data: {
     project: {
       __typename: 'Project',
-      id: '1',
+      id: 1,
       ciJobTokenScope: {
         __typename: 'CiJobTokenScopeType',
         inboundAllowlist: {
@@ -179,7 +179,7 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
               fullPath: 'root/ci-project',
               id: 'gid://gitlab/Project/23',
               name: 'ci-project',
-              namespace: { id: 'gid://gitlab/Namespaces::UserNamespace/1', fullPath: 'root' },
+              avatarUrl: '',
             },
           ],
         },
@@ -191,6 +191,7 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
               fullPath: 'root/ci-group',
               id: 'gid://gitlab/Group/45',
               name: 'ci-group',
+              avatarUrl: '',
             },
           ],
         },
-- 
GitLab


From a13282ba34dfaaf63b22398ed2876cf8d135d058 Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Fri, 10 May 2024 16:30:10 -0600
Subject: [PATCH 3/8] Improvements from feedback

Add tooltips to group and project icons/counts in table header
Use `groupOrProjectPath` instead of `targetPath`
Remove empty-text because it's never shown
---
 .../components/inbound_token_access.vue       | 46 +++++++++++++------
 .../components/token_access_table.vue         |  8 ----
 locale/gitlab.pot                             | 13 ++++--
 3 files changed, 43 insertions(+), 24 deletions(-)

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 a6c2b08735f186..c04e195ac7dadc 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -9,9 +9,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlToggle,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import { __, s__ } from '~/locale';
+import { __, s__, n__, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import inboundAddGroupOrProjectCIJobTokenScope from '../graphql/mutations/inbound_add_group_or_project_ci_job_token_scope.mutation.graphql';
@@ -64,6 +65,9 @@ export default {
     GlToggle,
     TokenAccessTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: {
     fullPath: {
       default: '',
@@ -103,19 +107,35 @@ export default {
   data() {
     return {
       inboundJobTokenScopeEnabled: null,
-      targetPath: '',
+      groupOrProjectPath: '',
       projects: [],
       groups: [],
       isAddFormVisible: false,
     };
   },
   computed: {
-    isTargetPathEmpty() {
-      return this.targetPath === '';
+    isGroupOrProjectPathEmpty() {
+      return this.groupOrProjectPath === '';
     },
     ciJobTokenHelpPage() {
       return helpPagePath('ci/jobs/ci_job_token#control-job-token-access-to-your-project');
     },
+    groupCountTooltip() {
+      return sprintf(
+        n__('%{count} group has access', '%{count} groups have access', this.groups.length),
+        {
+          count: this.groups.length,
+        },
+      );
+    },
+    projectCountTooltip() {
+      return sprintf(
+        n__('%{count} project has access', '%{count} projects have access', this.projects.length),
+        {
+          count: this.projects.length,
+        },
+      );
+    },
   },
   methods: {
     async updateCIJobTokenScope() {
@@ -152,7 +172,7 @@ export default {
           mutation: inboundAddGroupOrProjectCIJobTokenScope,
           variables: {
             projectPath: this.fullPath,
-            targetPath: this.targetPath,
+            targetPath: this.groupOrProjectPath,
           },
         });
 
@@ -162,7 +182,7 @@ export default {
       } catch (error) {
         createAlert({ message: error.message });
       } finally {
-        this.clearTargetPath();
+        this.clearGroupOrProjectPath();
         this.getGroupsAndProjects();
       }
     },
@@ -204,8 +224,8 @@ export default {
         this.getGroupsAndProjects();
       }
     },
-    clearTargetPath() {
-      this.targetPath = '';
+    clearGroupOrProjectPath() {
+      this.groupOrProjectPath = '';
       this.isAddFormVisible = false;
     },
     getGroupsAndProjects() {
@@ -264,11 +284,11 @@ export default {
           <template #header>
             <div class="gl-new-card-title-wrapper">
               <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5>
-              <span class="gl-new-card-count">
+              <span v-gl-tooltip :title="groupCountTooltip" class="gl-new-card-count">
                 <gl-icon name="group" class="gl-mr-2" />
                 {{ groups.length }}
               </span>
-              <span class="gl-new-card-count">
+              <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
                 <gl-icon name="project" class="gl-mr-2" />
                 {{ projects.length }}
               </span>
@@ -287,20 +307,20 @@ export default {
           <div v-if="isAddFormVisible" class="gl-new-card-add-form gl-m-3">
             <h4 class="gl-mt-0">{{ $options.i18n.addGroupOrProject }}</h4>
             <gl-form-input
-              v-model="targetPath"
+              v-model="groupOrProjectPath"
               :placeholder="$options.i18n.addProjectPlaceholder"
             />
             <div class="gl-display-flex gl-mt-5">
               <gl-button
                 variant="confirm"
-                :disabled="isTargetPathEmpty"
+                :disabled="isGroupOrProjectPathEmpty"
                 class="gl-mr-3"
                 data-testid="add-project-btn"
                 @click="addGroupOrProject"
               >
                 {{ $options.i18n.add }}
               </gl-button>
-              <gl-button @click="clearTargetPath">{{ $options.i18n.cancel }}</gl-button>
+              <gl-button @click="clearGroupOrProjectPath">{{ $options.i18n.cancel }}</gl-button>
             </div>
           </div>
 
diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 8217d5fb4a63cb..17014ed3c9b2ec 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlButton, GlIcon, GlLink, GlTableLite } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
-import { sprintf, s__ } from '~/locale';
 
 export default {
   components: {
@@ -32,11 +31,6 @@ export default {
     },
   },
   computed: {
-    emptyText() {
-      return sprintf(s__('CI/CD|No %{itemType}s have been added to the scope'), {
-        itemType: this.itemType,
-      });
-    },
     itemType() {
       return this.isGroup ? 'group' : 'project';
     },
@@ -48,8 +42,6 @@ export default {
     :items="items"
     :fields="tableFields"
     :tbody-tr-attr="{ 'data-testid': `${itemType}s-token-table-row` }"
-    :empty-text="emptyText"
-    show-empty
     stacked="sm"
     thead-class="gl-display-none"
     fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3a812f5e814693..2e7df15bbb9e38 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -675,6 +675,11 @@ msgid_plural "%{count} groups"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} group has access"
+msgid_plural "%{count} groups have access"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{count} issue"
 msgid_plural "%{count} issues"
 msgstr[0] ""
@@ -718,6 +723,11 @@ msgid_plural "%{count} projects"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} project has access"
+msgid_plural "%{count} projects have access"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{count} related %{pluralized_subject}: %{links}"
 msgstr ""
 
@@ -9953,9 +9963,6 @@ msgstr ""
 msgid "CI/CD limits"
 msgstr ""
 
-msgid "CI/CD|No %{itemType}s have been added to the scope"
-msgstr ""
-
 msgid "CICDAnalytics|%{percent}%{percentSymbol}"
 msgstr ""
 
-- 
GitLab


From 45a2de98d38f6a229c693d8aab73e2f4ebb12d9b Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Fri, 10 May 2024 16:47:43 -0600
Subject: [PATCH 4/8] Combine the two tables into one

---
 .../components/inbound_token_access.vue       | 52 ++++++++++---------
 .../components/token_access_table.vue         | 20 ++++---
 .../token_access/token_access_table_spec.js   |  2 +-
 3 files changed, 41 insertions(+), 33 deletions(-)

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 c04e195ac7dadc..c3a6b9b81af81c 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -96,8 +96,13 @@ export default {
         };
       },
       update({ project }) {
-        this.projects = project?.ciJobTokenScope?.inboundAllowlist?.nodes ?? [];
-        this.groups = project?.ciJobTokenScope?.groupsAllowlist?.nodes ?? [];
+        const projects = project?.ciJobTokenScope?.inboundAllowlist?.nodes ?? [];
+        const groups = project?.ciJobTokenScope?.groupsAllowlist?.nodes ?? [];
+
+        this.projectCount = projects.length;
+        this.groupCount = groups.length;
+
+        return [...groups, ...projects];
       },
       error() {
         createAlert({ message: this.$options.i18n.projectsFetchError });
@@ -107,9 +112,10 @@ export default {
   data() {
     return {
       inboundJobTokenScopeEnabled: null,
+      groupsAndProjectsWithAccess: [],
       groupOrProjectPath: '',
-      projects: [],
-      groups: [],
+      projectCount: 0,
+      groupCount: 0,
       isAddFormVisible: false,
     };
   },
@@ -122,17 +128,17 @@ export default {
     },
     groupCountTooltip() {
       return sprintf(
-        n__('%{count} group has access', '%{count} groups have access', this.groups.length),
+        n__('%{count} group has access', '%{count} groups have access', this.groupCount),
         {
-          count: this.groups.length,
+          count: this.groupCount,
         },
       );
     },
     projectCountTooltip() {
       return sprintf(
-        n__('%{count} project has access', '%{count} projects have access', this.projects.length),
+        n__('%{count} project has access', '%{count} projects have access', this.projectCount),
         {
-          count: this.projects.length,
+          count: this.projectCount,
         },
       );
     },
@@ -282,16 +288,18 @@ export default {
           body-class="gl-new-card-body gl-px-0"
         >
           <template #header>
-            <div class="gl-new-card-title-wrapper">
-              <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5>
-              <span v-gl-tooltip :title="groupCountTooltip" class="gl-new-card-count">
-                <gl-icon name="group" class="gl-mr-2" />
-                {{ groups.length }}
-              </span>
-              <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
-                <gl-icon name="project" class="gl-mr-2" />
-                {{ projects.length }}
-              </span>
+            <div class="gl-new-card-title-wrapper gl-flex-direction-column gl-flex-wrap">
+              <div class="gl-new-card-title">
+                <h5>{{ $options.i18n.cardHeaderTitle }}</h5>
+                <span v-gl-tooltip :title="groupCountTooltip" class="gl-new-card-count">
+                  <gl-icon name="group" class="gl-mr-2" />
+                  {{ groupCount }}
+                </span>
+                <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
+                  <gl-icon name="project" class="gl-mr-2" />
+                  {{ projectCount }}
+                </span>
+              </div>
             </div>
             <div class="gl-new-card-actions">
               <gl-button
@@ -326,13 +334,7 @@ export default {
 
           <token-access-table
             :is-group="true"
-            :items="groups"
-            :table-fields="$options.fields"
-            @removeItem="removeItem"
-          />
-
-          <token-access-table
-            :items="projects"
+            :items="groupsAndProjectsWithAccess"
             :table-fields="$options.fields"
             @removeItem="removeItem"
           />
diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 17014ed3c9b2ec..45bc7f99572774 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlIcon, GlLink, GlTableLite } from '@gitlab/ui';
+import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 export default {
@@ -30,9 +31,10 @@ export default {
       required: true,
     },
   },
-  computed: {
-    itemType() {
-      return this.isGroup ? 'group' : 'project';
+  methods: {
+    itemType(item) {
+      // eslint-disable-next-line no-underscore-dangle
+      return item.__typename === TYPENAME_GROUP ? 'group' : 'project';
     },
   },
 };
@@ -41,26 +43,30 @@ export default {
   <gl-table-lite
     :items="items"
     :fields="tableFields"
-    :tbody-tr-attr="{ 'data-testid': `${itemType}s-token-table-row` }"
+    :tbody-tr-attr="{ 'data-testid': 'token-access-table-row' }"
     stacked="sm"
     thead-class="gl-display-none"
     fixed
   >
     <template #cell(fullPath)="{ item }">
       <div class="gl-display-inline-flex gl-align-items-center">
-        <gl-icon :name="itemType" class="gl-mr-3" :data-testid="`token-access-${itemType}-icon`" />
+        <gl-icon
+          :name="itemType(item)"
+          class="gl-mr-3"
+          :data-testid="`token-access-${itemType(item)}-icon`"
+        />
         <project-avatar
           :alt="item.name"
           :project-avatar-url="item.avatarUrl"
           :project-id="item.id"
           :project-name="item.name"
           class="gl-mr-3"
-          :data-testid="`token-access-${itemType}-avatar`"
+          :data-testid="`token-access-${itemType(item)}-avatar`"
         />
         <gl-link
           class="gl-text-black-normal"
           :href="`/${item.fullPath}`"
-          :data-testid="`token-access-${itemType}-name`"
+          :data-testid="`token-access-${itemType(item)}-name`"
           >{{ item.fullPath }}</gl-link
         >
       </div>
diff --git a/spec/frontend/token_access/token_access_table_spec.js b/spec/frontend/token_access/token_access_table_spec.js
index 99bd2507f36364..bafc336e5f2bf5 100644
--- a/spec/frontend/token_access/token_access_table_spec.js
+++ b/spec/frontend/token_access/token_access_table_spec.js
@@ -19,7 +19,7 @@ describe('Token access table', () => {
 
   const findTable = () => wrapper.findComponent(GlTableLite);
   const findDeleteButton = () => wrapper.findComponent(GlButton);
-  const findAllTableRows = (type) => wrapper.findAllByTestId(`${type}s-token-table-row`);
+  const findAllTableRows = () => wrapper.findAllByTestId('token-access-table-row');
   const findIcon = (type) => wrapper.findByTestId(`token-access-${type}-icon`);
   const findProjectAvatar = (type) => wrapper.findByTestId(`token-access-${type}-avatar`);
   const findName = (type) => wrapper.findByTestId(`token-access-${type}-name`);
-- 
GitLab


From 8f7e4a5cacca4823789be623df88a7fa1828b8cb Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Fri, 10 May 2024 18:07:19 -0600
Subject: [PATCH 5/8] Table style cleanup

Move fields to table component
Flex-wrap the inbound token access table header
Unstack the table on small screens
Tighten up margins that make the card-table edges weird
---
 .../components/inbound_token_access.vue       | 18 +--------------
 .../components/outbound_token_access.vue      | 19 ++--------------
 .../components/token_access_table.vue         | 22 +++++++++++++------
 locale/gitlab.pot                             |  3 ---
 4 files changed, 18 insertions(+), 44 deletions(-)

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 c3a6b9b81af81c..5caa0c6ad65a0e 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -42,17 +42,6 @@ export default {
     projectsFetchError: __('There was a problem fetching the projects'),
     scopeFetchError: __('There was a problem fetching the job token scope value'),
   },
-  fields: [
-    {
-      key: 'fullPath',
-      label: '',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'gl-text-right',
-    },
-  ],
   components: {
     GlAlert,
     GlButton,
@@ -332,12 +321,7 @@ export default {
             </div>
           </div>
 
-          <token-access-table
-            :is-group="true"
-            :items="groupsAndProjectsWithAccess"
-            :table-fields="$options.fields"
-            @removeItem="removeItem"
-          />
+          <token-access-table :items="groupsAndProjectsWithAccess" @removeItem="removeItem" />
         </gl-card>
       </div>
     </template>
diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue
index aad46e730d8389..92b34ee39c80c7 100644
--- a/app/assets/javascripts/token_access/components/outbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue
@@ -46,17 +46,6 @@ export default {
   deprecationDocumentationLink: helpPagePath('ci/jobs/ci_job_token', {
     anchor: 'limit-your-projects-job-token-access',
   }),
-  fields: [
-    {
-      key: 'fullPath',
-      label: __('Project that can be accessed'),
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'gl-text-right',
-    },
-  ],
   components: {
     GlAlert,
     GlButton,
@@ -265,7 +254,7 @@ export default {
       <div>
         <gl-card
           class="gl-new-card"
-          header-class="gl-new-card-header"
+          header-class="gl-new-card-header gl-border-bottom-0"
           body-class="gl-new-card-body gl-px-0"
         >
           <template #header>
@@ -280,11 +269,7 @@ export default {
               <gl-button size="small" disabled>{{ $options.i18n.addProject }}</gl-button>
             </div>
           </template>
-          <token-access-table
-            :items="projects"
-            :table-fields="$options.fields"
-            @removeItem="removeProject"
-          />
+          <token-access-table :items="projects" @removeItem="removeProject" />
         </gl-card>
       </div>
     </template>
diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 45bc7f99572774..85619d30a9cd73 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -4,6 +4,18 @@ import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 export default {
+  fields: [
+    {
+      key: 'fullPath',
+      label: '',
+      tdClass: 'gl-w-3/4',
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-w-1/4 gl-text-right',
+    },
+  ],
   components: {
     GlButton,
     GlIcon,
@@ -26,10 +38,6 @@ export default {
       type: Array,
       required: true,
     },
-    tableFields: {
-      type: Array,
-      required: true,
-    },
   },
   methods: {
     itemType(item) {
@@ -42,17 +50,17 @@ export default {
 <template>
   <gl-table-lite
     :items="items"
-    :fields="tableFields"
+    :fields="$options.fields"
     :tbody-tr-attr="{ 'data-testid': 'token-access-table-row' }"
-    stacked="sm"
     thead-class="gl-display-none"
+    class="gl-mb-0"
     fixed
   >
     <template #cell(fullPath)="{ item }">
       <div class="gl-display-inline-flex gl-align-items-center">
         <gl-icon
           :name="itemType(item)"
-          class="gl-mr-3"
+          class="gl-mr-3 gl-flex-shrink-0"
           :data-testid="`token-access-${itemType(item)}-icon`"
         />
         <project-avatar
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2e7df15bbb9e38..5c74320ed1603d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -40732,9 +40732,6 @@ msgstr ""
 msgid "Project slug"
 msgstr ""
 
-msgid "Project that can be accessed"
-msgstr ""
-
 msgid "Project uploads"
 msgstr ""
 
-- 
GitLab


From da16738934145190d20097015116292a55e5afac Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Wed, 5 Jun 2024 15:52:52 -0600
Subject: [PATCH 6/8] Implement follow-up spacing suggestions

From https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151704:
Add gl-my-0 to card header title h5
and gl-items-center to card header title
Add gl-mb-0 to card header description
---
 .../token_access/components/inbound_token_access.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 5caa0c6ad65a0e..50034974c73e3f 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -278,8 +278,8 @@ export default {
         >
           <template #header>
             <div class="gl-new-card-title-wrapper gl-flex-direction-column gl-flex-wrap">
-              <div class="gl-new-card-title">
-                <h5>{{ $options.i18n.cardHeaderTitle }}</h5>
+              <div class="gl-new-card-title gl-items-center">
+                <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5>
                 <span v-gl-tooltip :title="groupCountTooltip" class="gl-new-card-count">
                   <gl-icon name="group" class="gl-mr-2" />
                   {{ groupCount }}
-- 
GitLab


From fd1e4e23b12fc65a009472185c7edcdec2008e02 Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Thu, 6 Jun 2024 10:48:29 -0600
Subject: [PATCH 7/8] Replace utility classes with tailwind equivalents

---
 .../token_access/components/outbound_token_access.vue         | 2 +-
 .../token_access/components/token_access_table.vue            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue
index 92b34ee39c80c7..949c6e8cee08c2 100644
--- a/app/assets/javascripts/token_access/components/outbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue
@@ -254,7 +254,7 @@ export default {
       <div>
         <gl-card
           class="gl-new-card"
-          header-class="gl-new-card-header gl-border-bottom-0"
+          header-class="gl-new-card-header gl-border-b-0"
           body-class="gl-new-card-body gl-px-0"
         >
           <template #header>
diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 85619d30a9cd73..9f619d32debf64 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -57,7 +57,7 @@ export default {
     fixed
   >
     <template #cell(fullPath)="{ item }">
-      <div class="gl-display-inline-flex gl-align-items-center">
+      <div class="gl-inline-flex gl-items-center">
         <gl-icon
           :name="itemType(item)"
           class="gl-mr-3 gl-flex-shrink-0"
@@ -72,7 +72,7 @@ export default {
           :data-testid="`token-access-${itemType(item)}-avatar`"
         />
         <gl-link
-          class="gl-text-black-normal"
+          class="gl-text-gray-900"
           :href="`/${item.fullPath}`"
           :data-testid="`token-access-${itemType(item)}-name`"
           >{{ item.fullPath }}</gl-link
-- 
GitLab


From 949b764a0a416e04e83790d375d151389f6b913b Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Tue, 11 Jun 2024 13:29:04 -0600
Subject: [PATCH 8/8] Changes from feedback

Add tooltip to outbound token access project count
Add tests for increment/decrement group/project count
---
 .../components/inbound_token_access.vue       | 14 +++-
 .../components/outbound_token_access.vue      | 16 +++-
 .../token_access/inbound_token_access_spec.js | 74 ++++++++++++++++++-
 spec/frontend/token_access/mock_data.js       | 36 +++++++++
 4 files changed, 135 insertions(+), 5 deletions(-)

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 50034974c73e3f..29dbc49f835aed 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -280,11 +280,21 @@ export default {
             <div class="gl-new-card-title-wrapper gl-flex-direction-column gl-flex-wrap">
               <div class="gl-new-card-title gl-items-center">
                 <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5>
-                <span v-gl-tooltip :title="groupCountTooltip" class="gl-new-card-count">
+                <span
+                  v-gl-tooltip
+                  :title="groupCountTooltip"
+                  class="gl-new-card-count"
+                  data-testid="group-count"
+                >
                   <gl-icon name="group" class="gl-mr-2" />
                   {{ groupCount }}
                 </span>
-                <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
+                <span
+                  v-gl-tooltip
+                  :title="projectCountTooltip"
+                  class="gl-new-card-count"
+                  data-testid="project-count"
+                >
                   <gl-icon name="project" class="gl-mr-2" />
                   {{ projectCount }}
                 </span>
diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue
index 949c6e8cee08c2..c3d08b884fee16 100644
--- a/app/assets/javascripts/token_access/components/outbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue
@@ -8,9 +8,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlToggle,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import { __, s__ } from '~/locale';
+import { __, s__, n__, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import addProjectCIJobTokenScopeMutation from '../graphql/mutations/add_project_ci_job_token_scope.mutation.graphql';
@@ -57,6 +58,9 @@ export default {
     GlToggle,
     TokenAccessTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [glFeatureFlagMixin()],
   inject: {
     fullPath: {
@@ -110,6 +114,14 @@ export default {
     disableTokenToggle() {
       return !this.jobTokenScopeEnabled;
     },
+    projectCountTooltip() {
+      return sprintf(
+        n__('%{count} project has access', '%{count} projects have access', this.projects.length),
+        {
+          count: this.projects.length,
+        },
+      );
+    },
   },
   methods: {
     async updateCIJobTokenScope() {
@@ -260,7 +272,7 @@ export default {
           <template #header>
             <div class="gl-new-card-title-wrapper">
               <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5>
-              <span class="gl-new-card-count">
+              <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
                 <gl-icon name="project" class="gl-mr-2" />
                 {{ projects.length }}
               </span>
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
index a7b0a9820b502f..045156075c9d68 100644
--- a/spec/frontend/token_access/inbound_token_access_spec.js
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -16,6 +16,7 @@ import {
   inboundJobTokenScopeEnabledResponse,
   inboundJobTokenScopeDisabledResponse,
   inboundGroupsAndProjectsWithScopeResponse,
+  inboundGroupsAndProjectsWithScopeResponseWithAddedItem,
   inboundAddGroupOrProjectSuccessResponse,
   inboundRemoveGroupSuccess,
   inboundRemoveProjectSuccess,
@@ -232,7 +233,7 @@ describe('TokenAccess component', () => {
     type         | testPath
     ${'group'}   | ${testGroupPath}
     ${'project'} | ${testProjectPath}
-  `('add $type', ({ testPath }) => {
+  `('add $type', ({ type, testPath }) => {
     it(`calls add group or project mutation`, async () => {
       createComponent(
         [
@@ -261,6 +262,44 @@ describe('TokenAccess component', () => {
       });
     });
 
+    it(`increments the ${type} count`, async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            jest
+              .fn()
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponse)
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponseWithAddedItem),
+          ],
+          [
+            inboundAddGroupOrProjectCIJobTokenScopeMutation,
+            inboundAddGroupOrProjectSuccessResponseHandler,
+          ],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('1');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `1 ${type} has access`,
+      );
+
+      await findToggleFormBtn().trigger('click');
+      await findProjectInput().vm.$emit('input', testPath);
+      findAddProjectBtn().trigger('click');
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('2');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `2 ${type}s have access`,
+      );
+    });
+
     it('add group or project handles error correctly', async () => {
       createComponent(
         [
@@ -343,6 +382,39 @@ describe('TokenAccess component', () => {
       });
     });
 
+    it(`decrements the ${type} count`, async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            jest
+              .fn()
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponseWithAddedItem)
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponse),
+          ],
+          [mutation, handler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('2');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `2 ${type}s have access`,
+      );
+
+      findRemoveProjectBtnAt(index).trigger('click');
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('1');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `1 ${type} has access`,
+      );
+    });
+
     it(`remove ${type} handles error correctly`, async () => {
       createComponent(
         [
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index 1f5d9ccea1f72a..ab8f6d63c59152 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -200,6 +200,42 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
   },
 };
 
+export const inboundGroupsAndProjectsWithScopeResponseWithAddedItem = {
+  data: {
+    project: {
+      ...inboundGroupsAndProjectsWithScopeResponse.data.project,
+      ciJobTokenScope: {
+        inboundAllowlist: {
+          nodes: [
+            ...inboundGroupsAndProjectsWithScopeResponse.data.project.ciJobTokenScope
+              .inboundAllowlist.nodes,
+            {
+              __typename: 'Project',
+              fullPath: 'root/test',
+              id: 'gid://gitlab/Project/25',
+              name: 'test',
+              avatarUrl: '',
+            },
+          ],
+        },
+        groupsAllowlist: {
+          nodes: [
+            ...inboundGroupsAndProjectsWithScopeResponse.data.project.ciJobTokenScope
+              .groupsAllowlist.nodes,
+            {
+              __typename: 'Group',
+              fullPath: 'gitlab-org',
+              id: 'gid://gitlab/Group/49',
+              name: 'gitlab-org',
+              avatarUrl: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
 export const inboundAddGroupOrProjectSuccessResponse = {
   data: {
     ciJobTokenScopeAddProject: {
-- 
GitLab