@spinnaker/core 2026.2.2 → 2026.3.0

package/src/securityGroup/securityGroup.states.ts

@@ -1,22 +1,74 @@
-import type { StateParams } from '@uirouter/angularjs';
-import { module } from 'angular';
+import type { RawParams } from '@uirouter/core';
 
 import { SecurityGroupDetails } from './SecurityGroupDetails';
 import { SecurityGroups } from './SecurityGroups';
+import { StandaloneSecurityGroupDetails } from './StandaloneSecurityGroupDetails';
 import type { Application, ApplicationStateProvider } from '../application';
-import { APPLICATION_STATE_PROVIDER, ApplicationModelBuilder } from '../application';
-import { CloudProviderRegistry } from '../cloudProvider';
+import { ApplicationModelBuilder, registerApplicationState } from '../application';
 import { filterModelConfig } from './filter/SecurityGroupFilterModel';
 import { SecurityGroupFilters } from './filter/SecurityGroupFilters';
 import { FirewallLabels } from './label';
 import type { INestedState, StateConfigProvider } from '../navigation';
-import { STATE_CONFIG_PROVIDER } from '../navigation';
+import { registerRootState } from '../navigation/rootState.registration';
 import type { SecurityGroupReader } from './securityGroupReader.service';
 
-export const SECURITY_GROUP_STATES = 'spinnaker.core.securityGroup.states';
-module(SECURITY_GROUP_STATES, [APPLICATION_STATE_PROVIDER, STATE_CONFIG_PROVIDER]).config([
-  'applicationStateProvider',
-  'stateConfigProvider',
+export function getStandaloneFirewallState(securityGroupReader: SecurityGroupReader): INestedState {
+  return {
+    name: 'firewallDetails',
+    url: '/firewallDetails/:provider/:accountId/:region/:vpcId/:name',
+    params: {
+      vpcId: {
+        value: null,
+        squash: true,
+      },
+    },
+    views: {
+      'main@': {
+        component: StandaloneSecurityGroupDetails,
+        $type: 'react',
+      },
+    },
+    resolve: {
+      resolvedSecurityGroup: [
+        '$stateParams',
+        ($stateParams: RawParams) => {
+          return {
+            name: $stateParams.name,
+            accountId: $stateParams.accountId,
+            provider: $stateParams.provider,
+            region: $stateParams.region,
+            vpcId: $stateParams.vpcId,
+          };
+        },
+      ],
+      app: [
+        '$stateParams',
+        ($stateParams: RawParams): Promise<Application> => {
+          // we need the application to have a firewall index (so rules get attached and linked properly)
+          // and its name should just be the name of the firewall (so cloning works as expected)
+          return securityGroupReader.loadSecurityGroups().then((securityGroupsIndex) => {
+            const application: Application = ApplicationModelBuilder.createStandaloneApplication($stateParams.name);
+            application['securityGroupsIndex'] = securityGroupsIndex; // TODO: refactor the securityGroupsIndex out
+            return application;
+          });
+        },
+      ],
+    },
+    data: {
+      pageTitleDetails: {
+        title: `${FirewallLabels.get('Firewall')} Details`,
+        nameParam: 'name',
+        accountParam: 'accountId',
+        regionParam: 'region',
+      },
+      history: {
+        type: 'securityGroups',
+      },
+    },
+  };
+}
+
+registerApplicationState(
   (applicationStateProvider: ApplicationStateProvider, stateConfigProvider: StateConfigProvider) => {
     const firewallDetails: INestedState = {
       name: 'firewallDetails',
@@ -34,10 +86,10 @@ module(SECURITY_GROUP_STATES, [APPLICATION_STATE_PROVIDER, STATE_CONFIG_PROVIDER
         },
       },
       resolve: {
-        accountId: ['$stateParams', ($stateParams: StateParams) => $stateParams.accountId],
+        accountId: ['$stateParams', ($stateParams: RawParams) => $stateParams.accountId],
         resolvedSecurityGroup: [
           '$stateParams',
-          ($stateParams: StateParams) => {
+          ($stateParams: RawParams) => {
             return {
               name: $stateParams.name,
               accountId: $stateParams.accountId,
@@ -79,70 +131,8 @@ module(SECURITY_GROUP_STATES, [APPLICATION_STATE_PROVIDER, STATE_CONFIG_PROVIDER
       },
     };
 
-    const standaloneFirewall: INestedState = {
-      name: 'firewallDetails',
-      url: '/firewallDetails/:provider/:accountId/:region/:vpcId/:name',
-      params: {
-        vpcId: {
-          value: null,
-          squash: true,
-        },
-      },
-      views: {
-        'main@': {
-          templateUrl: require('../presentation/standalone.view.html'),
-          controllerProvider: [
-            '$stateParams',
-            ($stateParams: StateParams) => {
-              return CloudProviderRegistry.getValue($stateParams.provider, 'securityGroup.detailsController');
-            },
-          ],
-          controllerAs: 'ctrl',
-        },
-      },
-      resolve: {
-        resolvedSecurityGroup: [
-          '$stateParams',
-          ($stateParams: StateParams) => {
-            return {
-              name: $stateParams.name,
-              accountId: $stateParams.accountId,
-              provider: $stateParams.provider,
-              region: $stateParams.region,
-              vpcId: $stateParams.vpcId,
-            };
-          },
-        ],
-        app: [
-          '$stateParams',
-          'securityGroupReader',
-          ($stateParams: StateParams, securityGroupReader: SecurityGroupReader): PromiseLike<Application> => {
-            // we need the application to have a firewall index (so rules get attached and linked properly)
-            // and its name should just be the name of the firewall (so cloning works as expected)
-            return securityGroupReader.loadSecurityGroups().then((securityGroupsIndex) => {
-              const application: Application = ApplicationModelBuilder.createStandaloneApplication($stateParams.name);
-              application['securityGroupsIndex'] = securityGroupsIndex; // TODO: refactor the securityGroupsIndex out
-              return application;
-            });
-          },
-        ],
-      },
-      data: {
-        pageTitleDetails: {
-          title: `${FirewallLabels.get('Firewall')} Details`,
-          nameParam: 'name',
-          accountParam: 'accountId',
-          regionParam: 'region',
-        },
-        history: {
-          type: 'securityGroups',
-        },
-      },
-    };
-
     applicationStateProvider.addInsightState(securityGroupSummary);
     applicationStateProvider.addInsightDetailState(firewallDetails);
-    stateConfigProvider.addToRootState(standaloneFirewall);
     stateConfigProvider.addRewriteRule(
       '/applications/{application}/securityGroups',
       '/applications/{application}/firewalls',
@@ -151,4 +141,10 @@ module(SECURITY_GROUP_STATES, [APPLICATION_STATE_PROVIDER, STATE_CONFIG_PROVIDER
       return `${$match[1]}/firewallDetails/${$match[2]}`;
     });
   },
-]);
+);
+
+registerRootState((stateConfigProvider) =>
+  stateConfigProvider.addToRootState(
+    getStandaloneFirewallState(stateConfigProvider.runtimeServices.securityGroupReader),
+  ),
+);

package/src/securityGroup/securityGroupReader.service.spec.ts

@@ -1,51 +1,45 @@
-import { mock } from 'angular';
-
 import { mockHttpClient } from '../api/mock/jasmine';
 import type { Application } from '../application/application.model';
 import { ApplicationModelBuilder } from '../application/applicationModel.builder';
 import { InfrastructureCaches } from '../cache';
 import type { ISecurityGroup } from '../domain';
+import { nativePromiseService } from '../utils/nativePromiseService';
 import type {
   ISecurityGroupDetail,
   ISecurityGroupsByAccountSourceData,
   SecurityGroupReader,
 } from './securityGroupReader.service';
-import { SECURITY_GROUP_READER } from './securityGroupReader.service';
+import { SecurityGroupReader as DirectSecurityGroupReader } from './securityGroupReader.service';
 import type { SecurityGroupTransformerService } from './securityGroupTransformer.service';
-import { SECURITY_GROUP_TRANSFORMER_SERVICE } from './securityGroupTransformer.service';
 
 describe('Service: securityGroupReader', function () {
-  let $q: ng.IQService, $scope: ng.IRootScopeService, reader: SecurityGroupReader;
-
-  beforeEach(mock.module(SECURITY_GROUP_TRANSFORMER_SERVICE, SECURITY_GROUP_READER));
-  beforeEach(
-    mock.inject(function (
-      _$q_: ng.IQService,
-      $rootScope: ng.IRootScopeService,
-      _providerServiceDelegate_: any,
-      securityGroupTransformer: SecurityGroupTransformerService,
-      _securityGroupReader_: SecurityGroupReader,
-    ) {
-      reader = _securityGroupReader_;
-      $q = _$q_;
-      $scope = $rootScope.$new();
-
-      const cacheStub: any = {
-        get: () => null as any,
-        put: () => {},
-      };
-      spyOn(InfrastructureCaches, 'get').and.returnValue(cacheStub);
-
-      spyOn(securityGroupTransformer, 'normalizeSecurityGroup').and.callFake((securityGroup: ISecurityGroup) => {
-        return $q.when(securityGroup);
-      });
-      spyOn(_providerServiceDelegate_, 'getDelegate').and.returnValue({
+  let reader: SecurityGroupReader;
+
+  beforeEach(() => {
+    const cacheStub: any = {
+      get: () => null as any,
+      put: () => {},
+    };
+    spyOn(InfrastructureCaches, 'get').and.returnValue(cacheStub);
+
+    const securityGroupTransformer = {
+      normalizeSecurityGroup: (securityGroup: ISecurityGroup) => Promise.resolve(securityGroup),
+    } as SecurityGroupTransformerService;
+    const providerServiceDelegate = {
+      hasDelegate: () => false,
+      getDelegate: () => ({
         resolveIndexedSecurityGroup: (idx: any, container: ISecurityGroup, id: string) => {
           return idx[container.account][container.region][id];
         },
-      });
-    }),
-  );
+      }),
+    };
+    reader = new DirectSecurityGroupReader(
+      { warn: () => undefined } as any,
+      nativePromiseService,
+      securityGroupTransformer,
+      providerServiceDelegate as any,
+    );
+  });
 
   it('attaches load balancer to firewall usages', async function () {
     const http = mockHttpClient();
@@ -55,20 +49,20 @@ describe('Service: securityGroupReader', function () {
       'app',
       {
         key: 'securityGroups',
-        loader: () => $q.resolve([]),
-        onLoad: (_app, _data) => $q.resolve(_data),
+        loader: () => Promise.resolve([]),
+        onLoad: (_app, _data) => Promise.resolve(_data),
         defaultData: [],
       },
       {
         key: 'serverGroups',
-        loader: () => $q.resolve([]),
-        onLoad: (_app, _data) => $q.resolve(_data),
+        loader: () => Promise.resolve([]),
+        onLoad: (_app, _data) => Promise.resolve(_data),
         defaultData: [],
       },
       {
         key: 'loadBalancers',
         loader: () =>
-          $q.resolve([
+          Promise.resolve([
             {
               name: 'my-elb',
               account: 'test',
@@ -76,14 +70,12 @@ describe('Service: securityGroupReader', function () {
               securityGroups: ['not-cached'],
             },
           ]),
-        onLoad: (_app, _data) => $q.resolve(_data),
+        onLoad: (_app, _data) => Promise.resolve(_data),
         defaultData: [],
       },
     );
 
-    application.serverGroups.refresh();
-    application.loadBalancers.refresh();
-    $scope.$digest();
+    await Promise.all([application.serverGroups.refresh(), application.loadBalancers.refresh()]);
 
     http.expectGET(`/securityGroups`).respond(200, {
       test: {
@@ -92,9 +84,9 @@ describe('Service: securityGroupReader', function () {
         },
       },
     });
-    reader.getApplicationSecurityGroups(application, null).then((results: any[]) => (data = results));
+    const securityGroupsPromise = reader.getApplicationSecurityGroups(application, null);
     await http.flush();
-    $scope.$digest();
+    data = await securityGroupsPromise;
     const group: ISecurityGroup = data[0];
     expect(group.name).toBe('not-cached');
     expect(group.usages.loadBalancers[0]).toEqual({ name: application.getDataSource('loadBalancers').data[0].name });
@@ -143,14 +135,14 @@ describe('Service: securityGroupReader', function () {
       },
       {
         key: 'serverGroups',
-        loader: () => $q.resolve([]),
-        onLoad: (_app, _data) => $q.resolve(_data),
+        loader: () => Promise.resolve([]),
+        onLoad: (_app, _data) => Promise.resolve(_data),
         defaultData: [],
       },
       {
         key: 'loadBalancers',
         loader: () =>
-          $q.resolve([
+          Promise.resolve([
             {
               name: 'my-elb',
               account: 'test',
@@ -158,15 +150,16 @@ describe('Service: securityGroupReader', function () {
               securityGroups: ['not-cached'],
             },
           ]),
-        onLoad: (_app, _data) => $q.resolve(_data),
+        onLoad: (_app, _data) => Promise.resolve(_data),
         defaultData: [],
       },
     );
 
-    application.getDataSource('securityGroups').refresh();
-    application.getDataSource('serverGroups').refresh();
-    application.getDataSource('loadBalancers').refresh();
-    $scope.$digest();
+    await Promise.all([
+      application.getDataSource('securityGroups').refresh(),
+      application.getDataSource('serverGroups').refresh(),
+      application.getDataSource('loadBalancers').refresh(),
+    ]);
 
     http.expectGET('/securityGroups').respond(200, {
       test: {
@@ -176,8 +169,9 @@ describe('Service: securityGroupReader', function () {
       },
     });
 
-    reader.getApplicationSecurityGroups(application, []).then((results) => (data = results));
+    const securityGroupsPromise = reader.getApplicationSecurityGroups(application, []);
     await http.flush();
+    data = await securityGroupsPromise;
     const group: ISecurityGroup = data[0];
     expect(group.name).toBe('not-cached');
     expect(group.usages.loadBalancers[0]).toEqual({ name: application.getDataSource('loadBalancers').data[0].name });
@@ -187,8 +181,8 @@ describe('Service: securityGroupReader', function () {
     const http = mockHttpClient();
     const application: Application = ApplicationModelBuilder.createApplicationForTests('app', {
       key: 'securityGroups',
-      loader: () => $q.resolve([]),
-      onLoad: (_app, _data) => $q.resolve(_data),
+      loader: () => Promise.resolve([]),
+      onLoad: (_app, _data) => Promise.resolve(_data),
       defaultData: [],
     });
 

package/src/securityGroup/securityGroupReader.service.ts

@@ -1,14 +1,10 @@
-import type { ILogService, IQService } from 'angular';
-import { module } from 'angular';
 import { filter, forOwn, has, uniq } from 'lodash';
 import { cloneDeep } from 'lodash';
 
 import { REST } from '../api/ApiService';
 import type { Application } from '../application/application.model';
 import { InfrastructureCaches } from '../cache/infrastructureCaches';
-
 import type { ProviderServiceDelegate } from '../cloudProvider/providerService.delegate';
-import { PROVIDER_SERVICE_DELEGATE } from '../cloudProvider/providerService.delegate';
 import { SETTINGS } from '../config/settings';
 import type { ILoadBalancer, ISecurityGroup, IServerGroup, IServerGroupUsage } from '../domain';
 import type { IEntityTags } from '../domain/IEntityTags';
@@ -18,10 +14,9 @@ import { NameUtils } from '../naming';
 import type { IMoniker } from '../naming/IMoniker';
 import type { ISearchResults } from '../search/search.service';
 import { SearchService } from '../search/search.service';
-
 import type { ISecurityGroupSearchResult } from './securityGroupSearchResultType';
 import type { SecurityGroupTransformerService } from './securityGroupTransformer.service';
-import { SECURITY_GROUP_TRANSFORMER_SERVICE } from './securityGroupTransformer.service';
+import type { PromiseService } from '../utils/nativePromiseService';
 
 export interface ISecurityGroupsByAccount {
   [account: string]: {
@@ -157,7 +152,7 @@ export class SecurityGroupReader {
             }
             securityGroups.push(securityGroup);
           } catch (e) {
-            this.$log.warn('could not attach firewall to load balancer:', loadBalancer.name, securityGroupId, e);
+            this.logger.warn('could not attach firewall to load balancer:', loadBalancer.name, securityGroupId, e);
             notFoundCaught = true;
           }
         });
@@ -180,7 +175,7 @@ export class SecurityGroupReader {
         SecurityGroupReader.attachUsageFields(match);
         securityGroups.push(match);
       } catch (e) {
-        this.$log.warn('could not initialize application firewall:', securityGroup);
+        this.logger.warn('could not initialize application firewall:', securityGroup);
         notFoundCaught = true;
       }
     });
@@ -207,7 +202,7 @@ export class SecurityGroupReader {
             }
             sgSet.add(securityGroup);
           } catch (e) {
-            this.$log.warn('could not attach firewall to server group:', serverGroup.name, securityGroupId);
+            this.logger.warn('could not attach firewall to server group:', serverGroup.name, securityGroupId);
             notFoundCaught = true;
           }
         });
@@ -222,7 +217,7 @@ export class SecurityGroupReader {
   private clearCacheAndRetryAttachingSecurityGroups(
     application: Application,
     nameBasedSecurityGroups: ISecurityGroup[],
-  ): PromiseLike<any[]> {
+  ): Promise<any[]> {
     InfrastructureCaches.clearCache('securityGroups');
     return this.loadSecurityGroups().then((refreshedSecurityGroups: ISecurityGroupsByAccount) => {
       application['securityGroupsIndex'] = refreshedSecurityGroups;
@@ -242,7 +237,7 @@ export class SecurityGroupReader {
     application: Application,
     nameBasedSecurityGroups: ISecurityGroup[],
     retryIfNotFound: boolean,
-  ): PromiseLike<any[]> {
+  ): Promise<any[]> {
     let data: ISecurityGroup[] = [];
     let notFoundCaught = false;
     if (nameBasedSecurityGroups) {
@@ -280,31 +275,30 @@ export class SecurityGroupReader {
 
     data = uniq(data);
     if (notFoundCaught && retryIfNotFound) {
-      this.$log.warn('Clearing firewall cache and trying again...');
+      this.logger.warn('Clearing firewall cache and trying again...');
       return this.clearCacheAndRetryAttachingSecurityGroups(application, nameBasedSecurityGroups);
     } else {
       data.forEach((sg: ISecurityGroup) => this.addNamePartsToSecurityGroup(sg));
-      return this.$q
+      return this.promiseService
         .all(data.map((sg: ISecurityGroup) => this.securityGroupTransformer.normalizeSecurityGroup(sg)))
         .then(() => data);
     }
   }
 
-  public static $inject = ['$log', '$q', 'securityGroupTransformer', 'providerServiceDelegate'];
   constructor(
-    private $log: ILogService,
-    private $q: IQService,
+    private logger: Pick<Console, 'warn'>,
+    private promiseService: PromiseService,
     private securityGroupTransformer: SecurityGroupTransformerService,
     private providerServiceDelegate: ProviderServiceDelegate,
   ) {}
 
-  private getAllSecurityGroupsPromise: PromiseLike<ISecurityGroupsByAccountSourceData>;
+  private getAllSecurityGroupsPromise: Promise<ISecurityGroupsByAccountSourceData>;
 
-  public getAllSecurityGroups(): PromiseLike<ISecurityGroupsByAccountSourceData> {
+  public getAllSecurityGroups(): Promise<ISecurityGroupsByAccountSourceData> {
     const cache = InfrastructureCaches.get('securityGroups');
     const cached = cache ? cache.get('allGroups') : null;
     if (cached) {
-      return this.$q.resolve(this.decompress(cloneDeep(cached)));
+      return this.promiseService.resolve(this.decompress(cloneDeep(cached)));
     } else if (this.getAllSecurityGroupsPromise) {
       return this.getAllSecurityGroupsPromise;
     }
@@ -385,13 +379,13 @@ export class SecurityGroupReader {
   public getApplicationSecurityGroups(
     application: Application,
     nameBasedSecurityGroups: ISecurityGroup[],
-  ): PromiseLike<any> {
+  ): Promise<any> {
     return this.loadSecurityGroups()
       .then((allSecurityGroups: ISecurityGroupsByAccount) => {
         application['securityGroupsIndex'] = allSecurityGroups;
       })
       .then(() =>
-        this.$q
+        this.promiseService
           .all([application.getDataSource('serverGroups').ready(), application.getDataSource('loadBalancers').ready()])
           .then(() => this.attachSecurityGroups(application, nameBasedSecurityGroups, true)),
       );
@@ -404,7 +398,7 @@ export class SecurityGroupReader {
     region: string,
     vpcId: string,
     id: string,
-  ): PromiseLike<ISecurityGroupDetail> {
+  ): Promise<ISecurityGroupDetail> {
     return REST('/securityGroups')
       .path(account, region, id)
       .query({ provider, vpcId })
@@ -446,7 +440,7 @@ export class SecurityGroupReader {
       });
   }
 
-  public loadSecurityGroups(): PromiseLike<ISecurityGroupsByAccount> {
+  public loadSecurityGroups(): Promise<ISecurityGroupsByAccount> {
     return this.getAllSecurityGroups().then((groupsByAccount: ISecurityGroupsByAccountSourceData) => {
       const securityGroups: IReaderSecurityGroup[] = [];
       forOwn(groupsByAccount, (groupsByProvider, account) => {
@@ -465,7 +459,7 @@ export class SecurityGroupReader {
     });
   }
 
-  public loadSecurityGroupsByApplicationName(applicationName: string): PromiseLike<ISecurityGroup[]> {
+  public loadSecurityGroupsByApplicationName(applicationName: string): Promise<ISecurityGroup[]> {
     return SearchService.search<ISecurityGroupSearchResult>({
       q: applicationName,
       type: 'securityGroups',
@@ -473,7 +467,7 @@ export class SecurityGroupReader {
     }).then((searchResults: ISearchResults<ISecurityGroupSearchResult>) => {
       let result: ISecurityGroup[] = [];
       if (!searchResults || !searchResults.results) {
-        this.$log.warn('WARNING: Gate firewall endpoint appears to be down.');
+        this.logger.warn('WARNING: Gate firewall endpoint appears to be down.');
       } else {
         result = filter(searchResults.results, { application: applicationName });
       }
@@ -482,9 +476,3 @@ export class SecurityGroupReader {
     });
   }
 }
-
-export const SECURITY_GROUP_READER = 'spinnaker.core.securityGroup.read.service';
-module(SECURITY_GROUP_READER, [SECURITY_GROUP_TRANSFORMER_SERVICE, PROVIDER_SERVICE_DELEGATE]).service(
-  'securityGroupReader',
-  SecurityGroupReader,
-);

package/src/securityGroup/securityGroupTransformer.service.ts

@@ -1,21 +1,14 @@
-import { module } from 'angular';
 import type { ProviderServiceDelegate } from '../cloudProvider/providerService.delegate';
-import { PROVIDER_SERVICE_DELEGATE } from '../cloudProvider/providerService.delegate';
 import type { ISecurityGroup } from '../domain';
 
 export class SecurityGroupTransformerService {
-  public static $inject = ['providerServiceDelegate'];
   constructor(private providerServiceDelegate: ProviderServiceDelegate) {}
 
-  public normalizeSecurityGroup(securityGroup: ISecurityGroup): PromiseLike<ISecurityGroup> {
-    return this.providerServiceDelegate
-      .getDelegate<any>(securityGroup.provider || securityGroup.type, 'securityGroup.transformer')
-      .normalizeSecurityGroup(securityGroup);
+  public normalizeSecurityGroup(securityGroup: ISecurityGroup): Promise<ISecurityGroup> {
+    return Promise.resolve(
+      this.providerServiceDelegate
+        .getDelegate<any>(securityGroup.provider || securityGroup.type, 'securityGroup.transformer')
+        .normalizeSecurityGroup(securityGroup),
+    );
   }
 }
-
-export const SECURITY_GROUP_TRANSFORMER_SERVICE = 'spinnaker.core.securityGroup.transformer.service';
-module(SECURITY_GROUP_TRANSFORMER_SERVICE, [PROVIDER_SERVICE_DELEGATE]).service(
-  'securityGroupTransformer',
-  SecurityGroupTransformerService,
-);

package/src/serverGroup/ServerGroup.router.spec.tsx

@@ -0,0 +1,81 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Subject } from 'rxjs';
+
+import { ServerGroupComponent } from './ServerGroup';
+import { ClusterState } from '../state';
+
+describe('server group router bridge', () => {
+  const application = {} as any;
+  const serverGroup = {
+    account: 'test-account',
+    buildInfo: { images: [] },
+    instances: [],
+    name: 'test-v001',
+    region: 'test-region',
+    type: 'kubernetes',
+  } as any;
+  const sortFilter = { multiselect: false, showAllInstances: false } as any;
+
+  const props = (includes: jasmine.Spy) =>
+    ({
+      application,
+      cluster: 'test',
+      hasDiscovery: false,
+      hasLoadBalancers: false,
+      router: {},
+      serverGroup,
+      sortFilter,
+      stateParams: {},
+      stateService: { includes },
+    } as any);
+
+  it('selects a server group through the injected state service', () => {
+    const includes = jasmine.createSpy('includes').and.returnValue(true);
+    const component = shallow(<ServerGroupComponent {...props(includes)} />, { disableLifecycleMethods: true });
+
+    expect(component.state('isSelected')).toBe(true);
+    expect(includes).toHaveBeenCalledWith('**.serverGroup', {
+      accountId: 'test-account',
+      provider: 'kubernetes',
+      region: 'test-region',
+      serverGroup: 'test-v001',
+    });
+  });
+  it('renders server group multiselection from the existing selection stream', () => {
+    const previousMultiselectModel = ClusterState.multiselectModel;
+    const previousFilterService = ClusterState.filterService;
+    const serverGroupsStream = new Subject<void>();
+    const instancesStream = new Subject<void>();
+    const serverGroupIsSelected = jasmine.createSpy('serverGroupIsSelected').and.returnValue(false);
+    ClusterState.multiselectModel = { serverGroupsStream, instancesStream, serverGroupIsSelected } as any;
+    ClusterState.filterService = { shouldShowInstance: () => true } as any;
+    const selectedServerGroup = {
+      ...serverGroup,
+      instances: [{ name: 'test-v001-0', buildInfo: { images: [] } }],
+    } as any;
+    const streamProps = {
+      ...props(jasmine.createSpy('includes').and.returnValue(false)),
+      router: { transitionService: { onSuccess: () => () => undefined } },
+      serverGroup: selectedServerGroup,
+      sortFilter: { ...sortFilter, multiselect: true },
+    } as any;
+
+    let serverGroupWrapper: any;
+    try {
+      serverGroupWrapper = shallow(<ServerGroupComponent {...streamProps} />);
+
+      serverGroupIsSelected.and.returnValue(true);
+      serverGroupsStream.next();
+      serverGroupWrapper.update();
+
+      expect(serverGroupWrapper.state('isMultiSelected')).toBe(true);
+    } finally {
+      serverGroupWrapper?.unmount();
+      ClusterState.multiselectModel = previousMultiselectModel;
+      ClusterState.filterService = previousFilterService;
+    }
+
+    expect(serverGroupsStream.observers.length).toBe(0);
+  });
+});