@spinnaker/ecs 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/wizard/serviceDiscovery/ServiceDiscovery.tsx

@@ -1,10 +1,9 @@
-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, TetheredSelect } from '@spinnaker/core';
 
 import type {
   IEcsServerGroupCommand,
@@ -13,8 +12,8 @@ import type {
 
 export interface IServiceDiscoveryProps {
   command: IEcsServerGroupCommand;
-  notifyAngular: (key: string, value: any) => void;
-  configureCommand: (query: string) => PromiseLike<void>;
+  onFieldChange: (key: string, value: any) => void;
+  configureCommand: (query: string) => Promise<void>;
 }
 
 export interface IEcsServiceDiscoveryRegistry {
@@ -37,37 +36,87 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     super(props);
     const cmd = this.props.command;
 
+    const serviceDiscoveryAssociations = this.normalizeContainerNames(
+      cmd.serviceDiscoveryAssociations || [],
+      cmd.useTaskDefinitionArtifact,
+    );
+    cmd.serviceDiscoveryAssociations = serviceDiscoveryAssociations;
     this.state = {
-      serviceDiscoveryAssociations: cmd.serviceDiscoveryAssociations,
-      serviceDiscoveryRegistriesAvailable:
-        cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.serviceDiscoveryRegistries : [],
+      serviceDiscoveryAssociations,
+      serviceDiscoveryRegistriesAvailable: this.mergeRegistries(
+        cmd.backingData?.filtered?.serviceDiscoveryRegistries || [],
+        serviceDiscoveryAssociations,
+      ),
       useTaskDefinitionArtifact: cmd.useTaskDefinitionArtifact,
     };
-
-    if (!this.state.useTaskDefinitionArtifact) {
-      this.state.serviceDiscoveryAssociations.forEach((serviceDiscoveryRegistryAssociation) => {
-        serviceDiscoveryRegistryAssociation.containerName = null;
-      });
-    }
   }
 
   public componentDidMount() {
     this.props.configureCommand('1').then(() => {
       this.setState({
-        serviceDiscoveryRegistriesAvailable: this.props.command.backingData.filtered.serviceDiscoveryRegistries,
+        serviceDiscoveryRegistriesAvailable: this.mergeRegistries(
+          this.props.command.backingData.filtered.serviceDiscoveryRegistries || [],
+          this.state.serviceDiscoveryAssociations,
+        ),
       });
     });
   }
 
+  public componentDidUpdate() {
+    const cmd = this.props.command;
+    const currentAssociations = cmd.serviceDiscoveryAssociations || [];
+    const serviceDiscoveryAssociations = this.normalizeContainerNames(
+      currentAssociations,
+      cmd.useTaskDefinitionArtifact,
+    );
+    if (!isEqual(currentAssociations, serviceDiscoveryAssociations)) {
+      cmd.serviceDiscoveryAssociations = serviceDiscoveryAssociations;
+      this.props.onFieldChange('serviceDiscoveryAssociations', serviceDiscoveryAssociations);
+    }
+    const nextState: IServiceDiscoveryState = {
+      serviceDiscoveryAssociations,
+      serviceDiscoveryRegistriesAvailable: this.mergeRegistries(
+        cmd.backingData?.filtered?.serviceDiscoveryRegistries || [],
+        serviceDiscoveryAssociations,
+      ),
+      useTaskDefinitionArtifact: cmd.useTaskDefinitionArtifact,
+    };
+    if (!isEqual(this.state, nextState)) {
+      this.setState(nextState);
+    }
+  }
+
+  private normalizeContainerNames = (
+    associations: IEcsServiceDiscoveryRegistryAssociation[],
+    useTaskDefinitionArtifact: boolean,
+  ): IEcsServiceDiscoveryRegistryAssociation[] => {
+    const normalized = associations.map((association) => ({
+      ...association,
+      containerName: useTaskDefinitionArtifact ? association.containerName || '' : null,
+    }));
+    return isEqual(associations, normalized) ? associations : normalized;
+  };
+
   private getNameToRegistryMap = (): Map<string, IEcsServiceDiscoveryRegistry> => {
     const displayNameToRegistry = new Map<string, IEcsServiceDiscoveryRegistry>();
-    this.props.command.backingData.filtered.serviceDiscoveryRegistries.forEach((e) => {
+    this.state.serviceDiscoveryRegistriesAvailable.forEach((e) => {
       displayNameToRegistry.set(e.displayName, e);
     });
 
     return displayNameToRegistry;
   };
 
+  private mergeRegistries = (
+    available: IEcsServiceDiscoveryRegistry[],
+    associations: IEcsServiceDiscoveryRegistryAssociation[],
+  ): IEcsServiceDiscoveryRegistry[] => {
+    const registries = new Map<string, IEcsServiceDiscoveryRegistry>();
+    [...available, ...associations.map((association) => association.registry)].filter(Boolean).forEach((registry) => {
+      registries.set(registry.displayName, registry as IEcsServiceDiscoveryRegistry);
+    });
+    return Array.from(registries.values());
+  };
+
   private getEmptyRegistry = (): IEcsServiceDiscoveryRegistry => {
     return {
       account: '',
@@ -90,7 +139,7 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     const currentAssociations = this.state.serviceDiscoveryAssociations;
     const targetAssociation = currentAssociations[index];
     targetAssociation.registry = newServiceDiscoveryRegistry;
-    this.props.notifyAngular('serviceDiscoveryAssociations', currentAssociations);
+    this.props.onFieldChange('serviceDiscoveryAssociations', currentAssociations);
     this.setState({ serviceDiscoveryAssociations: currentAssociations });
   };
 
@@ -98,7 +147,7 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     const currentAssociations = this.state.serviceDiscoveryAssociations;
     const targetAssociations = currentAssociations[index];
     targetAssociations.containerPort = targetPort;
-    this.props.notifyAngular('serviceDiscoveryAssociations', currentAssociations);
+    this.props.onFieldChange('serviceDiscoveryAssociations', currentAssociations);
     this.setState({ serviceDiscoveryAssociations: currentAssociations });
   };
 
@@ -106,7 +155,7 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     const currentAssociations = this.state.serviceDiscoveryAssociations;
     const targetAssociations = currentAssociations[index];
     targetAssociations.containerName = targetContainerName;
-    this.props.notifyAngular('serviceDiscoveryAssociations', currentAssociations);
+    this.props.onFieldChange('serviceDiscoveryAssociations', currentAssociations);
     this.setState({ serviceDiscoveryAssociations: currentAssociations });
   };
 
@@ -119,7 +168,7 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
   private removeServiceDiscoveryAssociations = (index: number) => {
     const currentAssociations = this.state.serviceDiscoveryAssociations;
     currentAssociations.splice(index, 1);
-    this.props.notifyAngular('serviceDiscoveryAssociations', currentAssociations);
+    this.props.onFieldChange('serviceDiscoveryAssociations', currentAssociations);
     this.setState({ serviceDiscoveryAssociations: currentAssociations });
   };
 
@@ -140,7 +189,9 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
           {useTaskDefinitionArtifact && (
             <td>
               <input
+                aria-label={`Container name ${index + 1}`}
                 className="form-control input-sm"
+                data-test-id="ServiceDiscovery.containerName"
                 placeholder="Enter a container name ..."
                 required={true}
                 value={mapping.containerName}
@@ -148,8 +199,9 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
               />
             </td>
           )}
-          <td>
+          <td data-test-id="ServiceDiscovery.registry">
             <TetheredSelect
+              inputProps={{ 'aria-label': `Service registry ${index + 1}` }}
               placeholder="Select a registry..."
               options={registriesAvailable}
               value={mapping.registry.displayName.toString()}
@@ -160,6 +212,8 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
           </td>
           <td>
             <input
+              aria-label={`Container port ${index + 1}`}
+              data-test-id="ServiceDiscovery.containerPort"
               type="number"
               className="form-control input-sm no-spel"
               required={true}
@@ -169,10 +223,15 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
           </td>
           <td>
             <div className="form-control-static">
-              <a className="btn-link sm-label" onClick={() => removeServiceDiscoveryAssociation(index)}>
+              <button
+                aria-label={`Remove service registry ${index + 1}`}
+                className="btn-link sm-label"
+                onClick={() => removeServiceDiscoveryAssociation(index)}
+                type="button"
+              >
                 <span className="glyphicon glyphicon-trash" />
                 <span className="sr-only">Remove</span>
-              </a>
+              </button>
             </div>
           </td>
         </tr>
@@ -180,7 +239,7 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     });
 
     const newServiceDiscoveryAssociation = this.state.serviceDiscoveryRegistriesAvailable.length ? (
-      <button className="btn btn-block btn-sm add-new" onClick={this.pushServiceDiscoveryAssociation}>
+      <button className="btn btn-block btn-sm add-new" onClick={this.pushServiceDiscoveryAssociation} type="button">
         <span className="glyphicon glyphicon-plus-sign" />
         Add New Service Registry
       </button>
@@ -238,13 +297,3 @@ export class ServiceDiscovery extends React.Component<IServiceDiscoveryProps, IS
     );
   }
 }
-
-export const SERVICE_DISCOVERY_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.serviceDiscovery.react';
-module(SERVICE_DISCOVERY_REACT, []).component(
-  'serviceDiscoveryReact',
-  react2angular(withErrorBoundary(ServiceDiscovery, 'serviceDiscoveryReact'), [
-    'command',
-    'notifyAngular',
-    'configureCommand',
-  ]),
-);

package/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.spec.tsx

@@ -15,7 +15,7 @@ describe('TaskDefinition', () => {
   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[] = [
     {
@@ -48,13 +48,14 @@ describe('TaskDefinition', () => {
     } as any) as IEcsServerGroupCommand;
 
     spyOn(AccountService, 'listAccounts').and.returnValue(Promise.resolve(dockerAccounts));
+    spyOn(AccountService, 'getArtifactAccounts').and.returnValue(Promise.resolve([]));
     spyOn(DockerImageReader, 'findImages').and.returnValue(Promise.resolve(dockerImages));
   });
 
   describe('updateDockerRegistryAccount', () => {
     it('calls DockerImageReader.findImages with the selected account', async () => {
       const wrapper = mount(
-        <TaskDefinition command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <TaskDefinition command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       await flushPromises();
@@ -70,21 +71,33 @@ describe('TaskDefinition', () => {
 
     it('updates component state and backingData with images returned for the account', async () => {
       const wrapper = mount(
-        <TaskDefinition command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <TaskDefinition command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       (wrapper.instance() as any).updateDockerRegistryAccount({ value: 'my-docker-account' });
       await flushPromises();
       wrapper.update();
 
-      expect((wrapper.instance() as TaskDefinition).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 TaskDefinition).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(
-        <TaskDefinition command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <TaskDefinition command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       (wrapper.instance() as any).updateDockerRegistryAccount({ value: 'my-docker-account' });
@@ -107,7 +120,7 @@ describe('TaskDefinition', () => {
       } as IEcsDockerImage;
 
       const wrapper = mount(
-        <TaskDefinition command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <TaskDefinition command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       expect((wrapper.instance() as TaskDefinition).state.selectedDockerAccount).toBe('my-docker-account');
@@ -115,7 +128,7 @@ describe('TaskDefinition', () => {
 
     it('starts with no account selected when imageDescription has no account', () => {
       const wrapper = mount(
-        <TaskDefinition command={command} notifyAngular={notifyAngular} configureCommand={configureCommand} />,
+        <TaskDefinition command={command} onFieldChange={onFieldChange} configureCommand={configureCommand} />,
       );
 
       expect((wrapper.instance() as TaskDefinition).state.selectedDockerAccount).toBe('');

package/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.tsx

@@ -1,9 +1,7 @@
-import { module } from 'angular';
-import { isEqual, uniqWith } from 'lodash';
+import { isEqual, uniq, uniqWith } from 'lodash';
 import React from 'react';
 import { Alert } from 'react-bootstrap';
 import type { Option } from 'react-select';
-import { react2angular } from 'react2angular';
 
 import type { IAccountDetails, IArtifact, IExpectedArtifact } from '@spinnaker/core';
 import {
@@ -14,10 +12,10 @@ import {
   StageArtifactSelectorDelegate,
   StageConfigField,
   TetheredSelect,
-  withErrorBoundary,
 } from '@spinnaker/core';
 import { DockerImageReader } from '@spinnaker/docker';
 
+import { normalizeEcsDockerImage } from '../../dockerImage.util';
 import type {
   IEcsContainerMapping,
   IEcsDockerImage,
@@ -28,8 +26,8 @@ import type {
 
 export interface ITaskDefinitionProps {
   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 ITaskDefinitionState {
@@ -75,7 +73,10 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
       taskDefArtifact: cmd.taskDefinitionArtifact,
       containerMappings: cmd.containerMappings ? cmd.containerMappings : [],
       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),
+      ]),
       dockerImages: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.images : [],
       dockerRegistryAccounts: [],
       selectedDockerAccount: cmd.imageDescription?.account ?? '',
@@ -94,21 +95,49 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     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),
+        ]),
       });
     });
   }
 
   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 });
     });
   };
 
+  public componentDidUpdate() {
+    const cmd = this.props.command;
+    const containerMappings = cmd.containerMappings || [];
+    const targetGroupMappings = cmd.targetGroupMappings || [];
+    const nextState: ITaskDefinitionState = {
+      taskDefArtifact: cmd.taskDefinitionArtifact,
+      taskDefArtifactAccount: cmd.taskDefinitionArtifactAccount,
+      containerMappings,
+      targetGroupMappings,
+      dockerImages: cmd.backingData?.filtered?.images || [],
+      targetGroupsAvailable: uniq([
+        ...(cmd.backingData?.filtered?.targetGroups || []),
+        ...targetGroupMappings.map((mapping) => mapping.targetGroup).filter(Boolean),
+      ]),
+      loadBalancedContainer: cmd.loadBalancedContainer || containerMappings[0]?.containerName || '',
+      evaluateTaskDefinitionArtifactExpressions: cmd.evaluateTaskDefinitionArtifactExpressions,
+      dockerRegistryAccounts: this.state.dockerRegistryAccounts,
+      selectedDockerAccount: this.state.selectedDockerAccount,
+    };
+    if (!isEqual(this.state, nextState)) {
+      this.setState(nextState);
+    }
+  }
+
   private getIdToImageMap = (): Map<string, IEcsDockerImage> => {
     const imageIdToDescription = new Map<string, IEcsDockerImage>();
     this.props.command.backingData.filtered.images.forEach((e) => {
@@ -141,13 +170,13 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
 
   private onExpectedArtifactSelected = (expectedArtifactId: string): void => {
     const selectedArtifact = { artifactId: expectedArtifactId };
-    this.props.notifyAngular('taskDefinitionArtifact', selectedArtifact);
+    this.props.onFieldChange('taskDefinitionArtifact', selectedArtifact);
     this.setState({ taskDefArtifact: selectedArtifact });
   };
 
   private onArtifactEdited = (artifact: IArtifact): void => {
     const newArtifact = { artifact: artifact };
-    this.props.notifyAngular('taskDefinitionArtifact', newArtifact);
+    this.props.onFieldChange('taskDefinitionArtifact', newArtifact);
     this.setState({ taskDefArtifact: newArtifact });
   };
 
@@ -167,7 +196,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     const currentMappings = this.state.containerMappings;
     const targetMapping = currentMappings[index];
     targetMapping.containerName = newName;
-    this.props.notifyAngular('containerMappings', currentMappings);
+    this.props.onFieldChange('containerMappings', currentMappings);
     this.setState({ containerMappings: currentMappings });
   };
 
@@ -181,7 +210,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     const currentMappings = this.state.containerMappings;
     const targetMapping = currentMappings[index];
     targetMapping.imageDescription = newImageDescription;
-    this.props.notifyAngular('containerMappings', currentMappings);
+    this.props.onFieldChange('containerMappings', currentMappings);
     this.setState({ containerMappings: currentMappings });
   };
 
@@ -189,7 +218,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     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 });
   };
 
@@ -197,7 +226,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     const currentMappings = this.state.targetGroupMappings;
     const targetMapping = currentMappings[index];
     targetMapping.containerName = targetContainer;
-    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.props.onFieldChange('targetGroupMappings', currentMappings);
     this.setState({ targetGroupMappings: currentMappings });
   };
 
@@ -205,26 +234,26 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     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 removeMapping = (index: number) => {
     const currentMappings = this.state.containerMappings;
     currentMappings.splice(index, 1);
-    this.props.notifyAngular('containerMappings', currentMappings);
+    this.props.onFieldChange('containerMappings', currentMappings);
     this.setState({ containerMappings: 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 });
   };
 
   private updateEvaluateTaskDefArtifactFlag = () => {
-    this.props.notifyAngular(
+    this.props.onFieldChange(
       'evaluateTaskDefinitionArtifactExpressions',
       !this.props.command.evaluateTaskDefinitionArtifactExpressions,
     );
@@ -266,6 +295,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
         <tr key={index}>
           <td>
             <input
+              aria-label={`Container name ${index + 1}`}
               data-test-id="Artifacts.containerName"
               className="form-control input-sm"
               required={true}
@@ -276,6 +306,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
           </td>
           <td data-test-id="Artifacts.containerImage">
             <TetheredSelect
+              inputProps={{ 'aria-label': `Container image ${index + 1}` }}
               placeholder="Select an image to use..."
               options={dockerImageOptions}
               value={mapping.imageDescription.imageId}
@@ -287,14 +318,16 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
           </td>
           <td>
             <div className="form-control-static">
-              <a
+              <button
+                aria-label={`Remove container mapping ${index + 1}`}
                 className="btn-link sm-label"
                 data-test-id="Artifacts.containerRemove"
                 onClick={() => removeMapping(index)}
+                type="button"
               >
                 <span className="glyphicon glyphicon-trash" />
                 <span className="sr-only">Remove</span>
-              </a>
+              </button>
             </div>
           </td>
         </tr>
@@ -306,6 +339,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
         <tr key={index}>
           <td>
             <input
+              aria-label={`Target group container name ${index + 1}`}
               data-test-id="Artifacts.targetGroupContainer"
               className="form-control input-sm"
               required={true}
@@ -316,6 +350,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
           </td>
           <td data-test-id="Artifacts.targetGroup">
             <TetheredSelect
+              inputProps={{ 'aria-label': `Target group ${index + 1}` }}
               placeholder="Select a target group to use..."
               options={targetGroupsAvailable}
               value={mapping.targetGroup.toString()}
@@ -325,6 +360,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
           </td>
           <td>
             <input
+              aria-label={`Target port ${index + 1}`}
               data-test-id="Artifacts.targetGroupPort"
               type="number"
               className="form-control input-sm no-spel"
@@ -335,14 +371,16 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
           </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="Artifacts.targetGroupRemove"
                 onClick={() => removeTargetGroupMapping(index)}
+                type="button"
               >
                 <span className="glyphicon glyphicon-trash" />
                 <span className="sr-only">Remove</span>
-              </a>
+              </button>
             </div>
           </td>
         </tr>
@@ -354,6 +392,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
         className="btn btn-block btn-sm add-new"
         data-test-id="Artifacts.targetGroupAdd"
         onClick={this.pushTargetGroupMapping}
+        type="button"
       >
         <span className="glyphicon glyphicon-plus-sign" />
         Add New Target Group Mapping
@@ -441,6 +480,7 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
                       className="btn btn-block btn-sm add-new"
                       data-test-id="Artifacts.containerAdd"
                       onClick={this.pushMapping}
+                      type="button"
                     >
                       <span className="glyphicon glyphicon-plus-sign" />
                       Add New Container Mapping
@@ -488,13 +528,3 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     );
   }
 }
-
-export const TASK_DEFINITION_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.taskDefinition.react';
-module(TASK_DEFINITION_REACT, []).component(
-  'taskDefinitionReact',
-  react2angular(withErrorBoundary(TaskDefinition, 'taskDefinitionReact'), [
-    'command',
-    'notifyAngular',
-    'configureCommand',
-  ]),
-);