@spinnaker/core 2026.2.2 → 2026.3.0

package/src/search/infrastructure/infrastructureSearchV2.service.ts

@@ -6,20 +6,16 @@ import { catchError, finalize, map, mergeMap, tap } from 'rxjs/operators';
 
 import type { ISearchResultSet } from './infrastructureSearch.service';
 import type { IQueryParams } from '../../navigation';
-import { UrlBuilder } from '../../navigation';
+import { UrlBuilder } from '../../navigation/UrlBuilder';
 import type { ISearchResult, ISearchResults } from '../search.service';
 import { SearchStatus } from '../searchResult/SearchStatus';
 import type { SearchResultType } from '../searchResult/searchResultType';
 import { searchResultTypeRegistry } from '../searchResult/searchResultType.registry';
 
 export class InfrastructureSearchServiceV2 {
-  private static EMPTY_RESULTS: ISearchResultSet[] = searchResultTypeRegistry
-    .getAll()
-    .map((type) => ({ type, results: [], status: SearchStatus.FINISHED }));
-
   public static search(apiParams: IQueryParams): Observable<ISearchResultSet> {
     if (isEmpty(apiParams)) {
-      return observableFrom(this.EMPTY_RESULTS);
+      return observableFrom(this.getEmptyResults());
     }
 
     const params = { ...apiParams };
@@ -60,4 +56,8 @@ export class InfrastructureSearchServiceV2 {
       finalize(() => otherResults$.complete()),
     );
   }
+
+  private static getEmptyResults(): ISearchResultSet[] {
+    return searchResultTypeRegistry.getAll().map((type) => ({ type, results: [], status: SearchStatus.FINISHED }));
+  }
 }

package/src/search/search.service.ts

@@ -1,6 +1,4 @@
-import type { IHttpPromiseCallbackArg } from 'angular';
-import { $log } from 'ngimport';
-
+import type { XhrError } from '../api/ApiService';
 import { API } from '../api/ApiService';
 import type { ICache } from '../cache';
 
@@ -42,7 +40,7 @@ export class SearchService {
   public static search<T extends ISearchResult>(
     searchParams: ISearchParams,
     cache: ICache = null,
-  ): PromiseLike<ISearchResults<T>> {
+  ): Promise<ISearchResults<T>> {
     const defaultParams: ISearchParams = {
       pageSize: SearchService.DEFAULT_PAGE_SIZE,
     };
@@ -62,8 +60,8 @@ export class SearchService {
       .then((response: Array<ISearchResults<T>>) => {
         return response[0] || getFallbackResults<T>();
       })
-      .catch((response: IHttpPromiseCallbackArg<any>) => {
-        $log.error(response.data, response);
+      .catch((response: XhrError) => {
+        console.error(response.data, response);
         return getFallbackResults();
       });
   }

package/src/search/searchRank.filter.ts

@@ -1,5 +1,3 @@
-import { module } from 'angular';
-
 import type { ISearchResult } from './search.service';
 
 export const searchRank = (input: ISearchResult[], query = '') => {
@@ -20,6 +18,3 @@ export const searchRank = (input: ISearchResult[], query = '') => {
 };
 
 export const searchRankFilter = () => searchRank;
-
-export const SEARCH_RANK_FILTER = 'spinnaker.core.search.searchResult.searchRank.filter';
-module(SEARCH_RANK_FILTER, []).filter('searchRank', searchRankFilter);

package/src/search/searchResult/SearchResultTabs.tsx

@@ -1,5 +1,4 @@
 import { UISref } from '@uirouter/react';
-import { UIRouterContext } from '@uirouter/react-hybrid';
 import React from 'react';
 
 import type { ISearchResultSet } from '../infrastructure/infrastructureSearch.service';
@@ -10,7 +9,6 @@ export interface ISearchResultTabsProps {
   activeSearchResultType: SearchResultType;
 }
 
-@UIRouterContext
 export class SearchResultTabs extends React.Component<ISearchResultTabsProps> {
   public render(): React.ReactElement<SearchResultTabs> {
     const { activeSearchResultType } = this.props;

package/src/search/widgets/searchFilterTypeRegistrations.ts

@@ -0,0 +1,7 @@
+import { SearchFilterTypeRegistry } from './SearchFilterTypeRegistry';
+
+export function registerSearchFilterTypes(): void {
+  SearchFilterTypeRegistry.register({ key: 'account', name: 'Account' });
+  SearchFilterTypeRegistry.register({ key: 'region', name: 'Region' });
+  SearchFilterTypeRegistry.register({ key: 'stack', name: 'Stack' });
+}

package/src/securityGroup/CreateSecurityGroupButton.spec.tsx

@@ -0,0 +1,117 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { CloudProviderRegistry, ProviderSelectionService } from '../cloudProvider';
+import { DeckRuntimeContext } from '../bootstrap/DeckRuntimeContext';
+import { SETTINGS } from '../config/settings';
+import { CreateSecurityGroupButton } from './CreateSecurityGroupButton';
+
+interface IDeferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+function deferred<T>(): IDeferred<T> {
+  let resolve: (value: T) => void;
+  const promise = new Promise<T>((promiseResolve) => (resolve = promiseResolve));
+  return { promise, resolve };
+}
+
+describe('<CreateSecurityGroupButton />', () => {
+  const runtimeServices = {} as any;
+
+  beforeEach(() => {
+    SETTINGS.providers.buttonTestProvider = {
+      defaults: {
+        account: 'button-test-account',
+        region: 'dev',
+      },
+    };
+  });
+
+  afterEach(SETTINGS.resetToOriginal);
+
+  it('opens a React security group modal after selecting a provider from a React click handler', async () => {
+    const providerSelection = deferred<string>();
+    const modalShown = deferred<void>();
+    const modal = {
+      show: jasmine.createSpy('show').and.callFake(() => modalShown.resolve(undefined)),
+    };
+    const app = {
+      defaultCredentials: {},
+      defaultRegions: {},
+    } as any;
+    spyOn(ProviderSelectionService, 'selectProvider').and.returnValue(providerSelection.promise);
+    spyOn(CloudProviderRegistry, 'getValue').and.returnValue({
+      CreateSecurityGroupModal: modal,
+    });
+
+    const wrapper = mount(
+      <DeckRuntimeContext.Provider value={{ services: runtimeServices }}>
+        <CreateSecurityGroupButton app={app} />
+      </DeckRuntimeContext.Provider>,
+    );
+    act(() => {
+      wrapper.find('button').simulate('click');
+    });
+    expect(modal.show).not.toHaveBeenCalled();
+
+    await act(async () => {
+      providerSelection.resolve('buttonTestProvider');
+      await modalShown.promise;
+    });
+
+    expect(modal.show).toHaveBeenCalledWith(
+      {
+        application: app,
+        credentials: 'button-test-account',
+        isNew: true,
+        region: 'dev',
+      },
+      runtimeServices,
+    );
+  });
+
+  it('opens a React security group modal for providers without configured defaults', async () => {
+    const providerSelection = deferred<string>();
+    const modalShown = deferred<void>();
+    const modal = {
+      show: jasmine.createSpy('show').and.callFake(() => modalShown.resolve(undefined)),
+    };
+    const app = {
+      defaultCredentials: {},
+      defaultRegions: {},
+    } as any;
+    SETTINGS.providers.kubernetes = {};
+    spyOn(ProviderSelectionService, 'selectProvider').and.returnValue(providerSelection.promise);
+    spyOn(CloudProviderRegistry, 'getValue').and.returnValue({
+      CreateSecurityGroupModal: modal,
+    });
+
+    const wrapper = mount(
+      <DeckRuntimeContext.Provider value={{ services: runtimeServices }}>
+        <CreateSecurityGroupButton app={app} />
+      </DeckRuntimeContext.Provider>,
+    );
+    act(() => {
+      wrapper.find('button').simulate('click');
+    });
+    expect(modal.show).not.toHaveBeenCalled();
+
+    await act(async () => {
+      providerSelection.resolve('kubernetes');
+      await modalShown.promise;
+    });
+
+    expect(modal.show).toHaveBeenCalledWith(
+      {
+        application: app,
+        credentials: undefined,
+        isNew: true,
+        region: undefined,
+      },
+      runtimeServices,
+    );
+  });
+});

package/src/securityGroup/CreateSecurityGroupButton.tsx

@@ -2,64 +2,42 @@ import * as React from 'react';
 
 import type { IAccountDetails } from '../account';
 import type { Application } from '../application';
+import { useDeckRuntimeServices } from '../bootstrap/DeckRuntimeContext';
 import type { ICloudProviderConfig } from '../cloudProvider';
 import { CloudProviderRegistry, ProviderSelectionService } from '../cloudProvider';
 import { SETTINGS } from '../config/settings';
 import { FirewallLabels } from './label/FirewallLabels';
 import { Tooltip } from '../presentation';
-import { ModalInjector } from '../reactShims';
+import { noop } from '../utils';
 
 const providerFilterFn = (_application: Application, _account: IAccountDetails, provider: ICloudProviderConfig) => {
   const sgConfig = provider.securityGroup;
-  return (
-    sgConfig &&
-    (sgConfig.CreateSecurityGroupModal ||
-      (sgConfig.createSecurityGroupTemplateUrl && sgConfig.createSecurityGroupController))
-  );
+  return Boolean(sgConfig && sgConfig.CreateSecurityGroupModal);
 };
 
+const getProviderDefaults = (provider: string) => SETTINGS.providers[provider]?.defaults || {};
+
 const getDefaultCredentials = (app: Application, provider: string) =>
-  app.defaultCredentials[provider] || SETTINGS.providers[provider].defaults.account;
+  app.defaultCredentials?.[provider] || getProviderDefaults(provider).account;
 const getDefaultRegion = (app: Application, provider: string) =>
-  app.defaultRegions[provider] || SETTINGS.providers[provider].defaults.region;
-
-const getAngularModalOptions = (provider: any, selectedProvider: string, app: Application) => ({
-  templateUrl: provider.createSecurityGroupTemplateUrl,
-  controller: `${provider.createSecurityGroupController} as ctrl`,
-  windowClass: 'modal-z-index',
-  size: 'lg',
-  resolve: {
-    securityGroup: () => {
-      return {
-        credentials: getDefaultCredentials(app, selectedProvider),
-        subnet: 'none',
-        regions: [getDefaultRegion(app, selectedProvider)],
-      };
-    },
-    application: () => {
-      return app;
-    },
-  },
-});
+  app.defaultRegions?.[provider] || getProviderDefaults(provider).region;
 
 const getReactModalOptions = (selectedProvider: string, app: Application) => ({
   credentials: getDefaultCredentials(app, selectedProvider),
   application: app,
   isNew: true,
+  region: getDefaultRegion(app, selectedProvider),
 });
 
 export const CreateSecurityGroupButton = ({ app }: { app: Application }) => {
+  const runtimeServices = useDeckRuntimeServices();
+
   const createSecurityGroup = (): void => {
     ProviderSelectionService.selectProvider(app, 'securityGroup', providerFilterFn).then((selectedProvider) => {
       const provider = CloudProviderRegistry.getValue(selectedProvider, 'securityGroup');
 
-      if (provider.CreateSecurityGroupModal) {
-        provider.CreateSecurityGroupModal.show(getReactModalOptions(selectedProvider, app));
-      } else {
-        // angular
-        ModalInjector.modalService.open(getAngularModalOptions(provider, selectedProvider, app)).result.catch(() => {});
-      }
-    });
+      provider.CreateSecurityGroupModal.show(getReactModalOptions(selectedProvider, app), runtimeServices);
+    }, noop);
   };
 
   return (

package/src/securityGroup/SecurityGroup.tsx

@@ -1,4 +1,4 @@
-import { UISref } from '@uirouter/react';
+import { UISref, useRouter } from '@uirouter/react';
 import classNames from 'classnames';
 import * as React from 'react';
 
@@ -7,7 +7,6 @@ import { CloudProviderLogo } from '../cloudProvider';
 import type { ILoadBalancerUsage, ISecurityGroup, ISecurityGroupGroup, IServerGroupUsage } from '../domain';
 import { EntityNotifications } from '../entityTag/notifications/EntityNotifications';
 import { ManagedResourceStatusIndicator } from '../managed';
-import { ReactInjector } from '../reactShims';
 import { SecurityGroupState } from '../state';
 
 import './securityGroup.less';
@@ -134,9 +133,10 @@ const LoadBalancers = ({ securityGroup }: { securityGroup: ISecurityGroup }) =>
 };
 
 export const SecurityGroup = (props: ISecurityGroupProps) => {
+  const { stateService } = useRouter();
   const params = getSecurityGroupDetailsParams(props.securityGroup, props.application);
   // don't use <UISrefActive> - it picks up load balancer and server groups details!
-  const active = ReactInjector.$state.includes('**.firewallDetails', params);
+  const active = stateService.includes('**.firewallDetails', params);
   return (
     <UISref to=".firewallDetails" params={params}>
       <div className={classNames('pod-subgroup clickable clickable-row clearfix', { active })}>

package/src/securityGroup/SecurityGroupWriter.ts

@@ -15,13 +15,13 @@ export class SecurityGroupWriter {
     securityGroup: ISecurityGroup,
     application: Application,
     params: ISecurityGroupJob,
-  ): PromiseLike<ITask> {
+  ): Promise<ITask> {
     params.type = 'deleteSecurityGroup';
     params.securityGroupName = securityGroup.name;
     params.regions = [securityGroup.region];
     params.credentials = securityGroup.accountId;
 
-    const operation: PromiseLike<ITask> = TaskExecutor.executeTask({
+    const operation: Promise<ITask> = TaskExecutor.executeTask({
       job: [params],
       application,
       description: `Delete ${FirewallLabels.get('Firewall')}: ${securityGroup.name}`,
@@ -36,14 +36,14 @@ export class SecurityGroupWriter {
     application: Application,
     description: string,
     params: any = {},
-  ): PromiseLike<ITask> {
+  ): Promise<ITask> {
     params.type = 'upsertSecurityGroup';
     params.securityGroupName = securityGroup.name;
     params.credentials = securityGroup.credentials || securityGroup.accountName;
 
     const job: ISecurityGroupJob = { ...securityGroup, ...params };
 
-    const operation: PromiseLike<ITask> = TaskExecutor.executeTask({
+    const operation: Promise<ITask> = TaskExecutor.executeTask({
       job: [job],
       application,
       description: `${description} ${FirewallLabels.get('Firewall')}: ${securityGroup.name}`,

package/src/securityGroup/SecurityGroups.tsx

@@ -117,7 +117,7 @@ export const SecurityGroups = ({ app }: ISecurityGroupsProps) => {
   useEffect(() => {
     const groupsUpdatedListener = SecurityGroupState.filterService.groupsUpdatedStream.subscribe(groupsUpdated);
     const dataSource = app.getDataSource('securityGroups');
-    const securityGroupsRefreshUnsubscribe = dataSource.onRefresh(null, updateSecurityGroupGroups);
+    const securityGroupsRefreshUnsubscribe = dataSource.onRefresh(updateSecurityGroupGroups);
     dataSource.ready().then(() => {
       updateSecurityGroupGroups();
     });

package/src/securityGroup/StandaloneSecurityGroupDetails.spec.tsx

@@ -0,0 +1,47 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application } from '../application';
+import { CloudProviderRegistry } from '../cloudProvider';
+import { StandaloneSecurityGroupDetails } from './StandaloneSecurityGroupDetails';
+
+describe('StandaloneSecurityGroupDetails', () => {
+  const app = { isStandalone: true } as Application;
+  const resolvedSecurityGroup = {
+    accountId: 'test',
+    name: 'sg-123',
+    provider: 'kubernetes',
+    region: 'us-east-1',
+    vpcId: null,
+  };
+
+  afterEach(() => {
+    (CloudProviderRegistry.getValue as any).and?.callThrough?.();
+  });
+
+  it('renders provider React security group details when configured', () => {
+    const ReactSecurityGroupDetails = () => <div className="react-security-group-details" />;
+    const getValue = spyOn(CloudProviderRegistry, 'getValue').and.callFake((_provider: string, key: string) =>
+      key === 'securityGroup.details' ? ReactSecurityGroupDetails : null,
+    );
+
+    const component = shallow(
+      <StandaloneSecurityGroupDetails app={app} resolvedSecurityGroup={resolvedSecurityGroup} />,
+    );
+
+    expect(component.find(ReactSecurityGroupDetails).prop('app')).toBe(app);
+    expect(component.find(ReactSecurityGroupDetails).prop('resolvedSecurityGroup')).toBe(resolvedSecurityGroup);
+    expect(getValue.calls.allArgs()).toEqual([['kubernetes', 'securityGroup.details']]);
+  });
+
+  it('renders nothing when provider security group details config is missing', () => {
+    const getValue = spyOn(CloudProviderRegistry, 'getValue').and.returnValue(null);
+
+    const component = shallow(
+      <StandaloneSecurityGroupDetails app={app} resolvedSecurityGroup={resolvedSecurityGroup} />,
+    );
+
+    expect(component.isEmptyRender()).toBe(true);
+    expect(getValue.calls.allArgs()).toEqual([['kubernetes', 'securityGroup.details']]);
+  });
+});

package/src/securityGroup/StandaloneSecurityGroupDetails.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { Application } from '../application';
+import { CloudProviderRegistry } from '../cloudProvider';
+
+export interface IStandaloneResolvedSecurityGroup {
+  accountId: string;
+  name: string;
+  provider: string;
+  region: string;
+  vpcId?: string | null;
+}
+
+export interface IStandaloneSecurityGroupDetailsProps {
+  app: Application;
+  resolvedSecurityGroup: IStandaloneResolvedSecurityGroup;
+}
+
+type ProviderSecurityGroupDetailsComponent = React.ComponentType<IStandaloneSecurityGroupDetailsProps>;
+
+function StandaloneDetailsLayout({ children }: { children: React.ReactNode }): JSX.Element {
+  return (
+    <div className="standalone">
+      <div className="col-md-6 col-md-offset-3">{children}</div>
+    </div>
+  );
+}
+
+export function StandaloneSecurityGroupDetails(props: IStandaloneSecurityGroupDetailsProps): JSX.Element | null {
+  const provider = props.resolvedSecurityGroup.provider;
+  const DetailsComponent = CloudProviderRegistry.getValue(
+    provider,
+    'securityGroup.details',
+  ) as ProviderSecurityGroupDetailsComponent;
+
+  if (DetailsComponent) {
+    return (
+      <StandaloneDetailsLayout>
+        <DetailsComponent {...props} />
+      </StandaloneDetailsLayout>
+    );
+  }
+
+  return null;
+}

package/src/securityGroup/filter/SecurityGroupFilterModel.ts

@@ -1,8 +1,6 @@
-import { module } from 'angular';
 import { FilterModelService } from '../../filterModel';
 import type { IFilterConfig, IFilterModel } from '../../filterModel/IFilterModel';
 
-export const SECURITY_GROUP_FILTER_MODEL = 'spinnaker.core.securityGroup.filter.model';
 export const filterModelConfig: IFilterConfig[] = [
   { model: 'account', param: 'acct', type: 'trueKeyObject' },
   { model: 'detail', param: 'detail', type: 'trueKeyObject' },
@@ -23,5 +21,3 @@ export class SecurityGroupFilterModel {
     this.asFilterModel.activate();
   }
 }
-
-module(SECURITY_GROUP_FILTER_MODEL, []).service('securityGroupFilterModel', SecurityGroupFilterModel);

package/src/securityGroup/filter/SecurityGroupFilterService.ts

@@ -65,7 +65,7 @@ export class SecurityGroupFilterService {
     const currentGroups: ISecurityGroupGroup[] = SecurityGroupState.filterModel.asFilterModel.groups;
     this.diffSubgroups(currentGroups, groups);
 
-    // sort groups in place so Angular doesn't try to update the world
+    // Preserve the groups array identity for existing subscribers.
     currentGroups.sort((a: ISecurityGroupGroup, b: ISecurityGroupGroup) => {
       if (a.heading < b.heading) {
         return -1;

package/src/securityGroup/securityGroup.dataSource.ts

@@ -1,47 +1,48 @@
-import { module } from 'angular';
 import type { Application } from '../application/application.model';
 import { INFRASTRUCTURE_KEY } from '../application/nav/defaultCategories';
 import { ApplicationDataSourceRegistry } from '../application/service/ApplicationDataSourceRegistry';
 import type { ISecurityGroup } from '../domain';
 import { EntityTagsReader } from '../entityTag/EntityTagsReader';
 import { addManagedResourceMetadataToSecurityGroups } from '../managed';
-
 import type { SecurityGroupReader } from './securityGroupReader.service';
-import { SECURITY_GROUP_READER } from './securityGroupReader.service';
 
-export const SECURITY_GROUP_DATA_SOURCE = 'spinnaker.core.securityGroup.dataSource';
-module(SECURITY_GROUP_DATA_SOURCE, [SECURITY_GROUP_READER]).run([
-  'securityGroupReader',
-  (securityGroupReader: SecurityGroupReader) => {
-    const loadSecurityGroups = (application: Application) => {
-      return securityGroupReader.loadSecurityGroupsByApplicationName(application.name);
-    };
+function createDataSourceConfig(securityGroupReader: SecurityGroupReader) {
+  const loadSecurityGroups = (application: Application) => {
+    return securityGroupReader.loadSecurityGroupsByApplicationName(application.name);
+  };
+
+  const addSecurityGroups = (application: Application, securityGroups: ISecurityGroup[]) => {
+    return securityGroupReader.getApplicationSecurityGroups(application, securityGroups);
+  };
+
+  const addTags = (application: Application) => {
+    EntityTagsReader.addTagsToSecurityGroups(application);
+    addManagedResourceMetadataToSecurityGroups(application);
+  };
 
-    const addSecurityGroups = (application: Application, securityGroups: ISecurityGroup[]) => {
-      return securityGroupReader.getApplicationSecurityGroups(application, securityGroups);
-    };
+  return {
+    key: 'securityGroups',
+    label: 'Firewalls',
+    category: INFRASTRUCTURE_KEY,
+    sref: '.insight.firewalls',
+    optional: true,
+    icon: 'fa fa-xs fa-fw fa-lock',
+    iconName: 'spMenuSecurityGroups' as const,
+    loader: loadSecurityGroups,
+    onLoad: addSecurityGroups,
+    afterLoad: addTags,
+    providerField: 'provider',
+    credentialsField: 'accountName',
+    regionField: 'region',
+    description: 'Network traffic access management',
+    defaultData: [] as ISecurityGroup[],
+  };
+}
 
-    const addTags = (application: Application) => {
-      EntityTagsReader.addTagsToSecurityGroups(application);
-      addManagedResourceMetadataToSecurityGroups(application);
-    };
+export function registerSecurityGroupDataSource(securityGroupReader: SecurityGroupReader): void {
+  if (ApplicationDataSourceRegistry.getDataSources().some((source) => source.key === 'securityGroups')) {
+    return;
+  }
 
-    ApplicationDataSourceRegistry.registerDataSource({
-      key: 'securityGroups',
-      label: 'Firewalls',
-      category: INFRASTRUCTURE_KEY,
-      sref: '.insight.firewalls',
-      optional: true,
-      icon: 'fa fa-xs fa-fw fa-lock',
-      iconName: 'spMenuSecurityGroups',
-      loader: loadSecurityGroups,
-      onLoad: addSecurityGroups,
-      afterLoad: addTags,
-      providerField: 'provider',
-      credentialsField: 'accountName',
-      regionField: 'region',
-      description: 'Network traffic access management',
-      defaultData: [],
-    });
-  },
-]);
+  ApplicationDataSourceRegistry.registerDataSource(createDataSourceConfig(securityGroupReader));
+}

package/src/securityGroup/securityGroup.module.js

@@ -1,16 +1,4 @@
 'use strict';
 
-import { module } from 'angular';
-
-import { SECURITY_GROUP_FILTER } from './filter/securityGroup.filter.component';
-import { SECURITY_GROUP_DATA_SOURCE } from './securityGroup.dataSource';
-import { SECURITY_GROUP_STATES } from './securityGroup.states';
+import './securityGroup.states';
 import './securityGroupSearchResultType';
-
-export const CORE_SECURITYGROUP_SECURITYGROUP_MODULE = 'spinnaker.core.securityGroup';
-export const name = CORE_SECURITYGROUP_SECURITYGROUP_MODULE; // for backwards compatibility
-module(CORE_SECURITYGROUP_SECURITYGROUP_MODULE, [
-  SECURITY_GROUP_FILTER,
-  SECURITY_GROUP_DATA_SOURCE,
-  SECURITY_GROUP_STATES,
-]);

package/src/securityGroup/securityGroup.states.spec.ts

@@ -0,0 +1,56 @@
+import { UIRouterReact } from '@uirouter/react';
+
+import { StandaloneSecurityGroupDetails } from './StandaloneSecurityGroupDetails';
+import { getStandaloneFirewallState } from './securityGroup.states';
+import { createDeckRuntime } from '../bootstrap/DeckRuntime';
+import { setDirectRouter } from '../navigation/directRouter';
+import { configureRouter } from '../navigation/router';
+
+describe('security group states', () => {
+  const routers: UIRouterReact[] = [];
+
+  afterEach(() => {
+    routers.splice(0).forEach((router) => router.dispose());
+    setDirectRouter(null);
+  });
+
+  it('uses the React standalone security group details wrapper for standalone firewall routes', () => {
+    const state = getStandaloneFirewallState({} as any);
+
+    expect(state.views['main@']).toEqual(
+      jasmine.objectContaining({
+        component: StandaloneSecurityGroupDetails,
+        $type: 'react',
+      }),
+    );
+  });
+
+  it('resolves a standalone firewall through the direct security group reader', async () => {
+    const securityGroupsIndex = { aws: { prod: {} } };
+    const loadSecurityGroups = jasmine.createSpy('loadSecurityGroups').and.resolveTo(securityGroupsIndex);
+    const router = new UIRouterReact();
+    const runtime = createDeckRuntime(router);
+    spyOn(runtime.services.securityGroupReader, 'loadSecurityGroups').and.callFake(loadSecurityGroups);
+    router.disposable({ dispose: runtime.dispose });
+    configureRouter(router, runtime.services, runtime.routingState);
+    routers.push(router);
+
+    await router.stateService.go(
+      'home.firewallDetails',
+      {
+        accountId: 'prod',
+        name: 'web',
+        provider: 'aws',
+        region: 'eu-west-1',
+        vpcId: 'vpc-1',
+      },
+      { location: false },
+    );
+
+    const app = router.globals.successfulTransitions.peekTail().injector().get('app') as any;
+    expect(router.stateService.current.name).toBe('home.firewallDetails');
+    expect(loadSecurityGroups).toHaveBeenCalledTimes(1);
+    expect(app.name).toBe('web');
+    expect(app.securityGroupsIndex).toBe(securityGroupsIndex);
+  });
+});