fix(3433): PR jobs displayed even when “Show PR Jobs” is enabled

app/components/pipeline/settings/preferences/component.js

@@ -46,7 +46,7 @@ export default class PipelineSettingsPreferencesComponent extends Component {
     this.isFilterEventsForNoBuilds = !!settings?.filterEventsForNoBuilds;
 
     this.userSettings = this.settings.getSettingsForPipeline(this.pipeline.id);
-    this.isShowPrJobs = this.userSettings?.showPRJobs || false;
+    this.isShowPrJobs = this.userSettings?.showPRJobs ?? true;
 
     this.isUserSettingsDisabled = false;
   }

app/components/pipeline/workflow/component.js

@@ -54,6 +54,7 @@ export default class PipelineWorkflowComponent extends Component {
 
   @tracked collapsedStages;
 
+
   workflowGraph;
 
   workflowGraphWithDownstreamTriggers;

app/components/pipeline/workflow/graph/component.js

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { isSkipped } from 'screwdriver-ui/utils/pipeline/event';
-import { decorateGraph } from 'screwdriver-ui/utils/graph-tools';
+import { decorateGraph, removeBranch } from 'screwdriver-ui/utils/graph-tools';
 import {
   addEdges,
   addJobIcons,
@@ -22,7 +22,9 @@ import {
 import { nodeCanShowTooltip } from 'screwdriver-ui/utils/pipeline/graph/tooltip';
 
 export default class PipelineWorkflowGraphComponent extends Component {
-  @service pipelinePageState;
+  @service('pipeline-page-state') pipelinePageState;
+
+  @service('settings') settings;
 
   event;
 
@@ -36,13 +38,20 @@ export default class PipelineWorkflowGraphComponent extends Component {
 
   graphSvg;
 
+  showPRJobs;
+
   constructor() {
     super(...arguments);
     this.event = this.args.event;
     this.builds = this.args.builds;
     this.stageBuilds = this.args.stageBuilds;
     this.collapsedStages = this.args.collapsedStages;
 
+    this.showPRJobs =
+      this.settings.getSettingsForPipeline(
+        this.pipelinePageState.getPipelineId()
+      ).showPRJobs ?? true;
+
     this.getDecoratedGraph(
       this.args.workflowGraph,
       this.args.builds,
@@ -59,6 +68,14 @@ export default class PipelineWorkflowGraphComponent extends Component {
     event,
     collapsedStages
   ) {
+    // remove jobs that starts from ~pr
+
+    if (event.prNum === undefined && !this.showPRJobs) {
+      const prNode = workflowGraph.nodes.findBy('name', '~pr');
+
+      removeBranch(prNode, workflowGraph);
+    }
+
     this.decoratedGraph = decorateGraph({
       inputGraph: workflowGraph,
       builds,

tests/integration/components/pipeline/workflow/graph/component-test.js

@@ -12,9 +12,14 @@ module('Integration | Component | pipeline/workflow/graph', function (hooks) {
 
   hooks.beforeEach(function () {
     const pipelinePageState = this.owner.lookup('service:pipeline-page-state');
+    const settings = this.owner.lookup('service:settings');
 
     sinon.stub(pipelinePageState, 'getStages').returns(stages);
     sinon.stub(pipelinePageState, 'getJobs').returns(jobs);
+    sinon.stub(pipelinePageState, 'getPipelineId').returns(1);
+    sinon
+      .stub(settings, 'getSettingsForPipeline')
+      .returns({ showPRJobs: false });
 
     jobs.push({ id: 1 });
   });
@@ -211,7 +216,7 @@ module('Integration | Component | pipeline/workflow/graph', function (hooks) {
           { src: 'first', dest: 'second' }
         ]
       },
-      event: { startFrom: '~pr' },
+      event: { startFrom: '~pr', prNum: 1 },
       builds: [{ id: 1, jobId: 1, status: 'SUCCESS' }],
       collapsedStages: new Set([]),
       displayJobNameLength: 20