1 files changed, 19 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 81d59f1ef65..d34ae8036ed 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -40,6 +40,11 @@ export default {
       required: false,
       default: () => [],
     },
+    isStageView: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     jobHovered: {
       type: String,
       required: false,
@@ -50,16 +55,15 @@ export default {
       required: false,
       default: () => ({}),
     },
-    showStageName: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     sourceJobHovered: {
       type: String,
       required: false,
       default: '',
     },
+    userPermissions: {
+      type: Object,
+      required: true,
+    },
   },
   titleClasses: [
     'gl-font-weight-bold',
@@ -69,20 +73,11 @@ export default {
     'gl-pl-3',
   ],
   computed: {
-    /*
-      currentGroups and filteredGroups are part of
-      a test to hunt down a bug
-      (see: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57142).
-
-      They should be removed when the bug is rectified.
-    */
-    currentGroups() {
-      return this.glFeatures.pipelineFilterJobs ? this.filteredGroups : this.groups;
+    canUpdatePipeline() {
+      return this.userPermissions.updatePipeline;
     },
-    filteredGroups() {
-      return this.groups.map((group) => {
-        return { ...group, jobs: group.jobs.filter(Boolean) };
-      });
+    columnSpacingClass() {
+      return this.isStageView ? 'gl-px-6' : 'gl-px-9';
     },
     formattedTitle() {
       return capitalize(escape(this.name));
@@ -90,6 +85,9 @@ export default {
     hasAction() {
       return !isEmpty(this.action);
     },
+    showStageName() {
+      return !this.isStageView;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
@@ -123,7 +121,7 @@ export default {
 };
 </script>
 <template>
-  <main-graph-wrapper class="gl-px-6" data-testid="stage-column">
+  <main-graph-wrapper :class="columnSpacingClass" data-testid="stage-column">
     <template #stages>
       <div
         data-testid="stage-column-title"
@@ -132,7 +130,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"
@@ -143,7 +141,7 @@ export default {
     </template>
     <template #jobs>
       <div
-        v-for="group in currentGroups"
+        v-for="group in groups"
         :id="groupId(group)"
         :key="getGroupId(group)"
         data-testid="stage-column-group"