From c2998306cfb06dcdd746c3cd9c9c1cc43160033b Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gianlucazuccarelli@gmail.com>
Date: Wed, 18 Jun 2025 16:13:30 +0100
Subject: [PATCH] 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           |  1 +
 .../steps/ImageOutput/TargetEnvironment.tsx           | 11 +++++++++--
 .../steps/ImageOutput/ImageOutput.test.tsx            |  6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Components/Blueprints/BlueprintCard.tsx b/src/Components/Blueprints/BlueprintCard.tsx
index e109fb3e..5a6361c0 100644
--- a/src/Components/Blueprints/BlueprintCard.tsx
+++ b/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
           }}
         >
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
index cbc2b6e2..8e6f094f 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
+++ b/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
         }}
       >
diff --git a/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx b/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
index ca59b025..402f240a 100644
--- a/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
+++ b/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());
   });