Alerts for apps with issues or disabled apps in app list

.changeset/hip-bobcats-fetch.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": patch
+---
+
+App list now shows an alert if app's webhooks have failed or the app is disabled. This means you can see if there are issues with your apps without having to enter app details.
+

.featureFlags/generated.tsx

@@ -1,18 +1,18 @@
 // @ts-nocheck
 
-import X82432 from "./images/app-alerts.jpg"
-import J50320 from "./images/discounts-list.png"
-import K65771 from "./images/improved_refunds.png"
+import M09811 from "./images/app-alerts.jpg"
+import T88459 from "./images/discounts-list.png"
+import L79851 from "./images/improved_refunds.png"
 
-const app_alerts = () => (<><p><img src={X82432} alt="new filters"/>
+const app_alerts = () => (<><p><img src={M09811} alt="new filters"/>
 Experience new notifications displaying alerts for apps in the Dashboard. 
 Get meaningful information when Saleor detects issues with an app.</p>
 </>)
-const discounts_rules = () => (<><p><img src={J50320} alt="Discount rules"/></p>
+const discounts_rules = () => (<><p><img src={T88459} alt="Discount rules"/></p>
 <p>Apply the new discounts rules to narrow your promotions audience.
 Set up conditions and channels that must be fulfilled to apply defined reward.</p>
 </>)
-const improved_refunds = () => (<><p><img src={K65771} alt="Improved refunds"/></p>
+const improved_refunds = () => (<><p><img src={L79851} alt="Improved refunds"/></p>
 <h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
 <ul>
 <li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>

locale/defaultMessages.json

@@ -2697,6 +2697,9 @@
   "FZTrzW": {
     "string": "Manual refund"
   },
+  "FaRg9/": {
+    "string": "Webhook errors detected. Last occurred at {date}. {viewDetails}."
+  },
   "Fbr4Vp": {
     "context": "dialog header",
     "string": "Permissions"
@@ -3143,6 +3146,9 @@
   "HvJPcU": {
     "string": "Category deleted"
   },
+  "HwHSeY": {
+    "string": "App disabled"
+  },
   "I+1KzL": {
     "context": "tab name",
     "string": "All attributes"
@@ -3863,6 +3869,9 @@
     "context": "table header warehouse stock label",
     "string": "Warehouse stock"
   },
+  "MnpUD7": {
+    "string": "View details"
+  },
   "MpR4zK": {
     "context": "customer details, header",
     "string": "{fullName} Details"
@@ -8128,6 +8137,9 @@
     "context": "order status",
     "string": "Unfulfilled"
   },
+  "oCrEdS": {
+    "string": "Activate the app from the settings. {viewDetails}."
+  },
   "oHbgcK": {
     "context": "PageTypeDeleteWarningDialog title",
     "string": "Delete page {selectedTypesCount,plural,one{type} other{types}}"
@@ -8798,6 +8810,9 @@
     "context": "voucher status",
     "string": "Expired"
   },
+  "t9sWqJ": {
+    "string": "Issues found"
+  },
   "tA5HJx": {
     "context": "webhook input help text",
     "string": "secret key is used to create a hash signature with each payload. *optional field"

src/apps/components/AppAdditionalInfo/AppAdditionalInfo.tsx

@@ -14,7 +14,7 @@ export const AppAdditionalInfo: React.FC<{
     <Tooltip>
       <Tooltip.Trigger>
         <Box display="flex" placeItems="center">
-          <InfoIcon color="default2" size="large" />
+          <InfoIcon color="default2" size="medium" />
         </Box>
       </Tooltip.Trigger>
       <Tooltip.Content side="bottom">

src/apps/components/AppAlerts/AlertExclamationIcon.tsx

@@ -0,0 +1,21 @@
+import { WARNING_ICON_COLOR, WARNING_ICON_COLOR_LIGHTER } from "@dashboard/colors";
+import { ExclamationIcon } from "@dashboard/icons/ExclamationIcon";
+import { ExclamationIconFilled } from "@dashboard/icons/ExclamationIconFilled";
+import { Box } from "@saleor/macaw-ui-next";
+import React, { useState } from "react";
+
+export const AlertExclamationIcon = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Box
+      __color={isHovered ? WARNING_ICON_COLOR_LIGHTER : WARNING_ICON_COLOR}
+      __width={17}
+      __height={17}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {isHovered ? <ExclamationIconFilled /> : <ExclamationIcon />}
+    </Box>
+  );
+};

src/apps/components/AppAlerts/AppRowDisabledAlert.tsx

@@ -0,0 +1,59 @@
+import { AppPaths } from "@dashboard/apps/urls";
+import Link from "@dashboard/components/Link";
+import { StopPropagation } from "@dashboard/components/StopPropagation";
+import { AppListItemFragment } from "@dashboard/graphql";
+import { DisabledIcon } from "@dashboard/icons/Disabled";
+import { Box, Text, Tooltip } from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+interface AppRowDisabledAlertProps {
+  app: AppListItemFragment;
+}
+
+export const AppRowDisabledAlert = ({ app }: AppRowDisabledAlertProps) => {
+  if (app.isActive) {
+    return null;
+  }
+
+  const detailsLink = AppPaths.resolveAppDetailsPath(app.id);
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Box color="default2" __transform="scale(0.8)">
+          <DisabledIcon />
+        </Box>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content align="start" side="bottom">
+        <StopPropagation>
+          <Box display="flex" flexDirection="row" gap={2} color="default2">
+            <Box __transform="scale(0.8)" __marginTop="-3px">
+              <DisabledIcon />
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap={1}>
+              <Text fontSize={5} fontWeight="bold">
+                <FormattedMessage defaultMessage="App disabled" id="HwHSeY" />
+              </Text>
+              <Text>
+                <FormattedMessage
+                  defaultMessage="Activate the app from the settings. {viewDetails}."
+                  id="oCrEdS"
+                  values={{
+                    viewDetails: (
+                      <Link href={detailsLink} color="secondary" underline>
+                        <FormattedMessage defaultMessage="View details" id="MnpUD7" />
+                      </Link>
+                    ),
+                  }}
+                />
+              </Text>
+            </Box>
+          </Box>
+        </StopPropagation>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

src/apps/components/AppAlerts/AppRowWebhookIssueAlert.tsx

@@ -0,0 +1,71 @@
+import { AppPaths } from "@dashboard/apps/urls";
+import Link from "@dashboard/components/Link";
+import { StopPropagation } from "@dashboard/components/StopPropagation";
+import { AppListItemFragment } from "@dashboard/graphql";
+import { ExclamationIcon } from "@dashboard/icons/ExclamationIcon";
+import { Box, Text, Tooltip } from "@saleor/macaw-ui-next";
+import moment from "moment";
+import React, { useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { AlertExclamationIcon } from "../AppAlerts/AlertExclamationIcon";
+import { getLatestFailedAttemptFromWebhooks } from "./utils";
+
+interface AppRowWebhookIssueAlertProps {
+  app: AppListItemFragment;
+}
+
+export const AppRowWebhookIssueAlert = ({ app }: AppRowWebhookIssueAlertProps) => {
+  const latestFailedAttempt = useMemo(
+    () => app.webhooks && getLatestFailedAttemptFromWebhooks(app.webhooks),
+    [app],
+  );
+
+  if (!latestFailedAttempt) {
+    return null;
+  }
+
+  const detailsLink = AppPaths.resolveAppDetailsPath(app.id);
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Box data-test-id="app-warning-dot">
+          <AlertExclamationIcon />
+        </Box>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content align="start" side="bottom">
+        <StopPropagation>
+          <Box display="flex" flexDirection="row" gap={2} __color="#FFB84E">
+            <Box marginTop={0.5}>
+              <ExclamationIcon />
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap={1}>
+              <Text fontSize={5} fontWeight="bold">
+                <FormattedMessage defaultMessage="Issues found" id="t9sWqJ" />
+              </Text>
+              <Text>
+                <FormattedMessage
+                  defaultMessage="Webhook errors detected. Last occurred at {date}. {viewDetails}."
+                  id="FaRg9/"
+                  values={{
+                    date: moment(latestFailedAttempt?.createdAt).format(
+                      "YYYY-MM-DD HH:mm:ss [UTC]Z",
+                    ),
+                    viewDetails: (
+                      <Link href={detailsLink} color="secondary" underline>
+                        <FormattedMessage defaultMessage="View details" id="MnpUD7" />
+                      </Link>
+                    ),
+                  }}
+                />
+              </Text>
+            </Box>
+          </Box>
+        </StopPropagation>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

src/apps/components/AppAlerts/SidebarAppAlert.tsx

@@ -1,30 +1,12 @@
 import { AppSections } from "@dashboard/apps/urls";
-import { WARNING_ICON_COLOR, WARNING_ICON_COLOR_LIGHTER } from "@dashboard/colors";
-import { ExclamationIcon } from "@dashboard/icons/ExclamationIcon";
-import { ExclamationIconFilled } from "@dashboard/icons/ExclamationIconFilled";
-import { Box, Text, Tooltip } from "@saleor/macaw-ui-next";
-import React, { useState } from "react";
+import { Text, Tooltip } from "@saleor/macaw-ui-next";
+import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
+import { AlertExclamationIcon } from "./AlertExclamationIcon";
 import { useAppsAlert } from "./useAppsAlert";
 
-const ExclamationIconComponent = () => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <Box
-      __color={isHovered ? WARNING_ICON_COLOR_LIGHTER : WARNING_ICON_COLOR}
-      __width={17}
-      __height={17}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {isHovered ? <ExclamationIconFilled /> : <ExclamationIcon />}
-    </Box>
-  );
-};
-
 export const SidebarAppAlert = () => {
   const { hasFailedAttempts } = useAppsAlert();
 
@@ -36,7 +18,7 @@ export const SidebarAppAlert = () => {
     <Tooltip>
       <Tooltip.Trigger>
         <Link to={AppSections.appsSection}>
-          <ExclamationIconComponent />
+          <AlertExclamationIcon />
         </Link>
       </Tooltip.Trigger>
 

src/apps/components/AppAlerts/queries.ts

@@ -1,40 +1,11 @@
 import { gql } from "@apollo/client";
 
 export const appFailedPendingWebhooks = gql`
-  query AppFailedPendingWebhooks {
+  query AppFailedPendingWebhooks($PERMISSION_MANAGE_APPS: Boolean!) {
     apps(first: 50, filter: { type: THIRDPARTY }) {
       edges {
         node {
-          webhooks {
-            failedDelivers: eventDeliveries(
-              first: 1
-              filter: { status: FAILED }
-              sortBy: { field: CREATED_AT, direction: DESC }
-            ) {
-              edges {
-                node {
-                  id
-                }
-              }
-            }
-            pendingDelivers: eventDeliveries(
-              first: 1
-              filter: { status: PENDING }
-              sortBy: { field: CREATED_AT, direction: DESC }
-            ) {
-              edges {
-                node {
-                  attempts(first: 6, sortBy: { field: CREATED_AT, direction: DESC }) {
-                    edges {
-                      node {
-                        status
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
+          ...AppEventDeliveries
         }
       }
     }