Sign webhook requests (#4156)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/scenes/Settings/components/WebhookSubscriptionForm.tsx

@@ -146,6 +146,7 @@ type Props = {
 interface FormData {
   name: string;
   url: string;
+  secret: string;
   events: string[];
 }
 
@@ -163,6 +164,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
       events: webhookSubscription ? [...webhookSubscription.events] : [],
       name: webhookSubscription?.name,
       url: webhookSubscription?.url,
+      secret: webhookSubscription?.secret,
     },
   });
 
@@ -237,6 +239,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
           autoFocus
           flex
           label={t("Name")}
+          placeholder={t("A memorable identifer")}
           {...register("name", {
             required: true,
           })}
@@ -250,6 +253,14 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
           label={t("URL")}
           {...register("url", { required: true })}
         />
+        <ReactHookWrappedInput
+          flex
+          label={t("Secret") + ` (${t("Optional")})`}
+          placeholder={t("Used to sign payload")}
+          {...register("secret", {
+            required: false,
+          })}
+        />
       </TextFields>
 
       <EventCheckbox label={t("All events")} value="*" />