Add dynamic job link

Show link if user has
permissions, show only
text if they can't read
build.

app/assets/javascripts/jobs/components/table/cells/job_cell.vue

@@ -52,6 +52,9 @@ export default {
     isScheduledJob() {
       return Boolean(this.job.scheduledAt);
     },
+    canReadJob() {
+      return this.job?.userPermissions?.readBuild;
+    },
   },
 };
 </script>
@@ -59,7 +62,16 @@ export default {
 <template>
   <div>
     <div class="gl-text-truncate">
-      <gl-link class="gl-text-gray-500!" :href="jobPath" data-testid="job-id">{{ jobId }}</gl-link>
+      <gl-link
+        v-if="canReadJob"
+        class="gl-text-gray-500!"
+        :href="jobPath"
+        data-testid="job-id-link"
+      >
+        {{ jobId }}
+      </gl-link>
+
+      <span v-else data-testid="job-id-limited-access">{{ jobId }}</span>
 
       <div class="gl-display-flex gl-align-items-center">
         <div v-if="jobRef" class="gl-max-w-15 gl-text-truncate">

app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql

@@ -59,6 +59,9 @@ query getJobs($fullPath: ID!, $statuses: [CiJobStatus!]) {
         playable
         cancelable
         active
+        userPermissions {
+          readBuild
+        }
       }
     }
   }

spec/frontend/jobs/components/table/cells.vue/job_cell_spec.js

@@ -6,11 +6,13 @@ import { mockJobsInTable } from '../../../mock_data';
 
 const mockJob = mockJobsInTable[0];
 const mockJobCreatedByTag = mockJobsInTable[1];
+const mockJobLimitedAccess = mockJobsInTable[2];
 
 describe('Job Cell', () => {
   let wrapper;
 
-  const findJobId = () => wrapper.findByTestId('job-id');
+  const findJobIdLink = () => wrapper.findByTestId('job-id-link');
+  const findJobIdNoLink = () => wrapper.findByTestId('job-id-limited-access');
   const findJobRef = () => wrapper.findByTestId('job-ref');
   const findJobSha = () => wrapper.findByTestId('job-sha');
   const findLabelIcon = () => wrapper.findByTestId('label-icon');
@@ -34,15 +36,24 @@ describe('Job Cell', () => {
   });
 
   describe('Job Id', () => {
-    beforeEach(() => {
+    it('displays the job id and links to the job', () => {
       createComponent();
-    });
 
-    it('displays the job id and links to the job', () => {
       const expectedJobId = `#${getIdFromGraphQLId(mockJob.id)}`;
 
-      expect(findJobId().text()).toBe(expectedJobId);
-      expect(findJobId().attributes('href')).toBe(mockJob.detailedStatus.detailsPath);
+      expect(findJobIdLink().text()).toBe(expectedJobId);
+      expect(findJobIdLink().attributes('href')).toBe(mockJob.detailedStatus.detailsPath);
+      expect(findJobIdNoLink().exists()).toBe(false);
+    });
+
+    it('display the job id with no link', () => {
+      createComponent(mockJobLimitedAccess);
+
+      const expectedJobId = `#${getIdFromGraphQLId(mockJobLimitedAccess.id)}`;
+
+      expect(findJobIdNoLink().text()).toBe(expectedJobId);
+      expect(findJobIdNoLink().exists()).toBe(true);
+      expect(findJobIdLink().exists()).toBe(false);
     });
   });
 

spec/frontend/jobs/mock_data.js

@@ -1322,6 +1322,7 @@ export const mockJobsInTable = [
     playable: true,
     cancelable: false,
     active: false,
+    userPermissions: { readBuild: true, __typename: 'JobPermissions' },
     __typename: 'CiJob',
   },
   {
@@ -1360,6 +1361,7 @@ export const mockJobsInTable = [
     playable: false,
     cancelable: false,
     active: false,
+    userPermissions: { readBuild: true, __typename: 'JobPermissions' },
     __typename: 'CiJob',
   },
   {
@@ -1405,6 +1407,7 @@ export const mockJobsInTable = [
     playable: false,
     cancelable: false,
     active: false,
+    userPermissions: { readBuild: false, __typename: 'JobPermissions' },
     __typename: 'CiJob',
   },
 ];
@@ -1492,6 +1495,7 @@ export const mockJobsQueryResponse = {
             playable: false,
             cancelable: false,
             active: false,
+            userPermissions: { readBuild: true, __typename: 'JobPermissions' },
             __typename: 'CiJob',
           },
         ],