Deprecate secret key in webhooks (#2119)

* Add deprecated message

* Extract messages

* Add deprecated pill to webhook secret key

* Update snapshots

* Move extra info to pill toolbar

* Extract messages

* Update snapshots

* Remove preventDefault

* Open link in a new tab

* Update snapshots

* Fix linter issue

* Make webhooks active by default when creating new ones

* Update snapshots

locale/defaultMessages.json

@@ -324,6 +324,10 @@
     "context": "field is optional",
     "string": "(Optional)"
   },
+  "0kPdlb": {
+    "context": "deprecated secret key toolbar label",
+    "string": "Use RS256 signature instead."
+  },
   "0krqBj": {
     "context": "page header",
     "string": "Order no. {orderNumber} - Refund"
@@ -5710,6 +5714,10 @@
     "context": "copied to clipboard alert title",
     "string": "Copied to clipboard"
   },
+  "hnRRUe": {
+    "context": "docs link label",
+    "string": "Learn more..."
+  },
   "ho75Lr": {
     "context": "status label deactivated",
     "string": "Deactivated"
@@ -7832,6 +7840,9 @@
     "context": "button",
     "string": "View products"
   },
+  "z9c6/C": {
+    "string": "Deprecated"
+  },
   "z9wQ/U": {
     "context": "no variant stock in warehouse",
     "string": "No Stock"

src/intl.ts

@@ -178,6 +178,10 @@ export const commonMessages = defineMessages({
     defaultMessage: "Can’t fulfill until payment is captured",
     description: "disabled option description",
   },
+  deprecated: {
+    id: "z9c6/C",
+    defaultMessage: "Deprecated",
+  },
 });
 
 export const errorMessages = defineMessages({

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -26396,15 +26396,26 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
                   Secret Key
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="secretKey"
                     type="text"
                     value="zxczx_asdas"
                   />
+                  <div>
+                    <div
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
+                    >
+                      <span
+                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                      >
+                        Deprecated
+                      </span>
+                    </div>
+                  </div>
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -26890,15 +26901,26 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
                   Secret Key
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                 >
                   <input
                     aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="secretKey"
                     type="text"
                     value="zxczx_asdas"
                   />
+                  <div>
+                    <div
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
+                    >
+                      <span
+                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                      >
+                        Deprecated
+                      </span>
+                    </div>
+                  </div>
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -27381,16 +27403,27 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
                   Secret Key
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     disabled=""
                     name="secretKey"
                     type="text"
                     value=""
                   />
+                  <div>
+                    <div
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
+                    >
+                      <span
+                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                      >
+                        Deprecated
+                      </span>
+                    </div>
+                  </div>
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -27443,13 +27476,14 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
               >
                 <span
                   aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                   tabindex="-1"
                 >
                   <span
                     class="MuiIconButton-label-id"
                   >
                     <input
+                      checked=""
                       class="PrivateSwitchBase-input-id"
                       data-indeterminate="false"
                       disabled=""
@@ -27462,18 +27496,28 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <rect
+                      <svg
-                        fill="transparent"
+                        fill="none"
-                        height="22"
+                        height="24"
-                        rx="2"
+                        viewBox="0 0 24 24"
-                        ry="2"
+                        width="24"
-                        stroke="currentColor"
+                        xmlns="http://www.w3.org/2000/svg"
-                        stroke-linejoin="round"
+                      >
-                        stroke-width="2"
+                        <rect
-                        width="22"
+                          fill="currentColor"
-                        x="1"
+                          height="23"
-                        y="1"
+                          rx="1.5"
-                      />
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -27862,15 +27906,26 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
                   Secret Key
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="secretKey"
                     type="text"
                     value=""
                   />
+                  <div>
+                    <div
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
+                    >
+                      <span
+                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                      >
+                        Deprecated
+                      </span>
+                    </div>
+                  </div>
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -27923,12 +27978,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
               >
                 <span
                   aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                 >
                   <span
                     class="MuiIconButton-label-id"
                   >
                     <input
+                      checked=""
                       class="PrivateSwitchBase-input-id"
                       data-indeterminate="false"
                       name="isActive"
@@ -27940,18 +27996,28 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <rect
+                      <svg
-                        fill="transparent"
+                        fill="none"
-                        height="22"
+                        height="24"
-                        rx="2"
+                        viewBox="0 0 24 24"
-                        ry="2"
+                        width="24"
-                        stroke="currentColor"
+                        xmlns="http://www.w3.org/2000/svg"
-                        stroke-linejoin="round"
+                      >
-                        stroke-width="2"
+                        <rect
-                        width="22"
+                          fill="currentColor"
-                        x="1"
+                          height="23"
-                        y="1"
+                          rx="1.5"
-                      />
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -28340,15 +28406,26 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
                   Secret Key
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                     name="secretKey"
                     type="text"
                     value="zxczx_asdas"
                   />
+                  <div>
+                    <div
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
+                    >
+                      <span
+                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                      >
+                        Deprecated
+                      </span>
+                    </div>
+                  </div>
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"

src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx

@@ -64,7 +64,7 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
   const initialForm: FormData = {
     syncEvents: webhook?.syncEvents?.map(event => event.eventType) || [],
     asyncEvents: webhook?.asyncEvents?.map(event => event.eventType) || [],
-    isActive: !!webhook?.isActive,
+    isActive: webhook?.isActive ?? true,
     name: webhook?.name || "",
     secretKey: webhook?.secretKey || "",
     targetUrl: webhook?.targetUrl || "",

src/webhooks/components/WebhookInfo/WebhookInfo.tsx

@@ -1,16 +1,25 @@
-import { Card, CardContent, TextField, Typography } from "@material-ui/core";
+import {
+  Card,
+  CardContent,
+  Popper,
+  TextField,
+  Typography,
+} from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import Link from "@saleor/components/Link";
 import { WebhookErrorFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
+import { Pill } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getWebhookErrorMessage from "@saleor/utils/errors/webhooks";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { WebhookFormData } from "../WebhooksDetailsPage/WebhooksDetailsPage";
 import { messages } from "./messages";
+import { useStyles } from "./styles";
 
 interface WebhookInfoProps {
   data: WebhookFormData;
@@ -26,9 +35,13 @@ const WebhookInfo: React.FC<WebhookInfoProps> = ({
   onChange,
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
 
   const formErrors = getFormErrors(["name", "targetUrl", "secretKey"], errors);
 
+  const [isPopupOpen, setPopupOpen] = React.useState(false);
+  const anchor = React.useRef<HTMLDivElement>(null);
+
   return (
     <Card>
       <CardTitle title={intl.formatMessage(messages.webhookInformation)} />
@@ -76,6 +89,40 @@ const WebhookInfo: React.FC<WebhookInfoProps> = ({
           name="secretKey"
           value={data.secretKey}
           onChange={onChange}
+          InputProps={{
+            endAdornment: (
+              <div
+                ref={anchor}
+                onMouseOver={() => setPopupOpen(true)}
+                onMouseLeave={() => setPopupOpen(false)}
+              >
+                <Pill
+                  label={intl.formatMessage(commonMessages.deprecated)}
+                  color={"error"}
+                  outlined
+                  size="small"
+                />
+                <Popper
+                  anchorEl={anchor.current}
+                  open={isPopupOpen}
+                  placement={"top"}
+                >
+                  <Card elevation={8} className={classes.toolbar}>
+                    <Typography>
+                      <FormattedMessage {...messages.useSignature} />
+                    </Typography>
+                    <Link
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://docs.saleor.io/docs/3.x/developer/extending/apps/synchronous-webhooks#payload-signature"
+                    >
+                      <FormattedMessage {...messages.learnMore} />
+                    </Link>
+                  </Card>
+                </Popper>
+              </div>
+            ),
+          }}
         />
       </CardContent>
     </Card>

src/webhooks/components/WebhookInfo/messages.ts

@@ -32,4 +32,14 @@ export const messages = defineMessages({
       "secret key is used to create a hash signature with each payload. *optional field",
     description: "webhook input help text",
   },
+  useSignature: {
+    id: "0kPdlb",
+    defaultMessage: "Use RS256 signature instead.",
+    description: "deprecated secret key toolbar label",
+  },
+  learnMore: {
+    id: "hnRRUe",
+    defaultMessage: "Learn more...",
+    description: "docs link label",
+  },
 });

src/webhooks/components/WebhookInfo/styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    toolbar: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.saleor.fail.mid,
+      color: theme.palette.common.black,
+      marginBottom: theme.spacing(2),
+    },
+  }),
+  { name: "WebhookInfo" },
+);