From ab8111a62d26628b5a19443a3dec682bb51b63e7 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 13 Jul 2022 13:12:58 +0200 Subject: [PATCH] Add status pills to webhooks list (#2153) --- locale/defaultMessages.json | 33 ++++++----- src/intl.ts | 14 +++++ .../components/WebhooksList/WebhooksList.tsx | 57 +++++++++---------- .../components/WebhooksList/messages.ts | 24 ++++++++ 4 files changed, 84 insertions(+), 44 deletions(-) create mode 100644 src/webhooks/components/WebhooksList/messages.ts diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 0f05f1c7a..0b130dd9e 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -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" diff --git a/src/intl.ts b/src/intl.ts index df3b635bc..3541665c1 100644 --- a/src/intl.ts +++ b/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", diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index 45d770a54..4daf89a57 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx @@ -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 = ({ onRemove, }) => { const intl = useIntl(); - const classes = useStyles({}); + const classes = useStyles(); const numberOfColumns = webhooks?.length === 0 ? 2 : 3; return ( = ({ href={createHref} data-test-id="create-webhook" > - + ) } @@ -66,20 +60,15 @@ const WebhooksList: React.FC = ({ - {intl.formatMessage({ - id: "OTpV1t", - defaultMessage: "Name", - description: "webhook name", - })} + {intl.formatMessage(commonMessages.name)} + + + {intl.formatMessage(commonMessages.status)} - {intl.formatMessage({ - id: "a/QJBx", - defaultMessage: "Action", - description: "user action bar", - })} + @@ -99,14 +88,25 @@ const WebhooksList: React.FC = ({ })} > {isUnnamed(webhook) ? ( - + ) : ( webhook?.name || )} + + {webhook ? ( + + ) : ( + + )} + @@ -129,10 +129,7 @@ const WebhooksList: React.FC = ({ () => ( - {intl.formatMessage({ - id: "wbjuR4", - defaultMessage: "No webhooks found", - })} + {intl.formatMessage(messages.noWebhooks)} ), diff --git a/src/webhooks/components/WebhooksList/messages.ts b/src/webhooks/components/WebhooksList/messages.ts new file mode 100644 index 000000000..a7811a8e2 --- /dev/null +++ b/src/webhooks/components/WebhooksList/messages.ts @@ -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", + }, +});