App Problems implementation

.changeset/long-rugs-wash.md

@@ -0,0 +1,9 @@
+---
+"saleor-dashboard": patch
+---
+
+Added app problems display to the installed extensions list. Each app now shows reported problems with severity badges, timestamps, and dismissal support. The "Open the app" action link is only shown for third-party apps. Requires Saleor 3.22+.
+
+:::warning 
+This release *requires* Saleor core [`3.22.36`](https://github.com/saleor/saleor/releases/tag/3.22.36). Used with older version, Extensions page will break
+:::

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import "@saleor/macaw-ui-next/style";
 import type { Preview } from "@storybook/react-vite";
 import { IntlProvider } from "react-intl";
 import { MemoryRouter } from "react-router-dom";
+import { LocaleContext } from "../src/components/Locale/Locale";
 import { apolloClient } from "../src/graphql/client";
 import "../src/index.css";
 import { ThemeProvider } from "../src/theme";
@@ -14,14 +15,16 @@ const preview: Preview = {
     Story => (
       <ApolloProvider client={apolloClient}>
         <MemoryRouter>
-          <IntlProvider locale="en" onError={() => {}}>
-            {/* @ts-expect-error legacy types  */}
-            <LegacyThemeProvider overrides={themeOverrides} palettes={paletteOverrides}>
-              <ThemeProvider>
-                <Story />
-              </ThemeProvider>
-            </LegacyThemeProvider>
-          </IntlProvider>
+          <LocaleContext.Provider value={{ locale: "en" as any, setLocale: () => {} }}>
+            <IntlProvider locale="en" onError={() => {}}>
+              {/* @ts-expect-error legacy types  */}
+              <LegacyThemeProvider overrides={themeOverrides} palettes={paletteOverrides}>
+                <ThemeProvider>
+                  <Story />
+                </ThemeProvider>
+              </LegacyThemeProvider>
+            </IntlProvider>
+          </LocaleContext.Provider>
         </MemoryRouter>
       </ApolloProvider>
     ),

locale/defaultMessages.json

@@ -360,6 +360,10 @@
   "/zFGgP": {
     "string": "+{count} more"
   },
+  "0+sGhF": {
+    "context": "Suffix for show-more button when hidden problems include active ones",
+    "string": ", including {active} active"
+  },
   "0+zatS": {
     "string": "Hello {userName}, welcome to your Store Dashboard"
   },
@@ -1271,6 +1275,10 @@
   "5SPHkk": {
     "string": "Order #{orderId} was fully paid"
   },
+  "5SdrZT": {
+    "context": "Badge label for problems reported by the app itself",
+    "string": "App"
+  },
   "5ShHx2": {
     "context": "tooltip for disabled buttons",
     "string": "You don't have permission to manage extensions"
@@ -1543,6 +1551,10 @@
     "context": "deactivate app billing info",
     "string": "You will be still billed for the extension."
   },
+  "71NpbR": {
+    "context": "Label shown on dismissed problems",
+    "string": "Dismissed"
+  },
   "720c51": {
     "context": "tax classes name input placeholder",
     "string": "Tax rate name"
@@ -3929,6 +3941,10 @@
   "KHZlmi": {
     "string": "Discount Type"
   },
+  "KJPsls": {
+    "context": "Tooltip line showing UTC timestamp of a problem event",
+    "string": "UTC: {time}"
+  },
   "KMxiiF": {
     "context": "button",
     "string": "Retry"
@@ -4215,6 +4231,10 @@
     "context": "Placeholder for date picker",
     "string": "dd/mm/yyyy, --:--"
   },
+  "MFirbo": {
+    "context": "Button label to dismiss all problems for an app",
+    "string": "Dismiss all problems raised by the app"
+  },
   "MH1qA1": {
     "string": "Test Action"
   },
@@ -4720,6 +4740,10 @@
   "OtMtzH": {
     "string": "Product unavailable in collection channels"
   },
+  "OutAI7": {
+    "context": "Label prefix for the last occurrence date of a recurring problem",
+    "string": "last occurred at"
+  },
   "Oy1LhB": {
     "context": "button error state label",
     "string": "Try again"
@@ -5138,6 +5162,10 @@
   "R4gIJc": {
     "string": "Search by model name..."
   },
+  "R5r0+F": {
+    "context": "Badge label showing total number of app problems",
+    "string": "{count, plural, one {{count} problem} other {{count} problems}}"
+  },
   "R8+DNv": {
     "context": "section title",
     "string": "Webhook emission"
@@ -5395,6 +5423,10 @@
     "context": "attribute is filterable in storefront",
     "string": "Filterable in storefront"
   },
+  "SW4GYL": {
+    "context": "Button label to dismiss a single app problem",
+    "string": "Dismiss"
+  },
   "SZH0fw": {
     "context": "set variant as default, button",
     "string": "Set as default"
@@ -5966,6 +5998,10 @@
     "context": "column category descriptor",
     "string": "Channels"
   },
+  "W/Qs4m": {
+    "context": "Button label to expand and show additional hidden problems",
+    "string": "Show {count} more {count, plural, one {problem} other {problems}}"
+  },
   "W/lDQA": {
     "string": "Model type deleted"
   },
@@ -6045,6 +6081,10 @@
   "WMNtD2": {
     "string": "The extension will have access to new permissions. From now on it will be able to use them to perform operations these permissions allow. You should ensure you trust the extension before you approve."
   },
+  "WPKADj": {
+    "context": "Badge label for critical severity problems",
+    "string": "Critical"
+  },
   "WQMTKI": {
     "context": "list of warehouses",
     "string": "Warehouses A to Z"
@@ -6440,6 +6480,10 @@
     "context": "product field",
     "string": "Description"
   },
+  "YVsbL4": {
+    "context": "Tooltip showing which user dismissed a problem",
+    "string": "Dismissed by {email}"
+  },
   "YXhaCZ": {
     "string": "Assign Product Types"
   },
@@ -6776,6 +6820,10 @@
     "context": "select warehouse to restock items",
     "string": "Select Warehouse"
   },
+  "aHoX+i": {
+    "context": "Tooltip indicating a problem was dismissed by the app itself",
+    "string": "Dismissed by app"
+  },
   "aI80kg": {
     "string": "Properties"
   },
@@ -7322,6 +7370,10 @@
     "context": "checkbox",
     "string": "Grant refund for returned items"
   },
+  "d3jlO3": {
+    "context": "Label prefix for the creation date of a recurring problem",
+    "string": "Started at"
+  },
   "d68yq7": {
     "string": "Delete gift cards"
   },
@@ -8006,6 +8058,10 @@
   "hh0xW7": {
     "string": "Channel Name"
   },
+  "hhXK05": {
+    "context": "Link label to navigate to the app page",
+    "string": "Open the app"
+  },
   "hjEkEH": {
     "string": "All webhooks registered by this extension. In case of failed webhook delivery, list of attempts is displayed."
   },
@@ -8490,6 +8546,10 @@
     "context": "info when addresses search is unsuccessful",
     "string": "No results found"
   },
+  "kRnxj2": {
+    "context": "Suffix for show-more button when hidden problems include both active and critical",
+    "string": ", including {active} active and {critical} critical"
+  },
   "kS5Qgk": {
     "context": "used by label",
     "string": "Used by"
@@ -8551,6 +8611,10 @@
   "kgVqk1": {
     "string": "Category name"
   },
+  "ki2FY7": {
+    "context": "Badge label for webhook delivery error problems",
+    "string": "Webhook delivery"
+  },
   "ki7Mr8": {
     "context": "product export to csv file, header",
     "string": "Export Settings"
@@ -8686,6 +8750,10 @@
     "context": "selectt all options",
     "string": "Select All"
   },
+  "lQofIt": {
+    "context": "Full badge label with optional critical count suffix",
+    "string": "{count, plural, one {{count} problem} other {{count} problems}}{hasCritical, select, true {, including {criticalCount} critical} other {}}"
+  },
   "lSOmbK": {
     "context": "fulfillment status fulfilled",
     "string": "Fulfilled"
@@ -8810,6 +8878,10 @@
   "m9Q2yf": {
     "string": "Plugin settings updated"
   },
+  "m9ndUn": {
+    "context": "Link label to navigate to webhook settings for an app",
+    "string": "Check webhooks"
+  },
   "mCP0UD": {
     "context": "order draft creation date",
     "string": "Date"
@@ -9491,6 +9563,10 @@
   "qGwKT/": {
     "string": "Extension disabled. Activate the extension from the settings."
   },
+  "qIVtUd": {
+    "context": "Modal header showing total problem count for an app",
+    "string": "All problems ({count})"
+  },
   "qJedl0": {
     "context": "product label",
     "string": "Published"
@@ -9555,6 +9631,10 @@
     "context": "order line total price",
     "string": "Total"
   },
+  "qVT7rt": {
+    "context": "Badge label showing number of errors",
+    "string": "{count, plural, one {{count} error} other {{count} errors}}"
+  },
   "qYukJi": {
     "context": "Status when product is partially configured",
     "string": "Scheduled"
@@ -9862,6 +9942,10 @@
     "context": "gift cards page subheader",
     "string": "Learn more about {giftCards}"
   },
+  "sQMS4n": {
+    "context": "Tooltip for the dismiss problem button",
+    "string": "Force clear this error. Use if you know what you are doing"
+  },
   "sR0urA": {
     "context": "dialog content",
     "string": "Are you sure you want to delete {name}?"
@@ -10488,6 +10572,10 @@
   "vaFjs6": {
     "string": "No warehouses available to add"
   },
+  "vazr6V": {
+    "context": "Button label to open the full problems modal for an app",
+    "string": "Open app problems"
+  },
   "vbop3G": {
     "string": "Create new model"
   },
@@ -10690,6 +10778,10 @@
     "context": "note on currency",
     "string": "Note: Only channels with matching currency are available."
   },
+  "wabGCe": {
+    "context": "Tooltip line showing local timestamp of a problem event",
+    "string": "Local: {time}"
+  },
   "wbsq7O": {
     "string": "Usage"
   },
@@ -10902,6 +10994,10 @@
   "y/UWBR": {
     "string": "There is no address to show for this customer"
   },
+  "y/vChh": {
+    "context": "Suffix appended to problem count when critical problems exist",
+    "string": "including {count} critical"
+  },
   "y08GTW": {
     "string": "Channel is required"
   },
@@ -10982,6 +11078,10 @@
     "context": "extensions page subheader",
     "string": "Learn more about {extensions}"
   },
+  "ygPAC7": {
+    "context": "Tooltip explaining the app-reported problem badge",
+    "string": "This message comes from the app"
+  },
   "ygxco/": {
     "context": "tooltip, submit form",
     "string": "Client has made more than one transaction. You have to send refund manually."

package.json

@@ -29,7 +29,7 @@
     "extract-messages": "formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file locale/defaultMessages.json --format scripts/formatter.cjs",
     "fetch-local-schema": "node scripts/fetch-local-schema.cjs",
     "fetch-schema": "pnpm run fetch-schema:main && pnpm run fetch-schema:staging",
-    "fetch-schema:main": "curl https://raw.githubusercontent.com/saleor/saleor/${npm_package_config_saleor_schemaVersion}/saleor/graphql/schema.graphql > schema-main.graphql && cp schema-main.graphql schema.graphql",
+    "fetch-schema:main": "curl https://raw.githubusercontent.com/saleor/saleor/${npm_package_config_saleor_schemaVersion}/saleor/graphql/schema.graphql > schema-main.graphql",
     "fetch-schema:staging": "curl https://raw.githubusercontent.com/saleor/saleor/main/saleor/graphql/schema.graphql > schema-staging.graphql",
     "format:check": "prettier --check .",
     "generate": "pnpm run generate:main && pnpm run generate:staging",

playwright/api/basics.ts

@@ -1,4 +1,4 @@
-import { APIRequestContext } from "@playwright/test";
+import { type APIRequestContext } from "@playwright/test";
 
 interface User {
   email: string;

playwright/api/mailpit.ts

@@ -1,5 +1,5 @@
 import { URL_LIST } from "@data/url";
-import { APIRequestContext, expect } from "@playwright/test";
+import { type APIRequestContext, expect } from "@playwright/test";
 
 const mailpitUrl = process.env.MAILPITURL || "no mailpit url provided";
 

playwright/data/appSmokeTestData.ts

@@ -1,4 +1,4 @@
-import { expect, FrameLocator } from "@playwright/test";
+import { expect, type FrameLocator } from "@playwright/test";
 
 type ContentAssertion = (iframe: FrameLocator, timeout: number) => Promise<void>;
 

playwright/pages/addressesListPage.ts

@@ -1,5 +1,5 @@
-import { AddressFieldsType } from "@data/addresses";
-import { expect, Page } from "@playwright/test";
+import { type AddressFieldsType } from "@data/addresses";
+import { expect, type Page } from "@playwright/test";
 
 import { BasePage } from "./basePage";
 

playwright/pages/appPageThirdparty.ts

@@ -1,6 +1,6 @@
 import { URL_LIST } from "@data/url";
 import { BasePage } from "@pages/basePage";
-import { expect, Page } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
 
 import { DeleteDialog } from "./dialogs/deleteDialog";
 

playwright/pages/channelsPage.ts

@@ -2,7 +2,7 @@ import { URL_LIST } from "@data/url";
 import { RightSideDetailsPage } from "@pageElements/rightSideDetailsSection";
 import { BasePage } from "@pages/basePage";
 import { DeleteDialog } from "@pages/dialogs/deleteDialog";
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 export class ChannelPage extends BasePage {
   readonly page: Page;

playwright/pages/customersPage.ts

@@ -4,7 +4,7 @@ import { DeleteDialog } from "@dialogs/deleteDialog";
 import { IssueGiftCardDialog } from "@dialogs/issueGiftCardDialog";
 import { AddressForm } from "@forms/addressForm";
 import { BasePage } from "@pages/basePage";
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 export class CustomersPage extends BasePage {
   readonly addressForm: AddressForm;

playwright/pages/dialogs/addCountriesDialog.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 export class AddCountriesDialog {
   readonly page: Page;

playwright/pages/dialogs/addNavigationMenuDialog.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 export class AddNavigationMenuDialog {
   readonly page: Page;

playwright/pages/dialogs/addNavigationMenuItemDialog.ts

@@ -1,4 +1,4 @@
-import { expect, Page } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
 
 import { BasePage } from "../basePage";