Merge branch '334802-user-permissions-in-fe-list' into 'master'

Use runner userPermissions to show list actions

See merge request gitlab-org/gitlab!77443

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');