Fix allow click on webhook checkbox (#3327)

src/components/DryRun/DryRun.tsx

@@ -46,7 +46,7 @@ const DryRun: React.FC<DryRunProps> = ({
   syncEvents,
 }: DryRunProps) => {
   const intl = useIntl();
-  const classes = useStyles();
+  const classes = useStyles({});
   const [objectId, setObjectId] = useState<string | null>(null);
   const [triggerWebhookDryRun] = useTriggerWebhookDryRunMutation();
   const availableObjects = Object.keys(DocumentMap).map(object =>

src/components/DryRunItemsList/DryRunItemsList.tsx

@@ -31,7 +31,7 @@ const DryRunItemsList: React.FC<DryRunItemsListProps> = ({
   setObjectId,
 }: DryRunItemsListProps) => {
   const intl = useIntl();
-  const classes = useStyles();
+  const classes = useStyles({});
   const { checkbox } = useListWidths();
   const objectDocument = DocumentMap[object];
   const objectCollection =

src/custom-apps/components/WebhookEvents/WebhookEvents.tsx

@@ -44,8 +44,8 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
   onAsyncEventChange,
 }) => {
   const intl = useIntl();
-  const classes = useStyles();
   const { checkbox } = useListWidths();
+  const classes = useStyles({ checkbox });
 
   const [tab, setTab] = useState("async");
   const [object, setObject] = useState<string | null>(null);
@@ -158,22 +158,28 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
                 {object &&
                   EventTypes[tab][object] &&
                   EventTypes[tab][object].map((event, idx) => (
-                    <ListItem className={classes.listItem} key={idx}>
+                    <ListItem className={classes.eventListItem} key={idx}>
-                      <ListItemCell className={classes.listItemCell}>
+                      <ListItemCell className={classes.eventListItemCell}>
-                        <strong>
+                        <label
-                          {capitalize(event.toLowerCase().replaceAll("_", " "))}
+                          htmlFor={`event-checkbox-${idx}`}
-                        </strong>
+                          className={classes.eventListLabel}
-                      </ListItemCell>
+                        >
-                      <ListItemCell>
+                          <strong>
-                        <Checkbox
+                            {capitalize(
-                          name={`${tab}Events`}
+                              event.toLowerCase().replaceAll("_", " "),
-                          checked={data[`${tab}Events`].includes(
+                            )}
-                            getEventName(object, event),
+                          </strong>
-                          )}
+                          <Checkbox
-                          value={getEventName(object, event)}
+                            name={`${tab}Events`}
-                          onChange={handleEventChange}
+                            checked={data[`${tab}Events`].includes(
-                          className={classes.checkbox}
+                              getEventName(object, event),
-                        />
+                            )}
+                            value={getEventName(object, event)}
+                            onChange={handleEventChange}
+                            className={classes.checkbox}
+                            id={`event-checkbox-${idx}`}
+                          />
+                        </label>
                       </ListItemCell>
                     </ListItem>
                   ))}

src/custom-apps/components/WebhookEvents/styles.ts

@@ -1,7 +1,7 @@
 import { makeStyles } from "@saleor/macaw-ui";
 import { vars } from "@saleor/macaw-ui/next";
 
-export const useStyles = makeStyles(
+export const useStyles = makeStyles<{ checkbox?: string }>(
   theme => ({
     eventsWrapper: {
       padding: theme.spacing(4),
@@ -33,6 +33,10 @@ export const useStyles = makeStyles(
     },
     checkbox: {
       padding: 0,
+      // disables shadow blinking next to the checkbox
+      "& span::before": {
+        display: "none",
+      },
     },
     card: {
       paddingLeft: 0,
@@ -40,6 +44,23 @@ export const useStyles = makeStyles(
     cardHeader: {
       padding: "2.4rem 3.2rem",
     },
+    eventListItem: {
+      padding: 0,
+      gridTemplateColumns: "unset",
+      minHeight: 0,
+      gap: 0,
+      cursor: "pointer",
+    },
+    eventListItemCell: {
+      padding: "0 !important",
+      wordBreak: "break-all",
+    },
+    eventListLabel: props => ({
+      padding: "1.8rem 0.8rem",
+      display: "grid",
+      cursor: "pointer",
+      gridTemplateColumns: `1fr ${props.checkbox}`,
+    }),
   }),
   { name: "WebhookEvents" },
 );