Show alert if there are failed/pending deliveries

.changeset/modern-pianos-sneeze.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+"Apps" link in sidebar now shows an alert if one or more apps have failed or pending webhook deliveries. This means you can see if there are issues with your apps without having to enter app details.

.featureFlags/app_alerts.md

@@ -0,0 +1,11 @@
+---
+name: app_alerts
+displayName: App alerts
+enabled: false
+payload: "default"
+visible: false
+---
+
+![new filters](./images/app-alerts.jpg)
+Experience new notifications displaying alerts for apps in the Dashboard. 
+Get meaningful information when Saleor detects issues with an app.

.featureFlags/generated.tsx

@@ -1,13 +1,18 @@
 // @ts-nocheck
 
-import A54222 from "./images/discounts-list.png"
-import M51879 from "./images/improved_refunds.png"
+import X82432 from "./images/app-alerts.jpg"
+import J50320 from "./images/discounts-list.png"
+import K65771 from "./images/improved_refunds.png"
 
-const discounts_rules = () => (<><p><img src={A54222} alt="Discount rules"/></p>
+const app_alerts = () => (<><p><img src={X82432} 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>
 <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={M51879} alt="Improved refunds"/></p>
+const improved_refunds = () => (<><p><img src={K65771} 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>
@@ -33,6 +38,15 @@ New filters have been added to the following pages:</p>
 </>)
 
 export const AVAILABLE_FLAGS = [{
+  name: "app_alerts",
+  displayName: "App alerts",
+  component: app_alerts,
+  visible: false,
+  content: {
+    enabled: false,
+    payload: "default",
+  }
+},{
   name: "discounts_rules",
   displayName: "Discounts rules",
   component: discounts_rules,

locale/defaultMessages.json

@@ -1013,6 +1013,9 @@
   "4LRapg": {
     "string": "Discount removed"
   },
+  "4MIO2H": {
+    "string": "Issues found.{break}Review app alerts."
+  },
   "4PlW0w": {
     "context": "tracking number",
     "string": "Tracking Number: {trackingNumber}"

src/apps/components/AppAlerts/SidebarAppAlert.tsx

@@ -0,0 +1,56 @@
+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 { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+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();
+
+  if (!hasFailedAttempts) {
+    return null;
+  }
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Link to={AppSections.appsSection}>
+          <ExclamationIconComponent />
+        </Link>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content align="start" side="bottom">
+        <Text>
+          <FormattedMessage
+            defaultMessage="Issues found.{break}Review app alerts."
+            id="4MIO2H"
+            values={{
+              break: <br />,
+            }}
+          />
+        </Text>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

src/apps/components/AppAlerts/queries.ts

@@ -0,0 +1,42 @@
+import { gql } from "@apollo/client";
+
+export const appFailedPendingWebhooks = gql`
+  query AppFailedPendingWebhooks {
+    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
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

src/apps/components/AppAlerts/useAppsAlert.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+import { useAppsFailedDeliveries } from "./useAppsFailedDeliveries";
+
+export const useAppsAlert = () => {
+  const { hasFailed, fetchAppsWebhooks } = useAppsFailedDeliveries();
+
+  // TODO: Implement fetching at intervals
+  useEffect(() => {
+    fetchAppsWebhooks();
+  }, []);
+
+  return {
+    hasFailedAttempts: hasFailed,
+  };
+};