@spinnaker/cloudfoundry 2026.2.2 → 2026.3.0

package/src/pipeline/stages/createServiceBindings/cloudFoundryCreateServiceBindingsStageForm.spec.tsx

@@ -1,20 +1,24 @@
-import { mock } from 'angular';
-import type { IStage } from 'core';
-import { ApplicationModelBuilder, REACT_MODULE, SpinFormik, StageConfigField } from 'core';
-import { mount } from 'enzyme';
+import type { Application, IStage } from 'core';
+import { AccountService, StageConfigField } from 'core';
+import { shallow } from 'enzyme';
 import React from 'react';
 
-import { mockServerGroupDataSourceConfig } from '@spinnaker/mocks';
-
 import { CloudFoundryCreateServiceBindingsStageConfigForm } from './CloudFoundryCreateServiceBindingsStageConfigForm';
 
 describe('<CloudFoundryCreateServiceBindingsStageConfigForm/>', function () {
-  beforeEach(mock.module(REACT_MODULE));
-  beforeEach(mock.inject());
+  const application = {
+    ready: () => Promise.resolve(),
+    getDataSource: () => ({ data: [] }),
+  } as Application;
+
+  beforeEach(() => {
+    spyOn(AccountService, 'listAccounts').and.returnValue(Promise.resolve([]));
+    spyOn(AccountService, 'getRegionsForAccount').and.returnValue(Promise.resolve([]));
+  });
 
   const getProps = () => {
     return {
-      application: ApplicationModelBuilder.createApplicationForTests('my-application', mockServerGroupDataSourceConfig),
+      application,
       pipeline: {
         application: 'my-application',
         id: 'pipeline-id',
@@ -32,19 +36,19 @@ describe('<CloudFoundryCreateServiceBindingsStageConfigForm/>', function () {
     const stage = ({
       serviceBindingRequests: [{ serviceInstanceName: 'service1' }, { serviceInstanceName: 'service2' }],
     } as unknown) as IStage;
+    const formik = {
+      values: stage,
+      setFieldValue: jasmine.createSpy('setFieldValue'),
+    } as any;
 
     const props = getProps();
-    const component = mount(
-      <SpinFormik
-        initialValues={stage}
-        onSubmit={() => null}
-        validate={() => null}
-        render={(formik) => <CloudFoundryCreateServiceBindingsStageConfigForm {...props} formik={formik} />}
-      />,
-    );
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Target').length).toBe(1);
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Restage Required').length).toBe(1);
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Restart Required').length).toBe(1);
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Service Instance Name').length).toBe(2);
+    const component = shallow(<CloudFoundryCreateServiceBindingsStageConfigForm {...props} formik={formik} />);
+
+    expect(component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Target').length).toBe(1);
+    expect(component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Restage Required').length).toBe(1);
+    expect(component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Restart Required').length).toBe(1);
+    expect(
+      component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Service Instance Name').length,
+    ).toBe(2);
   });
 });

package/src/pipeline/stages/deleteServiceBindings/CloudFoundryDeleteServiceBindingsStageConfigForm.tsx

@@ -3,7 +3,7 @@ import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import type { Application, IAccount, IFormikStageConfigInjectedProps, IRegion } from '@spinnaker/core';
-import { AccountService, NgReact, StageConfigField, StageConstants, TextInput } from '@spinnaker/core';
+import { AccountService, StageConfigField, StageConstants, TargetSelect, TextInput } from '@spinnaker/core';
 
 import { AccountRegionClusterSelector } from '../../../presentation/widgets/accountRegionClusterSelector';
 
@@ -96,7 +96,6 @@ export class CloudFoundryDeleteServiceBindingsStageConfigForm extends React.Comp
     const stage = this.props.formik.values;
     const { accounts, application } = this.state;
     const { target } = stage;
-    const { TargetSelect } = NgReact;
 
     return (
       <>

package/src/pipeline/stages/deleteServiceBindings/cloudFoundryDeleteServiceBindingsStageForm.spec.tsx

@@ -1,20 +1,25 @@
-import { mock } from 'angular';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import React from 'react';
 
-import type { IStage } from '@spinnaker/core';
-import { ApplicationModelBuilder, REACT_MODULE, SpinFormik, StageConfigField } from '@spinnaker/core';
-import { mockServerGroupDataSourceConfig } from '@spinnaker/mocks';
+import type { Application, IStage } from '@spinnaker/core';
+import { AccountService, StageConfigField } from '@spinnaker/core';
 
 import { CloudFoundryDeleteServiceBindingsStageConfigForm } from './CloudFoundryDeleteServiceBindingsStageConfigForm';
 
 describe('<CloudFoundryDeleteServiceBindingsStageConfigForm/>', function () {
-  beforeEach(mock.module(REACT_MODULE));
-  beforeEach(mock.inject());
+  const application = {
+    ready: () => Promise.resolve(),
+    getDataSource: () => ({ data: [] }),
+  } as Application;
+
+  beforeEach(() => {
+    spyOn(AccountService, 'listAccounts').and.returnValue(Promise.resolve([]));
+    spyOn(AccountService, 'getRegionsForAccount').and.returnValue(Promise.resolve([]));
+  });
 
   const getProps = () => {
     return {
-      application: ApplicationModelBuilder.createApplicationForTests('my-application', mockServerGroupDataSourceConfig),
+      application,
       pipeline: {
         application: 'my-application',
         id: 'pipeline-id',
@@ -32,18 +37,18 @@ describe('<CloudFoundryDeleteServiceBindingsStageConfigForm/>', function () {
     const stage = ({
       serviceUnbindingRequests: [{ serviceInstanceName: 'service1' }, { serviceInstanceName: 'service2' }],
     } as unknown) as IStage;
+    const formik = {
+      values: stage,
+      setFieldValue: jasmine.createSpy('setFieldValue'),
+    } as any;
 
     const props = getProps();
 
-    const component = mount(
-      <SpinFormik
-        initialValues={stage}
-        onSubmit={() => null}
-        validate={() => null}
-        render={(formik) => <CloudFoundryDeleteServiceBindingsStageConfigForm {...props} formik={formik} />}
-      />,
-    );
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Target').length).toBe(1);
-    expect(component.find(StageConfigField).findWhere((x) => x.text() === 'Service Instance Name').length).toBe(2);
+    const component = shallow(<CloudFoundryDeleteServiceBindingsStageConfigForm {...props} formik={formik} />);
+
+    expect(component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Target').length).toBe(1);
+    expect(
+      component.find(StageConfigField).filterWhere((x) => x.prop('label') === 'Service Instance Name').length,
+    ).toBe(2);
   });
 });

package/src/pipeline/stages/resizeAsg/CloudFoundryResizeAsgStageConfig.tsx

@@ -3,7 +3,7 @@ import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import type { IAccount, IStageConfigProps } from '@spinnaker/core';
-import { AccountService, NgReact, StageConfigField, StageConstants } from '@spinnaker/core';
+import { AccountService, StageConfigField, StageConstants, TargetSelect } from '@spinnaker/core';
 import { AccountRegionClusterSelector } from '../../../presentation';
 
 export interface ICloudFoundryResizeAsgStageConfigState {
@@ -87,7 +87,6 @@ export class CloudFoundryResizeAsgStageConfig extends React.Component<
     const { application, pipeline, stage } = this.props;
     const { capacity, diskQuota, memory, target } = stage;
     const instanceCount = capacity.desired;
-    const { TargetSelect } = NgReact;
     return (
       <div className="cloudfoundry-resize-asg-stage form-horizontal">
         {!pipeline.strategy && (

package/src/pipeline/stages/rollbackCluster/cloudFoundryRollbackClusterStage.module.ts

@@ -10,7 +10,6 @@ Registry.pipeline.registerStage({
   key: 'rollbackCluster',
   cloudProvider: 'cloudfoundry',
   component: CloudFoundryRollbackClusterStageConfig,
-  controller: 'cfRollbackClusterStageCtrl',
   validators: [
     { type: 'requiredField', preventSave: true, fieldName: 'cluster' },
     { type: 'requiredField', preventSave: true, fieldName: 'regions' },

package/src/pipeline/stages/runJob/CloudFoundryRunJobStageConfig.tsx

@@ -3,7 +3,7 @@ import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import type { IAccount, IStageConfigProps } from '@spinnaker/core';
-import { AccountService, NgReact, SpelText, StageConfigField, StageConstants, TextInput } from '@spinnaker/core';
+import { AccountService, SpelText, StageConfigField, StageConstants, TargetSelect, TextInput } from '@spinnaker/core';
 import { AccountRegionClusterSelector } from '../../../presentation';
 
 export interface ICloudFoundryRunTaskStageConfigState {
@@ -49,7 +49,6 @@ export class CloudFoundryRunJobStageConfig extends React.Component<
     const { application, stage } = this.props;
     const { target, jobName, command, logsUrl } = stage;
     const { accounts } = this.state;
-    const { TargetSelect } = NgReact;
 
     return (
       <div className="cloudfoundry-resize-asg-stage form-horizontal">

package/src/pipeline/stages/unshareService/cloudFoundryUnshareServiceStage.module.ts

@@ -11,7 +11,6 @@ Registry.pipeline.registerStage({
   key: 'unshareService',
   cloudProvider: 'cloudfoundry',
   component: CloudFoundryUnshareServiceStageConfig,
-  controller: 'cfUnshareServiceStageCtrl',
   executionDetailsSections: [CloudFoundryUnshareServiceExecutionDetails, ExecutionDetailsTasks],
   supportsCustomTimeout: true,
   validators: [

package/src/presentation/pipeline/stages/CloudFoundryAsgStageConfig.tsx

@@ -3,7 +3,7 @@ import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import type { IAccount, IStageConfigProps } from '@spinnaker/core';
-import { AccountService, NgReact, StageConfigField, StageConstants } from '@spinnaker/core';
+import { AccountService, StageConfigField, StageConstants, TargetSelect } from '@spinnaker/core';
 
 import { AccountRegionClusterSelector } from '../../widgets/accountRegionClusterSelector';
 
@@ -46,7 +46,6 @@ export class CloudFoundryAsgStageConfig extends React.Component<IStageConfigProp
     const { application, pipeline, stage } = this.props;
     const { target } = stage;
     const { accounts } = this.state;
-    const { TargetSelect } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (

package/src/presentation/pipeline/stages/CloudFoundryLoadBalancersStageConfig.tsx

@@ -4,7 +4,7 @@ import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import type { Application, IAccount, IPipeline, IStageConfigProps } from '@spinnaker/core';
-import { AccountService, NgReact, SpinFormik, StageConfigField, StageConstants } from '@spinnaker/core';
+import { AccountService, SpinFormik, StageConfigField, StageConstants, TargetSelect } from '@spinnaker/core';
 
 import { Routes } from '../../forms/serverGroup';
 import { AccountRegionClusterSelector } from '../../widgets/accountRegionClusterSelector';
@@ -76,7 +76,6 @@ export class CloudFoundryLoadBalancersStageConfig extends React.Component<
     const { stage } = this.props;
     const { accounts, application, initialValues, pipeline } = this.state;
     const { target } = stage;
-    const { TargetSelect } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (

package/src/presentation/widgets/accountRegionClusterSelector/AccountRegionClusterSelector.spec.tsx

@@ -1,17 +1,15 @@
-import type { IScope } from 'angular';
-import { mock, noop } from 'angular';
+import type { ReactWrapper, ShallowWrapper } from 'enzyme';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import type { Application, ApplicationDataSource, IMoniker, IServerGroup } from '@spinnaker/core';
-import { ApplicationModelBuilder, REACT_MODULE } from '@spinnaker/core';
+import type { Application, IMoniker, IServerGroup } from '@spinnaker/core';
 
 import type { IAccountRegionClusterSelectorProps } from './AccountRegionClusterSelector';
 import { AccountRegionClusterSelector } from './AccountRegionClusterSelector';
 
 describe('<AccountRegionClusterSelector />', () => {
-  let $scope: IScope;
   let application: Application;
+  const noop = () => {};
 
   function createServerGroup(account: string, cluster: string, name: string, region: string): IServerGroup {
     return {
@@ -26,27 +24,27 @@ describe('<AccountRegionClusterSelector />', () => {
     } as IServerGroup;
   }
 
-  beforeEach(mock.module(REACT_MODULE));
-  beforeEach(
-    mock.inject(($rootScope: IScope) => {
-      $scope = $rootScope.$new();
-      application = ApplicationModelBuilder.createApplicationForTests('app', {
-        key: 'serverGroups',
-        loaded: true,
-        data: [
-          createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-one'),
-          createServerGroup('account-name-two', 'app-stack-detailTwo', 'app', 'region-two'),
-          createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-three'),
-          createServerGroup('account-name-one', 'app-stack-detailThree', 'app', 'region-one'),
-          createServerGroup('account-name-one', 'app-stack-detailFour', 'app', 'region-three'),
-          createServerGroup('account-name-one', 'app-stack-detailFive', 'app', 'region-two'),
-        ],
-        defaultData: [] as IServerGroup[],
-      } as ApplicationDataSource<IServerGroup[]>);
-    }),
-  );
-
-  it('initializes properly with provided component', () => {
+  async function flushComponent(component: ReactWrapper | ShallowWrapper): Promise<void> {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    component.update();
+  }
+
+  beforeEach(() => {
+    const serverGroups = [
+      createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-one'),
+      createServerGroup('account-name-two', 'app-stack-detailTwo', 'app', 'region-two'),
+      createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-three'),
+      createServerGroup('account-name-one', 'app-stack-detailThree', 'app', 'region-one'),
+      createServerGroup('account-name-one', 'app-stack-detailFour', 'app', 'region-three'),
+      createServerGroup('account-name-one', 'app-stack-detailFive', 'app', 'region-two'),
+    ];
+    application = {
+      ready: () => Promise.resolve(),
+      getDataSource: () => ({ data: serverGroups }),
+    } as Application;
+  });
+
+  it('initializes properly with provided component', async () => {
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
       accounts: [
         {
@@ -68,7 +66,7 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = shallow<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-one');
@@ -81,7 +79,7 @@ describe('<AccountRegionClusterSelector />', () => {
     expect(component.state().componentName).toBe('');
   });
 
-  it('retrieves the correct list of regions when account is changed', () => {
+  it('retrieves the correct list of regions when account is changed', async () => {
     let credentials = '';
     let region = 'SHOULD-CHANGE';
     let regions = ['SHOULD-CHANGE'];
@@ -118,7 +116,7 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = mount<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-one');
@@ -132,7 +130,7 @@ describe('<AccountRegionClusterSelector />', () => {
     accountSelectComponent.simulate('mouseDown');
     accountSelectComponent.simulate('change', { target: { value: 'account-name-two' } });
     accountSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(1, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-two');
@@ -143,7 +141,7 @@ describe('<AccountRegionClusterSelector />', () => {
     expect(cluster).toBeUndefined('selected cluster is not cleared');
   });
 
-  it('retrieves the correct list of clusters when the selector is multi-region and the region is changed', () => {
+  it('retrieves the correct list of clusters when the selector is multi-region and the region is changed', async () => {
     let regions: string[] = [];
     let cluster = 'SHOULD-CHANGE';
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
@@ -177,7 +175,7 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = mount<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-one');
@@ -191,7 +189,7 @@ describe('<AccountRegionClusterSelector />', () => {
     accountSelectComponent.simulate('mouseDown');
     accountSelectComponent.simulate('change', { target: { value: 'region-three' } });
     accountSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().clusters.length).toBe(3, 'number of clusters does not match');
     expect(component.state().clusters).toContain('app-stack-detailOne');
@@ -203,7 +201,7 @@ describe('<AccountRegionClusterSelector />', () => {
     expect(regions).toContain('region-three');
   });
 
-  it('retrieves the correct list of clusters on startup and the selector is single-region', () => {
+  it('retrieves the correct list of clusters on startup and the selector is single-region', async () => {
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
       accounts: [
         {
@@ -233,7 +231,7 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = mount<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-one');
@@ -244,7 +242,7 @@ describe('<AccountRegionClusterSelector />', () => {
     expect(component.state().clusters).toContain('app-stack-detailThree');
   });
 
-  it('the cluster value is updated in the component when cluster is changed', () => {
+  it('the cluster value is updated in the component when cluster is changed', async () => {
     let cluster = '';
     let moniker: IMoniker = { app: '' };
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
@@ -287,7 +285,7 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = mount<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
     expect(component.state().availableRegions).toContain('region-one');
@@ -301,13 +299,13 @@ describe('<AccountRegionClusterSelector />', () => {
     clusterSelectComponent.simulate('mouseDown');
     clusterSelectComponent.simulate('change', { target: { value: 'app-stack-detailThree' } });
     clusterSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(cluster).toBe('app-stack-detailThree');
     expect(moniker).toEqual(expectedMoniker);
   });
 
-  it('the cluster value is updated in the component when cluster is changed to freeform value', () => {
+  it('the cluster value is updated in the component when cluster is changed to freeform value', async () => {
     let cluster = '';
     let moniker: IMoniker = { app: '' };
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
@@ -342,20 +340,20 @@ describe('<AccountRegionClusterSelector />', () => {
     const component = mount<AccountRegionClusterSelector>(
       <AccountRegionClusterSelector {...accountRegionClusterProps} />,
     );
-    $scope.$digest();
+    await flushComponent(component);
 
     const clusterSelectComponent = component.find('Select[name="newCluster"] .Select-control input');
     clusterSelectComponent.simulate('mouseDown');
     clusterSelectComponent.simulate('change', { target: { value: 'app-stack-freeform' } });
     clusterSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(cluster).toBe('app-stack-freeform');
     expect(moniker).toBeUndefined();
     expect(component.state().clusters).toContain('app-stack-freeform');
   });
 
-  it('initialize with form names', () => {
+  it('initialize with form names', async () => {
     const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
       accounts: [
         {
@@ -376,7 +374,7 @@ describe('<AccountRegionClusterSelector />', () => {
     };
 
     const component = shallow(<AccountRegionClusterSelector {...accountRegionClusterProps} />);
-    $scope.$digest();
+    await flushComponent(component);
 
     expect(component.find('Select[name="form.credentials"]').length).toBe(1, 'select for account not found');
     expect(component.find('Select[name="form.regions"]').length).toBe(1, 'select for regions not found');

package/src/routerActions.spec.tsx

@@ -0,0 +1,76 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ConfirmationModalService, ServerGroupWarningMessageService } from '@spinnaker/core';
+
+import { CloudFoundryInstanceActionsComponent } from './instance/details/CloudFoundryInstanceActions';
+import { CloudFoundryLoadBalancerActionsComponent } from './loadBalancer/details/CloudFoundryLoadBalancerActions';
+import { CloudFoundryServerGroupActionsComponent } from './serverGroup/details/cloudFoundryServerGroupActions';
+
+describe('Cloud Foundry routed actions', () => {
+  const routerProps = (includes: jasmine.Spy, go: jasmine.Spy) =>
+    ({ router: {}, stateParams: {}, stateService: { go, includes } } as any);
+
+  it('closes instance details through the injected state service', () => {
+    const includes = jasmine.createSpy('includes').and.returnValue(true);
+    const go = jasmine.createSpy('go');
+    const confirm = spyOn(ConfirmationModalService, 'confirm');
+    const component = shallow(
+      <CloudFoundryInstanceActionsComponent
+        {...routerProps(includes, go)}
+        application={{} as any}
+        instance={{ account: 'test', name: 'instance-id' } as any}
+      />,
+    );
+
+    (component.instance() as any).terminateInstance();
+    confirm.calls.mostRecent().args[0].taskMonitorConfig.onTaskComplete();
+
+    expect(go).toHaveBeenCalledWith('^');
+  });
+
+  it('closes load balancer details through the injected state service', () => {
+    const includes = jasmine.createSpy('includes').and.returnValue(true);
+    const go = jasmine.createSpy('go');
+    const confirm = spyOn(ConfirmationModalService, 'confirm');
+    const component = shallow(
+      <CloudFoundryLoadBalancerActionsComponent
+        {...routerProps(includes, go)}
+        application={{} as any}
+        loadBalancer={{ account: 'test', name: 'route', region: 'test' } as any}
+      />,
+    );
+
+    (component.instance() as any).deleteLoadBalancer();
+    confirm.calls.mostRecent().args[0].taskMonitorConfig.onTaskComplete();
+
+    expect(go).toHaveBeenCalledWith('^');
+  });
+
+  it('closes server group details through the injected state service', () => {
+    const includes = jasmine.createSpy('includes').and.returnValue(true);
+    const go = jasmine.createSpy('go');
+    spyOn(ServerGroupWarningMessageService, 'addDestroyWarningMessage');
+    const confirm = spyOn(ConfirmationModalService, 'confirm');
+    const component = shallow(
+      <CloudFoundryServerGroupActionsComponent
+        {...routerProps(includes, go)}
+        app={{ attributes: {} } as any}
+        serverGroup={
+          {
+            account: 'test',
+            cloudProvider: 'cloudfoundry',
+            moniker: { cluster: 'app' },
+            name: 'app-v001',
+            region: 'test',
+          } as any
+        }
+      />,
+    );
+
+    (component.instance() as any).destroyServerGroup();
+    confirm.calls.mostRecent().args[0].taskMonitorConfig.onTaskComplete();
+
+    expect(go).toHaveBeenCalledWith('^');
+  });
+});

package/src/serverGroup/configure/serverGroupCommandBuilderShim.service.cf.ts

@@ -1,5 +1,3 @@
-import type { IQService } from 'angular';
-
 import type { Application, IPipeline, IStage } from '@spinnaker/core';
 import type { ICloudFoundryApplication, ICloudFoundryServerGroup } from '../../domain';
 
@@ -10,22 +8,16 @@ import type {
 } from './serverGroupConfigurationModel.cf';
 
 export class CloudFoundryServerGroupCommandBuilderShim {
-  public static $inject = ['$q'];
-  constructor(private $q: IQService) {}
-
-  public buildNewServerGroupCommand(
-    app: Application,
-    defaults: any,
-  ): PromiseLike<ICloudFoundryCreateServerGroupCommand> {
-    return this.$q.when(CloudFoundryServerGroupCommandBuilder.buildNewServerGroupCommand(app, defaults));
+  public buildNewServerGroupCommand(app: Application, defaults: any): Promise<ICloudFoundryCreateServerGroupCommand> {
+    return Promise.resolve(CloudFoundryServerGroupCommandBuilder.buildNewServerGroupCommand(app, defaults));
   }
 
   public buildServerGroupCommandFromExisting(
     app: Application,
     serverGroup: ICloudFoundryServerGroup,
     mode = 'clone',
-  ): PromiseLike<ICloudFoundryCreateServerGroupCommand> {
-    return this.$q.when(
+  ): Promise<ICloudFoundryCreateServerGroupCommand> {
+    return Promise.resolve(
       CloudFoundryServerGroupCommandBuilder.buildServerGroupCommandFromExisting(app, serverGroup, mode),
     );
   }
@@ -33,8 +25,10 @@ export class CloudFoundryServerGroupCommandBuilderShim {
   public buildNewServerGroupCommandForPipeline(
     stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<ICloudFoundryCreateServerGroupCommand> {
-    return this.$q.when(CloudFoundryServerGroupCommandBuilder.buildNewServerGroupCommandForPipeline(stage, pipeline));
+  ): Promise<ICloudFoundryCreateServerGroupCommand> {
+    return Promise.resolve(
+      CloudFoundryServerGroupCommandBuilder.buildNewServerGroupCommandForPipeline(stage, pipeline),
+    );
   }
 
   public buildServerGroupCommandFromPipeline(
@@ -42,8 +36,8 @@ export class CloudFoundryServerGroupCommandBuilderShim {
     originalCluster: ICloudFoundryDeployConfiguration,
     stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<ICloudFoundryCreateServerGroupCommand> {
-    return this.$q.when(
+  ): Promise<ICloudFoundryCreateServerGroupCommand> {
+    return Promise.resolve(
       CloudFoundryServerGroupCommandBuilder.buildServerGroupCommandFromPipeline(
         application,
         originalCluster,
@@ -56,8 +50,8 @@ export class CloudFoundryServerGroupCommandBuilderShim {
   public buildCloneServerGroupCommandFromPipeline(
     stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<ICloudFoundryCreateServerGroupCommand> {
-    return this.$q.when(
+  ): Promise<ICloudFoundryCreateServerGroupCommand> {
+    return Promise.resolve(
       CloudFoundryServerGroupCommandBuilder.buildCloneServerGroupCommandFromPipeline(stage, pipeline),
     );
   }

package/src/serverGroup/configure/wizard/CreateServerGroupModal.tsx

@@ -1,8 +1,8 @@
 import { get } from 'lodash';
 import React from 'react';
 
-import type { Application, IModalComponentProps, IPipeline, IStage } from '@spinnaker/core';
-import { noop, ReactInjector, ReactModal, TaskMonitor, WizardModal, WizardPage } from '@spinnaker/core';
+import type { Application, DeckRuntimeServices, IModalComponentProps, IPipeline, IStage } from '@spinnaker/core';
+import { DeckRuntimeContext, noop, ReactModal, TaskMonitor, WizardModal, WizardPage } from '@spinnaker/core';
 
 import { ServerGroupTemplateSelection } from './ServerGroupTemplateSelection';
 import type { ICloudFoundryServerGroup } from '../../../domain';
@@ -36,14 +36,20 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
   ICloudFoundryCreateServerGroupProps,
   ICloudFoundryCreateServerGroupState
 > {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
   public static defaultProps: Partial<ICloudFoundryCreateServerGroupProps> = {
     closeModal: noop,
     dismissModal: noop,
   };
 
-  public static show(props: ICloudFoundryCreateServerGroupProps): Promise<ICloudFoundryCreateServerGroupCommand> {
+  public static show(
+    props: ICloudFoundryCreateServerGroupProps,
+    runtimeServices: DeckRuntimeServices,
+  ): Promise<ICloudFoundryCreateServerGroupCommand> {
     const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
-    return ReactModal.show(CloudFoundryCreateServerGroupModal, props, modalProps);
+    return ReactModal.show(CloudFoundryCreateServerGroupModal, props, modalProps, runtimeServices);
   }
 
   constructor(props: ICloudFoundryCreateServerGroupProps) {
@@ -60,7 +66,7 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
       taskMonitor: new TaskMonitor({
         application: props.application,
         title: 'Creating your server group',
-        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onDismiss: () => this.props.dismissModal(),
         onTaskComplete: this.onTaskComplete,
       }),
     };
@@ -89,11 +95,11 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
       this.props.closeModal && this.props.closeModal(command);
     } else if (command.viewState.mode === 'clone') {
       this.state.taskMonitor.submit(() =>
-        ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application),
+        this.context.services.serverGroupWriter.cloneServerGroup(command, this.props.application),
       );
     } else {
       this.state.taskMonitor.submit(() =>
-        ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application),
+        this.context.services.serverGroupWriter.cloneServerGroup(command, this.props.application),
       );
     }
   };