fixes(HMS-3853): fix blueprint clear selection

src/Components/Blueprints/BlueprintCard.tsx

@@ -39,15 +39,12 @@ const BlueprintCard = ({ blueprint }: blueprintProps) => {
         ouiaId={`blueprint-card-${blueprint.id}`}
         isCompact
         isClickable
+        onClick={() => dispatch(setBlueprintId(blueprint.id))}
+        isSelectableRaised
+        hasSelectableInput
+        selectableInputAriaLabel={`Select blueprint ${blueprint.name}`}
       >
-        <CardHeader
-          data-testid={blueprint.id}
-          selectableActions={{
-            selectableActionId: blueprint.id,
-            name: 'blueprints',
-            onClickAction: () => dispatch(setBlueprintId(blueprint.id)),
-          }}
-        >
+        <CardHeader data-testid={blueprint.id}>
           <CardTitle>
             {isLoading && blueprint.id === selectedBlueprintId && (
               <Spinner size="md" />

src/test/Components/Blueprints/Blueprints.test.js

@@ -33,17 +33,9 @@ jest.mock('@unleash/proxy-client-react', () => ({
 }));
 
 const selectBlueprintById = async (user, bpId) => {
-  const nameMatcher = (_, element) =>
-    element.getAttribute('name') === 'blueprints';
-
-  const radioButtons = await screen.findAllByRole('radio', {
-    name: nameMatcher,
-  });
-  const elementById = radioButtons.find(
-    (button) => button.getAttribute('id') === bpId
-  );
-  await user.click(elementById);
-  return elementById;
+  const blueprint = await screen.findByTestId(bpId);
+  await user.click(blueprint);
+  return blueprint;
 };
 
 describe('Blueprints', () => {
@@ -182,7 +174,9 @@ describe('Blueprints', () => {
       // wait for debounce
       await waitFor(
         () => {
-          expect(screen.getAllByRole('radio')).toHaveLength(1);
+          expect(
+            screen.getByTestId(blueprintIdEmptyComposes)
+          ).toBeInTheDocument();
         },
         {
           timeout: 1500,
@@ -195,7 +189,7 @@ describe('Blueprints', () => {
     test('paging of blueprints', async () => {
       renderWithReduxRouter('', {});
 
-      expect(await screen.findAllByRole('radio')).toHaveLength(10);
+      expect(await screen.findAllByRole('checkbox')).toHaveLength(10);
 
       const option = await screen.findByTestId('blueprints-pagination-bottom');
       const prevButton = within(option).getByRole('button', {
@@ -218,7 +212,7 @@ describe('Blueprints', () => {
       await user.click(button);
 
       await waitFor(() => {
-        expect(screen.getAllByRole('radio')).toHaveLength(1);
+        expect(screen.getAllByRole('checkbox')).toHaveLength(1);
       });
     });
   });