From 3c1203733093b31a2f736563136b06d20495179c Mon Sep 17 00:00:00 2001
From: Frederic Kayser <frederic@frederic-kayser.de>
Date: Fri, 31 Mar 2023 18:47:28 +0200
Subject: [PATCH] use FormControlLabel and prevent defaults

Signed-off-by: Frederic Kayser <frederic@frederic-kayser.de>
---
 .../EntityLifecyclePicker.test.tsx            |  8 ++-----
 .../EntityLifecyclePicker.tsx                 | 21 +++++++++++--------
 .../EntityProcessingStatusPicker.test.tsx     |  5 +----
 .../EntityProcessingStatusPicker.tsx          | 20 +++++++++++-------
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
index c67f5dcddb..3ee610ddaf 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
@@ -154,13 +154,9 @@ describe('<EntityLifecyclePicker/>', () => {
       lifecycles: new EntityLifecycleFilter(['production']),
     });
     fireEvent.click(screen.getByTestId('lifecycle-picker-expand'));
-    expect(
-      screen
-        .getByTestId('lifecycle-checkbox-production')
-        .querySelector('input[type="checkbox"]'),
-    ).toBeChecked();
+    expect(screen.getByLabelText('production')).toBeChecked();
 
-    fireEvent.click(screen.getByTestId('lifecycle-checkbox-label-production'));
+    fireEvent.click(screen.getByLabelText('production'));
     expect(updateFilters).toHaveBeenLastCalledWith({
       lifecycles: undefined,
     });
diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index b1fba50ae8..dd107b2673 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
@@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model';
 import {
   Box,
   Checkbox,
+  FormControlLabel,
   makeStyles,
   TextField,
   Typography,
@@ -111,15 +112,17 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => {
             setSelectedLifecycles(value)
           }
           renderOption={(option, { selected }) => (
-            <div data-testid={`lifecycle-checkbox-label-${option}`}>
-              <Checkbox
-                icon={icon}
-                checkedIcon={checkedIcon}
-                checked={selected}
-                data-testid={`lifecycle-checkbox-${option}`}
-              />
-              {option}
-            </div>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  checked={selected}
+                />
+              }
+              onClick={event => event.preventDefault()}
+              label={option}
+            />
           )}
           size="small"
           popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
index 3970942ee1..00d36e5e13 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
@@ -123,10 +123,7 @@ describe('<EntityProcessingStatusPicker/>', () => {
     );
 
     fireEvent.click(screen.getByTestId('processing-status-picker-expand'));
-
-    fireEvent.click(
-      screen.getByTestId('processing-status-checkbox-label-Is Orphan'),
-    );
+    fireEvent.click(screen.getByText('Is Orphan'));
     expect(updateFilters).toHaveBeenCalledWith({
       orphan: undefined,
     });
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index 237e2d9544..01a6e0188d 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
@@ -18,6 +18,7 @@ import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
 import {
   Box,
   Checkbox,
+  FormControlLabel,
   makeStyles,
   TextField,
   Typography,
@@ -82,14 +83,17 @@ export const EntityProcessingStatusPicker = () => {
             errorChange(value.includes('Has Error'));
           }}
           renderOption={(option, { selected }) => (
-            <div data-testid={`processing-status-checkbox-label-${option}`}>
-              <Checkbox
-                icon={icon}
-                checkedIcon={checkedIcon}
-                checked={selected}
-              />
-              {option}
-            </div>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={icon}
+                  checkedIcon={checkedIcon}
+                  checked={selected}
+                />
+              }
+              onClick={event => event.preventDefault()}
+              label={option}
+            />
           )}
           size="small"
           popupIcon={