update webhooks copy

src/components/TableHeader/Extensions/ExtensionModal.tsx

@@ -162,7 +162,7 @@ export default function ExtensionModal({
           onClick: () => {
             let warningMessage;
             if (!validation.condition && !validation.extensionBody) {
-              warningMessage = "Condition and extension body are not valid";
+              warningMessage = "Condition and Extension body are not valid";
             } else if (!validation.condition) {
               warningMessage = "Condition is not valid";
             } else if (!validation.extensionBody) {

src/components/TableHeader/Webhooks/Schemas/basic.tsx

@@ -1,3 +1,6 @@
+import { Typography } from "@mui/material";
+import WarningIcon from "@mui/icons-material/WarningAmber";
+
 export const webhookTypes = [
   "basic",
   "typeform",
@@ -36,7 +39,7 @@ const additionalVariables = [
   },
 ];
 
-export default {
+export const webhookBasic = {
   name: "Basic",
   parser: {
     additionalVariables,
@@ -60,6 +63,13 @@ export default {
     }`,
   },
   auth: (webhookObject, setWebhookObject) => {
-    return <>no auth option for basic atm</>;
+    return (
+      <Typography color="text.disabled">
+        <WarningIcon aria-label="Warning" style={{ verticalAlign: "bottom" }} />
+        &nbsp; Verification is not currently available for basic webhooks
+      </Typography>
+    );
   },
 };
+
+export default webhookBasic;

src/components/TableHeader/Webhooks/Schemas/sendgrid.tsx

@@ -1,7 +1,8 @@
 import { Typography, Link, TextField } from "@mui/material";
+import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 
-export default {
-  name: "Sendgrid",
+export const webhookSendgrid = {
+  name: "SendGrid",
   parser: {
     additionalVariables: null,
     extraLibs: null,
@@ -32,24 +33,25 @@ export default {
     return (
       <>
         <Typography gutterBottom>
-          To verify the webhook call is sent from Sendgrid, You can enable
-          signed event webhooks
+          Enable Signed Event Webhooks on SendGrid by following{" "}
           <Link
-            href={
-              "https://docs.sendgrid.com/for-developers/tracking-events/getting-started-event-webhook-security-features#the-signed-event-webhook"
-            }
+            href="https://docs.sendgrid.com/for-developers/tracking-events/getting-started-event-webhook-security-features#the-signed-event-webhook"
+            target="_blank"
             rel="noopener noreferrer"
-            variant="body2"
-            underline="always"
+            variant="inherit"
           >
-            here
-          </Link>{" "}
-          to set the secret, then add it below
+            these instructions
+            <InlineOpenInNewIcon />
+          </Link>
+          <br />
+          Then add the secret below.
         </Typography>
 
         <TextField
-          label={"Verification Key"}
+          id="sendgrid-verification-key"
+          label="Verification key"
           value={webhookObject.auth.secret}
+          fullWidth
           multiline
           onChange={(e) => {
             setWebhookObject({
@@ -62,3 +64,5 @@ export default {
     );
   },
 };
+
+export default webhookSendgrid;

src/components/TableHeader/Webhooks/Schemas/typeform.tsx

@@ -1,6 +1,7 @@
 import { Typography, Link, TextField } from "@mui/material";
+import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 
-export default {
+export const webhookTypeform = {
   name: "Typeform",
   parser: {
     additionalVariables: null,
@@ -55,23 +56,24 @@ export default {
     return (
       <>
         <Typography gutterBottom>
-          To verify the webhook call is sent from typeform, you need to add
-          secret on your webhook config on be follow the instructions{" "}
+          Add a secret to your Typeform webhook config by following{" "}
           <Link
-            href={
-              "https://developers.typeform.com/webhooks/secure-your-webhooks/"
-            }
+            href="https://developers.typeform.com/webhooks/secure-your-webhooks/"
+            target="_blank"
             rel="noopener noreferrer"
-            variant="body2"
-            underline="always"
+            variant="inherit"
           >
-            here
-          </Link>{" "}
-          to set the secret, then add it below
+            these instructions
+            <InlineOpenInNewIcon />
+          </Link>
+          <br />
+          Then add the secret below.
         </Typography>
 
         <TextField
-          label={"Typeform Secret"}
+          id="typeform-secret"
+          label="Typeform secret"
+          fullWidth
           value={webhookObject.auth.secret}
           onChange={(e) => {
             setWebhookObject({
@@ -84,3 +86,5 @@ export default {
     );
   },
 };
+
+export default webhookTypeform;

src/components/TableHeader/Webhooks/Step1Auth.tsx

@@ -1,25 +1,23 @@
 import { IWebhookModalStepProps } from "./WebhookModal";
-import {
-  FormControl,
-  FormLabel,
-  FormControlLabel,
-  Switch,
-  Typography,
-} from "@mui/material";
+
+import { FormControlLabel, Checkbox, Typography } from "@mui/material";
+
 import { webhookSchemas } from "./utils";
+
 export default function Step1Endpoint({
   webhookObject,
   setWebhookObject,
 }: IWebhookModalStepProps) {
   return (
-    <FormControl component="fieldset">
-      <FormLabel component="legend" className="visually-hidden">
-        Verification
-      </FormLabel>
+    <>
+      <Typography variant="inherit" paragraph>
+        Verification prevents malicious requests from being sent to this webhook
+        endpoint
+      </Typography>
+
       <FormControlLabel
-        labelPlacement="start"
         control={
-          <Switch
+          <Checkbox
             checked={webhookObject.auth?.enabled}
             onClick={() =>
               setWebhookObject({
@@ -32,17 +30,16 @@ export default function Step1Endpoint({
             }
           />
         }
-        label="Enable Verification"
+        label="Enable verification for this webhook"
+        sx={{ mb: 2 }}
       />
-      {webhookObject.auth?.enabled ? (
-        webhookSchemas[webhookObject.type].auth(webhookObject, setWebhookObject)
-      ) : (
-        <Typography>
-          Verification of webhooks is optional however it prevents malicious
-          actors from spoofing the original sender
-        </Typography>
-      )}
+
+      {webhookObject.auth?.enabled &&
+        webhookSchemas[webhookObject.type].auth(
+          webhookObject,
+          setWebhookObject
+        )}
       {}
-    </FormControl>
+    </>
   );
 }

src/components/TableHeader/Webhooks/Step3Parser.tsx

@@ -34,8 +34,8 @@ export default function Step4Body({
   return (
     <>
       <Typography gutterBottom>
-        Write the webhook parsed function. The returned object of the parser
-        will be added as new row{" "}
+        Write a function to parse webhook requests. Return an object, which will
+        be added as a new row.{" "}
         <Link
           href={
             WIKI_LINKS[`webhooks${_upperFirst(webhookObject.type)}`] ||

src/components/TableHeader/Webhooks/WebhookModal.tsx

@@ -2,7 +2,13 @@ import { useState } from "react";
 import _isEqual from "lodash/isEqual";
 import useStateRef from "react-usestateref";
 
-import { Grid, TextField, FormControlLabel, Switch } from "@mui/material";
+import {
+  Grid,
+  TextField,
+  FormControlLabel,
+  Switch,
+  Stack,
+} from "@mui/material";
 
 import Modal, { IModalProps } from "@src/components/Modal";
 import SteppedAccordion from "@src/components/SteppedAccordion";
@@ -16,7 +22,9 @@ import { webhookNames, IWebhook } from "./utils";
 import CopyIcon from "@src/assets/icons/Copy";
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { IconButton, Tooltip, Typography } from "@mui/material";
+
 type StepValidation = Record<"condition" | "parser", boolean>;
+
 export interface IWebhookModalStepProps {
   webhookObject: IWebhook;
   setWebhookObject: React.Dispatch<React.SetStateAction<IWebhook>>;
@@ -128,36 +136,39 @@ export default function WebhookModal({
                 }activated`}
               />
             </Grid>
-            <div style={{ display: "flex", alignItems: "center" }}>
-              <Typography>URL:</Typography>
-              <div
-                style={{
-                  maxWidth: "90%",
-                  overflowX: "auto",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <Typography variant="caption">
-                  <code>
-                    {baseUrl}
-                    {webhookObject.endpoint}
-                  </code>
-                </Typography>
-              </div>
-              <Tooltip title="copy to clipboard">
-                <IconButton
-                  onClick={() =>
-                    navigator.clipboard.writeText(
-                      `${baseUrl}${webhookObject.endpoint}`
-                    )
-                  }
-                >
-                  <CopyIcon />
-                </IconButton>
-              </Tooltip>
-            </div>
           </Grid>
 
+          <Stack direction="row" alignItems="center" style={{ marginTop: 0 }}>
+            <Typography
+              variant="inherit"
+              style={{ whiteSpace: "nowrap", flexShrink: 0 }}
+            >
+              Endpoint URL:
+            </Typography>
+            &nbsp;
+            <Typography
+              variant="caption"
+              style={{ overflowX: "auto", whiteSpace: "nowrap", flexGrow: 1 }}
+            >
+              <code>
+                {baseUrl}
+                {webhookObject.endpoint}
+              </code>
+            </Typography>
+            <Tooltip title="Copy endpoint URL">
+              <IconButton
+                onClick={() =>
+                  navigator.clipboard.writeText(
+                    `${baseUrl}${webhookObject.endpoint}`
+                  )
+                }
+                sx={{ flexShrink: 0, mr: -0.75 }}
+              >
+                <CopyIcon />
+              </IconButton>
+            </Tooltip>
+          </Stack>
+
           <SteppedAccordion
             steps={[
               {
@@ -178,6 +189,7 @@ export default function WebhookModal({
                 content: <Step3Body {...stepProps} />,
               },
             ]}
+            style={{ marginTop: "var(--dialog-contents-spacing)" }}
           />
         </>
       }

src/components/TableHeader/Webhooks/utils.tsx

@@ -40,9 +40,9 @@ const additionalVariables = [
 export type WebhookType = typeof webhookTypes[number];
 
 export const webhookNames: Record<WebhookType, string> = {
-  sendgrid: "Sendgrid",
+  sendgrid: "SendGrid",
   typeform: "Typeform",
-  //github:"Github",
+  //github:"GitHub",
   // shopify: "Shopify",
   // twitter: "Twitter",
   // stripe: "Stripe",
@@ -73,6 +73,7 @@ export const webhookSchemas = {
   typeform,
   sendgrid,
 };
+
 export function emptyWebhookObject(
   type: WebhookType,
   user: IWebhookEditor