@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pagerDuty/Pager.spec.tsx

@@ -0,0 +1,75 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { PagerComponent } from './Pager';
+
+describe('Pager', () => {
+  it('initializes filters from injected route params', () => {
+    const component = shallow(
+      <PagerComponent
+        {...({
+          router: {},
+          stateParams: {
+            app: 'test-app',
+            by: 'last',
+            direction: 'DESC',
+            hideNoApps: true,
+            keys: ['service-key'],
+            q: 'injected query',
+          },
+          stateService: {},
+        } as any)}
+      />,
+      { disableLifecycleMethods: true },
+    );
+
+    expect(component.state()).toEqual(
+      jasmine.objectContaining({
+        app: 'test-app',
+        filterString: 'injected query',
+        hideNoApps: true,
+        initialKeys: ['service-key'],
+        sortBy: 'last',
+        sortDirection: 'DESC',
+      }),
+    );
+  });
+
+  it('updates sorting through the injected state service', () => {
+    const injectedGo = jasmine.createSpy('injectedGo');
+
+    const component = shallow(
+      <PagerComponent {...({ router: {}, stateParams: {}, stateService: { go: injectedGo } } as any)} />,
+      { disableLifecycleMethods: true },
+    );
+
+    (component.instance() as PagerComponent).sort({ sortBy: 'last', sortDirection: 'DESC' });
+
+    expect(injectedGo).toHaveBeenCalledWith('.', { by: 'last', direction: 'DESC' });
+  });
+
+  it('updates selected service keys through the injected state service', () => {
+    const injectedGo = jasmine.createSpy('injectedGo');
+    const component = shallow(
+      <PagerComponent {...({ router: {}, stateParams: {}, stateService: { go: injectedGo } } as any)} />,
+      { disableLifecycleMethods: true },
+    );
+    const service = { integration_key: 'service-key' } as any;
+
+    (component.instance() as any).selectedChanged(service, true);
+
+    expect(injectedGo).toHaveBeenCalledWith('.', { keys: ['service-key'] });
+  });
+
+  it('updates application visibility through the injected state service', () => {
+    const injectedGo = jasmine.createSpy('injectedGo');
+    const component = shallow(
+      <PagerComponent {...({ router: {}, stateParams: {}, stateService: { go: injectedGo } } as any)} />,
+      { disableLifecycleMethods: true },
+    );
+
+    (component.instance() as any).handleHideNoAppsChanged({ target: { checked: true } });
+
+    expect(injectedGo).toHaveBeenCalledWith('.', { hideNoApps: true });
+  });
+});

package/src/pagerDuty/Pager.tsx

@@ -13,11 +13,12 @@ import { PageButton } from './PageButton';
 import type { IApplicationSummary } from '../application';
 import { ApplicationReader } from '../application';
 import { SETTINGS } from '../config';
+import type { IRouterInjectedProps } from '../navigation/routerContext';
+import { withRouter } from '../navigation/routerContext';
 import { Overridable } from '../overrideRegistry';
 import type { IOnCall, IPagerDutyService } from './pagerDuty.read.service';
 import { PagerDutyReader } from './pagerDuty.read.service';
 import { Markdown } from '../presentation';
-import { ReactInjector } from '../reactShims';
 import { relativeTime } from '../utils/timeFormatters';
 
 import './pager.less';
@@ -85,7 +86,7 @@ class PagerBanner extends React.Component {
   }
 }
 
-export class Pager extends React.Component<IPagerProps, IPagerState> {
+export class PagerComponent extends React.Component<IPagerProps & IRouterInjectedProps, IPagerState> {
   private cache = new CellMeasurerCache({
     defaultHeight: 50,
     fixedWidth: true,
@@ -93,19 +94,19 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
   private allData: IOnCallsByService[] = [];
   private searchApi = new SearchApi();
 
-  constructor(props: IPagerProps) {
+  constructor(props: IPagerProps & IRouterInjectedProps) {
     super(props);
 
-    const { $stateParams } = ReactInjector;
+    const { stateParams } = props;
     this.state = {
       accountName: (SETTINGS.pagerDuty && SETTINGS.pagerDuty.accountName) || '',
-      app: $stateParams.app || '',
-      filterString: $stateParams.q || '',
-      hideNoApps: $stateParams.hideNoApps || false,
+      app: stateParams.app || '',
+      filterString: stateParams.q || '',
+      hideNoApps: stateParams.hideNoApps || false,
       notFoundApps: [],
-      initialKeys: $stateParams.keys || [],
-      sortBy: $stateParams.by || 'service',
-      sortDirection: $stateParams.direction || SortDirection.ASC,
+      initialKeys: stateParams.keys || [],
+      sortBy: stateParams.by || 'service',
+      sortDirection: stateParams.direction || SortDirection.ASC,
       sortedData: [],
       selectedKeys: new Map(),
     };
@@ -147,7 +148,7 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
     const { sortedData } = this.state;
 
     if (sortBy !== this.state.sortBy || sortDirection !== this.state.sortDirection) {
-      ReactInjector.$state.go('.', { by: sortBy, direction: sortDirection });
+      this.props.stateService.go('.', { by: sortBy, direction: sortDirection });
       this.sortList(sortedData, sortBy, sortDirection);
       this.cache.clearAll();
       this.setState({ sortedData, sortBy, sortDirection });
@@ -210,7 +211,7 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
       this.setState({ selectedKeys });
     }
 
-    ReactInjector.$state.go('.', {
+    this.props.stateService.go('.', {
       app,
       q: filterString,
       by: sortBy,
@@ -293,7 +294,7 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
   private selectedChanged = (service: IPagerDutyService, value: boolean): void => {
     const { selectedKeys } = this.state;
     value ? selectedKeys.set(service.integration_key, service) : selectedKeys.delete(service.integration_key);
-    ReactInjector.$state.go('.', { keys: Array.from(selectedKeys.keys()) });
+    this.props.stateService.go('.', { keys: Array.from(selectedKeys.keys()) });
     this.setState({ selectedKeys });
   };
 
@@ -459,7 +460,7 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
   private handleHideNoAppsChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const hideNoApps = event.target.checked;
     this.setState({ hideNoApps });
-    ReactInjector.$state.go('.', { hideNoApps });
+    this.props.stateService.go('.', { hideNoApps });
   };
 
   private rowClicked = (info: RowMouseEventHandlerParams): void => {
@@ -629,3 +630,5 @@ export class Pager extends React.Component<IPagerProps, IPagerState> {
     );
   }
 }
+
+export const Pager = withRouter(PagerComponent);

package/src/pagerDuty/PagerDutySelectField.spec.tsx

@@ -0,0 +1,93 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { Observable } from 'rxjs';
+
+import { PagerDutySelectField } from './PagerDutySelectField';
+import type { IPagerDutyService } from './pagerDuty.read.service';
+import { PagerDutyReader } from './pagerDuty.read.service';
+import { SETTINGS } from '../config/settings';
+import { HelpField } from '../help/HelpField';
+import { ReactSelectInput } from '../presentation';
+import { SchedulerFactory } from '../scheduler/SchedulerFactory';
+
+describe('PagerDutySelectField', () => {
+  let reload: () => void;
+  let schedulerSubscription: { unsubscribe: jasmine.Spy };
+  let scheduler: { subscribe: jasmine.Spy; scheduleImmediate: jasmine.Spy; unsubscribe: jasmine.Spy };
+  let serviceObserver: any;
+  let readerUnsubscribes: jasmine.Spy[];
+  let originalPagerDuty: typeof SETTINGS.pagerDuty;
+
+  beforeEach(() => {
+    originalPagerDuty = SETTINGS.pagerDuty;
+    SETTINGS.pagerDuty = { required: true } as any;
+    readerUnsubscribes = [];
+    schedulerSubscription = { unsubscribe: jasmine.createSpy('scheduler subscription unsubscribe') };
+    scheduler = {
+      scheduleImmediate: jasmine.createSpy('scheduleImmediate'),
+      subscribe: jasmine.createSpy('subscribe').and.callFake((callback: () => void) => {
+        reload = callback;
+        return schedulerSubscription;
+      }),
+      unsubscribe: jasmine.createSpy('scheduler unsubscribe'),
+    };
+    spyOn(SchedulerFactory, 'createScheduler').and.returnValue(scheduler as any);
+    spyOn(PagerDutyReader, 'listServices').and.callFake(() => {
+      const unsubscribe = jasmine.createSpy('reader unsubscribe');
+      readerUnsubscribes.push(unsubscribe);
+      return new Observable<IPagerDutyService[]>((observer) => {
+        serviceObserver = observer;
+        return unsubscribe;
+      });
+    });
+  });
+
+  afterEach(() => {
+    SETTINGS.pagerDuty = originalPagerDuty;
+  });
+
+  it('loads services on mount, filters missing integration keys, and renders required help', () => {
+    const wrapper = mount(<PagerDutySelectField value={null} onChange={() => undefined} />);
+    serviceObserver.next([
+      { integration_key: 'key-one', name: 'Service one' },
+      { integration_key: '', name: 'Unavailable' },
+    ] as IPagerDutyService[]);
+    wrapper.update();
+
+    expect(SchedulerFactory.createScheduler).toHaveBeenCalledWith(10000);
+    expect(PagerDutyReader.listServices).toHaveBeenCalledTimes(1);
+    expect(wrapper.text()).toContain('PagerDuty *');
+    expect(wrapper.find(HelpField).prop('content')).toContain('Generic API');
+    expect(wrapper.find(ReactSelectInput).prop('options')).toEqual([{ label: 'Service one', value: 'key-one' }]);
+  });
+
+  it('emits the selected service integration key', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const wrapper = mount(<PagerDutySelectField value={null} onChange={onChange} />);
+    serviceObserver.next([{ integration_key: 'key-one', name: 'Service one' }] as IPagerDutyService[]);
+    wrapper.update();
+
+    wrapper.find(ReactSelectInput).prop('onChange')({ target: { value: 'key-one' } } as any);
+
+    expect(onChange).toHaveBeenCalledWith('key-one');
+  });
+
+  it('replaces the active reader subscription on scheduled reload', () => {
+    mount(<PagerDutySelectField value={null} onChange={() => undefined} />);
+
+    reload();
+
+    expect(readerUnsubscribes[0]).toHaveBeenCalled();
+    expect(PagerDutyReader.listServices).toHaveBeenCalledTimes(2);
+  });
+
+  it('unsubscribes the reader and scheduler on unmount', () => {
+    const wrapper = mount(<PagerDutySelectField value={null} onChange={() => undefined} />);
+
+    wrapper.unmount();
+
+    expect(readerUnsubscribes[0]).toHaveBeenCalled();
+    expect(schedulerSubscription.unsubscribe).toHaveBeenCalled();
+    expect(scheduler.unsubscribe).toHaveBeenCalled();
+  });
+});

package/src/pagerDuty/PagerDutySelectField.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Subscription } from 'rxjs';
+
+import { SETTINGS } from '../config/settings';
+import { HelpField } from '../help/HelpField';
+import type { IPagerDutyService } from './pagerDuty.read.service';
+import { PagerDutyReader } from './pagerDuty.read.service';
+import { ReactSelectInput } from '../presentation';
+import type { IScheduler } from '../scheduler/SchedulerFactory';
+import { SchedulerFactory } from '../scheduler/SchedulerFactory';
+
+export interface IPagerDutySelectFieldProps {
+  value: string;
+  onChange: (integrationKey: string) => void;
+}
+
+interface IPagerDutySelectFieldState {
+  services: IPagerDutyService[];
+  servicesLoaded: boolean;
+}
+
+const HELP_CONTENTS = `<p>Make sure your service exists in Pager Duty and includes the "Generic API"
+      integration.</p>
+      <h5><b>Setting up a new integration</b></h5>
+      <ol>
+        <li>Find your service in Pager Duty</li>
+        <li>Click "New Integration"</li>
+        <li>Select "Use our API directly"</li>
+        <li>Make sure to select "Events API v1" (Spinnaker is not compatible with v2)</li>
+      </ol>
+      <p><b>Note:</b> it can take up to five minutes for the service to appear in Spinnaker</p>`;
+
+export class PagerDutySelectField extends React.Component<IPagerDutySelectFieldProps, IPagerDutySelectFieldState> {
+  public state: IPagerDutySelectFieldState = { services: [], servicesLoaded: false };
+
+  private readerSubscription: Subscription;
+  private scheduler: IScheduler;
+  private schedulerSubscription: Subscription;
+
+  public componentDidMount(): void {
+    this.scheduler = SchedulerFactory.createScheduler(10000);
+    this.schedulerSubscription = this.scheduler.subscribe(this.loadServices);
+    this.loadServices();
+  }
+
+  public componentWillUnmount(): void {
+    this.readerSubscription?.unsubscribe();
+    this.schedulerSubscription?.unsubscribe();
+    this.scheduler?.unsubscribe();
+  }
+
+  private loadServices = (): void => {
+    this.readerSubscription?.unsubscribe();
+    this.readerSubscription = PagerDutyReader.listServices().subscribe((services) => {
+      this.setState({
+        services: services.filter((service) => Boolean(service.integration_key)),
+        servicesLoaded: true,
+      });
+    });
+  };
+
+  public render(): React.ReactNode {
+    const required = Boolean(SETTINGS.pagerDuty?.required);
+    return (
+      <div className="form-group row">
+        <div className="col-sm-3 sm-label-right">
+          PagerDuty{required ? ' *' : ''} <HelpField content={HELP_CONTENTS} />
+        </div>
+        <div className="col-sm-9">
+          <ReactSelectInput
+            inputClassName="form-control input-sm"
+            isLoading={!this.state.servicesLoaded}
+            mode="VIRTUALIZED"
+            name="pdApiKey"
+            options={this.state.services.map((service) => ({
+              label: service.name,
+              value: service.integration_key,
+            }))}
+            placeholder="Select a PagerDuty Service"
+            required={required}
+            value={this.props.value}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => this.props.onChange(event.target.value)}
+          />
+        </div>
+      </div>
+    );
+  }
+}

package/src/pagerDuty/index.ts

@@ -1,4 +1,3 @@
 export * from './pagerDuty.read.service';
 export * from './pagerDuty.write.service';
-export * from './pagerDutyTag.component';
-export * from './pagerDutySelectField.component';
+export * from './PagerDutySelectField';

package/src/pagerDuty/pager.states.ts

@@ -1,76 +1,69 @@
-import { module } from 'angular';
-
 import { Pager } from './Pager';
-import type { INestedState, StateConfigProvider } from '../navigation';
-import { STATE_CONFIG_PROVIDER } from '../navigation';
-
-export const PAGER_STATES = 'spinnaker.core.pager.states';
+import type { INestedState } from '../navigation';
+import { registerRootState } from '../navigation/rootState.registration';
 
-module(PAGER_STATES, [STATE_CONFIG_PROVIDER]).config([
-  'stateConfigProvider',
-  (stateConfigProvider: StateConfigProvider) => {
-    const pageState: INestedState = {
-      url: '/page?app&q&keys&by&direction&hideNoApps&subject&&details',
-      name: 'page',
-      views: {
-        'main@': { component: Pager, $type: 'react' },
+registerRootState((stateConfigProvider) => {
+  const pageState: INestedState = {
+    url: '/page?app&q&keys&by&direction&hideNoApps&subject&&details',
+    name: 'page',
+    views: {
+      'main@': { component: Pager, $type: 'react' },
+    },
+    params: {
+      app: {
+        dynamic: true,
+        type: 'string',
+        value: '',
+        squash: true,
+      },
+      q: {
+        dynamic: true,
+        type: 'string',
+        value: '',
+        squash: true,
+      },
+      subject: {
+        dynamic: true,
+        type: 'string',
+        value: '',
+        squash: true,
+      },
+      details: {
+        dynamic: true,
+        type: 'string',
+        value: '',
+        squash: true,
+      },
+      hideNoApps: {
+        dynamic: true,
+        type: 'boolean',
+        value: false,
+        squash: true,
+      },
+      keys: {
+        dynamic: true,
+        value: [],
+        squash: true,
+        array: true,
+      },
+      by: {
+        dynamic: true,
+        type: 'string',
+        value: 'service',
+        squash: true,
       },
-      params: {
-        app: {
-          dynamic: true,
-          type: 'string',
-          value: '',
-          squash: true,
-        },
-        q: {
-          dynamic: true,
-          type: 'string',
-          value: '',
-          squash: true,
-        },
-        subject: {
-          dynamic: true,
-          type: 'string',
-          value: '',
-          squash: true,
-        },
-        details: {
-          dynamic: true,
-          type: 'string',
-          value: '',
-          squash: true,
-        },
-        hideNoApps: {
-          dynamic: true,
-          type: 'boolean',
-          value: false,
-          squash: true,
-        },
-        keys: {
-          dynamic: true,
-          value: [],
-          squash: true,
-          array: true,
-        },
-        by: {
-          dynamic: true,
-          type: 'string',
-          value: 'service',
-          squash: true,
-        },
-        direction: {
-          dynamic: true,
-          type: 'string',
-          value: 'ASC',
-          squash: true,
-        },
+      direction: {
+        dynamic: true,
+        type: 'string',
+        value: 'ASC',
+        squash: true,
       },
-      data: {
-        pageTitleSection: {
-          title: 'Pager',
-        },
+    },
+    data: {
+      pageTitleSection: {
+        title: 'Pager',
       },
-    };
-    stateConfigProvider.addToRootState(pageState);
-  },
-]);
+    },
+  };
+  stateConfigProvider.addToRootState(pageState);
+});

package/src/pagerDuty/pagerDuty.read.service.spec.ts

@@ -1,13 +1,8 @@
-import { mock } from 'angular';
-
 import { mockHttpClient } from '../api/mock/jasmine';
 import type { IPagerDutyService } from './pagerDuty.read.service';
 import { PagerDutyReader } from './pagerDuty.read.service';
 
 describe('PagerDutyReader', () => {
-  beforeEach(mock.module());
-  beforeEach(mock.inject());
-
   it('should return an empty array when configured to do so and invoked', async () => {
     const http = mockHttpClient();
     const services: IPagerDutyService[] = [];
@@ -17,7 +12,7 @@ describe('PagerDutyReader', () => {
     PagerDutyReader.listServices().subscribe((pagerDutyServices: IPagerDutyService[]) => {
       expect(pagerDutyServices).toBeDefined();
       expect(pagerDutyServices.length).toBe(0);
-      executed = true; // can't use done() function b/c $digest is already in progress
+      executed = true;
     });
 
     await http.flush();
@@ -50,7 +45,7 @@ describe('PagerDutyReader', () => {
     PagerDutyReader.listServices().subscribe((pagerDutyServices: IPagerDutyService[]) => {
       expect(pagerDutyServices).toBeDefined();
       expect(pagerDutyServices.length).toBe(2);
-      executed = true; // can't use done() function b/c $digest is already in progress
+      executed = true;
     });
 
     await http.flush();

package/src/pagerDuty/pagerDuty.write.service.spec.ts

@@ -0,0 +1,38 @@
+import { ApplicationModelBuilder } from '../application/applicationModel.builder';
+import { ConfirmationModalService } from '../confirmationModal/confirmationModal.service';
+import { PagerDutyWriter } from './pagerDuty.write.service';
+
+describe('PagerDuty owner paging', () => {
+  it('pages the application owner with the application name and supplied reason', async () => {
+    const app = ApplicationModelBuilder.createApplicationForTests('payments');
+    const confirm = spyOn(ConfirmationModalService, 'confirm').and.returnValue(Promise.resolve());
+    const pageApplicationOwner = spyOn(PagerDutyWriter, 'pageApplicationOwner').and.returnValue(Promise.resolve());
+
+    const confirmationPromise = PagerDutyWriter.pageApplicationOwnerModal(app);
+
+    expect(confirm).toHaveBeenCalledTimes(1);
+    expect(confirmationPromise).toBe(confirm.calls.mostRecent().returnValue);
+    const confirmation = confirm.calls.mostRecent()?.args[0];
+    expect(confirmation).toEqual(
+      jasmine.objectContaining({
+        header: 'Page payments Owner',
+        buttonText: 'Page Owner',
+        askForReason: true,
+        reasonRequired: true,
+        reasonPlaceholder: 'Why is the owner being paged?',
+        taskMonitorConfig: {
+          application: app,
+          title: 'Paging payments owner',
+        },
+        submitMethod: jasmine.any(Function),
+      }),
+    );
+    if (!confirmation) {
+      return;
+    }
+
+    await confirmation.submitMethod({ reason: '  Production outage  ' });
+
+    expect(pageApplicationOwner).toHaveBeenCalledOnceWith(app, '[PAYMENTS] Production outage');
+  });
+});

package/src/pagerDuty/pagerDuty.write.service.ts

@@ -1,19 +1,23 @@
 import type { Application } from '../application';
-import { ModalInjector } from '../reactShims';
+import { ConfirmationModalService } from '../confirmationModal/confirmationModal.service';
 import type { IJob, ITaskCommand } from '../task/taskExecutor';
 import { TaskExecutor } from '../task/taskExecutor';
 
 export class PagerDutyWriter {
-  public static pageApplicationOwnerModal(app: Application): void {
-    ModalInjector.modalService
-      .open({
-        templateUrl: require('./pageApplicationOwner.html'),
-        controller: 'PageModalCtrl as ctrl',
-        resolve: {
-          application: () => app,
-        },
-      })
-      .result.catch(() => {});
+  public static pageApplicationOwnerModal(application: Application): Promise<any> {
+    return ConfirmationModalService.confirm({
+      header: `Page ${application.name} Owner`,
+      buttonText: 'Page Owner',
+      askForReason: true,
+      reasonRequired: true,
+      reasonPlaceholder: 'Why is the owner being paged?',
+      taskMonitorConfig: {
+        application,
+        title: `Paging ${application.name} owner`,
+      },
+      submitMethod: ({ reason }: { reason: string }) =>
+        this.pageApplicationOwner(application, `[${application.name.toUpperCase()}] ${reason.trim()}`),
+    });
   }
 
   public static sendPage(
@@ -22,7 +26,7 @@ export class PagerDutyWriter {
     reason: string,
     ownerApp: Application,
     details?: { [key: string]: any },
-  ): PromiseLike<any> {
+  ): Promise<any> {
     const job = {
       type: 'pageApplicationOwner',
       message: reason,
@@ -46,7 +50,7 @@ export class PagerDutyWriter {
     return TaskExecutor.executeTask(task);
   }
 
-  public static pageApplicationOwner(application: Application, reason: string, details?: string): PromiseLike<any> {
+  public static pageApplicationOwner(application: Application, reason: string, details?: string): Promise<any> {
     return this.sendPage([application], undefined, reason, application, { details });
   }
 }

package/src/pipeline/config/CreatePipeline.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from '@uirouter/react';
 import { get } from 'lodash';
 import React from 'react';
 import { Dropdown } from 'react-bootstrap';
@@ -6,7 +7,6 @@ import type { Application } from '../../application';
 import { CreatePipelineButton } from '../create/CreatePipelineButton';
 import type { IPipeline } from '../../domain';
 import { Tooltip } from '../../presentation/Tooltip';
-import { ReactInjector } from '../../reactShims';
 import { logger } from '../../utils';
 
 export interface ICreatePipelineProps {
@@ -73,13 +73,13 @@ export class CreatePipeline extends React.Component<ICreatePipelineProps> {
 }
 
 const Pipeline = (props: { pipeline: any; type: 'pipeline' | 'strategy' }): JSX.Element => {
+  const { stateService } = useRouter();
   const clicked = () => {
     logger.log({ category: 'Pipelines', action: `Configure ${props.type} (via top level)` });
-    const { $state } = ReactInjector;
-    if (!$state.current.name.includes('.executions.execution')) {
-      $state.go('^.pipelineConfig', { pipelineId: props.pipeline.id });
+    if (!stateService.current.name.includes('.executions.execution')) {
+      stateService.go('^.pipelineConfig', { pipelineId: props.pipeline.id });
     } else {
-      $state.go('^.^.pipelineConfig', { pipelineId: props.pipeline.id });
+      stateService.go('^.^.pipelineConfig', { pipelineId: props.pipeline.id });
     }
   };
   return (