@spinnaker/cloudrun 2026.2.3 → 2026.3.0

package/src/pipeline/stages/editLoadBalancer/CloudrunEditLoadBalancerStageConfig.tsx

@@ -0,0 +1,245 @@
+import { cloneDeep } from 'lodash';
+import React from 'react';
+
+import type { ILoadBalancer, IStageConfigProps } from '@spinnaker/core';
+import { AccountTag, ReactModal } from '@spinnaker/core';
+
+import { getLoadBalancerCompositeKey } from './CloudrunEditLoadBalancerExecutionDetails';
+import { LoadBalancerMessage } from '../../../common/LoadBalancerMessage';
+import { CloudrunLoadBalancerModal } from '../../../loadBalancer/configure/wizard/CloudrunLoadBalancerModal';
+
+export class CloudrunEditLoadBalancerStageConfig extends React.Component<IStageConfigProps> {
+  public componentDidMount(): void {
+    this.props.updateStage({
+      loadBalancers: this.props.stage.loadBalancers || [],
+      cloudProvider: 'cloudrun',
+    });
+  }
+
+  private addLoadBalancer = (): void => {
+    CloudrunLoadBalancerChoiceModal.show({ application: this.props.application })
+      .then((newLoadBalancer) => {
+        this.props.updateStage({ loadBalancers: [...(this.props.stage.loadBalancers || []), newLoadBalancer] });
+      })
+      .catch(() => undefined);
+  };
+
+  private editLoadBalancer = (index: number): void => {
+    CloudrunLoadBalancerModal.show({
+      app: this.props.application,
+      loadBalancer: cloneDeep(this.props.stage.loadBalancers[index]),
+      isNew: false,
+      forPipelineConfig: true,
+    })
+      .then((updatedLoadBalancer) => {
+        const loadBalancers = [...this.props.stage.loadBalancers];
+        loadBalancers[index] = updatedLoadBalancer;
+        this.props.updateStage({ loadBalancers });
+      })
+      .catch(() => undefined);
+  };
+
+  private removeLoadBalancer = (index: number): void => {
+    const loadBalancers = [...this.props.stage.loadBalancers];
+    loadBalancers.splice(index, 1);
+    this.props.updateStage({ loadBalancers });
+  };
+
+  public render() {
+    const { pipeline, stage } = this.props;
+    if (pipeline.strategy) {
+      return null;
+    }
+    return (
+      <div className="well well-sm clearfix">
+        <div className="row">
+          <div className="col-md-12">
+            <h4 className="text-left">Load Balancers</h4>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-12">
+            <table className="table table-condensed">
+              <thead>
+                <tr>
+                  <th>Account</th>
+                  <th>Name</th>
+                  <th>Region</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(stage.loadBalancers || []).map((loadBalancer: ILoadBalancer, index: number) => (
+                  <tr
+                    key={`${loadBalancer.credentials || loadBalancer.account}:${loadBalancer.name}:${
+                      loadBalancer.region
+                    }`}
+                  >
+                    <td>
+                      <AccountTag account={loadBalancer.credentials || loadBalancer.account} />
+                    </td>
+                    <td>{loadBalancer.name}</td>
+                    <td>{loadBalancer.region}</td>
+                    <td className="condensed-actions">
+                      <button
+                        type="button"
+                        className="btn btn-sm btn-link"
+                        onClick={() => this.editLoadBalancer(index)}
+                      >
+                        <span className="glyphicon glyphicon-edit" title="Edit" />
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-sm btn-link pad-left"
+                        onClick={() => this.removeLoadBalancer(index)}
+                      >
+                        <span className="glyphicon glyphicon-trash" title="Remove" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={8}>
+                    <button type="button" className="btn btn-block btn-sm add-new" onClick={this.addLoadBalancer}>
+                      <span className="glyphicon glyphicon-plus-sign" /> Add load balancer
+                    </button>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+interface ICloudrunLoadBalancerChoiceModalProps {
+  application: IStageConfigProps['application'];
+  closeModal?: (loadBalancer: ILoadBalancer) => void;
+  dismissModal?: () => void;
+}
+
+interface ICloudrunLoadBalancerChoiceModalState {
+  loading: boolean;
+  loadBalancers: ILoadBalancer[];
+  selectedLoadBalancer?: ILoadBalancer;
+}
+
+export class CloudrunLoadBalancerChoiceModal extends React.Component<
+  ICloudrunLoadBalancerChoiceModalProps,
+  ICloudrunLoadBalancerChoiceModalState
+> {
+  public static show(props: ICloudrunLoadBalancerChoiceModalProps): Promise<ILoadBalancer> {
+    return ReactModal.show(CloudrunLoadBalancerChoiceModal, props);
+  }
+
+  private mounted = false;
+
+  public state: ICloudrunLoadBalancerChoiceModalState = { loading: true, loadBalancers: [] };
+
+  public componentDidMount(): void {
+    this.mounted = true;
+    this.props.application.loadBalancers
+      .ready()
+      .then(() => {
+        if (!this.mounted) {
+          return;
+        }
+        const loadBalancers = (this.props.application.loadBalancers.data as ILoadBalancer[]).filter(
+          (candidate) => candidate.cloudProvider === 'cloudrun',
+        );
+        this.setState({ loadBalancers, selectedLoadBalancer: loadBalancers[0], loading: false });
+      })
+      .catch(() => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+        }
+      });
+  }
+
+  public componentWillUnmount(): void {
+    this.mounted = false;
+  }
+
+  private submit = (): void => {
+    CloudrunLoadBalancerModal.show({
+      app: this.props.application,
+      loadBalancer: cloneDeep(this.state.selectedLoadBalancer),
+      isNew: false,
+      forPipelineConfig: true,
+    })
+      .then(this.props.closeModal)
+      .catch(() => undefined);
+  };
+
+  public render() {
+    const { dismissModal } = this.props;
+    const { loading, loadBalancers, selectedLoadBalancer } = this.state;
+    return (
+      <div>
+        <div className="modal-header">
+          <button type="button" className="close" onClick={dismissModal}>
+            <span>&times;</span>
+          </button>
+          <h4 className="modal-title">Select Load Balancer</h4>
+        </div>
+        <div className="modal-body">
+          {loading && (
+            <div style={{ height: 200 }} className="horizontal center middle">
+              Loading...
+            </div>
+          )}
+          {!loading && loadBalancers.length === 0 && <LoadBalancerMessage showCreateMessage={true} />}
+          {!loading && loadBalancers.length > 0 && (
+            <div className="form-horizontal">
+              <div className="form-group">
+                <div className="col-md-3 sm-label-right">
+                  <b>Load Balancer</b>
+                </div>
+                <div className="col-md-7">
+                  <select
+                    className="form-control input-sm"
+                    value={getLoadBalancerCompositeKey(selectedLoadBalancer)}
+                    onChange={(event) =>
+                      this.setState({
+                        selectedLoadBalancer: loadBalancers.find(
+                          (loadBalancer) => getLoadBalancerCompositeKey(loadBalancer) === event.target.value,
+                        ),
+                      })
+                    }
+                  >
+                    {loadBalancers.map((loadBalancer) => (
+                      <option
+                        key={getLoadBalancerCompositeKey(loadBalancer)}
+                        value={getLoadBalancerCompositeKey(loadBalancer)}
+                      >
+                        {getLoadBalancerOptionLabel(loadBalancer)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="modal-footer">
+          <button type="button" className="btn btn-default" onClick={dismissModal}>
+            Cancel
+          </button>
+          {loadBalancers.length > 0 && (
+            <button type="button" className="btn btn-primary" onClick={this.submit}>
+              <span className="far fa-check-circle" /> Edit
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export function getLoadBalancerOptionLabel(loadBalancer: ILoadBalancer): string {
+  return [loadBalancer.account, loadBalancer.name, loadBalancer.region].filter(Boolean).join(' ');
+}

package/src/pipeline/stages/editLoadBalancer/cloudrunEditLoadBalancerStage.spec.ts

@@ -0,0 +1,205 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { BehaviorSubject } from 'rxjs';
+
+import { ExecutionDetailsTasks } from '@spinnaker/core';
+
+import {
+  CloudrunEditLoadBalancerExecutionDetails,
+  getLoadBalancerCompositeKey,
+} from './CloudrunEditLoadBalancerExecutionDetails';
+import {
+  CloudrunEditLoadBalancerStageConfig,
+  CloudrunLoadBalancerChoiceModal,
+  getLoadBalancerOptionLabel,
+} from './CloudrunEditLoadBalancerStageConfig';
+import { CLOUDRUN_EDIT_LOAD_BALANCER_STAGE_CONFIG } from './cloudrunEditLoadBalancerStage';
+import { CloudrunLoadBalancerModal } from '../../../loadBalancer/configure/wizard/CloudrunLoadBalancerModal';
+import {
+  findCloudrunLoadBalancer,
+  useCloudrunLoadBalancerDetails,
+} from '../../../loadBalancer/details/useCloudrunLoadBalancerDetails';
+
+describe('Cloud Run edit load balancer stage', () => {
+  function buildChoiceModal(overrides: any = {}) {
+    const props = {
+      application: {
+        loadBalancers: {
+          data: [],
+          ready: jasmine.createSpy('ready').and.returnValue(Promise.resolve()),
+        },
+      },
+      closeModal: jasmine.createSpy('closeModal'),
+      dismissModal: jasmine.createSpy('dismissModal'),
+      ...overrides,
+    } as any;
+
+    return new CloudrunLoadBalancerChoiceModal(props);
+  }
+
+  it('uses a composite key for load balancer selection', () => {
+    expect(getLoadBalancerCompositeKey({ name: 'default', account: 'test', region: 'us-central1' } as any)).toBe(
+      'default:test:us-central1',
+    );
+    expect(getLoadBalancerCompositeKey({ name: 'default', account: 'prod', region: 'us-central1' } as any)).toBe(
+      'default:prod:us-central1',
+    );
+  });
+
+  it('matches load balancer details by region', () => {
+    const loadBalancers = [
+      { name: 'default', account: 'test', region: 'europe-west1' },
+      { name: 'default', account: 'test', region: 'us-central1' },
+    ] as any;
+
+    expect(
+      findCloudrunLoadBalancer(loadBalancers, {
+        name: 'default',
+        accountId: 'test',
+        region: 'us-central1',
+      } as any),
+    ).toBe(loadBalancers[1]);
+  });
+
+  it('includes region in load balancer option labels', () => {
+    expect(getLoadBalancerOptionLabel({ name: 'default', account: 'test', region: 'us-central1' } as any)).toBe(
+      'test default us-central1',
+    );
+  });
+
+  it('registers React execution details before task details', () => {
+    expect(CLOUDRUN_EDIT_LOAD_BALANCER_STAGE_CONFIG.executionDetailsSections).toEqual([
+      CloudrunEditLoadBalancerExecutionDetails,
+      ExecutionDetailsTasks,
+    ]);
+  });
+
+  it('stops loading when load balancers fail to load', async () => {
+    const modal = buildChoiceModal({
+      application: {
+        loadBalancers: {
+          data: [],
+          ready: jasmine.createSpy('ready').and.returnValue(Promise.reject(new Error('load failed'))),
+        },
+      },
+    });
+    spyOn(modal, 'setState');
+
+    modal.componentDidMount();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(modal.setState).toHaveBeenCalledWith({ loading: false });
+  });
+
+  it('does not update load balancer choices after unmount', async () => {
+    let resolveReady: () => void;
+    const ready = new Promise<void>((resolve) => {
+      resolveReady = resolve;
+    });
+    const modal = buildChoiceModal({
+      application: {
+        loadBalancers: {
+          data: [{ name: 'default', account: 'test', region: 'us-central1', cloudProvider: 'cloudrun' }],
+          ready: jasmine.createSpy('ready').and.returnValue(ready),
+        },
+      },
+    });
+    spyOn(modal, 'setState');
+
+    modal.componentDidMount();
+    (modal as any).componentWillUnmount?.();
+    resolveReady!();
+    await ready;
+    await Promise.resolve();
+
+    expect(modal.setState).not.toHaveBeenCalled();
+  });
+
+  it('handles dismissal of the load balancer edit modal', () => {
+    const catchSpy = jasmine.createSpy('catch');
+    const modalResult = { then: jasmine.createSpy('then').and.returnValue({ catch: catchSpy }) };
+    spyOn(CloudrunLoadBalancerModal, 'show').and.returnValue(modalResult as any);
+    const modal = buildChoiceModal();
+    modal.state = { ...modal.state, selectedLoadBalancer: { name: 'default' } as any };
+
+    (modal as any).submit();
+
+    expect(catchSpy).toHaveBeenCalled();
+  });
+
+  it('handles dismissal of the load balancer choice modal when adding to a stage', () => {
+    const catchSpy = jasmine.createSpy('catch');
+    const modalResult = { then: jasmine.createSpy('then').and.returnValue({ catch: catchSpy }) };
+    spyOn(CloudrunLoadBalancerChoiceModal, 'show').and.returnValue(modalResult as any);
+    const stageConfig = new CloudrunEditLoadBalancerStageConfig({
+      application: {},
+      pipeline: {},
+      stage: { loadBalancers: [] },
+      updateStage: jasmine.createSpy('updateStage'),
+    } as any);
+
+    (stageConfig as any).addLoadBalancer();
+
+    expect(catchSpy).toHaveBeenCalled();
+  });
+
+  it('handles dismissal of the load balancer edit modal when editing a stage load balancer', () => {
+    const catchSpy = jasmine.createSpy('catch');
+    const modalResult = { then: jasmine.createSpy('then').and.returnValue({ catch: catchSpy }) };
+    spyOn(CloudrunLoadBalancerModal, 'show').and.returnValue(modalResult as any);
+    const stageConfig = new CloudrunEditLoadBalancerStageConfig({
+      application: {},
+      pipeline: {},
+      stage: { loadBalancers: [{ name: 'default' }] },
+      updateStage: jasmine.createSpy('updateStage'),
+    } as any);
+
+    (stageConfig as any).editLoadBalancer(0);
+
+    expect(catchSpy).toHaveBeenCalled();
+  });
+
+  it('updates details when application load balancer data refreshes', async () => {
+    const firstLoadBalancer = { name: 'default', account: 'test', region: 'us-central1', image: 'old' };
+    const refreshedLoadBalancer = { name: 'default', account: 'test', region: 'us-central1', image: 'new' };
+    const status$ = new BehaviorSubject({
+      status: 'FETCHED',
+      loaded: true,
+      lastRefresh: 1,
+      data: [firstLoadBalancer],
+    });
+    const app = {
+      getDataSource: jasmine.createSpy('getDataSource').and.returnValue({
+        status$,
+        refresh: jasmine.createSpy('refresh'),
+      }),
+      loadBalancers: {
+        data: [firstLoadBalancer],
+        ready: jasmine.createSpy('ready').and.returnValue(Promise.resolve()),
+      },
+    } as any;
+    const onChange = jasmine.createSpy('onChange');
+    const loadBalancerParams = { name: 'default', accountId: 'test', region: 'us-central1' } as any;
+
+    function TestComponent() {
+      const details = useCloudrunLoadBalancerDetails({
+        app,
+        loadBalancerParams,
+        autoClose: jasmine.createSpy(),
+      } as any);
+      React.useEffect(() => onChange(details), [details.data, details.loading, details.error]);
+      return null;
+    }
+
+    const wrapper = mount(React.createElement(TestComponent));
+    await Promise.resolve();
+    wrapper.setProps({});
+
+    app.loadBalancers.data = [refreshedLoadBalancer];
+    status$.next({ status: 'FETCHED', loaded: true, lastRefresh: 2, data: [refreshedLoadBalancer] });
+    wrapper.setProps({});
+
+    expect(onChange.calls.mostRecent().args[0].data).toBe(refreshedLoadBalancer);
+  });
+});

package/src/pipeline/stages/editLoadBalancer/cloudrunEditLoadBalancerStage.ts

@@ -1,74 +1,17 @@
-import type { IController } from 'angular';
-import { module } from 'angular';
-import type { IModalService } from 'angular-ui-bootstrap';
-import { cloneDeep } from 'lodash';
+import type { IStageTypeConfig } from '@spinnaker/core';
+import { ExecutionDetailsTasks, Registry } from '@spinnaker/core';
 
-import type { ILoadBalancer } from '@spinnaker/core';
-import { CloudProviderRegistry, Registry } from '@spinnaker/core';
+import { CloudrunEditLoadBalancerExecutionDetails } from './CloudrunEditLoadBalancerExecutionDetails';
+import { CloudrunEditLoadBalancerStageConfig } from './CloudrunEditLoadBalancerStageConfig';
 
-import { CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL } from './loadBalancerChoice.modal.controller';
+export const CLOUDRUN_EDIT_LOAD_BALANCER_STAGE_CONFIG: IStageTypeConfig = {
+  label: 'Edit Load Balancer (Cloud Run)',
+  description: 'Edits a load balancer',
+  key: 'upsertCloudrunLoadBalancers',
+  cloudProvider: 'cloudrun',
+  component: CloudrunEditLoadBalancerStageConfig,
+  executionDetailsSections: [CloudrunEditLoadBalancerExecutionDetails, ExecutionDetailsTasks],
+  validators: [],
+};
 
-class CloudrunEditLoadBalancerStageCtrl implements IController {
-  public static $inject = ['$scope', '$uibModal'];
-  constructor(public $scope: any, private $uibModal: IModalService) {
-    $scope.stage.loadBalancers = $scope.stage.loadBalancers || [];
-    $scope.stage.cloudProvider = 'cloudrun';
-  }
-
-  public addLoadBalancer(): void {
-    this.$uibModal
-      .open({
-        templateUrl: require('./loadBalancerChoice.modal.html'),
-        controller: `cloudrunLoadBalancerChoiceModelCtrl as ctrl`,
-        resolve: {
-          application: () => this.$scope.application,
-        },
-      })
-      .result.then((newLoadBalancer: ILoadBalancer) => {
-        this.$scope.stage.loadBalancers.push(newLoadBalancer);
-      })
-      .catch(() => {});
-  }
-
-  public editLoadBalancer(index: number) {
-    const config = CloudProviderRegistry.getValue('cloudrun', 'loadBalancer');
-    this.$uibModal
-      .open({
-        templateUrl: config.createLoadBalancerTemplateUrl,
-        controller: `${config.createLoadBalancerController} as ctrl`,
-        size: 'lg',
-        resolve: {
-          application: () => this.$scope.application,
-          loadBalancer: () => cloneDeep(this.$scope.stage.loadBalancers[index]),
-          isNew: () => false,
-          forPipelineConfig: () => true,
-        },
-      })
-      .result.then((updatedLoadBalancer: ILoadBalancer) => {
-        this.$scope.stage.loadBalancers[index] = updatedLoadBalancer;
-      })
-      .catch(() => {});
-  }
-
-  public removeLoadBalancer(index: number): void {
-    this.$scope.stage.loadBalancers.splice(index, 1);
-  }
-}
-
-export const CLOUDRUN_EDIT_LOAD_BALANCER_STAGE = 'spinnaker.cloudrun.pipeline.stage.editLoadBalancerStage';
-module(CLOUDRUN_EDIT_LOAD_BALANCER_STAGE, [CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      label: 'Edit Load Balancer (Cloud Run)',
-      description: 'Edits a load balancer',
-      key: 'upsertCloudrunLoadBalancers',
-      cloudProvider: 'cloudrun',
-      templateUrl: require('./editLoadBalancerStage.html'),
-      executionDetailsUrl: require('./editLoadBalancerExecutionDetails.html'),
-      executionConfigSections: ['editLoadBalancerConfig', 'taskStatus'],
-      controller: 'cloudrunEditLoadBalancerStageCtrl',
-      controllerAs: 'editLoadBalancerStageCtrl',
-      validators: [],
-    });
-  })
-  .controller('cloudrunEditLoadBalancerStageCtrl', CloudrunEditLoadBalancerStageCtrl);
+Registry.pipeline.registerStage(CLOUDRUN_EDIT_LOAD_BALANCER_STAGE_CONFIG);

package/src/serverGroup/configure/serverGroupCommandBuilder.service.ts

@@ -1,6 +1,4 @@
-import { module } from 'angular';
 import { cloneDeep } from 'lodash';
-import { $q } from 'ngimport';
 
 import type {
   Application,
@@ -91,7 +89,7 @@ const getSubmitButtonLabel = (mode: string): string => {
 
 export class CloudrunV2ServerGroupCommandBuilder {
   // new add servergroup
-  public buildNewServerGroupCommand(app: Application): PromiseLike<ICloudrunServerGroupCommandData> {
+  public buildNewServerGroupCommand(app: Application): Promise<ICloudrunServerGroupCommandData> {
     return CloudrunServerGroupCommandBuilder.buildNewServerGroupCommand(app, 'cloudrun', 'create');
   }
 
@@ -113,7 +111,6 @@ export class CloudrunV2ServerGroupCommandBuilder {
 }
 
 export class CloudrunServerGroupCommandBuilder {
-  public static $inject = ['$q'];
   public static ServerGroupCommandIsValid(command: ICloudrunServerGroupCommand): boolean {
     if (!command.moniker) {
       return false;
@@ -156,7 +153,7 @@ export class CloudrunServerGroupCommandBuilder {
     cluster: CloudrunDeployDescription,
     _stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<ICloudrunServerGroupCommandData> {
+  ): Promise<ICloudrunServerGroupCommandData> {
     return CloudrunServerGroupCommandBuilder.buildNewServerGroupCommand(app, 'cloudrun', 'editPipeline').then(
       (command: ICloudrunServerGroupCommandData) => {
         command = {
@@ -197,14 +194,14 @@ export class CloudrunServerGroupCommandBuilder {
     app: Application,
     sourceAccount: string,
     mode: string,
-  ): PromiseLike<ICloudrunServerGroupCommandData> {
+  ): Promise<ICloudrunServerGroupCommandData> {
     const dataToFetch = {
       accounts: AccountService.getAllAccountDetailsForProvider('cloudrun'),
       artifactAccounts: AccountService.getArtifactAccounts(),
     };
 
-    return $q.all(dataToFetch).then((backingData: { accounts: IAccountDetails[] }) => {
-      const { accounts } = backingData;
+    return Promise.all([dataToFetch.accounts, dataToFetch.artifactAccounts]).then(([accounts, artifactAccounts]) => {
+      const backingData = { accounts, artifactAccounts };
 
       const account = accounts.some((a) => a.name === sourceAccount)
         ? accounts.find((a) => a.name === sourceAccount).name
@@ -245,10 +242,3 @@ export class CloudrunServerGroupCommandBuilder {
     });
   }
 }
-
-export const CLOUDRUN_SERVER_GROUP_COMMAND_BUILDER = 'spinnaker.cloudrun.serverGroup.commandBuilder.service';
-
-module(CLOUDRUN_SERVER_GROUP_COMMAND_BUILDER, []).service(
-  'cloudrunV2ServerGroupCommandBuilder',
-  CloudrunV2ServerGroupCommandBuilder,
-);

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

@@ -1,8 +1,8 @@
 import type { FormikProps } from 'formik';
 import React from 'react';
 
-import type { Application, IAccount, IServerGroup } from '@spinnaker/core';
-import { AccountSelectInput, HelpField, NameUtils, ReactInjector, ServerGroupNamePreview } from '@spinnaker/core';
+import type { Application, IAccount, IRouterInjectedProps, IServerGroup } from '@spinnaker/core';
+import { AccountSelectInput, HelpField, NameUtils, ServerGroupNamePreview, withRouter } from '@spinnaker/core';
 
 import type { ICloudrunServerGroupCommandData } from '../serverGroupCommandBuilder.service';
 
@@ -22,7 +22,7 @@ export interface IServerGroupBasicSettingsState {
   latestServerGroup: IServerGroup;
 }
 
-export function ServerGroupBasicSettings({
+export function ServerGroupBasicSettingsComponent({
   accounts,
   onAccountSelect,
   selectedAccount,
@@ -30,7 +30,8 @@ export function ServerGroupBasicSettings({
   onEnterStack,
   detailsChanged,
   app,
-}: IServerGroupBasicSettingsProps) {
+  stateService,
+}: IServerGroupBasicSettingsProps & IRouterInjectedProps) {
   const { values } = formik;
   const { stack = '', freeFormDetails } = values;
 
@@ -56,11 +57,10 @@ export function ServerGroupBasicSettings({
       serverGroup: latestServerGroup.name,
     };
 
-    const { $state } = ReactInjector;
-    if ($state.is('home.applications.application.insight.clusters')) {
-      $state.go('.serverGroup', params);
+    if (stateService.is('home.applications.application.insight.clusters')) {
+      stateService.go('.serverGroup', params);
     } else {
-      $state.go('^.serverGroup', params);
+      stateService.go('^.serverGroup', params);
     }
   };
 
@@ -119,6 +119,8 @@ export function ServerGroupBasicSettings({
   );
 }
 
+export const ServerGroupBasicSettings = withRouter(ServerGroupBasicSettingsComponent);
+
 export interface IWizardServerGroupBasicSettingsProps {
   formik: FormikProps<ICloudrunServerGroupCommandData>;
   app: Application;