Use user permissions

Ensure the user permissions
are taken into consideration
with a manual action on a pipeline
stage.

Changelog: fixed

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -207,6 +207,7 @@ export default {
                 :source-job-hovered="hoveredSourceJobName"
                 :pipeline-expanded="pipelineExpanded"
                 :pipeline-id="pipeline.id"
+                :user-permissions="pipeline.userPermissions"
                 @refreshPipelineGraph="$emit('refreshPipelineGraph')"
                 @jobHover="setJob"
                 @updateMeasurements="getMeasurements"

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -60,6 +60,10 @@ export default {
       required: false,
       default: '',
     },
+    userPermissions: {
+      type: Object,
+      required: true,
+    },
   },
   titleClasses: [
     'gl-font-weight-bold',
@@ -90,6 +94,9 @@ export default {
     hasAction() {
       return !isEmpty(this.action);
     },
+    canUpdatePipeline() {
+      return this.userPermissions.updatePipeline;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
@@ -132,7 +139,7 @@ export default {
       >
         <div>{{ formattedTitle }}</div>
         <action-component
-          v-if="hasAction"
+          v-if="hasAction && canUpdatePipeline"
           :action-icon="action.icon"
           :tooltip-text="action.title"
           :link="action.path"

app/graphql/queries/pipelines/get_pipeline_details.query.graphql

@@ -29,6 +29,9 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) {
       iid
       complete
       usesNeeds
+      userPermissions {
+        updatePipeline
+      }
       downstream {
         __typename
         nodes {

spec/frontend/pipelines/graph/mock_data.js

@@ -12,6 +12,10 @@ export const mockPipelineResponse = {
         usesNeeds: true,
         downstream: null,
         upstream: null,
+        userPermissions: {
+          __typename: 'PipelinePermissions',
+          updatePipeline: true,
+        },
         stages: {
           __typename: 'CiStageConnection',
           nodes: [
@@ -573,6 +577,10 @@ export const wrappedPipelineReturn = {
         iid: '38',
         complete: true,
         usesNeeds: true,
+        userPermissions: {
+          __typename: 'PipelinePermissions',
+          updatePipeline: true,
+        },
         downstream: {
           __typename: 'PipelineConnection',
           nodes: [],

spec/frontend/pipelines/graph/stage_column_component_spec.js

@@ -31,6 +31,9 @@ const defaultProps = {
   name: 'Fish',
   groups: mockGroups,
   pipelineId: 159,
+  userPermissions: {
+    updatePipeline: true,
+  },
 };
 
 describe('stage column component', () => {
@@ -152,10 +155,7 @@ describe('stage column component', () => {
   });
 
   describe('with action', () => {
-    beforeEach(() => {
-      createComponent({
-        method: mount,
-        props: {
+    const defaults = {
       groups: [
         {
           id: 4259,
@@ -175,13 +175,32 @@ describe('stage column component', () => {
         title: 'Play all',
         path: 'action',
       },
+    };
+
+    it('renders action button if permissions are permitted', () => {
+      createComponent({
+        method: mount,
+        props: {
+          ...defaults,
         },
       });
-    });
 
-    it('renders action button', () => {
       expect(findActionComponent().exists()).toBe(true);
     });
+
+    it('does not render action button if permissions are not permitted', () => {
+      createComponent({
+        method: mount,
+        props: {
+          ...defaults,
+          userPermissions: {
+            updatePipeline: false,
+          },
+        },
+      });
+
+      expect(findActionComponent().exists()).toBe(false);
+    });
   });
 
   describe('without action', () => {