@spinnaker/core 2026.2.3 → 2026.3.0

package/src/serverGroup/details/MultipleServerGroupsDetails.spec.tsx

@@ -0,0 +1,176 @@
+import { hashLocationPlugin, servicesPlugin, UIRouterContext, UIRouterReact, UIViewContext } from '@uirouter/react';
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { AccountService } from '../../account';
+import { DeckRuntimeContext } from '../../bootstrap/DeckRuntimeContext';
+import { ProviderSelectionService } from '../../cloudProvider/providerSelection/ProviderSelectionService';
+import { ConfirmationModalService } from '../../confirmationModal';
+import { ClusterState } from '../../state';
+import { MultipleServerGroupsDetails } from './MultipleServerGroupsDetails';
+
+describe('<MultipleServerGroupsDetails />', () => {
+  let previousMultiselectModel: any;
+  let serverGroupWriter: any;
+  let router: UIRouterReact;
+
+  const app = {
+    serverGroups: {
+      data: [
+        {
+          account: 'prod',
+          instanceCounts: { down: 1, total: 3, up: 2 },
+          isDisabled: false,
+          name: 'app-v001',
+          provider: 'aws',
+          region: 'us-west-2',
+          type: 'aws',
+        },
+      ],
+      onRefresh: jasmine.createSpy('onRefresh').and.returnValue(() => null),
+    },
+  } as any;
+
+  const selectedServerGroup = {
+    account: 'prod',
+    name: 'app-v001',
+    provider: 'aws',
+    region: 'us-west-2',
+    type: 'aws',
+  } as any;
+
+  const mountDetails = () =>
+    mount(
+      <UIRouterContext.Provider value={router}>
+        <UIViewContext.Provider
+          value={{
+            fqn: 'application.insight.multipleServerGroups',
+            context: router.stateRegistry.get('application.insight.multipleServerGroups') as any,
+          }}
+        >
+          <DeckRuntimeContext.Provider
+            value={
+              {
+                services: {
+                  providerServiceDelegate: {
+                    getDelegate: () => ({
+                      destroyServerGroup: (serverGroup: any) => ({ mixinName: serverGroup.name }),
+                    }),
+                    hasDelegate: () => true,
+                  },
+                  serverGroupWriter,
+                },
+              } as any
+            }
+          >
+            <MultipleServerGroupsDetails app={app} />
+          </DeckRuntimeContext.Provider>
+        </UIViewContext.Provider>
+      </UIRouterContext.Provider>,
+    );
+
+  beforeEach(() => {
+    router = new UIRouterReact();
+    router.plugin(servicesPlugin);
+    router.plugin(hashLocationPlugin);
+    ['application', 'application.insight', 'application.insight.multipleServerGroups'].forEach((name) => {
+      router.stateRegistry.register({ name, url: `/${name.split('.').pop()}` } as any);
+    });
+  });
+
+  beforeEach(() => {
+    previousMultiselectModel = ClusterState.multiselectModel;
+    ClusterState.multiselectModel = {
+      clearAllServerGroups: () => null,
+      serverGroups: [selectedServerGroup],
+      serverGroupsStream: { subscribe: () => null },
+    } as any;
+
+    serverGroupWriter = {
+      destroyServerGroup: jasmine.createSpy('destroyServerGroup').and.returnValue(Promise.resolve({})),
+    };
+
+    spyOn(AccountService, 'challengeDestructiveActions').and.returnValue(Promise.resolve(false));
+    spyOn(ProviderSelectionService, 'isDisabled').and.returnValue(Promise.resolve(false));
+    spyOn(ConfirmationModalService, 'confirm').and.stub();
+    spyOn(ClusterState.multiselectModel.serverGroupsStream, 'subscribe').and.callFake((callback: any) => {
+      callback();
+      return { unsubscribe: jasmine.createSpy('unsubscribe') } as any;
+    });
+    spyOn(ClusterState.multiselectModel, 'clearAllServerGroups').and.stub();
+  });
+
+  afterEach(() => {
+    ClusterState.multiselectModel = previousMultiselectModel;
+    router.dispose();
+  });
+
+  it('renders selected server group details', () => {
+    const wrapper = mountDetails();
+
+    expect(wrapper.find('.details-panel h3').text()).toContain('1 Server Group');
+    expect(wrapper.text()).toContain('app-v001');
+    expect(wrapper.text()).toContain('prod');
+    expect(wrapper.text()).toContain('us-west-2');
+    expect(wrapper.find('.multiple-server-group').length).toBe(1);
+    expect(wrapper.find('multiple-server-group').exists()).toBe(false);
+    expect(wrapper.find('.instance-health-counts').text()).toContain('2');
+    expect(wrapper.find('.instance-health-counts').text()).toContain('1');
+
+    wrapper.unmount();
+  });
+
+  it('opens destroy confirmation using legacy task monitor semantics', () => {
+    const wrapper = mountDetails();
+
+    wrapper.find('button.dropdown-toggle').simulate('click');
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Destroy')
+      .simulate('click');
+
+    expect(ConfirmationModalService.confirm).toHaveBeenCalledWith(
+      jasmine.objectContaining({
+        askForReason: true,
+        buttonText: 'Destroy 1 server group',
+        textToVerify: '1',
+      }),
+    );
+    const confirmation = (ConfirmationModalService.confirm as jasmine.Spy).calls.mostRecent().args[0];
+
+    confirmation.taskMonitorConfigs[0].submitMethod({ reason: 'user reason' });
+
+    expect(serverGroupWriter.destroyServerGroup).toHaveBeenCalledWith(
+      jasmine.objectContaining({
+        account: 'prod',
+        name: 'app-v001',
+        region: 'us-west-2',
+      }),
+      app,
+      jasmine.objectContaining({
+        mixinName: 'app-v001',
+        reason: 'user reason',
+      }),
+    );
+
+    wrapper.unmount();
+  });
+
+  it('clears server group multiselect on unmount only when more than one group is selected', () => {
+    const wrapper = mountDetails();
+
+    wrapper.unmount();
+
+    expect(ClusterState.multiselectModel.clearAllServerGroups).not.toHaveBeenCalled();
+
+    ClusterState.multiselectModel.serverGroups = [
+      selectedServerGroup,
+      { ...selectedServerGroup, name: 'app-v002' },
+    ] as any;
+    const multiWrapper = mountDetails();
+
+    multiWrapper.unmount();
+
+    expect(ClusterState.multiselectModel.clearAllServerGroups).toHaveBeenCalled();
+  });
+});

package/src/serverGroup/details/MultipleServerGroupsDetails.tsx

@@ -0,0 +1,213 @@
+import { UISref } from '@uirouter/react';
+import React from 'react';
+import { Dropdown, MenuItem } from 'react-bootstrap';
+
+import { AccountTag } from '../../account';
+import type { Application } from '../../application';
+import { useDeckRuntimeServices } from '../../bootstrap/DeckRuntimeContext';
+import { CloudProviderLogo } from '../../cloudProvider';
+import { ProviderSelectionService } from '../../cloudProvider/providerSelection/ProviderSelectionService';
+import type { ProviderServiceDelegate } from '../../cloudProvider/providerService.delegate';
+import { ConfirmationModalService } from '../../confirmationModal';
+import type { IServerGroup } from '../../domain';
+import { HealthCounts } from '../../healthCounts';
+import { ClusterState } from '../../state';
+
+import './multipleServerGroup.component.less';
+
+export interface IMultipleServerGroupsDetailsProps {
+  app: Application;
+}
+
+type ServerGroupAction = 'destroyServerGroup' | 'disableServerGroup' | 'enableServerGroup';
+
+interface IConfirmationVerbs {
+  futurePerfect: string;
+  presentContinuous: string;
+  simplePresent: string;
+}
+
+function getProvider(serverGroup: IServerGroup): string {
+  return serverGroup.provider || serverGroup.type;
+}
+
+function isServerGroupDisabled(serverGroup: IServerGroup): boolean {
+  return !!serverGroup.disabled;
+}
+
+function getDescriptor(serverGroups: IServerGroup[]): string {
+  return `${serverGroups.length} server group${serverGroups.length !== 1 ? 's' : ''}`;
+}
+
+function getSelectedServerGroups(app: Application): IServerGroup[] {
+  return ClusterState.multiselectModel.serverGroups.map((multiselectGroup) => {
+    const group = ({ ...multiselectGroup } as unknown) as IServerGroup;
+    const match = app.serverGroups.data.find(
+      (check: IServerGroup) =>
+        check.name === group.name && check.account === group.account && check.region === group.region,
+    );
+
+    if (match) {
+      group.instanceCounts = { ...match.instanceCounts };
+      group.disabled = match.isDisabled;
+    }
+
+    return group;
+  });
+}
+
+function getMixinParams(
+  providerServiceDelegate: ProviderServiceDelegate,
+  submitMethodName: ServerGroupAction,
+  serverGroup: IServerGroup,
+): any {
+  const provider = getProvider(serverGroup);
+  const providerParamsMixin = providerServiceDelegate.hasDelegate(provider, 'serverGroup.paramsMixin')
+    ? providerServiceDelegate.getDelegate<any>(provider, 'serverGroup.paramsMixin')
+    : {};
+  const mixinParamsFactory = providerParamsMixin[submitMethodName];
+
+  return mixinParamsFactory === undefined ? {} : mixinParamsFactory(serverGroup);
+}
+
+export function MultipleServerGroupsDetails({ app }: IMultipleServerGroupsDetailsProps): JSX.Element {
+  const { providerServiceDelegate, serverGroupWriter } = useDeckRuntimeServices();
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [serverGroups, setServerGroups] = React.useState<IServerGroup[]>(() => getSelectedServerGroups(app));
+
+  React.useEffect(() => {
+    let active = true;
+    const retrieveServerGroups = () => active && setServerGroups(getSelectedServerGroups(app));
+
+    ProviderSelectionService.isDisabled(app).then((disabled) => active && setIsDisabled(disabled));
+    const multiselectWatcher = ClusterState.multiselectModel.serverGroupsStream.subscribe(retrieveServerGroups);
+    const unsubscribeRefresh = app.serverGroups.onRefresh(retrieveServerGroups);
+    retrieveServerGroups();
+
+    return () => {
+      active = false;
+      if (ClusterState.multiselectModel.serverGroups.length > 1) {
+        ClusterState.multiselectModel.clearAllServerGroups();
+      }
+      multiselectWatcher.unsubscribe();
+      unsubscribeRefresh();
+    };
+  }, [app]);
+
+  const confirm = (submitMethodName: ServerGroupAction, verbs: IConfirmationVerbs, groups = serverGroups) => {
+    const descriptor = getDescriptor(groups);
+    const monitorInterval = groups.length * 1000;
+    const taskMonitorConfigs = groups.map((serverGroup) => {
+      const mixinParams = getMixinParams(providerServiceDelegate, submitMethodName, serverGroup);
+      const writer = serverGroupWriter as any;
+
+      return {
+        application: app,
+        monitorInterval,
+        submitMethod: (params?: any) => writer[submitMethodName](serverGroup, app, { ...params, ...mixinParams }),
+        title: serverGroup.name,
+      };
+    });
+
+    ConfirmationModalService.confirm({
+      askForReason: true,
+      buttonText: `${verbs.simplePresent} ${descriptor}`,
+      header: `Really ${verbs.simplePresent.toLowerCase()} ${descriptor}?`,
+      multiTaskTitle: `${verbs.presentContinuous} ${descriptor}`,
+      taskMonitorConfigs,
+      textToVerify: `${groups.length}`,
+      verificationLabel: `Verify the number of server groups (<span class="verification-text">${
+        groups.length
+      }</span>) to be ${verbs.futurePerfect.toLowerCase()}`,
+    });
+  };
+
+  const destroyServerGroups = () =>
+    confirm('destroyServerGroup', {
+      futurePerfect: 'Destroyed',
+      presentContinuous: 'Destroying',
+      simplePresent: 'Destroy',
+    });
+
+  const disableServerGroups = () =>
+    confirm(
+      'disableServerGroup',
+      {
+        futurePerfect: 'Disabled',
+        presentContinuous: 'Disabling',
+        simplePresent: 'Disable',
+      },
+      serverGroups.filter((group) => !isServerGroupDisabled(group)),
+    );
+
+  const enableServerGroups = () =>
+    confirm(
+      'enableServerGroup',
+      {
+        futurePerfect: 'Enabled',
+        presentContinuous: 'Enabling',
+        simplePresent: 'Enable',
+      },
+      serverGroups.filter(isServerGroupDisabled),
+    );
+
+  const actionLink = (label: string, action: () => void) => (
+    <MenuItem key={label} onClick={action}>
+      {label}
+    </MenuItem>
+  );
+  const canDisable = serverGroups.some((group) => !isServerGroupDisabled(group));
+  const canEnable = serverGroups.some(isServerGroupDisabled);
+
+  return (
+    <div className="details-panel">
+      <div className="header">
+        <div className="close-button">
+          <UISref to="^">
+            <a className="btn btn-link">
+              <span className="glyphicon glyphicon-remove" />
+            </a>
+          </UISref>
+        </div>
+        <div className="header-text">
+          <span className="glyphicon glyphicon-th" />
+          <h3>
+            {serverGroups.length} Server Group{serverGroups.length !== 1 ? 's' : ''}
+          </h3>
+        </div>
+        {!isDisabled && (
+          <div>
+            <div className="actions">
+              <Dropdown className="dropdown" id="multiple-server-groups-actions-dropdown">
+                <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">Actions</Dropdown.Toggle>
+                <Dropdown.Menu className="dropdown-menu">
+                  {actionLink('Destroy', destroyServerGroups)}
+                  {canDisable && actionLink('Disable', disableServerGroups)}
+                  {canEnable && actionLink('Enable', enableServerGroups)}
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="content">
+        {serverGroups.map((serverGroup) => (
+          <section
+            className="multiple-server-group"
+            key={`${serverGroup.account}:${serverGroup.region}:${serverGroup.name}`}
+          >
+            <h5>
+              <div className={`server-group-name ${isServerGroupDisabled(serverGroup) ? 'disabled' : ''}`}>
+                <CloudProviderLogo provider={getProvider(serverGroup)} height="20px" width="20px" /> {serverGroup.name}
+              </div>
+            </h5>
+            <div className="server-group-details">
+              <AccountTag account={serverGroup.account} /> {serverGroup.region}
+              <HealthCounts container={serverGroup.instanceCounts} />
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/serverGroup/details/ServerGroupDetails.tsx

@@ -11,15 +11,21 @@ import { SETTINGS } from '../../config/settings';
 import type { IServerGroup } from '../../domain';
 import { EntityNotifications } from '../../entityTag/notifications/EntityNotifications';
 import { ManagedResourceDetailsIndicator } from '../../managed';
-import { ReactInjector } from '../../reactShims';
+import type { IRouterInjectedProps } from '../../navigation/routerContext';
+import { withRouter } from '../../navigation/routerContext';
 import { timestamp } from '../../utils/timeFormatters';
 import { Spinner } from '../../widgets/spinners/Spinner';
 
-export class ServerGroupDetails extends React.Component<IServerGroupDetailsProps, IServerGroupDetailsState> {
+export class ServerGroupDetailsComponent extends React.Component<
+  IServerGroupDetailsProps & IRouterInjectedProps,
+  IServerGroupDetailsState
+> {
   private destroy$ = new Subject();
+  private detailsRequest$ = new Subject();
+  private detailsRequestGeneration = 0;
   private serverGroupsRefreshUnsubscribe: () => void;
 
-  constructor(props: IServerGroupDetailsProps) {
+  constructor(props: IServerGroupDetailsProps & IRouterInjectedProps) {
     super(props);
 
     this.state = {
@@ -28,38 +34,57 @@ export class ServerGroupDetails extends React.Component<IServerGroupDetailsProps
     };
   }
 
-  private autoClose(): void {
-    ReactInjector.$state.params.allowModalToStayOpen = true;
-    ReactInjector.$state.go('^', null, { location: 'replace' });
+  private loadServerGroup(
+    props: IServerGroupDetailsProps & IRouterInjectedProps,
+    clearCurrentServerGroup = false,
+  ): void {
+    const requestGeneration = ++this.detailsRequestGeneration;
+    this.detailsRequest$.next();
+    if (clearCurrentServerGroup) {
+      this.setState({ loading: true, serverGroup: undefined });
+    }
+    props
+      .detailsGetter(props, () => {
+        if (requestGeneration === this.detailsRequestGeneration) {
+          props.stateService.params.allowModalToStayOpen = true;
+          props.stateService.go('^', null, { location: 'replace' });
+        }
+      })
+      .pipe(takeUntil(this.detailsRequest$), takeUntil(this.destroy$))
+      .subscribe((serverGroup: IServerGroup) => {
+        if (requestGeneration === this.detailsRequestGeneration) {
+          this.setState({ serverGroup, loading: false });
+        }
+      });
   }
 
-  private updateServerGroup = (serverGroup: IServerGroup): void => {
-    this.setState({ serverGroup, loading: false });
-  };
+  private serverGroupIdentityChanged(nextProps: IServerGroupDetailsProps): boolean {
+    const current = this.props.serverGroup;
+    const next = nextProps.serverGroup;
+    return (
+      current.name !== next.name ||
+      current.accountId !== next.accountId ||
+      current.provider !== next.provider ||
+      current.region !== next.region
+    );
+  }
 
   public componentDidMount(): void {
-    this.props
-      .detailsGetter(this.props, this.autoClose)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(this.updateServerGroup);
-    this.serverGroupsRefreshUnsubscribe = this.props.app.serverGroups.onRefresh(null, () => {
-      this.props
-        .detailsGetter(this.props, this.autoClose)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(this.updateServerGroup);
+    this.loadServerGroup(this.props);
+    this.serverGroupsRefreshUnsubscribe = this.props.app.serverGroups.onRefresh(() => {
+      this.loadServerGroup(this.props);
     });
   }
 
-  public componentWillReceiveProps(nextProps: IServerGroupDetailsProps): void {
-    if (nextProps.serverGroup !== this.props.serverGroup) {
-      this.props
-        .detailsGetter(nextProps, this.autoClose)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(this.updateServerGroup);
+  public componentWillReceiveProps(nextProps: IServerGroupDetailsProps & IRouterInjectedProps): void {
+    if (nextProps.detailsGetter !== this.props.detailsGetter || this.serverGroupIdentityChanged(nextProps)) {
+      this.loadServerGroup(nextProps, true);
     }
   }
 
   public componentWillUnmount(): void {
+    this.detailsRequestGeneration++;
+    this.detailsRequest$.next();
     this.destroy$.next();
     this.serverGroupsRefreshUnsubscribe();
   }
@@ -137,3 +162,6 @@ export class ServerGroupDetails extends React.Component<IServerGroupDetailsProps
     );
   }
 }
+
+export const ServerGroupDetails = withRouter(ServerGroupDetailsComponent);
+ServerGroupDetails.displayName = 'ServerGroupDetails';

package/src/serverGroup/details/ServerGroupDetailsWrapper.spec.tsx

@@ -0,0 +1,183 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Subject } from 'rxjs';
+
+import type { Application } from '../../application';
+import { CloudProviderRegistry } from '../../cloudProvider';
+import { ServerGroupDetails, ServerGroupDetailsComponent } from './ServerGroupDetails';
+import { ServerGroupDetailsWrapper } from './ServerGroupDetailsWrapper';
+
+describe('ServerGroupDetailsWrapper', () => {
+  const app = { serverGroups: {} } as Application;
+  const serverGroup = {
+    accountId: 'test',
+    name: 'deck-v001',
+    provider: 'aws',
+    region: 'us-east-1',
+  };
+
+  it('renders React server group details when provider React config is available', () => {
+    const Actions = () => <button />;
+    const Section = () => <div />;
+    const detailsGetter = jasmine.createSpy('detailsGetter');
+    const component = shallow(<ServerGroupDetailsWrapper app={app} serverGroup={serverGroup} />, {
+      disableLifecycleMethods: true,
+    });
+
+    component.setState({ Actions, detailsGetter, sections: [Section] });
+
+    expect(component.find(ServerGroupDetails).prop('app')).toBe(app);
+    expect(component.find(ServerGroupDetails).prop('serverGroup')).toBe(serverGroup);
+    expect(component.find(ServerGroupDetails).prop('Actions')).toBe(Actions);
+    expect(component.find(ServerGroupDetails).prop('detailsGetter')).toBe(detailsGetter);
+    expect(component.find(ServerGroupDetails).prop('sections')).toEqual([Section]);
+  });
+
+  it('renders nothing when provider server group details config is missing', () => {
+    const component = shallow(<ServerGroupDetailsWrapper app={app} serverGroup={serverGroup} />, {
+      disableLifecycleMethods: true,
+    });
+
+    component.setState({ Actions: undefined, detailsGetter: undefined, sections: [] });
+
+    expect(component.isEmptyRender()).toBe(true);
+  });
+
+  it('switches provider configuration before rendering the next server group', async () => {
+    const AwsActions = () => <button className="aws-actions" />;
+    const AwsSection = () => <div className="aws-section" />;
+    const awsGetter = jasmine.createSpy('awsGetter');
+    const KubernetesActions = () => <button className="kubernetes-actions" />;
+    const KubernetesSection = () => <div className="kubernetes-section" />;
+    const kubernetesGetter = jasmine.createSpy('kubernetesGetter');
+    const values: Record<string, Record<string, any>> = {
+      aws: {
+        'serverGroup.detailsActions': AwsActions,
+        'serverGroup.detailsGetter': awsGetter,
+        'serverGroup.detailsSections': [AwsSection],
+      },
+      kubernetes: {
+        'serverGroup.detailsActions': KubernetesActions,
+        'serverGroup.detailsGetter': kubernetesGetter,
+        'serverGroup.detailsSections': [KubernetesSection],
+      },
+    };
+    const getValue = spyOn(CloudProviderRegistry, 'getValue').and.callFake(
+      (provider: string, key: string) => values[provider]?.[key],
+    );
+    const component = shallow(<ServerGroupDetailsWrapper app={app} serverGroup={serverGroup} />);
+    await Promise.resolve();
+    await Promise.resolve();
+    component.update();
+
+    expect(component.find(ServerGroupDetails).prop('Actions')).toBe(AwsActions);
+
+    const nextServerGroup = { ...serverGroup, name: 'deck-v002', provider: 'kubernetes' };
+    component.setProps({ serverGroup: nextServerGroup });
+
+    expect(component.find(ServerGroupDetails)).toHaveSize(0);
+    await Promise.resolve();
+    await Promise.resolve();
+    component.update();
+    expect(getValue.calls.allArgs().filter(([provider]) => provider === 'kubernetes')).toEqual([
+      ['kubernetes', 'serverGroup.detailsActions'],
+      ['kubernetes', 'serverGroup.detailsGetter'],
+      ['kubernetes', 'serverGroup.detailsSections'],
+    ]);
+    expect(component.find(ServerGroupDetails).prop('serverGroup')).toBe(nextServerGroup);
+    expect(component.find(ServerGroupDetails).prop('Actions')).toBe(KubernetesActions);
+    expect(component.find(ServerGroupDetails).prop('detailsGetter')).toBe(kubernetesGetter);
+    expect(component.find(ServerGroupDetails).prop('sections')).toEqual([KubernetesSection]);
+  });
+
+  it('cancels old provider details when the server group and getter change', () => {
+    const oldUpdates = new Subject<any>();
+    const newUpdates = new Subject<any>();
+    const oldGetter = jasmine.createSpy('oldGetter').and.returnValue(oldUpdates);
+    const newGetter = jasmine.createSpy('newGetter').and.returnValue(newUpdates);
+    const OldActions = () => <button className="old-actions" />;
+    const NewActions = () => <button className="new-actions" />;
+    const go = jasmine.createSpy('go');
+    const stateService = { go, params: {} };
+    const oldProps = {
+      Actions: OldActions,
+      app: {
+        serverGroups: { onRefresh: jasmine.createSpy('onRefresh').and.returnValue(() => undefined) },
+      } as any,
+      detailsGetter: oldGetter,
+      router: {},
+      sections: [],
+      serverGroup,
+      stateParams: {},
+      stateService,
+    } as any;
+    const component = shallow(<ServerGroupDetailsComponent {...oldProps} />, { disableLifecycleMethods: true });
+    const instance = component.instance() as ServerGroupDetailsComponent;
+    instance.componentDidMount();
+    oldUpdates.next({ name: 'old-details', type: 'aws' });
+    const oldAutoClose = oldGetter.calls.mostRecent().args[1];
+
+    const nextProps = {
+      ...oldProps,
+      Actions: NewActions,
+      detailsGetter: newGetter,
+      serverGroup: { ...serverGroup, name: 'deck-v002', provider: 'kubernetes' },
+    };
+    instance.componentWillReceiveProps(nextProps);
+    component.setProps(nextProps);
+
+    expect(newGetter).toHaveBeenCalledWith(nextProps, jasmine.any(Function));
+    expect(component.state()).toEqual({ loading: true, serverGroup: undefined });
+
+    oldUpdates.next({ name: 'stale-details', type: 'aws' });
+    expect(component.state('serverGroup')).toBeUndefined();
+
+    const newDetails = { name: 'new-details', type: 'kubernetes' };
+    newUpdates.next(newDetails);
+    expect(component.find(NewActions).prop('serverGroup')).toBe(newDetails);
+    expect(component.find(OldActions)).toHaveSize(0);
+
+    oldAutoClose();
+    expect(go).not.toHaveBeenCalled();
+
+    const newAutoClose = newGetter.calls.mostRecent().args[1];
+    newAutoClose();
+    expect(stateService.params).toEqual({ allowModalToStayOpen: true });
+    expect(go).toHaveBeenCalledWith('^', null, { location: 'replace' });
+
+    go.calls.reset();
+    instance.componentWillUnmount();
+    newAutoClose();
+    expect(go).not.toHaveBeenCalled();
+  });
+
+  it('keeps the current actions mounted while refreshing the same server group', () => {
+    const updates = new Subject<any>();
+    const detailsGetter = jasmine.createSpy('detailsGetter').and.returnValue(updates);
+    const Actions = () => <button className="actions" />;
+    const onRefresh = jasmine.createSpy('onRefresh').and.returnValue(() => undefined);
+    const props = {
+      Actions,
+      app: { serverGroups: { onRefresh } } as any,
+      detailsGetter,
+      router: {},
+      sections: [],
+      serverGroup,
+      stateParams: {},
+      stateService: { go: jasmine.createSpy('go'), params: {} },
+    } as any;
+    const component = shallow(<ServerGroupDetailsComponent {...props} />, { disableLifecycleMethods: true });
+    const instance = component.instance() as ServerGroupDetailsComponent;
+    instance.componentDidMount();
+    const details = { ...serverGroup, type: 'aws' };
+    updates.next(details);
+
+    expect(component.find(Actions)).toHaveSize(1);
+
+    onRefresh.calls.mostRecent().args[0]();
+
+    expect(component.state()).toEqual({ loading: false, serverGroup: details });
+    expect(component.find(Actions)).toHaveSize(1);
+    instance.componentWillUnmount();
+  });
+});