Display app webhooks and deliveries in Manage App view (#4066)

* Add webhooks deliveries display to manage app page

* make 2 columns layout on manage apps view

* add chip for webhook active state

* Add borders to manage app layout

* fix ts strict

* wip before accordion

* add accordion

* improve look of failed deliveries

* extract translations

.changeset/chilly-pugs-fetch.md

@@ -0,0 +1,7 @@
+---
+"saleor-dashboard": minor
+---
+
+Added apps webhooks status to "Manage app" page. Now the page displays a list of all registered webhooks and information if its enabled or disabled. If Webhook has any pending or failed delivery attempt, they will be listed with a timestamp and status.
+
+The Manage App page was refreshed with borders to match layout of other Dashboard pages

locale/defaultMessages.json

@@ -2259,6 +2259,9 @@
     "context": "delete app",
     "string": "Deleting {name}, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace. Are you sure you want to delete the app?"
   },
+  "EY/jqC": {
+    "string": "Last delivery attempt:"
+  },
   "EYkW1J": {
     "context": "checkbox label",
     "string": "Charge taxes for this channel"
@@ -3663,6 +3666,9 @@
     "context": "WarehouseSettings disabled warehouse label",
     "string": "Disabled"
   },
+  "OFTsI1": {
+    "string": "Attempts:"
+  },
   "OFW7nq": {
     "context": "placeholder",
     "string": "Search by page name, etc..."
@@ -4262,6 +4268,9 @@
     "context": "alert message",
     "string": "Orders cannot be placed in an inactive channel."
   },
+  "SRMNCS": {
+    "string": "Pending & failed deliveries (last 10)"
+  },
   "SSWFo8": {
     "context": "window title",
     "string": "Create Product Type"
@@ -5086,6 +5095,9 @@
     "context": "header",
     "string": "Edit Authorization Field"
   },
+  "Xy48q5": {
+    "string": "All webhooks registered by this app. In case of failed webhook delivery, list of attempts is displayed."
+  },
   "Xz/sDf": {
     "context": "Dry run items list item",
     "string": "Item:"
@@ -5952,6 +5964,9 @@
     "context": "Alert text",
     "string": "You are using an old version of filter presets. The following presets: {presetNames} must be updated to continue using filters"
   },
+  "eKEL/g": {
+    "string": "Pending"
+  },
   "eLJQSh": {
     "context": "column title gift card",
     "string": "Gift Card"
@@ -5960,6 +5975,9 @@
     "context": "button",
     "string": "Done"
   },
+  "eQ7bCN": {
+    "string": "App Webhooks"
+  },
   "eRqx44": {
     "string": "Search collections..."
   },
@@ -8277,6 +8295,9 @@
     "context": "card title",
     "string": "Order Weight"
   },
+  "vXCeIi": {
+    "string": "Failed"
+  },
   "vXFPD6": {
     "context": "voucher discount type",
     "string": "Fixed Amount"

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -4,6 +4,7 @@ import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
+import { AppWebhooksDisplay } from "../AppWebhooksDisplay/AppWebhooksDisplay";
 import { AboutCard } from "./AboutCard";
 import { DataPrivacyCard } from "./DataPrivacyCard";
 import Header from "./Header";
@@ -43,18 +44,43 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
         onAppDeactivateOpen={onAppDeactivateOpen}
         onAppDeleteOpen={onAppDeleteOpen}
       />
-      <AboutCard margin={6} aboutApp={data?.aboutApp} loading={loading} />
+      <Box
+        display="grid"
+        gridTemplateColumns={{ desktop: 2, tablet: 2, mobile: 1 }}
+      >
+        <Box
+          borderColor="neutralHighlight"
+          borderRightStyle={"solid"}
+          borderRightWidth={1}
+        >
+          <AboutCard
+            padding={6}
+            borderBottomStyle="solid"
+            borderBottomWidth={1}
+            borderColor="neutralHighlight"
+            aboutApp={data?.aboutApp}
+            loading={loading}
+          />
           <PermissionsCard
             appId={data.id}
-        margin={6}
+            padding={6}
+            borderBottomStyle="solid"
+            borderBottomWidth={1}
+            borderColor="neutralHighlight"
             permissions={data?.permissions}
             loading={loading}
           />
           <DataPrivacyCard
-        margin={6}
+            padding={6}
+            borderBottomStyle="solid"
+            borderBottomWidth={1}
+            borderColor="neutralHighlight"
             dataPrivacyUrl={data?.dataPrivacyUrl}
             loading={loading}
           />
+        </Box>
+        <AppWebhooksDisplay padding={6} appId={data.id} />
+      </Box>
     </ErrorBoundary>
   );
 };

src/apps/components/AppDetailsPage/DataPrivacyCard.tsx

@@ -1,4 +1,4 @@
-import ExternalLink from "@dashboard/components/ExternalLink";
+import { ExternalLinkNext } from "@dashboard/components/ExternalLink";
 import Skeleton from "@dashboard/components/Skeleton";
 import { Box, BoxProps, Text } from "@saleor/macaw-ui/next";
 import React from "react";
@@ -29,9 +29,9 @@ export const DataPrivacyCard: React.FC<DataPrivacyCardProps> = ({
 
     if (dataPrivacyUrl) {
       return (
-        <ExternalLink href={dataPrivacyUrl} target="_blank">
+        <ExternalLinkNext href={dataPrivacyUrl} target="_blank">
           <FormattedMessage {...messages.dataPrivacyDescription} />
-        </ExternalLink>
+        </ExternalLinkNext>
       );
     }
 

src/apps/components/AppDetailsPage/HeaderOptions.tsx

@@ -25,7 +25,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
   const classes = useStyles();
 
   return (
-    <Box marginX={7}>
+    <Box paddingX={6} borderBottomStyle="solid" borderColor="neutralHighlight" borderBottomWidth={1}>
       <div className={classes.appHeaderLinks}>
         <ButtonBase
           className={classes.headerLinkContainer}
@@ -48,7 +48,6 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
           <FormattedMessage {...buttonMessages.delete} />
         </ButtonBase>
       </div>
-      <div className={classes.hr} />
     </Box>
   );
 };

src/apps/components/AppWebhooksDisplay/AppWebhooksDisplay.tsx

@@ -0,0 +1,250 @@
+import { DateTime } from "@dashboard/components/Date";
+import {
+  EventDeliveryStatusEnum,
+  useAppWebhookDeliveriesQuery,
+} from "@dashboard/graphql";
+import {
+  Accordion,
+  Box,
+  BoxProps,
+  Chip,
+  Skeleton,
+  Text,
+  ThemeTokensValues,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+import { useIntl } from "react-intl";
+
+interface AppWebhooksDisplayProps extends BoxProps {
+  appId: string;
+}
+
+const Wrapper = (boxProps: BoxProps) => {
+  const intl = useIntl();
+
+  return (
+    <Box {...boxProps}>
+      <Text variant={"heading"} marginBottom={4} as={"h2"}>
+        {intl.formatMessage({
+          defaultMessage: "App Webhooks",
+          id: "eQ7bCN",
+        })}
+      </Text>
+      <Text>
+        {intl.formatMessage({
+          defaultMessage:
+            "All webhooks registered by this app. In case of failed webhook delivery, list of attempts is displayed.",
+          id: "Xy48q5",
+        })}
+      </Text>
+      <Box marginTop={6}>{boxProps.children}</Box>
+    </Box>
+  );
+};
+
+const mapDeliveryStatusToTextColor = (
+  status: EventDeliveryStatusEnum,
+): keyof ThemeTokensValues["colors"]["foreground"] => {
+  switch (status) {
+    case EventDeliveryStatusEnum.FAILED:
+      return "textCriticalDefault";
+    case EventDeliveryStatusEnum.PENDING:
+      return "textBrandDefault";
+    case EventDeliveryStatusEnum.SUCCESS:
+      return "text1Decorative";
+  }
+};
+
+const mapDeliveryStatusToBackgroundColor = (
+  status: EventDeliveryStatusEnum,
+): keyof ThemeTokensValues["colors"]["background"] => {
+  switch (status) {
+    case EventDeliveryStatusEnum.FAILED:
+      return "surfaceCriticalSubdued";
+    case EventDeliveryStatusEnum.PENDING:
+      return "surfaceNeutralHighlight";
+    case EventDeliveryStatusEnum.SUCCESS:
+      return "surfaceBrandSubdued";
+  }
+};
+
+const DeliveryStatusDisplay = ({
+  status,
+}: {
+  status: EventDeliveryStatusEnum;
+}) => {
+  const { formatMessage } = useIntl();
+
+  switch (status) {
+    case EventDeliveryStatusEnum.FAILED:
+      return <>{formatMessage({ defaultMessage: "Failed", id: "vXCeIi" })}</>;
+    case EventDeliveryStatusEnum.PENDING:
+      return <>{formatMessage({ defaultMessage: "Pending", id: "eKEL/g" })}</>;
+    case EventDeliveryStatusEnum.SUCCESS:
+      return <>{formatMessage({ defaultMessage: "Success", id: "xrKHS6" })} </>;
+  }
+
+  throw new Error("Invalid EventDeliveryStatusEnum value");
+};
+
+const StatusChip = ({ status }: { status: EventDeliveryStatusEnum }) => {
+  return (
+    <Chip backgroundColor={mapDeliveryStatusToBackgroundColor(status)}>
+      <Text color={mapDeliveryStatusToTextColor(status)}>
+        <DeliveryStatusDisplay status={status} />
+      </Text>
+    </Chip>
+  );
+};
+
+const DisabledWebhookChip = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Chip backgroundColor="surfaceNeutralHighlight">
+      <Text color="textNeutralDefault">
+        {formatMessage({
+          defaultMessage: "Disabled",
+          id: "tthToS",
+        })}
+      </Text>
+    </Chip>
+  );
+};
+
+export const AppWebhooksDisplay = ({
+  appId,
+  ...boxProps
+}: AppWebhooksDisplayProps) => {
+  const { formatMessage } = useIntl();
+
+  const { data: webhooksData, loading } = useAppWebhookDeliveriesQuery({
+    variables: { appId },
+  });
+
+  if (loading) {
+    return (
+      <Wrapper {...boxProps}>
+        <Skeleton height={8} marginBottom={4} />
+        <Skeleton height={8} marginBottom={4} />
+        <Skeleton height={8} />
+      </Wrapper>
+    );
+  }
+
+  if (webhooksData?.app?.webhooks) {
+    return (
+      <Wrapper {...boxProps}>
+        <Accordion>
+          {webhooksData.app.webhooks.map((wh, index) => {
+            const isLastWebhook =
+              index === (webhooksData?.app?.webhooks ?? []).length - 1;
+
+            const events = [...wh.asyncEvents, ...wh.syncEvents]
+              .flatMap(e => e.name)
+              .join(", ");
+
+            const eventDeliveries = wh.eventDeliveries?.edges ?? [];
+
+            return (
+              <Box
+                key={wh.id}
+                padding={4}
+                borderBottomWidth={isLastWebhook ? 0 : 1}
+                borderColor="neutralHighlight"
+                borderBottomStyle="solid"
+              >
+                <Box>
+                  <Box
+                    display="flex"
+                    gap={2}
+                    alignItems="center"
+                    marginBottom={2}
+                  >
+                    <Text>{wh.name}</Text>
+                    {!wh.isActive && <DisabledWebhookChip />}
+                  </Box>
+                  <Text variant="caption" size="small">
+                    {events}
+                  </Text>
+                </Box>
+                {eventDeliveries.length > 0 && (
+                  <Accordion.Item
+                    value={wh.id}
+                    marginTop={6}
+                    borderColor="neutralHighlight"
+                    borderWidth={1}
+                    borderStyle="solid"
+                    paddingY={2}
+                    paddingX={4}
+                    borderRadius={4}
+                  >
+                    <Accordion.Trigger alignItems="center">
+                      <Text variant="button" as="h2">
+                        {formatMessage({
+                          defaultMessage:
+                            "Pending & failed deliveries (last 10)",
+                          id: "SRMNCS",
+                        })}
+                      </Text>
+                      <Accordion.TriggerButton />
+                    </Accordion.Trigger>
+                    <Accordion.Content marginTop={6}>
+                      {eventDeliveries.map(ed => {
+                        const { createdAt } = ed.node;
+                        const attempts = ed.node.attempts?.edges ?? [];
+
+                        const attemptsCount = attempts.length;
+                        const lastAttemptDate =
+                          attempts[attemptsCount - 1]?.node.createdAt;
+
+                        return (
+                          <Box key={createdAt} marginBottom={4}>
+                            <Box
+                              paddingLeft={0}
+                              display="grid"
+                              __gridTemplateColumns={"1fr 1fr"}
+                            >
+                              <Text as="p" variant="bodyStrong">
+                                <DateTime plain date={createdAt} />
+                              </Text>
+                              <Box marginLeft="auto">
+                                <StatusChip status={ed.node.status} />
+                              </Box>
+                            </Box>
+                            {attempts.length > 0 && (
+                              <Box>
+                                <Text>
+                                  {formatMessage({
+                                    defaultMessage: "Attempts:",
+                                    id: "OFTsI1",
+                                  })}{" "}
+                                  <Text variant="bodyStrong">
+                                    {attemptsCount} / 6
+                                  </Text>
+                                </Text>
+                                <Text as="p">
+                                  {formatMessage({
+                                    defaultMessage: "Last delivery attempt:",
+                                    id: "EY/jqC",
+                                  })}{" "}
+                                  <DateTime plain date={lastAttemptDate} />
+                                </Text>
+                              </Box>
+                            )}
+                          </Box>
+                        );
+                      })}
+                    </Accordion.Content>
+                  </Accordion.Item>
+                )}
+              </Box>
+            );
+          })}
+        </Accordion>
+      </Wrapper>
+    );
+  }
+
+  return null;
+};

src/apps/queries.ts

@@ -87,3 +87,38 @@ export const extensionList = gql`
 `;
 
 export const EXTENSION_LIST_QUERY = "ExtensionList";
+
+export const appWebhookDeliveries = gql`
+  query AppWebhookDeliveries($appId: ID!) {
+    app(id: $appId) {
+      webhooks {
+        id
+        name
+        isActive
+        syncEvents {
+          name
+        }
+        asyncEvents {
+          name
+        }
+        eventDeliveries(first: 10) {
+          edges {
+            node {
+              createdAt
+              status
+              eventType
+              attempts(first: 10) {
+                edges {
+                  node {
+                    createdAt
+                    status
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

src/apps/views/AppManageView/AppManageView.tsx

@@ -7,7 +7,7 @@ import {
   useAppActivateMutation,
   useAppDeactivateMutation,
   useAppDeleteMutation,
-  useAppQuery,
+  useAppQuery
 } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";

src/graphql/hooks.generated.ts

@@ -3836,6 +3836,68 @@ export function useExtensionListLazyQuery(baseOptions?: ApolloReactHooks.LazyQue
 export type ExtensionListQueryHookResult = ReturnType<typeof useExtensionListQuery>;
 export type ExtensionListLazyQueryHookResult = ReturnType<typeof useExtensionListLazyQuery>;
 export type ExtensionListQueryResult = Apollo.QueryResult<Types.ExtensionListQuery, Types.ExtensionListQueryVariables>;
+export const AppWebhookDeliveriesDocument = gql`
+    query AppWebhookDeliveries($appId: ID!) {
+  app(id: $appId) {
+    webhooks {
+      id
+      name
+      isActive
+      syncEvents {
+        name
+      }
+      asyncEvents {
+        name
+      }
+      eventDeliveries(first: 10) {
+        edges {
+          node {
+            createdAt
+            status
+            eventType
+            attempts(first: 10) {
+              edges {
+                node {
+                  createdAt
+                  status
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAppWebhookDeliveriesQuery__
+ *
+ * To run a query within a React component, call `useAppWebhookDeliveriesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAppWebhookDeliveriesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAppWebhookDeliveriesQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function useAppWebhookDeliveriesQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.AppWebhookDeliveriesQuery, Types.AppWebhookDeliveriesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.AppWebhookDeliveriesQuery, Types.AppWebhookDeliveriesQueryVariables>(AppWebhookDeliveriesDocument, options);
+      }
+export function useAppWebhookDeliveriesLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.AppWebhookDeliveriesQuery, Types.AppWebhookDeliveriesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.AppWebhookDeliveriesQuery, Types.AppWebhookDeliveriesQueryVariables>(AppWebhookDeliveriesDocument, options);
+        }
+export type AppWebhookDeliveriesQueryHookResult = ReturnType<typeof useAppWebhookDeliveriesQuery>;
+export type AppWebhookDeliveriesLazyQueryHookResult = ReturnType<typeof useAppWebhookDeliveriesLazyQuery>;
+export type AppWebhookDeliveriesQueryResult = Apollo.QueryResult<Types.AppWebhookDeliveriesQuery, Types.AppWebhookDeliveriesQueryVariables>;
 export const AttributeBulkDeleteDocument = gql`
     mutation AttributeBulkDelete($ids: [ID!]!) {
   attributeBulkDelete(ids: $ids) {

src/graphql/types.generated.ts

@@ -8253,6 +8253,13 @@ export type ExtensionListQueryVariables = Exact<{
 
 export type ExtensionListQuery = { __typename: 'Query', appExtensions: { __typename: 'AppExtensionCountableConnection', edges: Array<{ __typename: 'AppExtensionCountableEdge', node: { __typename: 'AppExtension', id: string, label: string, url: string, mount: AppExtensionMountEnum, target: AppExtensionTargetEnum, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum }>, app: { __typename: 'App', id: string, appUrl: string | null } } }> } | null };
 
+export type AppWebhookDeliveriesQueryVariables = Exact<{
+  appId: Scalars['ID'];
+}>;
+
+
+export type AppWebhookDeliveriesQuery = { __typename: 'Query', app: { __typename: 'App', webhooks: Array<{ __typename: 'Webhook', id: string, name: string | null, isActive: boolean, syncEvents: Array<{ __typename: 'WebhookEventSync', name: string }>, asyncEvents: Array<{ __typename: 'WebhookEventAsync', name: string }>, eventDeliveries: { __typename: 'EventDeliveryCountableConnection', edges: Array<{ __typename: 'EventDeliveryCountableEdge', node: { __typename: 'EventDelivery', createdAt: any, status: EventDeliveryStatusEnum, eventType: WebhookEventTypeEnum, attempts: { __typename: 'EventDeliveryAttemptCountableConnection', edges: Array<{ __typename: 'EventDeliveryAttemptCountableEdge', node: { __typename: 'EventDeliveryAttempt', createdAt: any, status: EventDeliveryStatusEnum } }> } | null } }> } | null }> | null } | null };
+
 export type AttributeBulkDeleteMutationVariables = Exact<{
   ids: Array<Scalars['ID']> | Scalars['ID'];
 }>;