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,42 +1,47 @@
 // @ts-nocheck
 
-import T70991 from "./images/attributes-filters.png"
-import Y99173 from "./images/collection-filters.jpg"
-import I21828 from "./images/customers-filters.png"
-import Z18995 from "./images/discounts-list.png"
-import Z18247 from "./images/draft-orders-filters.png"
-import O69452 from "./images/gift-cards-filters.png"
-import P07654 from "./images/improved_refunds.png"
-import V06808 from "./images/page-filters.png"
-import Y05529 from "./images/product-types-filters.png"
-import D04094 from "./images/staff-members-filters.png"
-import Q41635 from "./images/vouchers-filters.png"
+import X06116 from "./images/app-alerts.jpg"
+import E39363 from "./images/attributes-filters.png"
+import X31313 from "./images/collection-filters.jpg"
+import N52326 from "./images/customers-filters.png"
+import C57589 from "./images/discounts-list.png"
+import V99682 from "./images/draft-orders-filters.png"
+import Y90779 from "./images/gift-cards-filters.png"
+import Z62416 from "./images/improved_refunds.png"
+import P29358 from "./images/page-filters.png"
+import T77822 from "./images/product-types-filters.png"
+import H41256 from "./images/staff-members-filters.png"
+import I18701 from "./images/vouchers-filters.png"
 
-const attributes_filters = () => (<><p><img src={T70991} alt="new filters"/>
+const app_alerts = () => (<><p><img src={X06116} 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 attributes_filters = () => (<><p><img src={E39363} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const collection_filters = () => (<><p><img src={Y99173} alt="new filters"/>
+const collection_filters = () => (<><p><img src={X31313} alt="new filters"/>
 Experience the new look and enhanced abilities of new filtering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const customers_filters = () => (<><p><img src={I21828} alt="new filters"/>
+const customers_filters = () => (<><p><img src={N52326} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const discounts_rules = () => (<><p><img src={Z18995} alt="Discount rules"/></p>
+const discounts_rules = () => (<><p><img src={C57589} 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 draft_orders_filters = () => (<><p><img src={Z18247} alt="new filters"/>
+const draft_orders_filters = () => (<><p><img src={V99682} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const gift_cards_filters = () => (<><p><img src={O69452} alt="new filters"/>
+const gift_cards_filters = () => (<><p><img src={Y90779} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const improved_refunds = () => (<><p><img src={P07654} alt="Improved refunds"/></p>
+const improved_refunds = () => (<><p><img src={Z62416} 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>
@@ -46,24 +51,33 @@ const improved_refunds = () => (<><p><img src={P07654} alt="Improved refunds"/><
 </ul>
 
 </>)
-const pages_filters = () => (<><p><img src={V06808} alt="new filters"/>
+const pages_filters = () => (<><p><img src={P29358} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const product_types_filters = () => (<><p><img src={Y05529} alt="new filters"/>
+const product_types_filters = () => (<><p><img src={T77822} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const staff_members_filters = () => (<><p><img src={D04094} alt="new filters"/>
+const staff_members_filters = () => (<><p><img src={H41256} alt="new filters"/>
 Experience the new look and enhanced abilities of new filtering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
-const vouchers_filters = () => (<><p><img src={Q41635} alt="new filters"/>
+const vouchers_filters = () => (<><p><img src={I18701} alt="new filters"/>
 Experience the new look and enhanced abilities of new fitering mechanism.
 Easily combine any criteria you want, and quickly browse their values.</p>
 </>)
 
 export const AVAILABLE_FLAGS = [{
+  name: "app_alerts",
+  displayName: "App alerts",
+  component: app_alerts,
+  visible: false,
+  content: {
+    enabled: false,
+    payload: "default",
+  }
+},{
   name: "attributes_filters",
   displayName: "Attributes filtering",
   component: attributes_filters,

locale/defaultMessages.json

@@ -1017,6 +1017,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,57 @@
+import { AppSections } from "@dashboard/apps/urls";
+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);
+  const colorLighter = "#FFD87E";
+  const colorDefault = "#FFB84E";
+
+  return (
+    <Box
+      __color={isHovered ? colorLighter : colorDefault}
+      __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,
+  };
+};