Webhook details imoprovements (#3229)

* partial regex for custom headers
* disabled attribute for `Add custom request header` button
* align styles for new macaw ui
* add `Webhook events` header text
* add a pointer to objects & events lists
* sort webhook events & objects

locale/defaultMessages.json

@@ -3683,6 +3683,10 @@
     "context": "caption",
     "string": "If enabled, you’ll be able to use this attribute to filter products in product list."
   },
+  "QAisk4": {
+    "context": "Webhook events header",
+    "string": "Webhook events"
+  },
   "QBxN6z": {
     "context": "is filter range or value",
     "string": "between"

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

@@ -124,13 +124,16 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
                   errors={errors}
                   onChange={change}
                 />
-                <FormSpacer />
+              </Box>
+              <FormSpacer />
+              <Box>
                 <WebhookEvents
                   data={data}
                   setQuery={setQuery}
                   onSyncEventChange={handleSyncEventsSelect}
                   onAsyncEventChange={handleAsyncEventsSelect}
                 />
+
                 <WebhookSubscriptionQuery
                   query={query}
                   setQuery={setQuery}

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

@@ -1,3 +1,4 @@
+import CardTitle from "@dashboard/components/CardTitle";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
 import {
@@ -80,7 +81,8 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
   return (
     <>
       <Card>
-        <CardContent className={classes.card}>
+        <CardTitle title={intl.formatMessage(messages.webhookEvents)} />
+        <CardContent className={classes.cardHeader}>
           <PageTabs value={tab} onChange={handleTabChange}>
             <PageTab
               label={intl.formatMessage(messages.asynchronous)}
@@ -179,6 +181,7 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
             </List>
           </div>
         </Grid>
+        <Hr />
       </Card>
     </>
   );

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

@@ -33,4 +33,9 @@ export const messages = defineMessages({
     id: "F6LHyk",
     description: "Webhook details objects",
   },
+  webhookEvents: {
+    id: "QAisk4",
+    defaultMessage: "Webhook events",
+    description: "Webhook events header",
+  },
 });

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

@@ -25,6 +25,7 @@ export const useStyles = makeStyles(
       minHeight: 0,
       gap: 0,
       padding: theme.spacing(1),
+      cursor: "pointer",
     },
     listItemCell: {
       paddingLeft: "0 !important",
@@ -36,6 +37,9 @@ export const useStyles = makeStyles(
     card: {
       paddingLeft: 0,
     },
+    cardHeader: {
+      padding: "2.4rem 3.2rem",
+    },
   }),
   { name: "WebhookEvents" },
 );

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

@@ -8,7 +8,7 @@ type Actions = string[];
 export const getWebhookTypes = (webhookEvents: string[]) => {
   const multiWords = ["DRAFT_ORDER", "GIFT_CARD", "ANY_EVENTS"];
 
-  return webhookEvents.reduce<Record<string, Actions>>((acc, key) => {
+  return webhookEvents.sort().reduce<Record<string, Actions>>((acc, key) => {
     const keywords = key.split("_");
     const multiKeyword = keywords.slice(0, 2).join("_");
 

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

@@ -20,7 +20,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { WebhookFormData } from "../WebhookDetailsPage";
 import { messages } from "./messages";
 import useStyles from "./styles";
-import { mapHeaders, stringifyHeaders } from "./utils";
+import { hasEmptyHeader, mapHeaders, stringifyHeaders } from "./utils";
 import WebhookHeadersTableBody from "./WebhookHeadersTableBody";
 
 export interface WebhookHeadersProps {
@@ -143,6 +143,7 @@ const WebhookHeaders: React.FC<WebhookHeadersProps> = ({
                   variant="secondary"
                   data-test-id="add-header"
                   onClick={add}
+                  disabled={hasEmptyHeader(headers)}
                 >
                   <FormattedMessage {...messages.add} />
                 </Button>

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

@@ -46,6 +46,7 @@ const useStyles = makeStyles(
         "&&": {
           paddingBottom: theme.spacing(2),
           paddingTop: theme.spacing(2),
+          paddingLeft: theme.spacing(4),
         },
       },
       content: {

src/custom-apps/components/WebhookHeaders/utils.ts

@@ -12,7 +12,11 @@ export const stringifyHeaders = (headers: Header[]): string =>
 
 const validateName = (name: string) => {
   if (
-    name.toLowerCase().match("(^x$)|(^x-)|(^authorization$)|(^authorization-)")
+    name
+      .toLowerCase()
+      .match(
+        "(^x$)|(^x-)|^(a|$)(u|$)(t|$)(h|$)(o|$)(r|$)(i|$)(z|$)(a|$)(t|$)(i|$)(o|$)(n|$)(-|$)",
+      )
   ) {
     return false;
   }
@@ -33,3 +37,6 @@ export const mapHeaders = (customHeaders: string): Header[] => {
     error: validateName(key),
   }));
 };
+
+export const hasEmptyHeader = (customHeaders: Header[]): boolean =>
+  customHeaders.filter(header => header.name.length === 0).length > 0;