use FormControlLabel and prevent defaults

Signed-off-by: Frederic Kayser <frederic@frederic-kayser.de>

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,
     });

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" />}

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,
     });

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={