@spinnaker/amazon 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/AmazonImageSelectInput.spec.tsx

@@ -1,101 +1,125 @@
-import { mock } from 'angular';
-import type { ReactWrapper, ShallowWrapper } from 'enzyme';
-import { mount, shallow } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 
-import { Application } from '@spinnaker/core';
-import { REACT_MODULE } from '@spinnaker/core';
+import type { Application, TetheredSelect as TetheredSelectType } from '@spinnaker/core';
+import { TetheredSelect } from '@spinnaker/core';
 
-import type { IAmazonImageSelectorProps, IAmazonImageSelectorState } from './AmazonImageSelectInput';
 import { AmazonImageSelectInput } from './AmazonImageSelectInput';
-// eslint-disable-next-line @spinnaker/import-from-npm-not-relative
-import { mockHttpClient } from '../../../../core/src/api/mock/jasmine';
 import type { IAmazonImage } from '../../image';
-const application = new Application('testapp', null, []);
-const region = 'us-region-1';
-const credentials = 'prodaccount';
-const imageName = 'fancypackage-1.0.0-h005.6c8b5fe-x86_64-20181206030728-xenial-hvm-sriov-ebs';
-const amiId = 'fake-abcd123';
-
-describe('<AmazonImageSelectInput/>', () => {
-  let shallowComponent: ShallowWrapper<IAmazonImageSelectorProps, IAmazonImageSelectorState>;
-  let mountedComponent: ReactWrapper<IAmazonImageSelectorProps, IAmazonImageSelectorState>;
-
-  beforeEach(mock.module(REACT_MODULE));
-  beforeEach(mock.inject());
-
-  afterEach(() => {
-    shallowComponent && shallowComponent.unmount();
-    mountedComponent && mountedComponent.unmount();
+import { AwsImageReader } from '../../image';
+
+function makeImage(imageName: string, amiId: string, region = 'us-east-1'): IAmazonImage {
+  return {
+    imageName,
+    amis: { [region]: [amiId] },
+    attributes: { virtualizationType: 'hvm', architecture: 'x86_64', creationDate: '2024-01-01T00:00:00.000Z' },
+  } as IAmazonImage;
+}
+
+describe('AmazonImageSelectInput', () => {
+  const application = ({ name: 'app' } as unknown) as Application;
+  const image1 = makeImage('app-package-1.0', 'ami-111');
+  const image2 = makeImage('app-package-2.0', 'ami-222');
+
+  beforeEach(() => {
+    spyOn(AwsImageReader.prototype, 'findImages').and.returnValue(Promise.resolve([image1, image2]));
+    spyOn(AwsImageReader.prototype, 'getImage').and.returnValue(Promise.resolve(null));
   });
 
-  const baseProps = {
-    application,
-    credentials,
-    region,
-    value: {} as IAmazonImage,
-    onChange: () => null as any,
-  };
-
-  describe('fetches package images when mounted', () => {
-    it('using application name when no amiId is present in the initial value', async () => {
-      const http = mockHttpClient();
-      http.expectGET(`/images/find?q=testapp*`).respond(200, []);
-      shallowComponent = shallow(<AmazonImageSelectInput {...baseProps} />);
-      await http.flush();
+  async function settle(component: ReactWrapper): Promise<void> {
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
     });
+    component.update();
+  }
 
-    it('and updates isLoadingPackageImages', async () => {
-      const http = mockHttpClient();
-      http.expectGET(`/images/find?q=testapp*`).respond(200, []);
-      shallowComponent = shallow(<AmazonImageSelectInput {...baseProps} />);
-      expect(shallowComponent.state().isLoadingPackageImages).toBe(true);
-      await http.flush();
-      expect(shallowComponent.state().isLoadingPackageImages).toBe(false);
-    });
+  // The package-images dropdown's menu is only rendered by the underlying react-select
+  // instance once it's open, which normally happens via a real focus/mousedown DOM event.
+  // Driving the TetheredSelect instance directly is more reliable than simulating focus in a
+  // detached test DOM, and it's how a user's click on the control ultimately manifests anyway.
+  function openMenu(component: ReactWrapper): void {
+    (component.find(TetheredSelect).instance() as TetheredSelectType).setState({ isOpen: true });
+    component.update();
+  }
 
-    it('using fetching image by amiId and looking up via the imageName', async () => {
-      const http = mockHttpClient();
-      const value = AmazonImageSelectInput.makeFakeImage(imageName, amiId, region);
-      http.expectGET(`/images/${credentials}/${region}/${amiId}?provider=aws`).respond(200, [value]);
-      http.expectGET(`/images/find?q=fancypackage-*`).respond(200, []);
-      shallowComponent = shallow(<AmazonImageSelectInput {...baseProps} value={value} />);
-      await http.flush();
-    });
+  function mountInput(onChange: (image: IAmazonImage) => void, value: IAmazonImage = null) {
+    return mount(
+      <AmazonImageSelectInput
+        onChange={onChange}
+        value={value}
+        application={application}
+        credentials="test"
+        region="us-east-1"
+      />,
+    );
+  }
 
-    it('using application name when an amiId is present in the initial value, but the image was not found', async () => {
-      const http = mockHttpClient();
-      const value = AmazonImageSelectInput.makeFakeImage(imageName, amiId, region);
-      http.expectGET(`/images/${credentials}/${region}/${amiId}?provider=aws`).respond(200, null);
-      http.expectGET(`/images/find?q=${application.name}*`).respond(200, []);
-      shallowComponent = shallow(<AmazonImageSelectInput {...baseProps} value={value} />);
-      await http.flush();
-    });
+  it('renders a single options menu wrapper, not a nested duplicate', async () => {
+    const component = mountInput(jasmine.createSpy('onChange'));
+    await settle(component);
+    openMenu(component);
+
+    // Regression test: buildImageMenu used to re-wrap its options in a second
+    // ".Select-menu-outer > .Select-menu" pair on top of react-select's own wrapper. The inner
+    // duplicate kept its default `position: absolute` styling instead of the `position: static`
+    // override TetheredSelect applies to the outermost wrapper, which broke the sizing/hit-testing
+    // of the real, Tether-positioned menu: the list was visible but clicks landed on nothing.
+    expect(component.find('.Select-menu-outer').length).toBe(1);
   });
 
-  it('calls onChange with the backend image when the package images are loaded', async () => {
-    const http = mockHttpClient();
-    const value = AmazonImageSelectInput.makeFakeImage(imageName, amiId, region);
-    const backendValue = AmazonImageSelectInput.makeFakeImage(imageName, amiId, region);
+  it('selects the clicked image from the package images dropdown', async () => {
     const onChange = jasmine.createSpy('onChange');
-    http.expectGET(`/images/${credentials}/${region}/${amiId}?provider=aws`).respond(200, [backendValue]);
-    http.expectGET(`/images/find?q=fancypackage-*`).respond(200, [backendValue]);
-    mountedComponent = mount(<AmazonImageSelectInput {...baseProps} onChange={onChange} value={value} />);
-    await http.flush();
+    const component = mountInput(onChange);
+    await settle(component);
+    openMenu(component);
 
-    expect(onChange).toHaveBeenCalledWith(backendValue);
+    const options = component.find('.Select-option');
+    expect(options.length).toBe(2);
+    options.first().simulate('mousedown');
+
+    expect(onChange).toHaveBeenCalledWith(jasmine.objectContaining({ imageName: image1.imageName }));
   });
 
-  it('calls onChange with null image when the image is not found in the package images', async () => {
-    const http = mockHttpClient();
-    const value = AmazonImageSelectInput.makeFakeImage(imageName, amiId, region);
-    const noResults = [] as IAmazonImage[];
-    http.expectGET(`/images/${credentials}/${region}/${amiId}?provider=aws`).respond(200, noResults);
-    http.expectGET(`/images/find?q=testapp*`).respond(200, noResults);
+  it('provides a way back from "Search All Images" to the package images dropdown', async () => {
+    const component = mountInput(jasmine.createSpy('onChange'));
+    await settle(component);
+
+    expect(component.text()).toContain('Pick an image');
+
+    component.find('button.link').simulate('click');
+    component.update();
+    expect(component.text()).toContain('Search for an image');
+
+    // Regression test: there used to be no control to switch back out of search-all-images mode.
+    const backButton = component.find('button.link');
+    expect(backButton.text()).toContain('Back to Package Images');
+    backButton.simulate('click');
+    component.update();
+
+    expect(component.text()).toContain('Pick an image');
+  });
+
+  it('selects the clicked image while searching all images', async () => {
     const onChange = jasmine.createSpy('onChange');
-    mountedComponent = mount(<AmazonImageSelectInput {...baseProps} onChange={onChange} value={value} />);
-    await http.flush();
+    const component = mountInput(onChange);
+    await settle(component);
+
+    component.find('button.link').simulate('click');
+    component.update();
+
+    // Populate search results directly, bypassing the debounced RxJS search pipeline, which is
+    // not what this test is exercising.
+    (component.instance() as AmazonImageSelectInput).setState({ searchString: 'app', searchResults: [image2] });
+    component.update();
+    openMenu(component);
+
+    const options = component.find('.Select-option');
+    expect(options.length).toBe(1);
+    options.first().simulate('mousedown');
 
-    expect(onChange).toHaveBeenCalledWith(undefined);
+    expect(onChange).toHaveBeenCalledWith(jasmine.objectContaining({ imageName: image2.imageName }));
   });
 });

package/src/serverGroup/configure/AmazonImageSelectInput.tsx

@@ -1,4 +1,3 @@
-import { $q } from 'ngimport';
 import React from 'react';
 import type { HandlerRendererResult, MenuRendererProps, Option, OptionValues, ReactSelectProps } from 'react-select';
 import {
@@ -40,7 +39,7 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
     errorMessage: null,
     selectionMode: 'packageImages',
     searchString: '',
-    searchResults: null,
+    searchResults: [],
     isSearching: false,
     packageImages: null,
     isLoadingPackageImages: true,
@@ -64,7 +63,7 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
     return { imageName, amis, attributes } as IAmazonImage;
   }
 
-  private loadImagesFromApplicationName(application: Application): PromiseLike<IAmazonImage[]> {
+  private loadImagesFromApplicationName(application: Application): Promise<IAmazonImage[]> {
     const query = application.name.replace(/_/g, '[_\\-]') + '*';
     return this.awsImageReader.findImages({ q: query });
   }
@@ -82,13 +81,15 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
     return tooShort ? null : packageBase + (addDashToQuery ? '-*' : '*');
   }
 
-  private loadImageById(imageId: string, region: string, credentials: string): PromiseLike<IAmazonImage> {
-    return !imageId ? $q.when(null) : this.awsImageReader.getImage(imageId, region, credentials).catch(() => null);
+  private loadImageById(imageId: string, region: string, credentials: string): Promise<IAmazonImage> {
+    return !imageId
+      ? Promise.resolve(null)
+      : this.awsImageReader.getImage(imageId, region, credentials).catch(() => null);
   }
 
-  private searchForImages(query: string): PromiseLike<IAmazonImage[]> {
+  private searchForImages(query: string): Promise<IAmazonImage[]> {
     const hasMinLength = query && query.length >= 3;
-    return hasMinLength ? this.awsImageReader.findImages({ q: query }) : $q.when([]);
+    return hasMinLength ? this.awsImageReader.findImages({ q: query }) : Promise.resolve([]);
   }
 
   private fetchPackageImages(
@@ -96,7 +97,7 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
     region: string,
     credentials: string,
     application: Application,
-  ): PromiseLike<IAmazonImage[]> {
+  ): Promise<IAmazonImage[]> {
     const imageId = value && value.amis && value.amis[region] && value.amis[region][0];
 
     return this.loadImageById(imageId, region, credentials).then((image) => {
@@ -214,15 +215,19 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
   private buildImageMenu = (params: MenuRendererProps): HandlerRendererResult => {
     const { ImageMenuHeading, ImageLabel } = this;
     const { options } = params;
+    // Note: react-select's renderOuter() already wraps whatever this returns in its own
+    // ".Select-menu-outer > .Select-menu" pair (which is what TetheredSelect repositions
+    // via Tether). Re-wrapping here duplicates that structure with a second ".Select-menu-outer",
+    // which keeps its default `position: absolute` styling and collapses the real, tethered
+    // container's height - the list still renders, but the clickable area no longer lines up
+    // with what's painted on screen, so selecting an option silently does nothing.
     return (
-      <div className="Select-menu-outer">
-        <div className="Select-menu" role="listbox">
-          {options.length > 0 && <ImageMenuHeading />}
-          {options.map((o) => (
-            <ImageLabel key={o.imageName} option={o} params={params} />
-          ))}
-        </div>
-      </div>
+      <>
+        {options.length > 0 && <ImageMenuHeading />}
+        {options.map((o) => (
+          <ImageLabel key={o.imageName} option={o} params={params} />
+        ))}
+      </>
     );
   };
 
@@ -269,7 +274,13 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
     return (
       <div
         key={option.imageName}
-        onClick={() => params.selectValue(option)}
+        onMouseDown={(event) => {
+          // Match react-select's own Option component: select on mousedown (not click) and
+          // prevent the default browser action so the input doesn't blur/close the menu first.
+          event.preventDefault();
+          event.stopPropagation();
+          params.selectValue(option);
+        }}
         onMouseOver={() => params.focusOption(option)}
         className={`Select-option ${
           params.focusedOption && params.focusedOption.imageName === option.imageName ? 'is-focused' : ''
@@ -358,7 +369,7 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
             placeholder="Search for an image..."
             filterOptions={false as any}
             noResultsText={searchNoResultsText}
-            options={searchResults}
+            options={searchResults ?? []}
             onInputChange={(searchInput) => {
               this.searchInput$.next(searchInput);
               return searchInput;
@@ -366,6 +377,14 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
             onChange={onChange}
           />
           {error}
+          <button
+            type="button"
+            className="link"
+            onClick={() => this.setState({ selectionMode: 'packageImages', searchString: '', searchResults: null })}
+          >
+            Back to Package Images
+          </button>{' '}
+          <HelpField id="aws.serverGroup.allImages" />
         </div>
       );
     } else if (isPackageImagesLoaded) {

package/src/serverGroup/configure/serverGroupCommandBuilder.aws.service.spec.js

@@ -9,20 +9,18 @@ import {
   mockLaunchTemplateData,
   mockServerGroup,
 } from '@spinnaker/mocks';
+import { createAwsServerGroupCommandBuilder } from './serverGroupCommandBuilder.service';
 
 describe('Service: awsServerGroup', function () {
-  beforeEach(window.module(require('./serverGroupCommandBuilder.service').name));
-
   let instanceTypeService;
-  beforeEach(
-    window.inject(function (awsServerGroupCommandBuilder, _instanceTypeService_, _$q_, $rootScope) {
-      this.service = awsServerGroupCommandBuilder;
-      this.$q = _$q_;
-      this.$scope = $rootScope;
-      instanceTypeService = _instanceTypeService_;
-      spyOn(instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(_$q_.when('custom'));
-    }),
-  );
+  beforeEach(function () {
+    instanceTypeService = {
+      getCategoryForMultipleInstanceTypes: jasmine
+        .createSpy('getCategoryForMultipleInstanceTypes')
+        .and.returnValue(Promise.resolve('custom')),
+    };
+    this.service = createAwsServerGroupCommandBuilder(instanceTypeService);
+  });
 
   afterEach(AWSProviderSettings.resetToOriginal);
 
@@ -46,44 +44,30 @@ describe('Service: awsServerGroup', function () {
         region: 'us-east-1',
       };
 
-      spyOn(AccountService, 'getAvailabilityZonesForAccountAndRegion').and.returnValue(this.$q.when(['d', 'g']));
+      spyOn(AccountService, 'getAvailabilityZonesForAccountAndRegion').and.returnValue(Promise.resolve(['d', 'g']));
 
       spyOn(AccountService, 'getCredentialsKeyedByAccount').and.returnValue(
-        this.$q.when({
+        Promise.resolve({
           test: ['us-east-1', 'us-west-1'],
           prod: ['us-west-1', 'eu-west-1'],
         }),
       );
     });
 
-    it('applies account, region from cluster', function () {
-      var command = null;
-      this.service.buildServerGroupCommandFromPipeline({}, this.cluster).then(function (result) {
-        command = result;
-      });
-
-      this.$scope.$digest();
+    it('applies account, region from cluster', async function () {
+      const command = await this.service.buildServerGroupCommandFromPipeline({}, this.cluster);
 
       expect(command.credentials).toBe('prod');
       expect(command.region).toBe('us-west-1');
     });
 
-    it('sets usePreferredZones', function () {
-      var command = null;
-      this.service.buildServerGroupCommandFromPipeline({}, this.cluster).then(function (result) {
-        command = result;
-      });
-
-      this.$scope.$digest();
+    it('sets usePreferredZones', async function () {
+      let command = await this.service.buildServerGroupCommandFromPipeline({}, this.cluster);
       expect(command.viewState.usePreferredZones).toBe(true);
 
       // remove an availability zone, should be false
       this.cluster.availabilityZones['us-west-1'].pop();
-      this.service.buildServerGroupCommandFromPipeline({}, this.cluster).then(function (result) {
-        command = result;
-      });
-
-      this.$scope.$digest();
+      command = await this.service.buildServerGroupCommandFromPipeline({}, this.cluster);
       expect(command.viewState.usePreferredZones).toBe(false);
     });
 
@@ -136,12 +120,8 @@ describe('Service: awsServerGroup', function () {
       ];
 
       clusters.forEach((test) => {
-        it(`cluster with ${test.desc}`, function () {
-          let actualCommand = null;
-          this.service.buildServerGroupCommandFromPipeline({}, test.cluster).then(function (result) {
-            actualCommand = result;
-          });
-          this.$scope.$digest();
+        it(`cluster with ${test.desc}`, async function () {
+          const actualCommand = await this.service.buildServerGroupCommandFromPipeline({}, test.cluster);
 
           expect(instanceTypeService.getCategoryForMultipleInstanceTypes).toHaveBeenCalledWith(
             'aws',
@@ -157,11 +137,11 @@ describe('Service: awsServerGroup', function () {
 
   describe('buildServerGroupCommandFromExisting', function () {
     beforeEach(function () {
-      spyOn(AccountService, 'getPreferredZonesByAccount').and.returnValue(this.$q.when([]));
-      spyOn(SubnetReader, 'listSubnets').and.returnValue(this.$q.when([]));
+      spyOn(AccountService, 'getPreferredZonesByAccount').and.returnValue(Promise.resolve([]));
+      spyOn(SubnetReader, 'listSubnets').and.returnValue(Promise.resolve([]));
     });
 
-    it('retains non-core suspended processes', function () {
+    it('retains non-core suspended processes', async function () {
       var serverGroup = {
         asg: {
           availabilityZones: [],
@@ -175,16 +155,11 @@ describe('Service: awsServerGroup', function () {
         },
         launchTemplate: mockLaunchTemplate,
       };
-      var command = null;
-      this.service.buildServerGroupCommandFromExisting({}, serverGroup).then(function (result) {
-        command = result;
-      });
-
-      this.$scope.$digest();
+      const command = await this.service.buildServerGroupCommandFromExisting({}, serverGroup);
       expect(command.suspendedProcesses).toEqual(['AZRebalance']);
     });
 
-    it('sets source capacity flags when creating for pipeline', function () {
+    it('sets source capacity flags when creating for pipeline', async function () {
       var serverGroup = {
         asg: {
           availabilityZones: [],
@@ -193,12 +168,7 @@ describe('Service: awsServerGroup', function () {
         },
         launchTemplate: mockLaunchTemplate,
       };
-      var command = null;
-      this.service.buildServerGroupCommandFromExisting({}, serverGroup, 'editPipeline').then(function (result) {
-        command = result;
-      });
-
-      this.$scope.$digest();
+      const command = await this.service.buildServerGroupCommandFromExisting({}, serverGroup, 'editPipeline');
 
       expect(command.viewState.useSimpleCapacity).toBe(false);
       expect(command.useSourceCapacity).toBe(true);
@@ -390,12 +360,8 @@ describe('Service: awsServerGroup', function () {
       ];
 
       [...serverGroupsWithoutMip, ...serverGroupsWithMip].forEach((test) => {
-        it(`extracts instanceProfile, instanceType and useSimpleInstanceTypeSelector from server group with ${test.desc} correctly`, function () {
-          let actualCommand = null;
-          this.service.buildServerGroupCommandFromExisting({}, test.sg, 'clone').then(function (result) {
-            actualCommand = result;
-          });
-          this.$scope.$digest();
+        it(`extracts instanceProfile, instanceType and useSimpleInstanceTypeSelector from server group with ${test.desc} correctly`, async function () {
+          const actualCommand = await this.service.buildServerGroupCommandFromExisting({}, test.sg, 'clone');
 
           expect(instanceTypeService.getCategoryForMultipleInstanceTypes).toHaveBeenCalledWith(
             'aws',
@@ -410,12 +376,8 @@ describe('Service: awsServerGroup', function () {
       });
 
       serverGroupsWithMip.forEach((test) => {
-        it(`extracts launchTemplateOverridesForInstanceType and sets explicit priority correctly for server group with ${test.desc}`, function () {
-          let actualCommand = null;
-          this.service.buildServerGroupCommandFromExisting({}, test.sg, 'clone').then(function (result) {
-            actualCommand = result;
-          });
-          this.$scope.$digest();
+        it(`extracts launchTemplateOverridesForInstanceType and sets explicit priority correctly for server group with ${test.desc}`, async function () {
+          const actualCommand = await this.service.buildServerGroupCommandFromExisting({}, test.sg, 'clone');
 
           expect(
             _.isEqual(