fix(3433): highlight the selected job when navigating from build details to event views

app/components/build-banner/component.js

@@ -152,6 +152,20 @@ export default Component.extend({
     }
   }),
 
+  usesLegacyUi: computed({
+    get() {
+      return localStorage.getItem('oldUi') === 'true';
+    }
+  }),
+
+  eventRoute: computed('usesLegacyUi', {
+    get() {
+      return this.usesLegacyUi
+        ? 'pipeline.events.show'
+        : 'v2.pipeline.events.show';
+    }
+  }),
+
   isButtonDisabledLoaded: false,
   isButtonDisabled: computed(
     'buildAction',

app/components/build-banner/template.hbs

@@ -10,8 +10,9 @@
         </LinkTo>
     {{else}}
       <LinkTo
-        @route="v2.pipeline.events.show"
+        @route={{this.eventRoute}}
         @models={{array this.pipelineId this.event.id}}
+        @query={{hash jobId=this.jobId}}
         class="banner-value"
       >
         {{this.jobName}}

app/components/pipeline/event/card/component.js

@@ -325,7 +325,15 @@ export default class PipelineEventCardComponent extends Component {
   }
 
   get isHighlighted() {
-    return this.router.currentURL.endsWith(this.event.id);
+    const routeEventId = this.router.currentRoute?.attributes?.id
+      ? this.router.currentRoute.attributes.id
+      : this.router.currentRoute?.params?.event_id;
+
+    if (routeEventId !== undefined) {
+      return `${routeEventId}` === `${this.event.id}`;
+    }
+
+    return this.router.currentURL.split('?')[0].endsWith(`/${this.event.id}`);
   }
 
   get isOutlined() {

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

@@ -40,6 +40,8 @@ export default class PipelineWorkflowGraphComponent extends Component {
 
   showPRJobs;
 
+  lastScrolledSelectedJobKey = null;
+
   constructor() {
     super(...arguments);
     this.event = this.args.event;
@@ -61,6 +63,18 @@ export default class PipelineWorkflowGraphComponent extends Component {
     );
   }
 
+  get selectedJobId() {
+    return this.args.selectedJobId ? `${this.args.selectedJobId}` : '';
+  }
+
+  get selectedJobKey() {
+    if (!this.event?.id || !this.selectedJobId) {
+      return null;
+    }
+
+    return `${this.event.id}:${this.selectedJobId}`;
+  }
+
   getDecoratedGraph(
     workflowGraph,
     builds,
@@ -91,6 +105,43 @@ export default class PipelineWorkflowGraphComponent extends Component {
     });
   }
 
+  applySelectedJobLabel() {
+    if (!this.graphSvg) {
+      return;
+    }
+
+    let jobFound = false;
+
+    this.graphSvg.selectAll('.graph-label').classed('selected-job', node => {
+      const isSelected =
+        !!this.selectedJobId && `${node?.id}` === this.selectedJobId;
+
+      if (isSelected) {
+        jobFound = true;
+      }
+
+      return isSelected;
+    });
+
+    if (!jobFound) {
+      this.lastScrolledSelectedJobKey = null;
+
+      return;
+    }
+
+    if (
+      this.selectedJobKey &&
+      this.lastScrolledSelectedJobKey !== this.selectedJobKey
+    ) {
+      const selectedLabel = this.graphSvg
+        .select('.graph-label.selected-job')
+        .node();
+
+      selectedLabel?.scrollIntoView({ block: 'center', inline: 'center' });
+      this.lastScrolledSelectedJobKey = this.selectedJobKey;
+    }
+  }
+
   @action
   draw(element) {
     const isSkippedEvent = isSkipped(this.event, this.builds);
@@ -188,6 +239,8 @@ export default class PipelineWorkflowGraphComponent extends Component {
       verticalDisplacements,
       horizontalDisplacements
     );
+
+    this.applySelectedJobLabel();
   }
 
   @action
@@ -243,5 +296,6 @@ export default class PipelineWorkflowGraphComponent extends Component {
       nodeWidth
     );
     updateStageStatuses(this.graphSvg, this.decoratedGraph);
+    this.applySelectedJobLabel();
   }
 }

app/components/pipeline/workflow/graph/styles.scss

@@ -12,6 +12,10 @@
 
 @mixin styles {
   #workflow-graph {
+    .graph-label.selected-job {
+      fill: colors.$sd-failure;
+    }
+
     .graph-node {
       font-family: 'screwdriver';
       fill: colors.$sd-text-light;

app/components/pipeline/workflow/graph/template.hbs

@@ -1,4 +1,4 @@
 <div id="workflow-graph"
   {{did-insert this.draw}}
-  {{did-update this.redraw @workflowGraph @builds @stageBuilds @event @collapsedStages this.pipelinePageState.jobs}}
+  {{did-update this.redraw @workflowGraph @builds @stageBuilds @event @collapsedStages @selectedJobId this.pipelinePageState.jobs}}
 />

app/components/pipeline/workflow/template.hbs

@@ -90,6 +90,7 @@
           <Pipeline::Workflow::Graph
             @workflowGraph={{this.workflowGraphToDisplay}}
             @event={{this.event}}
+            @selectedJobId={{@jobId}}
             @builds={{this.builds}}
             @stageBuilds={{this.stageBuilds}}
             @collapsedStages={{this.collapsedStages}}

app/components/workflow-graph-d3/component.js

@@ -218,6 +218,53 @@ export default Component.extend({
       }
     }
   },
+  getSelectedJobKey() {
+    const eventId = this.selectedEventObj?.id;
+    const selectedJobId = this.jobId;
+
+    if (!eventId || !selectedJobId || this.minified) {
+      return null;
+    }
+
+    return `${eventId}:${selectedJobId}`;
+  },
+
+  applySelectedJobLabel(svg) {
+    if (!svg) {
+      return;
+    }
+
+    const selectedJobId = this.jobId ? `${this.jobId}` : '';
+
+    let jobFound = false;
+
+    svg.selectAll('.graph-label').classed('selected-job', node => {
+      const isSelected =
+        !this.minified && !!selectedJobId && `${node?.id}` === selectedJobId;
+
+      if (isSelected) {
+        jobFound = true;
+      }
+
+      return isSelected;
+    });
+
+    const selectedJobKey = this.getSelectedJobKey();
+
+    if (!jobFound) {
+      this.set('lastScrolledSelectedJobKey', null);
+
+      return;
+    }
+
+    if (selectedJobKey && this.lastScrolledSelectedJobKey !== selectedJobKey) {
+      const selectedLabel = svg.select('.graph-label.selected-job').node();
+
+      selectedLabel?.scrollIntoView({ block: 'center', inline: 'center' });
+      this.set('lastScrolledSelectedJobKey', selectedJobKey);
+    }
+  },
+
   async redraw(data) {
     if (!data) return;
     const el = d3.select(this.element);
@@ -280,6 +327,8 @@ export default Component.extend({
         );
       }
     });
+
+    this.applySelectedJobLabel(el);
   },
   async draw(data) {
     if (this.isDestroying || this.isDestroyed) {
@@ -380,5 +429,7 @@ export default Component.extend({
         horizontalDisplacements
       );
     }
+
+    this.applySelectedJobLabel(svg);
   }
 });

app/v2/pipeline/events/show/controller.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+
+export default class NewPipelineEventsShowController extends Controller {
+  queryParams = ['jobId'];
+
+  jobId = '';
+}

app/v2/pipeline/events/show/route.js

@@ -10,13 +10,14 @@ export default class NewPipelineEventsShowRoute extends Route {
   async model(params, transition) {
     const eventId = params.event_id;
     const pipelineId = this.pipelinePageState.getPipelineId();
+    const transitionLatestEvent = transition.data?.latestEvent;
 
     let latestEvent;
 
     let event;
 
-    if (transition.data.latestEvent) {
-      event = transition.data.latestEvent;
+    if (`${transitionLatestEvent?.id}` === `${eventId}`) {
+      event = transitionLatestEvent;
       latestEvent = event;
     } else {
       event = await this.shuttle

app/v2/pipeline/events/show/template.hbs

@@ -3,5 +3,6 @@
   @event={{this.model.event}}
   @latestEvent={{this.model.latestEvent}}
   @invalidEvent={{this.model.invalidEvent}}
+  @jobId={{this.jobId}}
   @reloadEventRail={{this.model.reloadEventRail}}
 />

tests/integration/components/build-banner/component-test.js

@@ -203,7 +203,7 @@ module('Integration | Component | build banner', function (hooks) {
     assert.dom('li.job-name .banner-value').hasText('main');
     assert
       .dom('li.job-name a')
-      .hasAttribute('href', '/v2/pipelines/12345/events/abcd');
+      .hasAttribute('href', '/v2/pipelines/12345/events/abcd?jobId=1');
   });
 
   test('it renders pr link if pr url info is available', async function (assert) {

tests/integration/components/pipeline/event/card/component-test.js

@@ -151,6 +151,27 @@ module('Integration | Component | pipeline/event/card', function (hooks) {
     assert.dom('.highlighted').doesNotExist();
   });
 
+  test('it renders highlight when the URL contains jobId query params', async function (assert) {
+    routerStub.reset();
+    routerStub.value(`/pipelines/1/events/${event.id}?jobId=245`);
+    registerBuildsCallbackStub.reset();
+    registerBuildsCallbackStub.callsFake((queueName, id, callback) => {
+      callback([{ status: 'SUCCESS' }]);
+    });
+
+    this.setProperties({
+      event
+    });
+
+    await render(
+      hbs`<Pipeline::Event::Card
+        @event={{this.event}}
+      />`
+    );
+
+    assert.dom('.highlighted').exists();
+  });
+
   test('it renders last successful when event is last successful', async function (assert) {
     this.setProperties({
       event,

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

@@ -181,6 +181,35 @@ module('Integration | Component | pipeline/workflow/graph', function (hooks) {
       .hasText('\ue911');
   });
 
+  test('it highlights the selected job label', async function (assert) {
+    this.setProperties({
+      workflowGraph: {
+        nodes: [{ name: '~commit' }, { id: 1, name: 'main' }],
+        edges: [{ src: '~commit', dest: 'main' }]
+      },
+      event: { id: 77, startFrom: '~commit' },
+      builds: [{ id: 1, jobId: 1, status: 'SUCCESS' }],
+      collapsedStages: new Set([]),
+      selectedJobId: '1',
+      displayJobNameLength: 20
+    });
+
+    await render(
+      hbs`<Pipeline::Workflow::Graph
+          @workflowGraph={{this.workflowGraph}}
+          @event={{this.event}}
+          @selectedJobId={{this.selectedJobId}}
+          @builds={{this.builds}}
+          @collapsedStages={{this.collapsedStages}}
+          @chainPr={{false}}
+          @displayJobNameLength={{this.displayJobNameLength}}
+      />`
+    );
+
+    assert.dom('svg .graph-label.selected-job').exists({ count: 1 });
+    assert.dom('svg .graph-label.selected-job').hasText('mainmain');
+  });
+
   test('it renders stage', async function (assert) {
     stages.push({ id: 10, name: 'test', jobIds: [1], setup: 11, teardown: 12 });
     jobs.splice(0).push(