From 93c245901359e684a1a3d8cd3c4bec18fa4f929c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Mon, 13 Mar 2023 11:55:03 +0100
Subject: [PATCH] Fix allow click on webhook checkbox (#3327)

---
 src/components/DryRun/DryRun.tsx              |  2 +-
 .../DryRunItemsList/DryRunItemsList.tsx       |  2 +-
 .../WebhookEvents/WebhookEvents.tsx           | 40 +++++++++++--------
 .../components/WebhookEvents/styles.ts        | 23 ++++++++++-
 4 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/DryRun/DryRun.tsx b/src/components/DryRun/DryRun.tsx
index 23ee489ea..ae7af0307 100644
--- a/src/components/DryRun/DryRun.tsx
+++ b/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 =>
diff --git a/src/components/DryRunItemsList/DryRunItemsList.tsx b/src/components/DryRunItemsList/DryRunItemsList.tsx
index 5b425a9e0..f55c32f40 100644
--- a/src/components/DryRunItemsList/DryRunItemsList.tsx
+++ b/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 =
diff --git a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx b/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
index 33b598708..2639d0ec0 100644
--- a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
+++ b/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}>
-                      <ListItemCell className={classes.listItemCell}>
-                        <strong>
-                          {capitalize(event.toLowerCase().replaceAll("_", " "))}
-                        </strong>
-                      </ListItemCell>
-                      <ListItemCell>
-                        <Checkbox
-                          name={`${tab}Events`}
-                          checked={data[`${tab}Events`].includes(
-                            getEventName(object, event),
-                          )}
-                          value={getEventName(object, event)}
-                          onChange={handleEventChange}
-                          className={classes.checkbox}
-                        />
+                    <ListItem className={classes.eventListItem} key={idx}>
+                      <ListItemCell className={classes.eventListItemCell}>
+                        <label
+                          htmlFor={`event-checkbox-${idx}`}
+                          className={classes.eventListLabel}
+                        >
+                          <strong>
+                            {capitalize(
+                              event.toLowerCase().replaceAll("_", " "),
+                            )}
+                          </strong>
+                          <Checkbox
+                            name={`${tab}Events`}
+                            checked={data[`${tab}Events`].includes(
+                              getEventName(object, event),
+                            )}
+                            value={getEventName(object, event)}
+                            onChange={handleEventChange}
+                            className={classes.checkbox}
+                            id={`event-checkbox-${idx}`}
+                          />
+                        </label>
                       </ListItemCell>
                     </ListItem>
                   ))}
diff --git a/src/custom-apps/components/WebhookEvents/styles.ts b/src/custom-apps/components/WebhookEvents/styles.ts
index 87baa6503..f751cd562 100644
--- a/src/custom-apps/components/WebhookEvents/styles.ts
+++ b/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" },
 );