@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pipeline/executions/Executions.tsx

@@ -1,10 +1,11 @@
 import { get } from 'lodash';
-import { $q } from 'ngimport';
 import React from 'react';
 import type { Subscription } from 'rxjs';
 
 import type { Application } from '../../application';
 import type { IDefaultTagFilterConfig } from '../../application/config/defaultTagFilter/DefaultTagFilterConfig';
+import { DeckRuntimeContext } from '../../bootstrap/DeckRuntimeContext';
+import { CollapsibleSectionStateCache } from '../../cache';
 import { CreatePipeline } from '../config/CreatePipeline';
 import { CreatePipelineButton } from '../create/CreatePipelineButton';
 import type { IExecution, IPipeline, IPipelineCommand } from '../../domain';
@@ -14,9 +15,11 @@ import { ExecutionFilterService } from '../filter/executionFilter.service';
 import type { IFilterTag, ISortFilter } from '../../filterModel';
 import { FilterCollapse, FilterTags } from '../../filterModel';
 import { ManualExecutionModal } from '../manualExecution';
-import { Overridable } from '../../overrideRegistry';
+import type { IRouterInjectedProps } from '../../navigation/routerContext';
+import { withRouter } from '../../navigation/routerContext';
+import type { IOverridableProps } from '../../overrideRegistry';
+import { overridableComponent } from '../../overrideRegistry';
 import { Tooltip } from '../../presentation/Tooltip';
-import { ReactInjector } from '../../reactShims';
 import { SchedulerFactory } from '../../scheduler';
 import type { IScheduler } from '../../scheduler/SchedulerFactory';
 import { ExecutionState } from '../../state';
@@ -26,7 +29,7 @@ import { Spinner } from '../../widgets/spinners/Spinner';
 
 import './executions.less';
 
-export interface IExecutionsProps {
+export interface IExecutionsProps extends IOverridableProps {
   app: Application;
 }
 
@@ -45,21 +48,25 @@ export interface IExecutionsState {
 const forwardedExecutions = new Set();
 // This ensures we only forward to permalink on landing, not on future refreshes
 let disableForwarding = false;
+const INSIGHT_FILTERS_CACHE_KEY = 'insightFilters';
+
+export class ExecutionsComponent extends React.Component<IExecutionsProps & IRouterInjectedProps, IExecutionsState> {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
 
-@Overridable('PipelineExecutions')
-export class Executions extends React.Component<IExecutionsProps, IExecutionsState> {
   private executionsRefreshUnsubscribe: Function;
   private groupsUpdatedSubscription: Subscription;
-  private insightFilterStateModel = ReactInjector.insightFilterStateModel;
   private activeRefresher: IScheduler;
 
   private filterCountOptions = [1, 2, 5, 10, 20, 30, 40, 50, 100, 200];
 
-  constructor(props: IExecutionsProps) {
+  constructor(props: IExecutionsProps & IRouterInjectedProps) {
     super(props);
 
     this.state = {
-      filtersExpanded: this.insightFilterStateModel.filtersExpanded,
+      filtersExpanded:
+        !CollapsibleSectionStateCache.isSet(INSIGHT_FILTERS_CACHE_KEY) ||
+        CollapsibleSectionStateCache.isExpanded(INSIGHT_FILTERS_CACHE_KEY),
       loading: true,
       poll: null,
       sortFilter: ExecutionState.filterModel.asFilterModel.sortFilter,
@@ -156,8 +163,8 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     ExecutionState.filterModel.expandSubject.next(false);
   };
 
-  private startPipeline(command: IPipelineCommand): PromiseLike<void> {
-    const { executionService } = ReactInjector;
+  private startPipeline(command: IPipelineCommand): Promise<void> {
+    const { executionService } = this.context.services;
     this.setState({ triggeringExecution: true });
     return executionService
       .startAndMonitorPipeline(this.props.app, command.pipelineName, command.trigger)
@@ -176,10 +183,13 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
 
   private triggerPipeline(pipeline: IPipeline = null): void {
     logger.log({ category: 'Pipelines', action: 'Trigger Pipeline (top level)' });
-    ManualExecutionModal.show({
-      pipeline: pipeline,
-      application: this.props.app,
-    })
+    ManualExecutionModal.show(
+      {
+        pipeline: pipeline,
+        application: this.props.app,
+      },
+      this.context.services,
+    )
       .then((command) => {
         this.startPipeline(command);
         this.clearManualExecutionParam();
@@ -188,22 +198,23 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
   }
 
   private clearManualExecutionParam(): void {
-    ReactInjector.$state.go('.', { startManualExecution: null }, { inherit: true, location: 'replace' });
+    this.props.stateService.go('.', { startManualExecution: null }, { inherit: true, location: 'replace' });
   }
 
   private handleAgedOutExecutions(executionId: string, forwardToPermalink: boolean): void {
-    const { $state, executionService } = ReactInjector;
+    const { executionService } = this.context.services;
+    const { stateParams, stateService } = this.props;
     if (forwardToPermalink && executionId && !forwardedExecutions.has(executionId)) {
       // We only want to forward to permalink on initial load
       executionService.getExecution(executionId).then(() => {
-        const detailsState = $state.current.name.replace('executions.execution', 'executionDetails.execution');
-        const { stage, step, details } = $state.params;
+        const detailsState = stateService.current.name.replace('executions.execution', 'executionDetails.execution');
+        const { stage, step, details } = stateParams;
         forwardedExecutions.add(executionId);
-        $state.go(detailsState, { executionId, stage, step, details });
+        stateService.go(detailsState, { executionId, stage, step, details });
       });
     } else {
       // Handles the case where we already forwarded once and user navigated back, so do not forward again.
-      $state.go('.^');
+      stateService.go('.^');
     }
   }
 
@@ -228,16 +239,15 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     this.groupsUpdatedSubscription = ExecutionFilterService.groupsUpdatedStream.subscribe(() => this.groupsUpdated());
 
     this.executionsRefreshUnsubscribe = app.executions.onRefresh(
-      null,
       () => {
         this.normalizeExecutionNames();
 
         // if an execution was selected but is no longer present, navigate up
-        const { $state } = ReactInjector;
-        if ($state.params.executionId) {
+        const { executionId } = this.props.stateParams;
+        if (executionId) {
           const executions: IExecution[] = app.executions.data;
-          if (executions.every((e) => e.id !== $state.params.executionId)) {
-            this.handleAgedOutExecutions($state.params.executionId, !disableForwarding);
+          if (executions.every((e) => e.id !== executionId)) {
+            this.handleAgedOutExecutions(executionId, !disableForwarding);
           }
         }
         // After the very first refresh interval (landing), we do not want to forward the user to the permalink
@@ -248,9 +258,9 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
 
     this.loadDefaultFilters();
 
-    $q.all([app.executions.ready(), app.pipelineConfigs.ready()]).then(() => {
+    Promise.all([app.executions.ready(), app.pipelineConfigs.ready()]).then(() => {
       this.updateExecutionGroups();
-      const nameOrIdToStart = ReactInjector.$stateParams.startManualExecution;
+      const { startManualExecution: nameOrIdToStart } = this.props.stateParams;
       if (nameOrIdToStart) {
         const toStart = app.pipelineConfigs.data.find((p: IPipeline) => [p.id, p.name].includes(nameOrIdToStart));
         if (toStart) {
@@ -262,6 +272,12 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     });
   }
 
+  public componentDidUpdate(_prevProps: IExecutionsProps & IRouterInjectedProps, prevState: IExecutionsState): void {
+    if (prevState.filtersExpanded !== this.state.filtersExpanded) {
+      CollapsibleSectionStateCache.setExpanded(INSIGHT_FILTERS_CACHE_KEY, this.state.filtersExpanded);
+    }
+  }
+
   public componentWillUnmount(): void {
     const { app } = this.props;
     app.setActiveState();
@@ -274,9 +290,7 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
   }
 
   private toggleFilters = (): void => {
-    const newState = !this.state.filtersExpanded;
-    this.setState({ filtersExpanded: newState });
-    this.insightFilterStateModel.pinFilters(newState);
+    this.setState(({ filtersExpanded }) => ({ filtersExpanded: !filtersExpanded }));
   };
 
   private groupByChanged = (event: React.ChangeEvent<HTMLSelectElement>): void => {
@@ -303,7 +317,7 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     logger.log({ category: 'Pipelines', action: 'Toggle Durations', data: { label: checked.toString() } });
   };
 
-  public render(): React.ReactElement<Executions> {
+  public render(): React.ReactElement {
     const { app } = this.props;
     const { filtersExpanded, loading, sortFilter, tags, triggeringExecution, reloadingForFilters } = this.state;
 
@@ -323,20 +337,20 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
       return (
         <div className="executions-section">
           {!loading && (
-            <div onClick={this.toggleFilters}>
-              <FilterCollapse />
+            <div>
+              <FilterCollapse filtersExpanded={filtersExpanded} onToggle={this.toggleFilters} />
             </div>
           )}
           <div className={`insight ${filtersExpanded ? 'filters-expanded' : 'filters-collapsed'}`}>
             {filtersExpanded && (
-              <div className="nav ng-scope">
+              <div className="nav">
                 {!loading && (
                   <ExecutionFilters application={app} setReloadingForFilters={this.setReloadingForFilters} />
                 )}
               </div>
             )}
             <div
-              className={`nav-content ng-scope ${sortFilter.showDurations ? 'show-durations' : ''}`}
+              className={`nav-content ${sortFilter.showDurations ? 'show-durations' : ''}`}
               data-scroll-id="nav-content"
             >
               {!loading && (
@@ -462,3 +476,6 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     return null;
   }
 }
+
+const OverridableExecutions = overridableComponent(ExecutionsComponent, 'PipelineExecutions');
+export const Executions = withRouter<IExecutionsProps & IRouterInjectedProps>(OverridableExecutions);

package/src/pipeline/executions/execution/Execution.spec.tsx

@@ -0,0 +1,120 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExecutionComponent } from './Execution';
+import { setDirectRouter } from '../../../navigation/directRouter';
+import { ExecutionState } from '../../../state';
+
+describe('Execution', () => {
+  const deckRuntimeServices = { executionService: {} } as any;
+  const application = { name: 'test-app', pipelineConfigs: { data: [] } } as any;
+  const execution = {
+    deploymentTargets: [],
+    hydrated: true,
+    id: 'execution-id',
+    runningTimeInMs: 0,
+    stageSummaries: [],
+    stages: [],
+    status: 'SUCCEEDED',
+  } as any;
+  let previousFilterModel: any;
+
+  beforeEach(() => {
+    previousFilterModel = ExecutionState.filterModel;
+    ExecutionState.filterModel = { asFilterModel: { sortFilter: { groupBy: 'name' } } } as any;
+    setDirectRouter({
+      globals: { params: { executionId: 'other-execution', stage: '9', subStage: '8' } },
+      stateService: { includes: () => false },
+    } as any);
+  });
+
+  afterEach(() => {
+    ExecutionState.filterModel = previousFilterModel;
+    setDirectRouter(null);
+  });
+
+  it('derives its initial view from the injected route', () => {
+    const component = shallow(
+      <ExecutionComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({
+          router: {},
+          stateParams: { executionId: 'execution-id', stage: '2', subStage: '3' },
+          stateService: { includes: () => true },
+        } as any)}
+        application={application}
+        execution={execution}
+        pipelineConfig={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+
+    expect(component.state('showingDetails')).toBe(true);
+    expect(component.state('viewState')).toEqual(
+      jasmine.objectContaining({ activeStageId: 2, activeSubStageId: 3, executionId: 'execution-id' }),
+    );
+    expect((component.instance() as ExecutionComponent).isActive({ index: 2 } as any)).toBe(true);
+  });
+
+  it('updates its view from injected route transitions', () => {
+    let transitionHandler: (transition: any) => void;
+    const unsubscribe = jasmine.createSpy('unsubscribe');
+    const onSuccess = jasmine.createSpy('onSuccess').and.callFake((_criteria, callback) => {
+      transitionHandler = callback;
+      return unsubscribe;
+    });
+    const component = shallow(
+      <ExecutionComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({
+          router: { transitionService: { onSuccess } },
+          stateParams: { executionId: 'other-execution' },
+          stateService: { includes: () => true },
+        } as any)}
+        application={application}
+        execution={execution}
+        pipelineConfig={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+    const instance = component.instance() as ExecutionComponent;
+    instance.componentDidMount();
+
+    transitionHandler({
+      from: () => ({ name: 'executions' }),
+      params: (target: string) =>
+        target === 'to'
+          ? { executionId: 'execution-id', stage: '4', subStage: '5' }
+          : { executionId: 'other-execution' },
+      to: () => ({ name: 'executions.execution' }),
+    });
+
+    expect(component.state('showingDetails')).toBe(true);
+    expect(component.state('viewState')).toEqual(jasmine.objectContaining({ activeStageId: 4, activeSubStageId: 5 }));
+    instance.componentWillUnmount();
+    expect(unsubscribe).toHaveBeenCalled();
+  });
+
+  it('configures the pipeline through the injected state service', () => {
+    const go = jasmine.createSpy('go');
+    const stopPropagation = jasmine.createSpy('stopPropagation');
+    const component = shallow(
+      <ExecutionComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({ router: {}, stateParams: {}, stateService: { go, includes: () => false } } as any)}
+        application={application}
+        execution={{ ...execution, pipelineConfigId: 'pipeline-id' }}
+        pipelineConfig={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+
+    (component.instance() as any).handleConfigureClicked({ stopPropagation });
+
+    expect(go).toHaveBeenCalledWith('^.pipelineConfig', {
+      application: 'test-app',
+      pipelineId: 'pipeline-id',
+    });
+    expect(stopPropagation).toHaveBeenCalled();
+  });
+});

package/src/pipeline/executions/execution/Execution.tsx

@@ -1,7 +1,6 @@
 import { UISref } from '@uirouter/react';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import { $location } from 'ngimport';
 import React from 'react';
 import type { Subscription } from 'rxjs';
 
@@ -11,6 +10,8 @@ import { ExecutionPermalink } from './ExecutionPermalink';
 import { OrchestratedItemRunningTime } from './OrchestratedItemRunningTime';
 import { AccountTag } from '../../../account';
 import type { Application } from '../../../application/application.model';
+import type { IDeckRuntimeServicesInjectedProps } from '../../../bootstrap/DeckRuntimeContext';
+import { withDeckRuntimeServices } from '../../../bootstrap/DeckRuntimeContext';
 import { CancelModal } from '../../../cancelModal/CancelModal';
 import { PipelineGraph } from '../../config/graph/PipelineGraph';
 import type { IExecutionViewState, IPipelineGraphNode } from '../../config/graph/pipelineGraph.service';
@@ -19,9 +20,11 @@ import { ConfirmationModalService } from '../../../confirmationModal';
 import { StageExecutionDetails } from '../../details/StageExecutionDetails';
 import type { IExecution, IExecutionStageSummary, IPipeline, IRestartDetails } from '../../../domain';
 import type { ISortFilter } from '../../../filterModel';
-import { Overridable } from '../../../overrideRegistry';
+import type { IRouterInjectedProps } from '../../../navigation/routerContext';
+import { stateChangeSuccess$, withRouter } from '../../../navigation/routerContext';
+import type { IOverridableProps } from '../../../overrideRegistry';
+import { overridableComponent } from '../../../overrideRegistry';
 import { Tooltip } from '../../../presentation/Tooltip';
-import { ReactInjector } from '../../../reactShims';
 import { ExecutionState } from '../../../state';
 import { ExecutionCancellationReason } from '../../status/ExecutionCancellationReason';
 import { ExecutionStatus } from '../../status/ExecutionStatus';
@@ -31,7 +34,7 @@ import { duration, timestamp } from '../../../utils/timeFormatters';
 
 import './execution.less';
 
-export interface IExecutionProps {
+export interface IExecutionProps extends IOverridableProps {
   application: Application;
   execution: IExecution;
   descendantExecutionId?: string;
@@ -65,8 +68,10 @@ const findChildIndex = (child: string, execution: IExecution) => {
   return result;
 };
 
-@Overridable('PipelineExecution')
-export class Execution extends React.PureComponent<IExecutionProps, IExecutionState> {
+export class ExecutionComponent extends React.PureComponent<
+  IExecutionProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps,
+  IExecutionState
+> {
   public static defaultProps: Partial<IExecutionProps> = {
     dataSourceKey: 'executions',
     cancelHelpText: 'Cancel execution',
@@ -76,21 +81,21 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   private runningTime: OrchestratedItemRunningTime;
   private wrapperRef = React.createRef<HTMLDivElement>();
 
-  constructor(props: IExecutionProps) {
+  constructor(props: IExecutionProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps) {
     super(props);
     const { execution, standalone } = this.props;
-    const { $stateParams } = ReactInjector;
+    const { stateParams } = this.props;
 
     const initialViewState = {
-      activeStageId: Number($stateParams.stage),
-      activeSubStageId: Number($stateParams.subStage),
-      executionId: $stateParams.executionId,
+      activeStageId: Number(stateParams.stage),
+      activeSubStageId: Number(stateParams.subStage),
+      executionId: stateParams.executionId,
       canTriggerPipelineManually: false,
       canConfigure: false,
     };
 
     // Used when rendering ancestors in SingleExecutionView to mark descendents as "selected"
-    if ($stateParams.executionId !== props.execution.id && props.descendantExecutionId) {
+    if (stateParams.executionId !== props.execution.id && props.descendantExecutionId) {
       initialViewState.activeStageId = findChildIndex(props.descendantExecutionId, props.execution);
     }
 
@@ -124,7 +129,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
 
     if (this.state.showingDetails !== shouldShowDetails) {
       this.setState({
-        showingDetails: this.invalidateShowingDetails(this.props, shouldScroll),
+        showingDetails: this.invalidateShowingDetails(this.props, shouldScroll, toParams),
         viewState: newViewState,
       });
     } else {
@@ -134,11 +139,12 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
     }
   }
 
-  private invalidateShowingDetails(props = this.props, forceScroll = false): boolean {
-    const { $state, $stateParams, executionService } = ReactInjector;
+  private invalidateShowingDetails(props = this.props, forceScroll = false, stateParams = props.stateParams): boolean {
+    const { executionService } = this.props.deckRuntimeServices;
+    const { stateService } = props;
     const { execution, application, standalone } = props;
     const showing =
-      standalone === true || (execution.id === $stateParams.executionId && $state.includes('**.execution.**'));
+      standalone === true || (execution.id === stateParams.executionId && stateService.includes('**.execution.**'));
     if (showing && !execution.hydrated) {
       executionService.hydrate(application, execution).then(() => {
         this.setState({ showingDetails: true }, () => this.scrollIntoView(forceScroll));
@@ -157,7 +163,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
     }
 
     // When execution.id doesn't match, we're' rendering the ancestors in <SingleExecutionDetails>
-    if (this.props.execution.id !== ReactInjector.$stateParams.executionId) {
+    if (this.props.execution.id !== this.props.stateParams.executionId) {
       return (
         this.props.descendantExecutionId &&
         stage &&
@@ -165,11 +171,11 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
         stage.masterStage?.context?.executionId === this.props.descendantExecutionId
       );
     }
-    return this.state.showingDetails && Number(ReactInjector.$stateParams.stage) === stage.index;
+    return this.state.showingDetails && Number(this.props.stateParams.stage) === stage.index;
   }
 
   public toggleDetails = (stageIndex?: number, subIndex?: number): void => {
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     const { execution, application } = this.props;
     executionService.hydrate(application, execution).then(() => {
       executionService.toggleDetails(execution, stageIndex, subIndex);
@@ -177,7 +183,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   };
 
   public getUrl(): string {
-    let url = $location.absUrl();
+    let url = window.location.href;
     if (!this.props.standalone) {
       url = url.replace('/executions', '/executions/details');
     }
@@ -185,7 +191,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   }
 
   public deleteExecution(): void {
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     ConfirmationModalService.confirm({
       header: 'Really delete execution?',
       buttonText: 'Delete',
@@ -193,7 +199,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
       submitMethod: () =>
         executionService.deleteExecution(this.props.application, this.props.execution.id).then(() => {
           if (this.props.standalone) {
-            ReactInjector.$state.go('^');
+            this.props.stateService.go('^');
           }
         }),
     });
@@ -201,7 +207,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
 
   public cancelExecution(): void {
     const { application, execution, cancelConfirmationText } = this.props;
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     const hasDeployStage =
       execution.stages &&
       execution.stages.some((stage) => stage.type === 'deploy' || stage.type === 'cloneServerGroup');
@@ -217,7 +223,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   }
 
   public pauseExecution(): void {
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     ConfirmationModalService.confirm({
       header: 'Really pause execution?',
       buttonText: 'Pause',
@@ -226,7 +232,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   }
 
   public resumeExecution(): void {
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     ConfirmationModalService.confirm({
       header: 'Really resume execution?',
       buttonText: 'Resume',
@@ -239,14 +245,14 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
     this.runningTime = new OrchestratedItemRunningTime(execution, (time: number) =>
       this.setState({ runningTimeInMs: time }),
     );
-    this.stateChangeSuccessSubscription = ReactInjector.stateEvents.stateChangeSuccess.subscribe(
-      ({ toParams, fromParams }) => {
-        this.updateViewStateDetails(toParams, fromParams);
-      },
+    this.stateChangeSuccessSubscription = stateChangeSuccess$(this.props.router).subscribe(({ toParams, fromParams }) =>
+      this.updateViewStateDetails(toParams, fromParams),
     );
   }
 
-  public componentWillReceiveProps(nextProps: IExecutionProps): void {
+  public componentWillReceiveProps(
+    nextProps: IExecutionProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps,
+  ): void {
     if (nextProps.execution !== this.props.execution) {
       this.runningTime.checkStatus(nextProps.execution);
       this.setState({
@@ -307,7 +313,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   private handleConfigureClicked = (e: React.MouseEvent<HTMLElement>): void => {
     const { application, execution } = this.props;
     logger.log({ category: 'Execution', action: 'Configuration' });
-    ReactInjector.$state.go('^.pipelineConfig', {
+    this.props.stateService.go('^.pipelineConfig', {
       application: application.name,
       pipelineId: execution.pipelineConfigId,
     });
@@ -317,7 +323,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
   private scrollIntoView = (forceScroll = false) => {
     const element = this.wrapperRef.current;
     const { scrollIntoView, execution } = this.props;
-    // use a timeout to let Angular render the execution details before scrolling it into view
+    // Wait for the execution details to render before scrolling them into view.
     (scrollIntoView || forceScroll) &&
       element &&
       execution.hydrated &&
@@ -343,7 +349,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
       pipelineConfig,
     } = this.props;
     const { pipelinesUrl, restartDetails, showingDetails, sortFilter, viewState } = this.state;
-    const { $state, $stateParams } = ReactInjector;
+    const { stateParams, stateService } = this.props;
 
     const accountLabels = this.props.execution.deploymentTargets.map((account) => (
       <AccountTag key={account} account={account} />
@@ -430,7 +436,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
                     {' ('}
                     waiting on{' '}
                     <UISref
-                      to={`${$state.current.name.endsWith('.execution') ? '^' : ''}.^.executions`}
+                      to={`${stateService.current.name.endsWith('.execution') ? '^' : ''}.^.executions`}
                       params={{ pipeline: execution.name, status: 'RUNNING' }}
                     >
                       <a>RUNNING</a>
@@ -524,7 +530,7 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
             <PipelineGraph execution={execution} onNodeClick={this.handleNodeClick} viewState={viewState} />
           </div>
         )}
-        {showingDetails && (!standalone || execution.id === $stateParams.executionId) && (
+        {showingDetails && (!standalone || execution.id === stateParams.executionId) && (
           <div className="execution-details-container">
             <StageExecutionDetails execution={execution} application={application} standalone={standalone} />
             <div className="permalinks">
@@ -542,3 +548,8 @@ export class Execution extends React.PureComponent<IExecutionProps, IExecutionSt
     );
   }
 }
+
+const OverridableExecution = overridableComponent(ExecutionComponent, 'PipelineExecution');
+export const Execution = withDeckRuntimeServices(
+  withRouter<IExecutionProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps>(OverridableExecution),
+);

package/src/pipeline/executions/execution/ExecutionPermalink.tsx

@@ -1,6 +1,7 @@
+import { useRouter } from '@uirouter/react';
 import React from 'react';
 
-import { ReactInjector } from '../../../reactShims';
+import { locationChangeSuccess$ } from '../../../navigation/routerContext';
 import { CopyToClipboard, logger } from '../../../utils';
 
 export interface IExecutionPermalinkProps {
@@ -8,18 +9,19 @@ export interface IExecutionPermalinkProps {
 }
 
 export const ExecutionPermalink = ({ standalone }: IExecutionPermalinkProps) => {
+  const router = useRouter();
   const asPermalink = (link: string) => (standalone ? link : link.replace('/executions', '/executions/details'));
 
   const [url, setUrl] = React.useState(asPermalink(location.href));
 
   React.useEffect(() => {
-    const subscription = ReactInjector.stateEvents.locationChangeSuccess.subscribe((newUrl) => {
+    const subscription = locationChangeSuccess$(router).subscribe((newUrl) => {
       if (url !== newUrl) {
         setUrl(asPermalink(newUrl));
       }
     });
     return () => subscription.unsubscribe();
-  }, []);
+  }, [router]);
 
   const handlePermalinkClick = (): void => {
     logger.log({ category: 'Pipeline', action: 'Permalink clicked' });

package/src/pipeline/executions/execution/execution.less

@@ -81,10 +81,6 @@
   font-size: 90%;
 }
 
-execution-details-section-nav {
-  display: block;
-}
-
 .execution-bar {
   display: inline-block;
   width: calc(~'100% - 235px');