Use runner userPermissions to show list actions

This change hides actions (buttons and links) in the runner list
according to the runner 'userPermissions'.

This prepares the runner list for display in non-admin views,
no user-facing changes are expected.

app/assets/javascripts/runner/components/cells/runner_actions_cell.vue

@@ -69,6 +69,12 @@ export default {
     runnerDeleteModalId() {
       return `delete-runner-modal-${this.runnerId}`;
     },
+    canUpdate() {
+      return this.runner.userPermissions?.updateRunner;
+    },
+    canDelete() {
+      return this.runner.userPermissions?.deleteRunner;
+    },
   },
   methods: {
     async onToggleActive() {
@@ -156,7 +162,7 @@ export default {
       See https://gitlab.com/gitlab-org/gitlab/-/issues/334802
     -->
     <gl-button
-      v-if="runner.adminUrl"
+      v-if="canUpdate && runner.adminUrl"
       v-gl-tooltip.hover.viewport="$options.I18N_EDIT"
       :href="runner.adminUrl"
       :aria-label="$options.I18N_EDIT"
@@ -164,6 +170,7 @@ export default {
       data-testid="edit-runner"
     />
     <gl-button
+      v-if="canUpdate"
       v-gl-tooltip.hover.viewport="toggleActiveTitle"
       :aria-label="toggleActiveTitle"
       :icon="toggleActiveIcon"
@@ -172,6 +179,7 @@ export default {
       @click="onToggleActive"
     />
     <gl-button
+      v-if="canDelete"
       v-gl-tooltip.hover.viewport="deleteTitle"
       v-gl-modal="runnerDeleteModalId"
       :aria-label="deleteTitle"
@@ -182,6 +190,7 @@ export default {
     />
 
     <runner-delete-modal
+      v-if="canDelete"
       :ref="runnerDeleteModalId"
       :modal-id="runnerDeleteModalId"
       :runner-name="runnerName"

app/assets/javascripts/runner/graphql/runner_node.fragment.graphql

@@ -12,4 +12,8 @@ fragment RunnerNode on CiRunner {
   tagList
   contactedAt
   status(legacyMode: null)
+  userPermissions {
+    updateRunner
+    deleteRunner
+  }
 }

spec/frontend/runner/components/cells/runner_actions_cell_spec.js

@@ -40,7 +40,7 @@ describe('RunnerTypeCell', () => {
   const findDeleteBtn = () => wrapper.findByTestId('delete-runner');
   const getTooltip = (w) => getBinding(w.element, 'gl-tooltip')?.value;
 
-  const createComponent = ({ active = true } = {}, options) => {
+  const createComponent = (runner = {}, options) => {
     wrapper = extendedWrapper(
       shallowMount(RunnerActionCell, {
         propsData: {
@@ -48,7 +48,9 @@ describe('RunnerTypeCell', () => {
             id: mockRunner.id,
             shortSha: mockRunner.shortSha,
             adminUrl: mockRunner.adminUrl,
-            active,
+            userPermissions: mockRunner.userPermissions,
+            active: mockRunner.active,
+            ...runner,
           },
         },
         localVue,
@@ -103,6 +105,25 @@ describe('RunnerTypeCell', () => {
 
       expect(findEditBtn().attributes('href')).toBe(mockRunner.adminUrl);
     });
+
+    it('Does not render the runner edit link when user cannot update', () => {
+      createComponent({
+        userPermissions: {
+          ...mockRunner.userPermissions,
+          updateRunner: false,
+        },
+      });
+
+      expect(findEditBtn().exists()).toBe(false);
+    });
+
+    it('Does not render the runner edit link when adminUrl is not provided', () => {
+      createComponent({
+        adminUrl: null,
+      });
+
+      expect(findEditBtn().exists()).toBe(false);
+    });
   });
 
   describe('Toggle active action', () => {
@@ -213,6 +234,17 @@ describe('RunnerTypeCell', () => {
         });
       });
     });
+
+    it('Does not render the runner toggle active button when user cannot update', () => {
+      createComponent({
+        userPermissions: {
+          ...mockRunner.userPermissions,
+          updateRunner: false,
+        },
+      });
+
+      expect(findToggleActiveBtn().exists()).toBe(false);
+    });
   });
 
   describe('Delete action', () => {
@@ -225,6 +257,10 @@ describe('RunnerTypeCell', () => {
       );
     });
 
+    it('Renders delete button', () => {
+      expect(findDeleteBtn().exists()).toBe(true);
+    });
+
     it('Delete button opens delete modal', () => {
       const modalId = getBinding(findDeleteBtn().element, 'gl-modal').value;
 
@@ -259,6 +295,18 @@ describe('RunnerTypeCell', () => {
       });
     });
 
+    it('Does not render the runner delete button when user cannot delete', () => {
+      createComponent({
+        userPermissions: {
+          ...mockRunner.userPermissions,
+          deleteRunner: false,
+        },
+      });
+
+      expect(findDeleteBtn().exists()).toBe(false);
+      expect(findRunnerDeleteModal().exists()).toBe(false);
+    });
+
     describe('When delete is clicked', () => {
       beforeEach(() => {
         findRunnerDeleteModal().vm.$emit('primary');