@spinnaker/core 2026.2.2 → 2026.3.0

package/src/notification/notifications.module.spec.ts

@@ -0,0 +1,263 @@
+import React from 'react';
+
+import type { INotificationSettings } from '../config';
+import { SETTINGS } from '../config';
+import { Registry } from '../registry';
+
+import type { INotificationParameter } from './NotificationService';
+import { NotificationService } from './NotificationService';
+import { BUILTIN_NOTIFICATION_KEYS, registerBuiltinNotificationTypes } from './notification.types';
+import { initializeDynamicNotificationTypes, registerDynamicNotificationTypes } from './notifications.module';
+
+describe('notification runtime registration', () => {
+  const originalNotifications = SETTINGS.notifications;
+  let originalPipeline: typeof Registry.pipeline;
+  let originalUrlBuilder: typeof Registry.urlBuilder;
+
+  beforeEach(() => {
+    originalPipeline = Registry.pipeline;
+    originalUrlBuilder = Registry.urlBuilder;
+    Registry.reinitialize();
+  });
+
+  afterEach(() => {
+    Registry.pipeline = originalPipeline;
+    Registry.urlBuilder = originalUrlBuilder;
+    SETTINGS.notifications = originalNotifications;
+  });
+
+  it('does not register built-in notifications when notification types are imported', () => {
+    const notificationTypesModule = require.resolve('./notification.types');
+    delete require.cache[notificationTypesModule];
+
+    require('./notification.types');
+
+    expect(Registry.pipeline.getNotificationTypes()).toEqual([]);
+  });
+
+  it('preserves built-in notification settings filtering and config merging without duplicates', () => {
+    SETTINGS.notifications = {
+      email: { enabled: false },
+      githubStatus: { enabled: false },
+      googlechat: { enabled: false },
+      microsoftteams: { enabled: false },
+      pubsub: { enabled: false },
+      slack: { enabled: true, botName: 'runtime-bot' },
+      sms: { enabled: false },
+      cdevents: { enabled: false },
+    } as INotificationSettings;
+
+    registerBuiltinNotificationTypes();
+    registerBuiltinNotificationTypes();
+
+    const notificationTypes = Registry.pipeline.getNotificationTypes();
+    expect(notificationTypes.map(({ key }) => key)).toEqual(['slack']);
+    expect(notificationTypes[0].config as any).toEqual({ enabled: true, botName: 'runtime-bot' });
+  });
+
+  it('exposes every built-in notification key regardless of settings', () => {
+    expect(Array.from(BUILTIN_NOTIFICATION_KEYS)).toEqual([
+      'email',
+      'githubStatus',
+      'googlechat',
+      'microsoftteams',
+      'pubsub',
+      'slack',
+      'sms',
+      'cdevents',
+    ]);
+  });
+
+  it('does not replace an enabled built-in notification with dynamic metadata', async () => {
+    SETTINGS.notifications = {
+      email: { enabled: false },
+      githubStatus: { enabled: false },
+      googlechat: { enabled: false },
+      microsoftteams: { enabled: false },
+      pubsub: { enabled: false },
+      slack: { enabled: true },
+      sms: { enabled: false },
+      cdevents: { enabled: false },
+    } as INotificationSettings;
+    registerBuiltinNotificationTypes();
+    spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(
+      Promise.resolve([
+        { notificationType: 'SLACK', uiType: 'BASIC', parameters: [] },
+        { notificationType: 'runtime-basic', uiType: 'BASIC', parameters: [] },
+      ]),
+    );
+
+    await registerDynamicNotificationTypes();
+    await registerDynamicNotificationTypes();
+
+    const notificationKeys = Registry.pipeline.getNotificationTypes().map(({ key }) => key);
+    expect(notificationKeys.filter((key) => key.toLowerCase() === 'slack')).toEqual(['slack']);
+    expect(notificationKeys.filter((key) => key === 'runtime-basic').length).toBe(1);
+  });
+
+  it('does not restore a disabled built-in notification from dynamic metadata', async () => {
+    SETTINGS.notifications = {
+      email: { enabled: false },
+      githubStatus: { enabled: false },
+      googlechat: { enabled: false },
+      microsoftteams: { enabled: false },
+      pubsub: { enabled: false },
+      slack: { enabled: false },
+      sms: { enabled: false },
+      cdevents: { enabled: false },
+    } as INotificationSettings;
+    registerBuiltinNotificationTypes();
+    spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(
+      Promise.resolve([
+        { notificationType: 'SLACK', uiType: 'BASIC', parameters: [] },
+        { notificationType: 'runtime-basic', uiType: 'BASIC', parameters: [] },
+      ]),
+    );
+
+    await registerDynamicNotificationTypes();
+    await registerDynamicNotificationTypes();
+
+    const notificationKeys = Registry.pipeline.getNotificationTypes().map(({ key }) => key);
+    expect(notificationKeys.some((key) => key.toLowerCase() === 'slack')).toBeFalse();
+    expect(notificationKeys.filter((key) => key === 'runtime-basic').length).toBe(1);
+  });
+
+  it('awaits BASIC metadata registration and ignores unsupported UI types without duplicates', async () => {
+    const parameters: INotificationParameter[] = [
+      {
+        name: 'channel',
+        defaultValue: 'deployments',
+        type: 'string',
+        label: 'Channel',
+        description: 'Destination channel',
+      },
+    ];
+    const getMetadata = spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(
+      Promise.resolve([
+        { notificationType: 'runtime-basic', uiType: 'BASIC', parameters },
+        { notificationType: 'runtime-custom', uiType: 'CUSTOM', parameters: [] },
+      ]),
+    );
+
+    await registerDynamicNotificationTypes();
+    await registerDynamicNotificationTypes();
+
+    expect(getMetadata).toHaveBeenCalledTimes(2);
+    const notificationTypes = Registry.pipeline.getNotificationTypes();
+    expect(notificationTypes.map(({ key }) => key)).toEqual(['runtime-basic']);
+    expect(notificationTypes[0]).toEqual(
+      jasmine.objectContaining({ key: 'runtime-basic', label: 'runtime-basic', config: {} }),
+    );
+
+    const component = new (notificationTypes[0].component as any)({});
+    const fields = React.Children.toArray(component.render().props.children) as React.ReactElement<any>[];
+    expect(fields.length).toBe(1);
+    expect(fields[0].props).toEqual(
+      jasmine.objectContaining({ name: 'channel', label: 'Channel', input: jasmine.any(Function) }),
+    );
+  });
+
+  it('preserves case-distinct dynamic notification keys without duplicating exact keys', async () => {
+    spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(
+      Promise.resolve([
+        { notificationType: 'custom', uiType: 'BASIC', parameters: [] },
+        { notificationType: 'CUSTOM', uiType: 'BASIC', parameters: [] },
+      ]),
+    );
+
+    await registerDynamicNotificationTypes();
+    await registerDynamicNotificationTypes();
+
+    expect(Registry.pipeline.getNotificationTypes().map(({ key }) => key)).toEqual(['custom', 'CUSTOM']);
+  });
+
+  it('propagates metadata failures to registration callers', async () => {
+    const failure = new Error('metadata unavailable');
+    spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(Promise.reject(failure));
+
+    await expectAsync(registerDynamicNotificationTypes()).toBeRejectedWith(failure);
+  });
+
+  it('isolates metadata initialization failures and logs once', async () => {
+    const failure = new Error('metadata unavailable');
+    spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(Promise.reject(failure));
+    const consoleError = spyOn(console, 'error').and.stub();
+
+    await expectAsync(initializeDynamicNotificationTypes()).toBeResolved();
+
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalledWith('Failed to load notification type metadata', failure);
+  });
+});
+
+describe('direct notification initialization', () => {
+  const originalNotifications = SETTINGS.notifications;
+  let originalPipeline: typeof Registry.pipeline;
+  let originalUrlBuilder: typeof Registry.urlBuilder;
+
+  beforeEach(() => {
+    originalPipeline = Registry.pipeline;
+    originalUrlBuilder = Registry.urlBuilder;
+    Registry.reinitialize();
+    (SETTINGS as any).notifications = undefined;
+  });
+
+  afterEach(() => {
+    Registry.pipeline = originalPipeline;
+    Registry.urlBuilder = originalUrlBuilder;
+    SETTINGS.notifications = originalNotifications;
+  });
+
+  describe('successful metadata loading', () => {
+    const registrationEvents: string[] = [];
+
+    it('registers built-ins synchronously before loading dynamic metadata', async () => {
+      registrationEvents.length = 0;
+      const registerNotification = Registry.pipeline.registerNotification.bind(Registry.pipeline);
+      spyOn(Registry.pipeline, 'registerNotification').and.callFake((config) => {
+        registrationEvents.push(`register:${config.key}`);
+        registerNotification(config);
+      });
+      spyOn(NotificationService, 'getNotificationTypeMetadata').and.callFake(() => {
+        registrationEvents.push('load-dynamic');
+        return Promise.resolve([]);
+      });
+
+      registerBuiltinNotificationTypes();
+      await initializeDynamicNotificationTypes();
+
+      expect(registrationEvents).toEqual([
+        ...Array.from(BUILTIN_NOTIFICATION_KEYS, (key) => `register:${key}`),
+        'load-dynamic',
+      ]);
+    });
+  });
+
+  describe('failed metadata loading', () => {
+    const failure = new Error('metadata unavailable');
+    let consoleError: jasmine.Spy;
+
+    it('awaits and isolates dynamic metadata failures with exactly one log', async () => {
+      spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(Promise.reject(failure));
+      consoleError = spyOn(console, 'error').and.stub();
+
+      await expectAsync(initializeDynamicNotificationTypes()).toBeResolved();
+
+      expect(consoleError).toHaveBeenCalledTimes(1);
+      expect(consoleError).toHaveBeenCalledWith('Failed to load notification type metadata', failure);
+    });
+  });
+
+  describe('after direct registration', () => {
+    it('keeps built-in notifications idempotent across repeated direct initialization', async () => {
+      spyOn(NotificationService, 'getNotificationTypeMetadata').and.returnValue(Promise.resolve([]));
+      registerBuiltinNotificationTypes();
+      registerBuiltinNotificationTypes();
+      await initializeDynamicNotificationTypes();
+
+      const notificationKeys = Registry.pipeline.getNotificationTypes().map(({ key }) => key);
+
+      expect(notificationKeys).toEqual(Array.from(BUILTIN_NOTIFICATION_KEYS));
+    });
+  });
+});

package/src/notification/notifications.module.ts

@@ -1,24 +1,38 @@
-import { module } from 'angular';
-
 import { NotificationService } from './NotificationService';
 import { extensionNotificationConfig } from './extensionNotificationConfig';
-import './notification.types';
-import { NOTIFICATION_LIST } from './notificationList.module';
+import { BUILTIN_NOTIFICATION_KEYS } from './notification.types';
 import { Registry } from '../registry';
 
-export const CORE_NOTIFICATION_NOTIFICATIONS_MODULE = 'spinnaker.core.notifications';
-export const name = CORE_NOTIFICATION_NOTIFICATIONS_MODULE; // for backwards compatibility
-module(CORE_NOTIFICATION_NOTIFICATIONS_MODULE, [NOTIFICATION_LIST]).run(() => {
-  NotificationService.getNotificationTypeMetadata().then((types) => {
-    types
-      .filter((t) => t.uiType === 'BASIC')
-      .forEach((t) => {
-        Registry.pipeline.registerNotification({
-          config: {},
-          component: extensionNotificationConfig(t.parameters),
-          key: t.notificationType,
-          label: t.notificationType,
-        });
+const normalizedBuiltinNotificationKeys = new Set(
+  Array.from(BUILTIN_NOTIFICATION_KEYS, (notificationType) => notificationType.toLowerCase()),
+);
+
+export async function registerDynamicNotificationTypes(): Promise<void> {
+  const types = await NotificationService.getNotificationTypeMetadata();
+  types
+    .filter((t) => t.uiType === 'BASIC')
+    .forEach((t) => {
+      const normalizedNotificationType = t.notificationType.toLowerCase();
+      if (
+        normalizedBuiltinNotificationKeys.has(normalizedNotificationType) ||
+        Registry.pipeline.getNotificationTypes().some(({ key }) => key === t.notificationType)
+      ) {
+        return;
+      }
+
+      Registry.pipeline.registerNotification({
+        config: {},
+        component: extensionNotificationConfig(t.parameters),
+        key: t.notificationType,
+        label: t.notificationType,
       });
-  });
-});
+    });
+}
+
+export async function initializeDynamicNotificationTypes(): Promise<void> {
+  try {
+    await registerDynamicNotificationTypes();
+  } catch (error) {
+    console.error('Failed to load notification type metadata', error);
+  }
+}

package/src/orchestratedItem/orchestratedItem.transformer.spec.ts

@@ -1,6 +1,12 @@
 import { OrchestratedItemTransformer } from './orchestratedItem.transformer';
+import { getDirectRouter, setDirectRouter } from '../navigation/directRouter';
 
 describe('orchestratedItem transformer', () => {
+  let previousRouter: ReturnType<typeof getDirectRouter>;
+
+  beforeEach(() => (previousRouter = getDirectRouter()));
+  afterEach(() => setDirectRouter(previousRouter));
+
   describe('failure message extraction', () => {
     const getMessage = (obj: any) => {
       OrchestratedItemTransformer.defineProperties(obj);
@@ -230,5 +236,49 @@ describe('orchestratedItem transformer', () => {
     it('returns null if no failure message is present', () => {
       expect(getMessage({ status: 'SUCCEEDED' })).toBe(null);
     });
+
+    it('links to the task holding an orchestration lock', () => {
+      const href = jasmine.createSpy('href').and.returnValue('#/task');
+      setDirectRouter({ stateService: { href } } as any);
+
+      const message = getMessage({
+        context: {
+          exception: {
+            exceptionType: 'LockFailureException',
+            details: { currentLockValue: { application: 'app', id: 'task-id', type: 'orchestration' } },
+          },
+        },
+      });
+
+      expect(href).toHaveBeenCalledWith('home.applications.application.tasks.taskDetails', {
+        application: 'app',
+        taskId: 'task-id',
+      });
+      expect(message).toBe(
+        'Failed to acquire lock. An <a href="#/task">existing task</a> is currently operating on the cluster.',
+      );
+    });
+
+    it('links to the pipeline holding a pipeline lock', () => {
+      const href = jasmine.createSpy('href').and.returnValue('#/pipeline');
+      setDirectRouter({ stateService: { href } } as any);
+
+      const message = getMessage({
+        context: {
+          exception: {
+            exceptionType: 'LockFailureException',
+            details: { currentLockValue: { application: 'app', id: 'execution-id', type: 'pipeline' } },
+          },
+        },
+      });
+
+      expect(href).toHaveBeenCalledWith('home.applications.application.pipelines.executionDetails.execution', {
+        application: 'app',
+        executionId: 'execution-id',
+      });
+      expect(message).toBe(
+        'Failed to acquire lock. An <a href="#/pipeline">existing pipeline</a> is currently operating on the cluster.',
+      );
+    });
   });
 });

package/src/orchestratedItem/orchestratedItem.transformer.ts

@@ -1,9 +1,9 @@
 import { formatDistance } from 'date-fns';
 import { get, isNil } from 'lodash';
-import { $log } from 'ngimport';
 
 import type { IOrchestratedItem, IOrchestratedItemVariable, ITask, ITaskStep } from '../domain';
-import { ReactInjector } from '../reactShims/react.injector';
+import { getDirectRouter } from '../navigation/directRouter';
+import { diagnosticLogger } from '../utils/diagnosticLogger';
 
 export class OrchestratedItemTransformer {
   public static addRunningTime(item: any): void {
@@ -174,18 +174,19 @@ export class OrchestratedItemTransformer {
     if (generalException) {
       const details: any = generalException.details;
       if (details && details.currentLockValue) {
+        const stateService = getDirectRouter()!.stateService;
         let typeDisplay: string;
         let linkUrl: string;
 
         if (details.currentLockValue.type === 'orchestration') {
           typeDisplay = 'task';
-          linkUrl = ReactInjector.$state.href('home.applications.application.tasks.taskDetails', {
+          linkUrl = stateService.href('home.applications.application.tasks.taskDetails', {
             application: details.currentLockValue.application,
             taskId: details.currentLockValue.id,
           });
         } else {
           typeDisplay = 'pipeline';
-          linkUrl = ReactInjector.$state.href('home.applications.application.pipelines.executionDetails.execution', {
+          linkUrl = stateService.href('home.applications.application.pipelines.executionDetails.execution', {
             application: details.currentLockValue.application,
             executionId: details.currentLockValue.id,
           });
@@ -265,7 +266,7 @@ export class OrchestratedItemTransformer {
         return 'BUFFERED';
       default:
         if (item.originalStatus) {
-          $log.warn('Unrecognized status:', item.originalStatus);
+          diagnosticLogger.warn('Unrecognized status:', item.originalStatus);
         }
         return item.originalStatus;
     }

package/src/overrideRegistry/Overridable.spec.tsx

@@ -0,0 +1,74 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { of as observableOf } from 'rxjs';
+
+import { AccountService } from '../account/AccountService';
+import { CloudProviderRegistry } from '../cloudProvider/CloudProviderRegistry';
+import { SETTINGS } from '../config/settings';
+
+import { Overridable } from './Overridable';
+import { overridesComponent } from './Overrides';
+import { overrideRegistry, OverrideRegistry } from './override.registry';
+
+class Original extends React.Component<{ accountId?: string }> {
+  public render() {
+    return <div className="original">Original</div>;
+  }
+}
+
+describe('Overridable', () => {
+  it('renders a React component override registered in the override registry', () => {
+    const key = 'overridable.spec.registryComponent';
+    const OriginalComponent = Overridable(key)(Original);
+    const OverrideComponent = () => <div className="override">Override</div>;
+
+    overrideRegistry.overrideComponent(key, OverrideComponent);
+
+    const wrapper = mount(<OriginalComponent />);
+
+    expect(wrapper.find('.override').text()).toBe('Override');
+    expect(wrapper.find('.original').exists()).toBeFalse();
+  });
+
+  it('flushes queued override registrations into the singleton registry', () => {
+    const key = 'overridable.spec.directSingletonRegistry';
+    const OverrideComponent = () => <div className="override">Override</div>;
+
+    overridesComponent(OverrideComponent, key);
+
+    expect(overrideRegistry.getComponent(key)).toBe(OverrideComponent as any);
+  });
+
+  it('renders the original component when only a legacy cloud-provider template override is registered', () => {
+    const key = 'overridable.spec.legacyCloudProviderTemplate';
+    const provider = 'overridableSpecProvider';
+    const OriginalComponent = Overridable(key)(Original);
+
+    SETTINGS.providers[provider] = { defaults: { account: 'test' } } as any;
+    CloudProviderRegistry.registerProvider(provider, { name: provider });
+    CloudProviderRegistry.overrideValue(provider, `${key}TemplateUrl`, 'legacy-template.html');
+    CloudProviderRegistry.overrideValue(provider, `${key}Controller`, 'LegacyController');
+    AccountService.accounts$ = observableOf([{ name: 'test', cloudProvider: provider } as any]);
+
+    const wrapper = mount(<OriginalComponent accountId="test" />);
+
+    expect(wrapper.find('.original').text()).toBe('Original');
+  });
+
+  it('renders a React component override registered for a cloud provider', () => {
+    const key = 'overridable.spec.cloudProviderComponent';
+    const provider = 'overridableSpecComponentProvider';
+    const OriginalComponent = Overridable(key)(Original);
+    const OverrideComponent = () => <div className="override">Override</div>;
+
+    SETTINGS.providers[provider] = { defaults: { account: 'test' } } as any;
+    CloudProviderRegistry.registerProvider(provider, { name: provider });
+    CloudProviderRegistry.overrideValue(provider, key, OverrideComponent);
+    AccountService.accounts$ = observableOf([{ name: 'test', cloudProvider: provider } as any]);
+
+    const wrapper = mount(<OriginalComponent accountId="test" />);
+
+    expect(wrapper.find('.override').text()).toBe('Override');
+    expect(wrapper.find('.original').exists()).toBeFalse();
+  });
+});

package/src/overrideRegistry/Overridable.tsx

@@ -6,8 +6,7 @@ import { map, switchMap, takeUntil } from 'rxjs/operators';
 import type { IAccountDetails } from '../account/AccountService';
 import { AccountService } from '../account/AccountService';
 import { CloudProviderRegistry } from '../cloudProvider/CloudProviderRegistry';
-import { AngularJSAdapter } from '../reactShims/AngularJSAdapter';
-import { ReactInjector } from '../reactShims/react.injector';
+import { overrideRegistry } from './override.registry';
 import { Spinner } from '../widgets/spinners/Spinner';
 
 export interface IOverridableProps {
@@ -116,49 +115,15 @@ export function overridableComponent<P extends IOverridableProps, T extends Reac
         return CloudProviderComponentOverride as T;
       }
 
-      const cloudProviderTemplateOverride = CloudProviderRegistry.getValue(cloudProvider, key + 'TemplateUrl');
-      if (cloudProviderTemplateOverride) {
-        const cloudProviderController = CloudProviderRegistry.getValue(cloudProvider, key + 'Controller');
-        const controllerAs = cloudProviderController && cloudProviderController.includes(' as ') ? undefined : 'ctrl';
-        const Component = (props: any) => (
-          <AngularJSAdapter
-            {...props}
-            templateUrl={cloudProviderTemplateOverride}
-            controller={cloudProviderController}
-            controllerAs={controllerAs}
-          />
-        );
-
-        return (Component as any) as T;
-      }
-
       return null;
     }
 
     private getComponentFromOverrideRegistry(): T {
-      const { overrideRegistry } = ReactInjector;
-
       const ComponentOverride = overrideRegistry.getComponent(key);
       if (ComponentOverride) {
         return ComponentOverride as T;
       }
 
-      const templateOverride: string = overrideRegistry.getTemplate(key, null);
-      if (templateOverride) {
-        const controllerOverride: string = overrideRegistry.getController(key, null);
-        const controllerAs = controllerOverride && controllerOverride.includes(' as ') ? undefined : 'ctrl';
-        const Component = (props: any) => (
-          <AngularJSAdapter
-            {...props}
-            templateUrl={templateOverride}
-            controller={controllerOverride}
-            controllerAs={controllerAs}
-          />
-        );
-
-        return (Component as any) as T;
-      }
-
       return null;
     }
 

package/src/overrideRegistry/override.registry.ts

@@ -1,44 +1,19 @@
-import { module } from 'angular';
 import type React from 'react';
 
 import { overrideRegistrationQueue } from './Overrides';
 
 export class OverrideRegistry {
-  private templateOverrides: Map<string, string> = new Map();
   private componentOverrides: Map<string, React.ComponentType> = new Map();
-  private controllerOverrides: Map<string, string> = new Map();
-
-  public overrideTemplate(key: string, val: string) {
-    this.templateOverrides.set(key, val);
-  }
 
   public overrideComponent(key: string, val: React.ComponentType) {
     this.componentOverrides.set(key, val);
   }
 
-  public overrideController(key: string, val: string) {
-    this.controllerOverrides.set(key, val);
-  }
-
-  public getTemplate(key: string, defaultVal: string) {
-    return this.templateOverrides.get(key) || defaultVal;
-  }
-
   public getComponent<T>(key: string) {
     return this.componentOverrides.get(key) as React.ComponentClass<T>;
   }
-
-  public getController(key: string, defaultVal: string = key) {
-    return this.controllerOverrides.get(key) || defaultVal;
-  }
 }
 
-export const OVERRIDE_REGISTRY = 'spinnaker.core.override.registry';
-module(OVERRIDE_REGISTRY, [])
-  .service('overrideRegistry', OverrideRegistry)
-  .run([
-    'overrideRegistry',
-    (overrideRegistry: OverrideRegistry) => {
-      overrideRegistrationQueue.setRegistries(overrideRegistry);
-    },
-  ]);
+export const overrideRegistry = new OverrideRegistry();
+
+overrideRegistrationQueue.setRegistries(overrideRegistry);

package/src/pagerDuty/PageModal.tsx

@@ -7,9 +7,10 @@ import type { Application } from '../application';
 import { ApplicationModelBuilder } from '../application';
 import { SETTINGS } from '../config';
 import { SubmitButton } from '../modal';
+import type { IRouterInjectedProps } from '../navigation/routerContext';
+import { withRouter } from '../navigation/routerContext';
 import type { IPagerDutyService } from './pagerDuty.read.service';
 import { PagerDutyWriter } from './pagerDuty.write.service';
-import { ReactInjector } from '../reactShims';
 import { TaskMonitor, TaskMonitorWrapper } from '../task';
 
 export interface IPageModalProps {
@@ -28,8 +29,8 @@ export interface IPageModalState {
   taskMonitor: TaskMonitor;
 }
 
-export class PageModal extends React.Component<IPageModalProps, IPageModalState> {
-  constructor(props: IPageModalProps) {
+class PageModalComponent extends React.Component<IPageModalProps & IRouterInjectedProps, IPageModalState> {
+  constructor(props: IPageModalProps & IRouterInjectedProps) {
     super(props);
     this.state = this.getDefaultState(props);
   }
@@ -40,14 +41,8 @@ export class PageModal extends React.Component<IPageModalProps, IPageModalState>
     }
   }
 
-  private getDefaultState(props: IPageModalProps): IPageModalState {
-    const {
-      $uiRouter: {
-        globals: {
-          params: { subject, details },
-        },
-      },
-    } = ReactInjector;
+  private getDefaultState(props: IPageModalProps & IRouterInjectedProps): IPageModalState {
+    const { subject, details } = props.stateParams;
     const defaultSubject = subject || get(SETTINGS, 'pagerDuty.defaultSubject', 'Urgent Issue');
     const defaultDetails = details || get(SETTINGS, 'pagerDuty.defaultDetails', '');
 
@@ -69,13 +64,13 @@ export class PageModal extends React.Component<IPageModalProps, IPageModalState>
 
   private handleSubjectChanged = (event: any): void => {
     const value = event.target.value;
-    ReactInjector.$state.go('.', { subject: value }, { location: 'replace' });
+    this.props.stateService.go('.', { subject: value }, { location: 'replace' });
     this.setState({ subject: value });
   };
 
   private handleDetailsChanged = (event: any): void => {
     const value = event.target.value;
-    ReactInjector.$state.go('.', { details: value }, { location: 'replace' });
+    this.props.stateService.go('.', { details: value }, { location: 'replace' });
     this.setState({ details: value });
   };
 
@@ -87,7 +82,7 @@ export class PageModal extends React.Component<IPageModalProps, IPageModalState>
     const taskMonitor = new TaskMonitor({
       application: ownerApp,
       title: `Sending page to ${this.state.pageCount} policies`,
-      modalInstance: TaskMonitor.modalInstanceEmulation(() => this.close()),
+      onDismiss: () => this.close(),
     });
 
     const submitMethod = () => {
@@ -180,3 +175,6 @@ export class PageModal extends React.Component<IPageModalProps, IPageModalState>
     );
   }
 }
+
+export const PageModal = withRouter(PageModalComponent);
+PageModal.displayName = 'PageModal';