Add status pills to webhooks list (#2153)

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"

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",

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<WebhooksListProps> = ({
   onRemove,
 }) => {
   const intl = useIntl();
-  const classes = useStyles({});
+  const classes = useStyles();
   const numberOfColumns = webhooks?.length === 0 ? 2 : 3;
 
   return (
     <Card>
       <CardTitle
-        title={intl.formatMessage({
+        title={intl.formatMessage(sectionNames.webhooks)}
-          id: "jqnwW9",
-          defaultMessage: "Webhooks",
-          description: "header",
-        })}
         toolbar={
           !!createHref && (
             <Button
@@ -53,11 +51,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
               href={createHref}
               data-test-id="create-webhook"
             >
-              <FormattedMessage
+              <FormattedMessage {...messages.createWebhook} />
-                id="wlr0Si"
-                defaultMessage="Create Webhook"
-                description="button"
-              />
             </Button>
           )
         }
@@ -66,20 +60,15 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
         <TableHead>
           <TableRow>
             <TableCellHeader>
-              {intl.formatMessage({
+              {intl.formatMessage(commonMessages.name)}
-                id: "OTpV1t",
+            </TableCellHeader>
-                defaultMessage: "Name",
+            <TableCellHeader>
-                description: "webhook name",
+              {intl.formatMessage(commonMessages.status)}
-              })}
             </TableCellHeader>
             <TableCell
               className={classNames(classes.colAction, classes.colRight)}
             >
-              {intl.formatMessage({
+              <FormattedMessage {...messages.action} />
-                id: "a/QJBx",
-                defaultMessage: "Action",
-                description: "user action bar",
-              })}
             </TableCell>
           </TableRow>
         </TableHead>
@@ -99,14 +88,25 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
                   })}
                 >
                   {isUnnamed(webhook) ? (
-                    <FormattedMessage
+                    <FormattedMessage {...messages.unnamedWebhook} />
-                      id="1eCau/"
-                      defaultMessage="Unnamed webhook"
-                    />
                   ) : (
                     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({
+                  {intl.formatMessage(messages.noWebhooks)}
-                    id: "wbjuR4",
-                    defaultMessage: "No webhooks found",
-                  })}
                 </TableCell>
               </TableRow>
             ),

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",
+  },
+});