Add status pills to webhooks list (#2153)
This commit is contained in:
Dawid
GitHub
parent
b6312c2dff
commit
ab8111a62d
4 changed files with 84 additions and 44 deletions
|
|
@ -445,9 +445,6 @@
|
|||
"1div9r": {
|
||||
"string": "Search Attribute"
|
||||
},
|
||||
"1eCau/": {
|
||||
"string": "Unnamed webhook"
|
||||
},
|
||||
"1eEyJv": {
|
||||
"context": "ExitFormPrompt continue editing button",
|
||||
"string": "Continue editing"
|
||||
|
|
@ -1640,6 +1637,10 @@
|
|||
"context": "section header",
|
||||
"string": "Unfulfilled Items"
|
||||
},
|
||||
"Bkxrhw": {
|
||||
"context": "no webhooks message",
|
||||
"string": "No webhooks found"
|
||||
},
|
||||
"BooQvo": {
|
||||
"context": "navigator placeholder",
|
||||
"string": "Type {key} to see available actions"
|
||||
|
|
@ -2392,6 +2393,9 @@
|
|||
"context": "pages section name",
|
||||
"string": "Pages"
|
||||
},
|
||||
"HAlOn1": {
|
||||
"string": "Name"
|
||||
},
|
||||
"HLqWXA": {
|
||||
"context": "voucher value requirement",
|
||||
"string": "Usage Limit"
|
||||
|
|
@ -2968,6 +2972,10 @@
|
|||
"context": "metadata field value, header",
|
||||
"string": "Value"
|
||||
},
|
||||
"Lm2Zw7": {
|
||||
"context": "name placeholder",
|
||||
"string": "Unnamed webhook"
|
||||
},
|
||||
"LmKz3g": {
|
||||
"string": "Storefront"
|
||||
},
|
||||
|
|
@ -3251,6 +3259,10 @@
|
|||
"context": "gift card history message",
|
||||
"string": "Gift card was deactivated"
|
||||
},
|
||||
"NwQXZp": {
|
||||
"context": "status",
|
||||
"string": "Not active"
|
||||
},
|
||||
"NxRsHQ": {
|
||||
"context": "section header",
|
||||
"string": "Fulfillment - #{fulfilmentId}"
|
||||
|
|
@ -3302,10 +3314,6 @@
|
|||
"context": "product variant name",
|
||||
"string": "Variant"
|
||||
},
|
||||
"OTpV1t": {
|
||||
"context": "webhook name",
|
||||
"string": "Name"
|
||||
},
|
||||
"OVOU1z": {
|
||||
"context": "section header",
|
||||
"string": "Metadata"
|
||||
|
|
@ -5139,6 +5147,10 @@
|
|||
"c0H45L": {
|
||||
"string": "{amount, plural,one {One order is ready to fulfill} other {{amount} orders are ready to fulfill}}"
|
||||
},
|
||||
"c24hjq": {
|
||||
"context": "status",
|
||||
"string": "Active"
|
||||
},
|
||||
"c4gbXr": {
|
||||
"string": "Draft order successfully finalized"
|
||||
},
|
||||
|
|
@ -5940,10 +5952,6 @@
|
|||
"context": "VariantDetailsChannelsAvailabilityCard no items available",
|
||||
"string": "This variant is not available at any of the channels"
|
||||
},
|
||||
"jqnwW9": {
|
||||
"context": "header",
|
||||
"string": "Webhooks"
|
||||
},
|
||||
"jswILH": {
|
||||
"context": "add attribute as column in product list table",
|
||||
"string": "Add to Column Options"
|
||||
|
|
@ -7557,9 +7565,6 @@
|
|||
"context": "product variant inventory",
|
||||
"string": "{numLocations,plural,one{{numAvailable} available at {numLocations} location} other{{numAvailable} available at {numLocations} locations}}"
|
||||
},
|
||||
"wbjuR4": {
|
||||
"string": "No webhooks found"
|
||||
},
|
||||
"wgA48T": {
|
||||
"context": "country selection",
|
||||
"string": "Countries A to Z"
|
||||
|
|
|
|||
14
src/intl.ts
14
src/intl.ts
|
|
@ -1,6 +1,16 @@
|
|||
import { defineMessages, IntlShape } from "react-intl";
|
||||
|
||||
export const commonMessages = defineMessages({
|
||||
active: {
|
||||
id: "c24hjq",
|
||||
defaultMessage: "Active",
|
||||
description: "status",
|
||||
},
|
||||
notActive: {
|
||||
id: "NwQXZp",
|
||||
defaultMessage: "Not active",
|
||||
description: "status",
|
||||
},
|
||||
availability: {
|
||||
id: "hOxIeP",
|
||||
defaultMessage: "Availability",
|
||||
|
|
@ -85,6 +95,10 @@ export const commonMessages = defineMessages({
|
|||
id: "8oIbMI",
|
||||
defaultMessage: "Reached limit for this plan",
|
||||
},
|
||||
name: {
|
||||
id: "HAlOn1",
|
||||
defaultMessage: "Name",
|
||||
},
|
||||
no: {
|
||||
id: "oUWADl",
|
||||
defaultMessage: "No",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableB
|
|||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { AppQuery } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton, Pill } from "@saleor/macaw-ui";
|
||||
import { renderCollection, stopPropagation } from "@saleor/misc";
|
||||
import { webhookPath } from "@saleor/webhooks/urls";
|
||||
import { isUnnamed } from "@saleor/webhooks/utils";
|
||||
|
|
@ -21,6 +22,7 @@ import classNames from "classnames";
|
|||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import { messages } from "./messages";
|
||||
import { useStyles } from "./styles";
|
||||
|
||||
export interface WebhooksListProps {
|
||||
|
|
@ -35,17 +37,13 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
|
|||
onRemove,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const classes = useStyles({});
|
||||
const classes = useStyles();
|
||||
const numberOfColumns = webhooks?.length === 0 ? 2 : 3;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={intl.formatMessage({
|
||||
id: "jqnwW9",
|
||||
defaultMessage: "Webhooks",
|
||||
description: "header",
|
||||
})}
|
||||
title={intl.formatMessage(sectionNames.webhooks)}
|
||||
toolbar={
|
||||
!!createHref && (
|
||||
<Button
|
||||
|
|
@ -53,11 +51,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
|
|||
href={createHref}
|
||||
data-test-id="create-webhook"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="wlr0Si"
|
||||
defaultMessage="Create Webhook"
|
||||
description="button"
|
||||
/>
|
||||
<FormattedMessage {...messages.createWebhook} />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -66,20 +60,15 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
|
|||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCellHeader>
|
||||
{intl.formatMessage({
|
||||
id: "OTpV1t",
|
||||
defaultMessage: "Name",
|
||||
description: "webhook name",
|
||||
})}
|
||||
{intl.formatMessage(commonMessages.name)}
|
||||
</TableCellHeader>
|
||||
<TableCellHeader>
|
||||
{intl.formatMessage(commonMessages.status)}
|
||||
</TableCellHeader>
|
||||
<TableCell
|
||||
className={classNames(classes.colAction, classes.colRight)}
|
||||
>
|
||||
{intl.formatMessage({
|
||||
id: "a/QJBx",
|
||||
defaultMessage: "Action",
|
||||
description: "user action bar",
|
||||
})}
|
||||
<FormattedMessage {...messages.action} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -99,14 +88,25 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
|
|||
})}
|
||||
>
|
||||
{isUnnamed(webhook) ? (
|
||||
<FormattedMessage
|
||||
id="1eCau/"
|
||||
defaultMessage="Unnamed webhook"
|
||||
/>
|
||||
<FormattedMessage {...messages.unnamedWebhook} />
|
||||
) : (
|
||||
webhook?.name || <Skeleton />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{webhook ? (
|
||||
<Pill
|
||||
label={
|
||||
webhook.isActive
|
||||
? intl.formatMessage(commonMessages.active)
|
||||
: intl.formatMessage(commonMessages.notActive)
|
||||
}
|
||||
color={webhook.isActive ? "success" : "error"}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={classNames(classes.colAction, classes.colRight)}
|
||||
>
|
||||
|
|
@ -129,10 +129,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
|
|||
() => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={numberOfColumns}>
|
||||
{intl.formatMessage({
|
||||
id: "wbjuR4",
|
||||
defaultMessage: "No webhooks found",
|
||||
})}
|
||||
{intl.formatMessage(messages.noWebhooks)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
),
|
||||
|
|
|
|||
24
src/webhooks/components/WebhooksList/messages.ts
Normal file
24
src/webhooks/components/WebhooksList/messages.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { defineMessages } from "react-intl";
|
||||
|
||||
export const messages = defineMessages({
|
||||
createWebhook: {
|
||||
id: "wlr0Si",
|
||||
defaultMessage: "Create Webhook",
|
||||
description: "button",
|
||||
},
|
||||
action: {
|
||||
id: "a/QJBx",
|
||||
defaultMessage: "Action",
|
||||
description: "user action bar",
|
||||
},
|
||||
unnamedWebhook: {
|
||||
id: "Lm2Zw7",
|
||||
defaultMessage: "Unnamed webhook",
|
||||
description: "name placeholder",
|
||||
},
|
||||
noWebhooks: {
|
||||
id: "Bkxrhw",
|
||||
defaultMessage: "No webhooks found",
|
||||
description: "no webhooks message",
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue