Add namespace to token access

Add namespace column to the ci
token access table.

Changelog: changed

app/assets/javascripts/token_access/components/token_access.vue

@@ -117,7 +117,7 @@ export default {
           throw new Error(errors[0]);
         }
       } catch (error) {
-        createAlert({ message: error });
+        createAlert({ message: error.message });
       }
     },
     async addProject() {
@@ -140,7 +140,7 @@ export default {
           throw new Error(errors[0]);
         }
       } catch (error) {
-        createAlert({ message: error });
+        createAlert({ message: error.message });
       } finally {
         this.clearTargetProjectPath();
         this.getProjects();
@@ -166,7 +166,7 @@ export default {
           throw new Error(errors[0]);
         }
       } catch (error) {
-        createAlert({ message: error });
+        createAlert({ message: error.message });
       } finally {
         this.getProjects();
       }

app/assets/javascripts/token_access/components/token_projects_table.vue

@@ -10,14 +10,21 @@ export default {
     {
       key: 'project',
       label: __('Projects that can be accessed'),
-      tdClass: 'gl-p-5!',
-      columnClass: 'gl-w-85p',
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'namespace',
+      label: __('Namespace'),
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
     },
     {
       key: 'actions',
       label: '',
-      tdClass: 'gl-p-5! gl-text-right',
-      columnClass: 'gl-w-15p',
+      tdClass: 'gl-text-right',
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-10p',
     },
   ],
   components: {
@@ -57,7 +64,11 @@ export default {
     </template>
 
     <template #cell(project)="{ item }">
-      {{ item.name }}
+      <span data-testid="token-access-project-name">{{ item.name }}</span>
+    </template>
+
+    <template #cell(namespace)="{ item }">
+      <span data-testid="token-access-project-namespace">{{ item.namespace.fullPath }}</span>
     </template>
 
     <template #cell(actions)="{ item }">

app/assets/javascripts/token_access/graphql/queries/get_projects_with_ci_job_token_scope.query.graphql

@@ -6,6 +6,10 @@ query getProjectsWithCIJobTokenScope($fullPath: ID!) {
         nodes {
           id
           name
+          namespace {
+            id
+            fullPath
+          }
           fullPath
         }
       }

spec/frontend/token_access/mock_data.js

@@ -38,6 +38,10 @@ export const projectsWithScope = {
               id: '2',
               fullPath: 'root/332268-test',
               name: 'root/332268-test',
+              namespace: {
+                id: '1234',
+                fullPath: 'root',
+              },
             },
           ],
         },
@@ -68,6 +72,10 @@ export const mockProjects = [
   {
     id: '1',
     name: 'merge-train-stuff',
+    namespace: {
+      id: '1235',
+      fullPath: 'root',
+    },
     fullPath: 'root/merge-train-stuff',
     isLocked: false,
     __typename: 'Project',
@@ -75,6 +83,10 @@ export const mockProjects = [
   {
     id: '2',
     name: 'ci-project',
+    namespace: {
+      id: '1236',
+      fullPath: 'root',
+    },
     fullPath: 'root/ci-project',
     isLocked: true,
     __typename: 'Project',

spec/frontend/token_access/token_access_spec.js

@@ -19,7 +19,8 @@ import {
 } from './mock_data';
 
 const projectPath = 'root/my-repo';
-const error = new Error('Error');
+const message = 'An error occurred';
+const error = new Error(message);
 
 Vue.use(VueApollo);
 
@@ -144,7 +145,7 @@ describe('TokenAccess component', () => {
 
       await waitForPromises();
 
-      expect(createAlert).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalledWith({ message });
     });
   });
 
@@ -187,7 +188,7 @@ describe('TokenAccess component', () => {
 
       await waitForPromises();
 
-      expect(createAlert).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalledWith({ message });
     });
   });
 });

spec/frontend/token_access/token_projects_table_spec.js

 import { GlTable, GlButton } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import TokenProjectsTable from '~/token_access/components/token_projects_table.vue';
 import { mockProjects } from './mock_data';
 
@@ -7,7 +7,7 @@ describe('Token projects table', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = mount(TokenProjectsTable, {
+    wrapper = mountExtended(TokenProjectsTable, {
       provide: {
         fullPath: 'root/ci-project',
       },
@@ -18,9 +18,11 @@ describe('Token projects table', () => {
   };
 
   const findTable = () => wrapper.findComponent(GlTable);
-  const findAllTableRows = () => wrapper.findAll('[data-testid="projects-token-table-row"]');
   const findDeleteProjectBtn = () => wrapper.findComponent(GlButton);
   const findAllDeleteProjectBtn = () => wrapper.findAllComponents(GlButton);
+  const findAllTableRows = () => wrapper.findAllByTestId('projects-token-table-row');
+  const findProjectNameCell = () => wrapper.findByTestId('token-access-project-name');
+  const findProjectNamespaceCell = () => wrapper.findByTestId('token-access-project-namespace');
 
   beforeEach(() => {
     createComponent();
@@ -48,4 +50,9 @@ describe('Token projects table', () => {
     // currently two mock projects with one being a locked project
     expect(findAllDeleteProjectBtn()).toHaveLength(1);
   });
+
+  it('displays project and namespace cells', () => {
+    expect(findProjectNameCell().text()).toBe('merge-train-stuff');
+    expect(findProjectNamespaceCell().text()).toBe('root');
+  });
 });