@spinnaker/amazon 2026.2.2 → 2026.3.0

package/src/loadBalancer/amazonLoadBalancerDataUtils.ts

@@ -1,5 +1,4 @@
 import { flatten } from 'lodash';
-import { $q } from 'ngimport';
 
 import type { Application, ILoadBalancer } from '@spinnaker/core';
 import { AccountService } from '@spinnaker/core';
@@ -40,25 +39,26 @@ export class AmazonLoadBalancerDataUtils {
   public static populateTargetGroups(
     application: Application,
     serverGroup: IAmazonServerGroup,
-  ): PromiseLike<ITargetGroup[]> {
-    return $q
-      .all([AccountService.getAccountDetails(serverGroup.account), application.getDataSource('loadBalancers').ready()])
-      .then((data) => {
-        const awsAccount = (data[0] && data[0].awsAccount) || serverGroup.account;
-        const loadBalancers: IAmazonApplicationLoadBalancer[] = (application.loadBalancers
-          .data as ILoadBalancer[]).filter(
-          (lb) => lb.loadBalancerType === 'application' || lb.loadBalancerType === 'network',
-        ) as IAmazonApplicationLoadBalancer[];
-        const targetGroups = serverGroup.targetGroups
-          .map((targetGroupName: string) => {
-            const allTargetGroups = flatten(loadBalancers.map((lb) => lb.targetGroups || []));
-            const targetGroup = allTargetGroups.find(
-              (tg) => tg.name === targetGroupName && tg.region === serverGroup.region && tg.account === awsAccount,
-            );
-            return this.buildTargetGroup(targetGroup, serverGroup);
-          })
-          .filter((tg) => tg);
-        return targetGroups;
-      });
+  ): Promise<ITargetGroup[]> {
+    return Promise.all([
+      AccountService.getAccountDetails(serverGroup.account),
+      application.getDataSource('loadBalancers').ready(),
+    ]).then((data) => {
+      const awsAccount = (data[0] && data[0].awsAccount) || serverGroup.account;
+      const loadBalancers: IAmazonApplicationLoadBalancer[] = (application.loadBalancers
+        .data as ILoadBalancer[]).filter(
+        (lb) => lb.loadBalancerType === 'application' || lb.loadBalancerType === 'network',
+      ) as IAmazonApplicationLoadBalancer[];
+      const targetGroups = serverGroup.targetGroups
+        .map((targetGroupName: string) => {
+          const allTargetGroups = flatten(loadBalancers.map((lb) => lb.targetGroups || []));
+          const targetGroup = allTargetGroups.find(
+            (tg) => tg.name === targetGroupName && tg.region === serverGroup.region && tg.account === awsAccount,
+          );
+          return this.buildTargetGroup(targetGroup, serverGroup);
+        })
+        .filter((tg) => tg);
+      return targetGroups;
+    });
   }
 }

package/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
 
-import type { ILoadBalancerIncompatibility, ILoadBalancerModalProps } from '@spinnaker/core';
-import { CloudProviderRegistry, Markdown, ModalClose, noop, ReactModal } from '@spinnaker/core';
+import type { DeckRuntimeServices, ILoadBalancerIncompatibility, ILoadBalancerModalProps } from '@spinnaker/core';
+import { CloudProviderRegistry, DeckRuntimeContext, Markdown, ModalClose, noop, ReactModal } from '@spinnaker/core';
 
 import type { IAmazonLoadBalancerConfig } from './LoadBalancerTypes';
 import { LoadBalancerTypes } from './LoadBalancerTypes';
@@ -17,12 +17,24 @@ export class AmazonLoadBalancerChoiceModal extends React.Component<
   ILoadBalancerModalProps,
   IAmazonLoadBalancerChoiceModalState
 > {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
+  public static supportsPipelineConfig = true;
+
   public static defaultProps: Partial<ILoadBalancerModalProps> = {
     closeModal: noop,
     dismissModal: noop,
   };
 
-  public static show(props: ILoadBalancerModalProps): Promise<void> {
+  public static show(props: ILoadBalancerModalProps, runtimeServices: DeckRuntimeServices): Promise<any> {
+    if ((props as any).isNew === false && props.loadBalancer?.loadBalancerType) {
+      const loadBalancerType = LoadBalancerTypes.find((type) => type.type === props.loadBalancer.loadBalancerType);
+      if (loadBalancerType) {
+        return loadBalancerType.component.show(props, runtimeServices);
+      }
+    }
+
     return ReactModal.show(
       AmazonLoadBalancerChoiceModal,
       {
@@ -30,6 +42,7 @@ export class AmazonLoadBalancerChoiceModal extends React.Component<
         className: 'create-pipeline-modal-overflow-visible modal-lg',
       },
       { bsSize: 'lg' },
+      runtimeServices,
     );
   }
 
@@ -49,7 +62,7 @@ export class AmazonLoadBalancerChoiceModal extends React.Component<
     const { children, ...loadBalancerProps } = this.props;
     this.close();
     this.state.selectedChoice.component
-      .show(loadBalancerProps)
+      .show(loadBalancerProps, this.context.services)
       .then((loadBalancer) => {
         this.props.closeModal(loadBalancer);
       })

package/src/loadBalancer/configure/LoadBalancerTypes.ts

@@ -1,13 +1,16 @@
-import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import type { DeckRuntimeServices, ILoadBalancerModalProps } from '@spinnaker/core';
 
 import { CreateApplicationLoadBalancer } from './application/CreateApplicationLoadBalancer';
 import { CreateClassicLoadBalancer } from './classic/CreateClassicLoadBalancer';
 import type { IAmazonLoadBalancerUpsertCommand } from '../../domain';
 import { CreateNetworkLoadBalancer } from './network/CreateNetworkLoadBalancer';
 
-export interface ICloseableLoadBalancerModal extends React.ComponentClass<ILoadBalancerModalProps> {
-  show: (props: ILoadBalancerModalProps) => Promise<IAmazonLoadBalancerUpsertCommand>;
-}
+export type ICloseableLoadBalancerModal = React.ComponentType<ILoadBalancerModalProps> & {
+  show: (
+    props: ILoadBalancerModalProps,
+    runtimeServices: DeckRuntimeServices,
+  ) => Promise<IAmazonLoadBalancerUpsertCommand>;
+};
 
 export interface IAmazonLoadBalancerConfig {
   type: 'network' | 'application' | 'classic';

package/src/loadBalancer/configure/application/ALBListeners.tsx

@@ -1,6 +1,5 @@
 import type { FormikErrors, FormikProps } from 'formik';
 import { difference, flatten, get, some, uniq, uniqBy } from 'lodash';
-import { $q } from 'ngimport';
 import React from 'react';
 import type { SortEnd } from 'react-sortable-hoc';
 import { arrayMove, SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -452,7 +451,7 @@ export class ALBListeners
           if (confirmRemove) {
             this.initialActionsWithAuth.delete(actions);
           }
-          return $q.resolve();
+          return Promise.resolve();
         },
       });
     } else {

package/src/loadBalancer/configure/application/CreateApplicationLoadBalancer.tsx

@@ -1,15 +1,15 @@
 import { cloneDeep, get } from 'lodash';
 import React from 'react';
 
-import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import type { DeckRuntimeServices, ILoadBalancerModalProps, IRouterInjectedProps } from '@spinnaker/core';
 import {
   AccountService,
   FirewallLabels,
   LoadBalancerWriter,
   noop,
-  ReactInjector,
   ReactModal,
   TaskMonitor,
+  withRouter,
   WizardModal,
   WizardPage,
 } from '@spinnaker/core';
@@ -36,8 +36,8 @@ export interface ICreateApplicationLoadBalancerState {
   taskMonitor: TaskMonitor;
 }
 
-export class CreateApplicationLoadBalancer extends React.Component<
-  ICreateApplicationLoadBalancerProps,
+export class CreateApplicationLoadBalancerComponent extends React.Component<
+  ICreateApplicationLoadBalancerProps & IRouterInjectedProps,
   ICreateApplicationLoadBalancerState
 > {
   public static defaultProps: Partial<ICreateApplicationLoadBalancerProps> = {
@@ -46,15 +46,18 @@ export class CreateApplicationLoadBalancer extends React.Component<
   };
 
   private _isUnmounted = false;
-  private refreshUnsubscribe: () => void;
+  private refreshUnsubscribe?: () => void;
   private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
 
-  public static show(props: ICreateApplicationLoadBalancerProps): Promise<IAmazonApplicationLoadBalancerUpsertCommand> {
+  public static show(
+    props: ICreateApplicationLoadBalancerProps,
+    runtimeServices: DeckRuntimeServices,
+  ): Promise<IAmazonApplicationLoadBalancerUpsertCommand> {
     const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
-    return ReactModal.show(CreateApplicationLoadBalancer, props, modalProps);
+    return ReactModal.show(CreateApplicationLoadBalancer, props, modalProps, runtimeServices);
   }
 
-  constructor(props: ICreateApplicationLoadBalancerProps) {
+  constructor(props: ICreateApplicationLoadBalancerProps & IRouterInjectedProps) {
     super(props);
 
     const loadBalancerCommand = props.command
@@ -92,7 +95,7 @@ export class CreateApplicationLoadBalancer extends React.Component<
     return certificateId;
   }
 
-  private formatListeners(command: IAmazonApplicationLoadBalancerUpsertCommand): PromiseLike<void> {
+  private formatListeners(command: IAmazonApplicationLoadBalancerUpsertCommand): Promise<void> {
     return AccountService.getAccountDetails(command.credentials).then((account) => {
       command.listeners.forEach((listener) => {
         if (listener.protocol === 'HTTP') {
@@ -171,11 +174,12 @@ export class CreateApplicationLoadBalancer extends React.Component<
   }
 
   protected onApplicationRefresh(values: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
     if (this._isUnmounted) {
       return;
     }
 
-    this.refreshUnsubscribe = undefined;
     this.props.dismissModal();
     this.setState({ taskMonitor: undefined });
     const newStateParams = {
@@ -186,23 +190,24 @@ export class CreateApplicationLoadBalancer extends React.Component<
       provider: 'aws',
     };
 
-    if (!ReactInjector.$state.includes('**.loadBalancerDetails')) {
-      ReactInjector.$state.go('.loadBalancerDetails', newStateParams);
+    if (!this.props.stateService.includes('**.loadBalancerDetails')) {
+      this.props.stateService.go('.loadBalancerDetails', newStateParams);
     } else {
-      ReactInjector.$state.go('^.loadBalancerDetails', newStateParams);
+      this.props.stateService.go('^.loadBalancerDetails', newStateParams);
     }
   }
 
   public componentWillUnmount(): void {
     this._isUnmounted = true;
-    if (this.refreshUnsubscribe) {
-      this.refreshUnsubscribe();
-    }
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
   }
 
   private onTaskComplete(values: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(() => this.onApplicationRefresh(values));
     this.props.app.loadBalancers.refresh();
-    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
   }
 
   private submit = (values: IAmazonApplicationLoadBalancerUpsertCommand): void => {
@@ -240,7 +245,7 @@ export class CreateApplicationLoadBalancer extends React.Component<
       const taskMonitor = new TaskMonitor({
         application: app,
         title: `${isNew ? 'Creating' : 'Updating'} your load balancer`,
-        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onDismiss: () => this.props.dismissModal(),
         onTaskComplete: () => this.onTaskComplete(loadBalancerCommandFormatted),
       });
 
@@ -335,3 +340,8 @@ export class CreateApplicationLoadBalancer extends React.Component<
     );
   }
 }
+
+export const CreateApplicationLoadBalancer = Object.assign(
+  withRouter<ICreateApplicationLoadBalancerProps & IRouterInjectedProps>(CreateApplicationLoadBalancerComponent),
+  { show: CreateApplicationLoadBalancerComponent.show },
+);

package/src/loadBalancer/configure/classic/CreateClassicLoadBalancer.tsx

@@ -2,15 +2,15 @@ import type { FormikErrors, FormikValues } from 'formik';
 import { cloneDeep, get } from 'lodash';
 import React from 'react';
 
-import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import type { DeckRuntimeServices, ILoadBalancerModalProps, IRouterInjectedProps } from '@spinnaker/core';
 import {
   AccountService,
   FirewallLabels,
   LoadBalancerWriter,
   noop,
-  ReactInjector,
   ReactModal,
   TaskMonitor,
+  withRouter,
   WizardModal,
   WizardPage,
 } from '@spinnaker/core';
@@ -36,8 +36,8 @@ export interface ICreateClassicLoadBalancerState {
   taskMonitor: TaskMonitor;
 }
 
-export class CreateClassicLoadBalancer extends React.Component<
-  ICreateClassicLoadBalancerProps,
+export class CreateClassicLoadBalancerComponent extends React.Component<
+  ICreateClassicLoadBalancerProps & IRouterInjectedProps,
   ICreateClassicLoadBalancerState
 > {
   public static defaultProps: Partial<ICreateClassicLoadBalancerProps> = {
@@ -46,15 +46,18 @@ export class CreateClassicLoadBalancer extends React.Component<
   };
 
   private _isUnmounted = false;
-  private refreshUnsubscribe: () => void;
+  private refreshUnsubscribe?: () => void;
   private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
 
-  public static show(props: ICreateClassicLoadBalancerProps): Promise<IAmazonClassicLoadBalancerUpsertCommand> {
+  public static show(
+    props: ICreateClassicLoadBalancerProps,
+    runtimeServices: DeckRuntimeServices,
+  ): Promise<IAmazonClassicLoadBalancerUpsertCommand> {
     const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
-    return ReactModal.show(CreateClassicLoadBalancer, props, modalProps);
+    return ReactModal.show(CreateClassicLoadBalancer, props, modalProps, runtimeServices);
   }
 
-  constructor(props: ICreateClassicLoadBalancerProps) {
+  constructor(props: ICreateClassicLoadBalancerProps & IRouterInjectedProps) {
     super(props);
 
     const loadBalancerCommand = props.command
@@ -91,7 +94,7 @@ export class CreateClassicLoadBalancer extends React.Component<
     return certificateId;
   }
 
-  protected formatListeners(command: IAmazonClassicLoadBalancerUpsertCommand): PromiseLike<void> {
+  protected formatListeners(command: IAmazonClassicLoadBalancerUpsertCommand): Promise<void> {
     return AccountService.getAccountDetails(command.credentials).then((account) => {
       command.listeners.forEach((listener) => {
         listener.sslCertificateId = this.certificateIdAsARN(
@@ -134,11 +137,12 @@ export class CreateClassicLoadBalancer extends React.Component<
   }
 
   protected onApplicationRefresh(values: IAmazonClassicLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
     if (this._isUnmounted) {
       return;
     }
 
-    this.refreshUnsubscribe = undefined;
     this.props.dismissModal();
     this.setState({ taskMonitor: undefined });
     const newStateParams = {
@@ -149,23 +153,24 @@ export class CreateClassicLoadBalancer extends React.Component<
       provider: 'aws',
     };
 
-    if (!ReactInjector.$state.includes('**.loadBalancerDetails')) {
-      ReactInjector.$state.go('.loadBalancerDetails', newStateParams);
+    if (!this.props.stateService.includes('**.loadBalancerDetails')) {
+      this.props.stateService.go('.loadBalancerDetails', newStateParams);
     } else {
-      ReactInjector.$state.go('^.loadBalancerDetails', newStateParams);
+      this.props.stateService.go('^.loadBalancerDetails', newStateParams);
     }
   }
 
   public componentWillUnmount(): void {
     this._isUnmounted = true;
-    if (this.refreshUnsubscribe) {
-      this.refreshUnsubscribe();
-    }
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
   }
 
   private onTaskComplete(values: IAmazonClassicLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(() => this.onApplicationRefresh(values));
     this.props.app.loadBalancers.refresh();
-    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
   }
 
   private submit = (values: IAmazonClassicLoadBalancerUpsertCommand): void => {
@@ -183,7 +188,7 @@ export class CreateClassicLoadBalancer extends React.Component<
       const taskMonitor = new TaskMonitor({
         application: app,
         title: `${isNew ? 'Creating' : 'Updating'} your load balancer`,
-        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onDismiss: () => this.props.dismissModal(),
         onTaskComplete: () => this.onTaskComplete(loadBalancerCommandFormatted),
       });
 
@@ -203,7 +208,7 @@ export class CreateClassicLoadBalancer extends React.Component<
     return errors;
   };
 
-  public render(): React.ReactElement<CreateClassicLoadBalancer> {
+  public render(): React.ReactElement<CreateClassicLoadBalancerComponent> {
     const { app, dismissModal, forPipelineConfig, loadBalancer } = this.props;
     const { isNew, loadBalancerCommand, taskMonitor } = this.state;
 
@@ -280,3 +285,8 @@ export class CreateClassicLoadBalancer extends React.Component<
     );
   }
 }
+
+export const CreateClassicLoadBalancer = Object.assign(
+  withRouter<ICreateClassicLoadBalancerProps & IRouterInjectedProps>(CreateClassicLoadBalancerComponent),
+  { show: CreateClassicLoadBalancerComponent.show },
+);

package/src/loadBalancer/configure/common/LoadBalancerLocation.tsx

@@ -237,7 +237,7 @@ export class LoadBalancerLocation
     this.props.formik.handleChange(event);
   };
 
-  private getAvailableSubnets(credentials: string, region: string): PromiseLike<ISubnet[]> {
+  private getAvailableSubnets(credentials: string, region: string): Promise<ISubnet[]> {
     return SubnetReader.listSubnets().then((subnets) => {
       return chain(subnets)
         .filter({ account: credentials, region })

package/src/loadBalancer/configure/common/SecurityGroups.spec.tsx

@@ -0,0 +1,27 @@
+import { InfrastructureCaches } from '@spinnaker/core';
+
+import { SecurityGroups } from './SecurityGroups';
+
+describe('SecurityGroups', () => {
+  it('renders when the security group cache has not been registered', () => {
+    spyOn(InfrastructureCaches, 'get').and.returnValue(undefined);
+
+    expect(() => new SecurityGroups(buildProps() as any)).not.toThrow();
+  });
+});
+
+function buildProps() {
+  return {
+    formik: {
+      values: {
+        credentials: 'test',
+        region: 'us-east-1',
+        securityGroups: [],
+        vpcId: 'vpc-1',
+      },
+      setFieldValue: jasmine.createSpy('setFieldValue'),
+      validateForm: jasmine.createSpy('validateForm'),
+    },
+    onLoadingChanged: jasmine.createSpy('onLoadingChanged'),
+  };
+}

package/src/loadBalancer/configure/common/SecurityGroups.tsx

@@ -6,7 +6,8 @@ import { combineLatest as observableCombineLatest, Subject } from 'rxjs';
 import { distinctUntilChanged, map, mergeMap, switchMap, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 
 import type { ISecurityGroup, IWizardPageComponent } from '@spinnaker/core';
-import { FirewallLabels, InfrastructureCaches, ReactInjector, Spinner, timestamp } from '@spinnaker/core';
+import { DeckRuntimeContext, FirewallLabels, InfrastructureCaches, Spinner, timestamp } from '@spinnaker/core';
+
 import { AWSProviderSettings } from '../../../aws.settings';
 import type { IAmazonLoadBalancerUpsertCommand } from '../../../domain';
 
@@ -28,6 +29,9 @@ export interface ISecurityGroupsState {
 export class SecurityGroups
   extends React.Component<ISecurityGroupsProps, ISecurityGroupsState>
   implements IWizardPageComponent<IAmazonLoadBalancerUpsertCommand> {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
   private destroy$ = new Subject<void>();
   private props$ = new Subject<ISecurityGroupsProps>();
   private refresh$ = new Subject<void>();
@@ -42,10 +46,12 @@ export class SecurityGroups
       loaded: false,
       refreshing: false,
       removed: [],
-      refreshTime: InfrastructureCaches.get('securityGroups').getStats().ageMax,
+      refreshTime: this.getRefreshTime(),
     };
   }
 
+  private getRefreshTime = () => InfrastructureCaches.get('securityGroups')?.getStats().ageMax || 0;
+
   public validate(): FormikErrors<IAmazonLoadBalancerUpsertCommand> {
     const { removed } = this.state;
     if (removed && removed.length) {
@@ -97,15 +103,15 @@ export class SecurityGroups
 
   private onRefreshComplete() {
     this.props.onLoadingChanged(false);
-    const refreshTime = InfrastructureCaches.get('securityGroups').getStats().ageMax;
+    const refreshTime = this.getRefreshTime();
     this.setState({ refreshing: false, loaded: true, refreshTime });
   }
 
   public componentDidMount(): void {
     const allSecurityGroups$ = this.refresh$.pipe(
       tap(() => this.onRefreshStart()),
-      switchMap(() => ReactInjector.cacheInitializer.refreshCache('securityGroups')),
-      mergeMap(() => ReactInjector.securityGroupReader.getAllSecurityGroups()),
+      switchMap(() => this.context.services.cacheInitializer.refreshCache('securityGroups')),
+      mergeMap(() => this.context.services.securityGroupReader.getAllSecurityGroups()),
       tap(() => this.onRefreshComplete()),
     );
 

package/src/loadBalancer/configure/network/CreateNetworkLoadBalancer.tsx

@@ -2,14 +2,14 @@ import type { FormikErrors } from 'formik';
 import { cloneDeep, every, get } from 'lodash';
 import React from 'react';
 
-import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import type { DeckRuntimeServices, ILoadBalancerModalProps, IRouterInjectedProps } from '@spinnaker/core';
 import {
   AccountService,
   LoadBalancerWriter,
   noop,
-  ReactInjector,
   ReactModal,
   TaskMonitor,
+  withRouter,
   WizardModal,
   WizardPage,
 } from '@spinnaker/core';
@@ -34,8 +34,8 @@ export interface ICreateApplicationLoadBalancerState {
   taskMonitor: TaskMonitor;
 }
 
-export class CreateNetworkLoadBalancer extends React.Component<
-  ICreateNetworkLoadBalancerProps,
+export class CreateNetworkLoadBalancerComponent extends React.Component<
+  ICreateNetworkLoadBalancerProps & IRouterInjectedProps,
   ICreateApplicationLoadBalancerState
 > {
   public static defaultProps: Partial<ICreateNetworkLoadBalancerProps> = {
@@ -44,15 +44,18 @@ export class CreateNetworkLoadBalancer extends React.Component<
   };
 
   private _isUnmounted = false;
-  private refreshUnsubscribe: () => void;
+  private refreshUnsubscribe?: () => void;
   private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
 
-  public static show(props: ICreateNetworkLoadBalancerProps): Promise<IAmazonNetworkLoadBalancerUpsertCommand> {
+  public static show(
+    props: ICreateNetworkLoadBalancerProps,
+    runtimeServices: DeckRuntimeServices,
+  ): Promise<IAmazonNetworkLoadBalancerUpsertCommand> {
     const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
-    return ReactModal.show(CreateNetworkLoadBalancer, props, modalProps);
+    return ReactModal.show(CreateNetworkLoadBalancer, props, modalProps, runtimeServices);
   }
 
-  constructor(props: ICreateNetworkLoadBalancerProps) {
+  constructor(props: ICreateNetworkLoadBalancerProps & IRouterInjectedProps) {
     super(props);
 
     const loadBalancerCommand = props.loadBalancer
@@ -87,7 +90,7 @@ export class CreateNetworkLoadBalancer extends React.Component<
     return certificateId;
   }
 
-  private formatListeners(command: IAmazonNetworkLoadBalancerUpsertCommand): PromiseLike<void> {
+  private formatListeners(command: IAmazonNetworkLoadBalancerUpsertCommand): Promise<void> {
     return AccountService.getAccountDetails(command.credentials).then((account) => {
       command.listeners.forEach((listener) => {
         if (listener.protocol === 'TCP') {
@@ -154,11 +157,12 @@ export class CreateNetworkLoadBalancer extends React.Component<
   }
 
   protected onApplicationRefresh(values: IAmazonNetworkLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
     if (this._isUnmounted) {
       return;
     }
 
-    this.refreshUnsubscribe = undefined;
     this.props.dismissModal();
     this.setState({ taskMonitor: undefined });
     const newStateParams = {
@@ -169,23 +173,24 @@ export class CreateNetworkLoadBalancer extends React.Component<
       provider: 'aws',
     };
 
-    if (!ReactInjector.$state.includes('**.loadBalancerDetails')) {
-      ReactInjector.$state.go('.loadBalancerDetails', newStateParams);
+    if (!this.props.stateService.includes('**.loadBalancerDetails')) {
+      this.props.stateService.go('.loadBalancerDetails', newStateParams);
     } else {
-      ReactInjector.$state.go('^.loadBalancerDetails', newStateParams);
+      this.props.stateService.go('^.loadBalancerDetails', newStateParams);
     }
   }
 
   public componentWillUnmount(): void {
     this._isUnmounted = true;
-    if (this.refreshUnsubscribe) {
-      this.refreshUnsubscribe();
-    }
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
   }
 
   private onTaskComplete(values: IAmazonNetworkLoadBalancerUpsertCommand): void {
+    this.refreshUnsubscribe?.();
+    this.refreshUnsubscribe = undefined;
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(() => this.onApplicationRefresh(values));
     this.props.app.loadBalancers.refresh();
-    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
   }
 
   private submit = (values: IAmazonNetworkLoadBalancerUpsertCommand): void => {
@@ -206,7 +211,7 @@ export class CreateNetworkLoadBalancer extends React.Component<
       const taskMonitor = new TaskMonitor({
         application: app,
         title: `${isNew ? 'Creating' : 'Updating'} your load balancer`,
-        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onDismiss: () => this.props.dismissModal(),
         onTaskComplete: () => this.onTaskComplete(loadBalancerCommandFormatted),
       });
 
@@ -301,3 +306,8 @@ export class CreateNetworkLoadBalancer extends React.Component<
     );
   }
 }
+
+export const CreateNetworkLoadBalancer = Object.assign(
+  withRouter<ICreateNetworkLoadBalancerProps & IRouterInjectedProps>(CreateNetworkLoadBalancerComponent),
+  { show: CreateNetworkLoadBalancerComponent.show },
+);