Add support for the BrokerProperties header (#4831)

saleor · Apr 26, 2024 · e7e639b · e7e639b
1 parent cb5988f
commit e7e639b
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/.changeset/purple-beans-deliver.md b/.changeset/purple-beans-deliver.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Addedd support for the BrokerProperties webhook header
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -6927,10 +6927,6 @@
     "context": "button",
     "string": "Apply"
   },
-  "iERn5G": {
-    "context": "header name input",
-    "string": "Should start with `x-` or `authorization`"
-  },
   "iEeIhY": {
     "context": "draft order",
     "string": "Customer"
@@ -8362,6 +8358,10 @@
     "context": "dialog title",
     "string": "Delete categories"
   },
+  "sGDsFP": {
+    "context": "header name input",
+    "string": "Should match `x-*`, `authorization*`, or `brokerproperties`."
+  },
   "sHON47": {
     "context": "refunded products list title",
     "string": "Products refunded"

diff --git a/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx b/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
@@ -106,7 +106,7 @@ const WebhookHeaders: React.FC<WebhookHeadersProps> = ({ data: { customHeaders }
                       <FormattedMessage
                         {...messages.acceptedFormat}
                         values={{
-                          code: (...chunks) => <code>${chunks}</code>,
+                          code: (...chunks) => <code>{chunks}</code>,
                         }}
                       />
                     </Typography>

diff --git a/src/custom-apps/components/WebhookHeaders/messages.ts b/src/custom-apps/components/WebhookHeaders/messages.ts
@@ -24,8 +24,8 @@ export const messages = defineMessages({
     description: "header field name, header",
   },
   headerNameError: {
-    id: "iERn5G",
-    defaultMessage: "Should start with `x-` or `authorization`",
+    id: "sGDsFP",
+    defaultMessage: "Should match `x-*`, `authorization*`, or `brokerproperties`.",
     description: "header name input",
   },
   headerValue: {

diff --git a/src/custom-apps/components/WebhookHeaders/utils.ts b/src/custom-apps/components/WebhookHeaders/utils.ts
@@ -14,7 +14,9 @@ const validateName = (name: string) => {
   if (
     name
       .toLowerCase()
-      .match("(^x$)|(^x-)|^(a|$)(u|$)(t|$)(h|$)(o|$)(r|$)(i|$)(z|$)(a|$)(t|$)(i|$)(o|$)(n|$)(-|$)")
+      .match(
+        "(^x$)|(^x-)|^(a|$)(u|$)(t|$)(h|$)(o|$)(r|$)(i|$)(z|$)(a|$)(t|$)(i|$)(o|$)(n|$)(-|$)|^brokerproperties$",
+      )
   ) {
     return false;
   }