@spinnaker/ecs 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/wizard/capacityProvider/CapacityProvider.tsx

@@ -1,17 +1,15 @@
-import { module } from 'angular';
+import { isEqual } from 'lodash';
 import React from 'react';
 import { Alert } from 'react-bootstrap';
-import type { Option } from 'react-select';
-import { react2angular } from 'react2angular';
 
-import { HelpField, TetheredSelect, withErrorBoundary } from '@spinnaker/core';
+import { HelpField } from '@spinnaker/core';
 
 import type { IEcsCapacityProviderStrategyItem, IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
 
 export interface IEcsCapacityProviderProps {
   command: IEcsServerGroupCommand;
-  notifyAngular: (key: string, value: any) => void;
-  configureCommand: (query: string) => PromiseLike<void>;
+  onFieldChange: (key: string, value: any) => void;
+  configureCommand: (query: string) => Promise<void>;
 }
 
 interface IEcsCapacityProviderState {
@@ -21,9 +19,10 @@ interface IEcsCapacityProviderState {
   ecsClusterName: string;
   useDefaultCapacityProviders: boolean;
   capacityProviderLoadedFlag: boolean;
+  activeCapacityProviderIndex: number | null;
 }
 
-class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEcsCapacityProviderState> {
+export class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEcsCapacityProviderState> {
   constructor(props: IEcsCapacityProviderProps) {
     super(props);
     const cmd = this.props.command;
@@ -32,11 +31,11 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
       availableCapacityProviders: this.getAvailableCapacityProviders(cmd),
       defaultCapacityProviderStrategy: this.getDefaultCapacityProviderStrategy(cmd),
       ecsClusterName: cmd.ecsClusterName,
-      useDefaultCapacityProviders:
-        cmd.useDefaultCapacityProviders || (cmd.capacityProviderStrategy && cmd.capacityProviderStrategy.length == 0),
+      useDefaultCapacityProviders: cmd.useDefaultCapacityProviders !== false,
       capacityProviderStrategy:
         cmd.capacityProviderStrategy && cmd.capacityProviderStrategy.length > 0 ? cmd.capacityProviderStrategy : [],
       capacityProviderLoadedFlag: false,
+      activeCapacityProviderIndex: null,
     };
   }
 
@@ -44,21 +43,55 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     this.props.configureCommand('1').then(() => {
       const cmd = this.props.command;
       const useDefaultCapacityProviders = this.state.useDefaultCapacityProviders;
-      this.setState({
-        availableCapacityProviders: this.getAvailableCapacityProviders(cmd),
-        defaultCapacityProviderStrategy: this.getDefaultCapacityProviderStrategy(cmd),
-        capacityProviderStrategy: this.getCapacityProviderStrategy(useDefaultCapacityProviders, cmd),
-        capacityProviderLoadedFlag: true,
-      });
-      this.props.notifyAngular('useDefaultCapacityProviders', this.state.useDefaultCapacityProviders);
-      this.props.notifyAngular('capacityProviderStrategy', this.state.capacityProviderStrategy);
+      const capacityProviderStrategy = this.getCapacityProviderStrategy(useDefaultCapacityProviders, cmd);
+      this.setState(
+        {
+          availableCapacityProviders: this.getAvailableCapacityProviders(cmd),
+          defaultCapacityProviderStrategy: this.getDefaultCapacityProviderStrategy(cmd),
+          capacityProviderStrategy,
+          capacityProviderLoadedFlag: true,
+        },
+        () => {
+          this.props.onFieldChange('useDefaultCapacityProviders', useDefaultCapacityProviders);
+          this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
+        },
+      );
     });
   }
 
+  public componentDidUpdate() {
+    const cmd = this.props.command;
+    const useDefaultCapacityProviders = cmd.useDefaultCapacityProviders !== false;
+    const commandState = {
+      availableCapacityProviders: this.getAvailableCapacityProviders(cmd),
+      defaultCapacityProviderStrategy: this.getDefaultCapacityProviderStrategy(cmd),
+      ecsClusterName: cmd.ecsClusterName,
+      useDefaultCapacityProviders,
+      capacityProviderStrategy: useDefaultCapacityProviders
+        ? this.getDefaultCapacityProviderStrategy(cmd)
+        : cmd.capacityProviderStrategy || [],
+    };
+    const currentState = {
+      availableCapacityProviders: this.state.availableCapacityProviders,
+      defaultCapacityProviderStrategy: this.state.defaultCapacityProviderStrategy,
+      ecsClusterName: this.state.ecsClusterName,
+      useDefaultCapacityProviders: this.state.useDefaultCapacityProviders,
+      capacityProviderStrategy: this.state.capacityProviderStrategy,
+    };
+    if (!isEqual(currentState, commandState)) {
+      const strategyChanged = !isEqual(cmd.capacityProviderStrategy || [], commandState.capacityProviderStrategy);
+      this.setState(commandState, () => {
+        if (strategyChanged) {
+          this.props.onFieldChange('capacityProviderStrategy', commandState.capacityProviderStrategy);
+        }
+      });
+    }
+  }
+
   private getAvailableCapacityProviders = (cmd: IEcsServerGroupCommand) => {
-    return cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.availableCapacityProviders
-      ? cmd.backingData.filtered.availableCapacityProviders
-      : [];
+    const available = cmd.backingData?.filtered?.availableCapacityProviders || [];
+    const persisted = (cmd.capacityProviderStrategy || []).map((strategy) => strategy.capacityProvider);
+    return Array.from(new Set([...available, ...persisted])).filter(Boolean);
   };
 
   private getDefaultCapacityProviderStrategy = (cmd: IEcsServerGroupCommand) => {
@@ -79,14 +112,14 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
   private addCapacityProviderStrategy = () => {
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     capacityProviderStrategy.push({ capacityProvider: '', base: null, weight: null });
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
   };
 
   private removeCapacityProviderStrategy = (index: number) => {
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     capacityProviderStrategy.splice(index, 1);
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
   };
 
@@ -94,7 +127,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     const targetCapacityProviderStrategy = capacityProviderStrategy[index];
     targetCapacityProviderStrategy.capacityProvider = targetCapacityProviderName;
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
     this.props.command.viewState.dirty.customCapacityProviders = [];
   };
@@ -103,7 +136,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     const targetCapacityProviderStrategy = capacityProviderStrategy[index];
     targetCapacityProviderStrategy.base = targetCapacityProviderBase;
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
   };
 
@@ -111,13 +144,13 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     const targetCapacityProviderStrategy = capacityProviderStrategy[index];
     targetCapacityProviderStrategy.weight = targetCapacityProviderWeight;
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
   };
 
   private updateCapacityProviderType = (targetCapacityProviderType: boolean) => {
     this.setState({ useDefaultCapacityProviders: targetCapacityProviderType });
-    this.props.notifyAngular('useDefaultCapacityProviders', targetCapacityProviderType);
+    this.props.onFieldChange('useDefaultCapacityProviders', targetCapacityProviderType);
     this.props.command.viewState.dirty.customCapacityProviders = [];
 
     const capacityProviderStrategy =
@@ -125,7 +158,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
         ? this.state.defaultCapacityProviderStrategy
         : [];
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
-    this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
+    this.props.onFieldChange('capacityProviderStrategy', capacityProviderStrategy);
   };
 
   render(): React.ReactElement<EcsCapacityProvider> {
@@ -170,7 +203,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
       );
 
     const dirtyCapacityProviderList = customDirtyCapacityProviders
-      ? customDirtyCapacityProviders.map(function (capacityProvider, index) {
+      ? customDirtyCapacityProviders.map(function (capacityProvider: string, index: number) {
           return <li key={index}>{capacityProvider}</li>;
         })
       : '';
@@ -194,12 +227,13 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
 
     const capacityProviderInputs =
       capacityProviderStrategy.length > 0 ? (
-        capacityProviderStrategy.map(function (mapping, index) {
+        capacityProviderStrategy.map((mapping, index) => {
           return (
             <tr key={index}>
               {useDefaultCapacityProviders ? (
                 <td>
                   <input
+                    aria-label={`Capacity provider name ${index + 1}`}
                     data-test-id={'ServerGroup.defaultCapacityProvider.name.' + index}
                     type="string"
                     className="form-control input-sm no-spel"
@@ -209,20 +243,38 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
                   />
                 </td>
               ) : (
-                <td data-test-id={'ServerGroup.customCapacityProvider.name.' + index}>
-                  <TetheredSelect
-                    placeholder="Select capacity provider"
-                    options={capacityProviderNames}
-                    value={mapping.capacityProvider}
-                    onChange={(e: Option) => {
-                      updateCapacityProviderName(index, e.label as string);
+                <td>
+                  <input
+                    aria-label={`Capacity provider name ${index + 1}`}
+                    className="form-control input-sm"
+                    data-test-id={'ServerGroup.customCapacityProvider.name.' + index}
+                    onChange={(event) => {
+                      this.setState({ activeCapacityProviderIndex: index });
+                      updateCapacityProviderName(index, event.target.value);
                     }}
-                    clearable={false}
+                    onFocus={() => this.setState({ activeCapacityProviderIndex: index })}
+                    type="text"
+                    value={mapping.capacityProvider || ''}
                   />
+                  {this.state.activeCapacityProviderIndex === index &&
+                    capacityProviderNames.map((capacityProvider) => (
+                      <button
+                        className="Select-option"
+                        key={capacityProvider.value}
+                        onClick={() => {
+                          updateCapacityProviderName(index, capacityProvider.value);
+                          this.setState({ activeCapacityProviderIndex: null });
+                        }}
+                        type="button"
+                      >
+                        {capacityProvider.label}
+                      </button>
+                    ))}
                 </td>
               )}
               <td>
                 <input
+                  aria-label={`Capacity provider base ${index + 1}`}
                   data-test-id={'ServerGroup.capacityProvider.base.' + index}
                   disabled={useDefaultCapacityProviders}
                   type="number"
@@ -233,6 +285,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
               </td>
               <td>
                 <input
+                  aria-label={`Capacity provider weight ${index + 1}`}
                   data-test-id={'ServerGroup.capacityProvider.weight.' + index}
                   disabled={useDefaultCapacityProviders}
                   type="number"
@@ -245,10 +298,15 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
               {!useDefaultCapacityProviders ? (
                 <td>
                   <div className="form-control-static">
-                    <a className="btn-link sm-label" onClick={() => removeCapacityProviderStrategy(index)}>
+                    <button
+                      aria-label={`Remove capacity provider ${index + 1}`}
+                      className="btn-link sm-label"
+                      onClick={() => removeCapacityProviderStrategy(index)}
+                      type="button"
+                    >
                       <span className="glyphicon glyphicon-trash" />
                       <span className="sr-only">Remove</span>
-                    </a>
+                    </button>
                   </div>
                 </td>
               ) : (
@@ -281,6 +339,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
           data-test-id="ServerGroup.addCapacityProvider"
           className="btn btn-block btn-sm add-new"
           onClick={addCapacityProviderStrategy}
+          type="button"
         >
           <span className="glyphicon glyphicon-plus-sign" />
           Add New Capacity Provider
@@ -369,13 +428,3 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     );
   }
 }
-
-export const ECS_CAPACITY_PROVIDER_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.capacityProvider.react';
-module(ECS_CAPACITY_PROVIDER_REACT, []).component(
-  'ecsCapacityProviderReact',
-  react2angular(withErrorBoundary(EcsCapacityProvider, 'ecsCapacityProviderReact'), [
-    'command',
-    'notifyAngular',
-    'configureCommand',
-  ]),
-);

package/src/serverGroup/configure/wizard/container/Container.spec.tsx

@@ -15,7 +15,7 @@ describe('Container', () => {
   let command: IEcsServerGroupCommand;
 
   const configureCommand = (_query: string) => Promise.resolve() as PromiseLike<void>;
-  const notifyAngular = (_key: string, _value: any) => {};
+  const onFieldChange = (_key: string, _value: any) => {};
 
   const dockerAccounts: IAccountDetails[] = [
     {
@@ -50,7 +50,7 @@ describe('Container', () => {
   describe('updateDockerRegistryAccount', () => {
     it('calls DockerImageReader.findImages with the selected account', async () => {
       const wrapper = mount(
-        <Container command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <Container command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       await flushPromises();
@@ -66,21 +66,33 @@ describe('Container', () => {
 
     it('updates component state and backingData with images returned for the account', async () => {
       const wrapper = mount(
-        <Container command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <Container command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       (wrapper.instance() as any).updateDockerRegistryAccount({ value: 'my-docker-account' });
       await flushPromises();
       wrapper.update();
 
-      expect((wrapper.instance() as Container).state.dockerImages).toEqual(dockerImages as IEcsDockerImage[]);
-      expect(command.backingData.filtered.images).toEqual(dockerImages as IEcsDockerImage[]);
+      const expectedImages = [
+        {
+          ...dockerImages[0],
+          imageId: 'my-registry/my-repo:latest',
+          message: '',
+          fromTrigger: false,
+          fromContext: false,
+          stageId: '',
+          imageLabelOrSha: '',
+        },
+      ];
+
+      expect((wrapper.instance() as Container).state.dockerImages).toEqual(expectedImages as IEcsDockerImage[]);
+      expect(command.backingData.filtered.images).toEqual(expectedImages as IEcsDockerImage[]);
     });
 
     it('clears existing images immediately when account changes', () => {
       command.backingData.filtered.images = dockerImages as IEcsDockerImage[];
       const wrapper = mount(
-        <Container command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <Container command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       (wrapper.instance() as any).updateDockerRegistryAccount({ value: 'my-docker-account' });
@@ -104,7 +116,7 @@ describe('Container', () => {
       } as IEcsDockerImage;
 
       const wrapper = mount(
-        <Container command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <Container command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       expect((wrapper.instance() as Container).state.selectedDockerAccount).toBe('my-docker-account');
@@ -112,7 +124,7 @@ describe('Container', () => {
 
     it('starts with no account selected when imageDescription has no account', () => {
       const wrapper = mount(
-        <Container command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <Container command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       expect((wrapper.instance() as Container).state.selectedDockerAccount).toBe('');

package/src/serverGroup/configure/wizard/container/Container.tsx

@@ -1,14 +1,13 @@
-import { module } from 'angular';
-import { isEqual, uniqWith } from 'lodash';
+import { isEqual, uniq, uniqWith } from 'lodash';
 import * as React from 'react';
 import { Alert } from 'react-bootstrap';
 import type { Option } from 'react-select';
-import { react2angular } from 'react2angular';
 
 import type { IAccountDetails } from '@spinnaker/core';
-import { AccountService, HelpField, TetheredSelect, withErrorBoundary } from '@spinnaker/core';
+import { AccountService, HelpField, TetheredSelect } from '@spinnaker/core';
 import { DockerImageReader } from '@spinnaker/docker';
 
+import { normalizeEcsDockerImage } from '../../dockerImage.util';
 import type {
   IEcsDockerImage,
   IEcsServerGroupCommand,
@@ -17,8 +16,8 @@ import type {
 
 export interface IContainerProps {
   command: IEcsServerGroupCommand;
-  notifyAngular: (key: string, value: any) => void;
-  configureCommand: (query: string) => PromiseLike<void>;
+  onFieldChange: (key: string, value: any) => void;
+  configureCommand: (query: string) => Promise<void>;
 }
 
 interface IContainerState {
@@ -67,7 +66,10 @@ export class Container extends React.Component<IContainerProps, IContainerState>
       dockerRegistryAccounts: [],
       selectedDockerAccount: cmd.imageDescription?.account ?? '',
       targetGroupMappings: cmd.targetGroupMappings,
-      targetGroupsAvailable: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.targetGroups : [],
+      targetGroupsAvailable: uniq([
+        ...(cmd.backingData?.filtered?.targetGroups || []),
+        ...cmd.targetGroupMappings.map((mapping) => mapping.targetGroup).filter(Boolean),
+      ]),
     };
 
     this.state.targetGroupMappings.forEach((targetGroupMapping) => {
@@ -83,11 +85,35 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     this.props.configureCommand('1').then(() => {
       this.setState({
         dockerImages: this.props.command.backingData.filtered.images,
-        targetGroupsAvailable: this.props.command.backingData.filtered.targetGroups,
+        targetGroupsAvailable: uniq([
+          ...(this.props.command.backingData.filtered.targetGroups || []),
+          ...this.state.targetGroupMappings.map((mapping) => mapping.targetGroup).filter(Boolean),
+        ]),
       });
     });
   }
 
+  public componentDidUpdate() {
+    const cmd = this.props.command;
+    const targetGroupMappings = cmd.targetGroupMappings || [];
+    const nextState: IContainerState = {
+      imageDescription: cmd.imageDescription || this.getEmptyImageDescription(),
+      computeUnits: cmd.computeUnits,
+      reservedMemory: cmd.reservedMemory,
+      dockerImages: cmd.backingData?.filtered?.images || [],
+      dockerRegistryAccounts: this.state.dockerRegistryAccounts,
+      selectedDockerAccount: this.state.selectedDockerAccount,
+      targetGroupMappings,
+      targetGroupsAvailable: uniq([
+        ...(cmd.backingData?.filtered?.targetGroups || []),
+        ...targetGroupMappings.map((mapping) => mapping.targetGroup).filter(Boolean),
+      ]),
+    };
+    if (!isEqual(this.state, nextState)) {
+      this.setState(nextState);
+    }
+  }
+
   // TODO: Separate docker image component used by both TaskDefinition and Container
 
   private getIdToImageMap = (): Map<string, IEcsDockerImage> => {
@@ -116,9 +142,10 @@ export class Container extends React.Component<IContainerProps, IContainerState>
 
   private updateDockerRegistryAccount = (newAccount: Option<string>) => {
     const account = newAccount.value;
+    this.props.command.backingData.filtered.images = [];
     this.setState({ selectedDockerAccount: account, dockerImages: [] });
     DockerImageReader.findImages({ provider: 'dockerRegistry', account, count: 50 }).then((images) => {
-      const ecsImages = images as IEcsDockerImage[];
+      const ecsImages = images.map((image) => normalizeEcsDockerImage(image));
       this.props.command.backingData.filtered.images = ecsImages;
       this.setState({ dockerImages: ecsImages });
     });
@@ -137,17 +164,17 @@ export class Container extends React.Component<IContainerProps, IContainerState>
       newImageDescription = this.getEmptyImageDescription();
     }
 
-    this.props.notifyAngular('imageDescription', newImageDescription);
+    this.props.onFieldChange('imageDescription', newImageDescription);
     this.setState({ imageDescription: newImageDescription });
   };
 
   private updateComputeUnits = (newComputeUnits: number) => {
-    this.props.notifyAngular('computeUnits', newComputeUnits);
+    this.props.onFieldChange('computeUnits', newComputeUnits);
     this.setState({ computeUnits: newComputeUnits });
   };
 
   private updateReservedMemory = (newReservedMemory: number) => {
-    this.props.notifyAngular('reservedMemory', newReservedMemory);
+    this.props.onFieldChange('reservedMemory', newReservedMemory);
     this.setState({ reservedMemory: newReservedMemory });
   };
 
@@ -155,7 +182,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     const currentMappings = this.state.targetGroupMappings;
     const targetMapping = currentMappings[index];
     targetMapping.targetGroup = newTargetGroup.value;
-    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.props.onFieldChange('targetGroupMappings', currentMappings);
     this.setState({ targetGroupMappings: currentMappings });
     this.updateDirtyTargetGroups();
   };
@@ -164,14 +191,14 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     const currentMappings = this.state.targetGroupMappings;
     const targetMapping = currentMappings[index];
     targetMapping.containerPort = targetPort;
-    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.props.onFieldChange('targetGroupMappings', currentMappings);
     this.setState({ targetGroupMappings: currentMappings });
   };
 
   private removeTargetGroupMapping = (index: number) => {
     const currentMappings = this.state.targetGroupMappings;
     currentMappings.splice(index, 1);
-    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.props.onFieldChange('targetGroupMappings', currentMappings);
     this.setState({ targetGroupMappings: currentMappings });
   };
 
@@ -205,7 +232,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     });
 
     const dirtyTargetGroupList = dirtyTagetGroups
-      ? dirtyTagetGroups.map(function (targetGroup, index) {
+      ? dirtyTagetGroups.map(function (targetGroup: string, index: number) {
           return <li key={index}>{targetGroup}</li>;
         })
       : '';
@@ -227,6 +254,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
         className="btn btn-block btn-sm add-new"
         data-test-id="ContainerInputs.targetGroupAdd"
         onClick={this.pushTargetGroupMapping}
+        type="button"
       >
         <span className="glyphicon glyphicon-plus-sign" />
         Add New Target Group Mapping
@@ -246,6 +274,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
         <tr key={index}>
           <td data-test-id="ContainerInputs.targetGroup">
             <TetheredSelect
+              inputProps={{ 'aria-label': `Target group ${index + 1}` }}
               placeholder="Select a target group to use..."
               options={targetGroupsAvailable}
               value={mapping.targetGroup.toString()}
@@ -255,6 +284,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
           </td>
           <td>
             <input
+              aria-label={`Target port ${index + 1}`}
               data-test-id="ContainerInputs.targetGroupPort"
               type="number"
               className="form-control input-sm no-spel"
@@ -265,14 +295,16 @@ export class Container extends React.Component<IContainerProps, IContainerState>
           </td>
           <td>
             <div className="form-control-static">
-              <a
+              <button
+                aria-label={`Remove target group mapping ${index + 1}`}
                 className="btn-link sm-label"
                 data-test-id="ContainerInputs.targetGroupRemove"
                 onClick={() => removeTargetGroupMapping(index)}
+                type="button"
               >
                 <span className="glyphicon glyphicon-trash" />
                 <span className="sr-only">Remove</span>
-              </a>
+              </button>
             </div>
           </td>
         </tr>
@@ -303,6 +335,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
           </div>
           <div className="col-md-9" data-test-id="ContainerInputs.containerImage">
             <TetheredSelect
+              inputProps={{ 'aria-label': 'Container image' }}
               placeholder="Select an image to use..."
               options={dockerImageOptions}
               value={this.state.imageDescription.imageId}
@@ -320,6 +353,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
           </div>
           <div className="col-md-9" style={{ width: '100px' }}>
             <input
+              aria-label="Compute units"
               data-test-id="ContainerInputs.computeUnits"
               type="number"
               className="form-control input-sm no-spel"
@@ -336,6 +370,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
           </div>
           <div className="col-md-9" style={{ width: '100px' }}>
             <input
+              aria-label="Reserved memory"
               data-test-id="ContainerInputs.reservedMemory"
               type="number"
               className="form-control input-sm no-spel"
@@ -378,9 +413,3 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     );
   }
 }
-
-export const CONTAINER_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.container.react';
-module(CONTAINER_REACT, []).component(
-  'containerReact',
-  react2angular(withErrorBoundary(Container, 'containerReact'), ['command', 'notifyAngular', 'configureCommand']),
-);