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
This commit is contained in:
Michał Droń
GitHub
parent
dc327f1f76
commit
a54fc0396b
7 changed files with 201 additions and 39 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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
|
||||
fill="transparent"
|
||||
height="22"
|
||||
rx="2"
|
||||
ry="2"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
width="22"
|
||||
x="1"
|
||||
y="1"
|
||||
/>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="23"
|
||||
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
|
||||
fill="transparent"
|
||||
height="22"
|
||||
rx="2"
|
||||
ry="2"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
width="22"
|
||||
x="1"
|
||||
y="1"
|
||||
/>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="23"
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -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 || "",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
13
src/webhooks/components/WebhookInfo/styles.ts
Normal file
13
src/webhooks/components/WebhookInfo/styles.ts
Normal file
|
|
@ -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" },
|
||||
);
|
||||
Loading…
Reference in a new issue