multiple: fix selectable card onChange

The `onChange` event for the selectable cards needed to be placed
inside the `selectableActions` of the `CardHeader`. Since the
`onChange` action was not implemented we were getting warnings
in the test output for that a component was changing an uncontrolled
input to controlled.

src/Components/Blueprints/BlueprintCard.tsx

@@ -48,6 +48,7 @@ const BlueprintCard = ({ blueprint }: blueprintProps) => {
             name: blueprint.id,
             selectableActionId: blueprint.id,
             selectableActionAriaLabel: blueprint.id,
+            onChange: () => dispatch(setBlueprintId(blueprint.id)),
             isHidden: true, // hide the card's checkbox
           }}
         >

src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx

@@ -41,7 +41,7 @@ type TargetEnvironmentCardProps = {
   isSelected: boolean;
   isDisabled?: boolean;
   testId: string;
-  handleOnClick: MouseEventHandler<HTMLElement>;
+  handleOnClick: () => void;
   onMouseEnter?: MouseEventHandler<HTMLElement>;
 };
 
@@ -59,8 +59,8 @@ const TargetEnvironmentCard = ({
     <Card
       data-testid={testId}
       style={{ textAlign: 'center' } as React.CSSProperties}
-      onClick={handleOnClick}
       onMouseUp={onMouseEnter}
+      onClick={handleOnClick}
       isSelected={isSelected}
       isDisabled={isDisabled}
       isSelectable
@@ -71,6 +71,13 @@ const TargetEnvironmentCard = ({
           name: title,
           selectableActionId: title.toLowerCase(),
           selectableActionAriaLabel: title.toLowerCase(),
+          // we need to give the `selectableActions` an
+          // onChange handler since the card actions use
+          // checkboxes to handle selectable cards.
+          // This workaround reduces noise in the test
+          // output
+          onChange: () => {},
+          isChecked: isSelected,
           isHidden: true, // hide the card's checkbox
         }}
       >

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -177,16 +177,20 @@ describe('Step Image output', () => {
 
     const awsTile = await screen.findByTestId('upload-aws');
     user.click(awsTile); // select
+    await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(awsTile); // deselect
+    await waitFor(() => expect(nextButton).toBeDisabled());
 
     const googleTile = await screen.findByTestId('upload-google');
     user.click(googleTile); // select
+    await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(googleTile); // deselect
+    await waitFor(() => expect(nextButton).toBeDisabled());
 
     const azureTile = await screen.findByTestId('upload-azure');
     user.click(azureTile); // select
+    await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(azureTile); // deselect
-
     await waitFor(() => expect(nextButton).toBeDisabled());
   });