Handle duplicate extension installs with a friendly already-installed message (#6805)

* Handle duplicate extension installs with a friendly already-installed message

When appFetchManifest returns UNIQUE, resolve the existing app from Saleor's error payload and installed apps, then guide merchants to open it instead of showing a raw duplicate-install error. Pulse promotion links in What's New and the video announcement open Pulse directly when it is already installed.

* Extract commit message

* Fix Pulse CTA typing and App Store explore links

Author: mirekm

.changeset/pulse-install-home-redirect.md

@@ -0,0 +1,7 @@
+---
+"saleor-dashboard": patch
+---
+
+Re-installing an extension that is already on your store no longer shows a duplicate-install error. The install page now says the extension is already installed and links you to open it.
+
+Pulse links in What's New and the homepage video announcement open Pulse directly when it is already installed, instead of sending you through the install flow again.

locale/defaultMessages.json

@@ -35,6 +35,10 @@
     "context": "aria label for grid view button",
     "string": "Grid view"
   },
+  "+CE3ZW": {
+    "context": "ripple video announcement CTA when Saleor Pulse is already installed",
+    "string": "Open Pulse"
+  },
   "+G2N98": {
     "string": "Install from manifest"
   },
@@ -4927,6 +4931,10 @@
   "Kxiige": {
     "string": "Generated Token"
   },
+  "KynPlY": {
+    "context": "link to open an already installed extension app UI",
+    "string": "Open {appName}"
+  },
   "KzgcFV": {
     "context": "category attribute entity type",
     "string": "Categories"
@@ -9447,6 +9455,10 @@
     "context": "payment method type other",
     "string": "Other"
   },
+  "g2P/kE": {
+    "context": "shown when user tries to install an extension that is already installed but inactive",
+    "string": "{appName} is installed but disabled."
+  },
   "g3qjSf": {
     "context": "button",
     "string": "Assign categories"
@@ -9531,6 +9543,10 @@
   "gSQ0Ge": {
     "string": "Variant {name} has been set as default."
   },
+  "gU10OX": {
+    "context": "shown when user tries to install an extension that is already installed",
+    "string": "{appName} is already installed."
+  },
   "gaOXvo": {
     "context": "notification, form submitted",
     "string": "Refund grant for order #{orderNumber} was updated"
@@ -11992,6 +12008,10 @@
     "context": "number of included postal code ranges",
     "string": "{number, plural, one {# included postal code range} other {# included postal code ranges}}"
   },
+  "r0blTm": {
+    "context": "ripple action to open Saleor Pulse when already installed",
+    "string": "Open Pulse"
+  },
   "r1aQ2f": {
     "context": "dialog header",
     "string": "Unassign Attribute from Product Type"
@@ -14012,6 +14032,10 @@
   "zxs6G3": {
     "string": "Manage how you ship out orders"
   },
+  "zyWNgK": {
+    "context": "link to an already installed extension settings page from the install page",
+    "string": "Open settings"
+  },
   "zyXcBP": {
     "string": "Sorting by this column requires active filter: {filterName}"
   },

src/extensions/messages.ts

@@ -538,6 +538,27 @@ export const appManifestErrorMessages = defineMessages({
     // TODO: Add docs link when we have docs page with explanation
     defaultMessage: "The extension identifier is already in use. ({errorCode})",
   },
+  alreadyInstalled: {
+    id: "gU10OX",
+    defaultMessage: "{appName} is already installed.",
+    description: "shown when user tries to install an extension that is already installed",
+  },
+  alreadyInstalledDisabled: {
+    id: "g2P/kE",
+    defaultMessage: "{appName} is installed but disabled.",
+    description:
+      "shown when user tries to install an extension that is already installed but inactive",
+  },
+  openInstalledApp: {
+    id: "KynPlY",
+    defaultMessage: "Open {appName}",
+    description: "link to open an already installed extension app UI",
+  },
+  openInstalledExtensionSettings: {
+    id: "zyWNgK",
+    defaultMessage: "Open settings",
+    description: "link to an already installed extension settings page from the install page",
+  },
   forbidden: {
     // AppErrorCode.FORBIDDEN
     defaultMessage: "You are not allowed to perform this action. ({errorCode})",

src/extensions/utils/findInstalledAppByIdentifier.test.ts

@@ -0,0 +1,89 @@
+import {
+  findAlreadyInstalledApp,
+  findInstalledAppByIdentifier,
+} from "./findInstalledAppByIdentifier";
+
+describe("findInstalledAppByIdentifier", () => {
+  const installedApps = [
+    {
+      id: "app-1",
+      identifier: "saleor.pulse",
+      manifestUrl: "https://pulse.saleor.app/api/manifest",
+      name: "Saleor Pulse",
+    },
+    {
+      id: "app-2",
+      identifier: "other.app",
+      manifestUrl: "https://other.app/api/manifest",
+      name: "Other App",
+    },
+  ];
+
+  it("returns the installed app with a matching identifier", () => {
+    // Arrange & Act
+    const app = findInstalledAppByIdentifier(installedApps, "saleor.pulse");
+
+    // Assert
+    expect(app?.id).toBe("app-1");
+  });
+
+  it("returns undefined when no installed app matches", () => {
+    // Arrange & Act
+    const app = findInstalledAppByIdentifier(installedApps, "unknown.app");
+
+    // Assert
+    expect(app).toBeUndefined();
+  });
+});
+
+describe("findAlreadyInstalledApp", () => {
+  const installedApps = [
+    {
+      id: "app-1",
+      identifier: "saleor.pulse",
+      manifestUrl: "https://pulse.saleor.app/api/manifest",
+      name: "Saleor Pulse",
+    },
+    {
+      id: "app-2",
+      identifier: "other.app",
+      manifestUrl: "https://other.app/api/manifest",
+      name: "Other App",
+    },
+  ];
+
+  it("prefers identifier match over manifest URL", () => {
+    // Arrange & Act
+    const app = findAlreadyInstalledApp(installedApps, {
+      identifier: "saleor.pulse",
+      manifestUrl: "https://different-host.example/api/manifest",
+    });
+
+    // Assert
+    expect(app?.id).toBe("app-1");
+  });
+
+  it("resolves the app from Saleor's UNIQUE error message", () => {
+    // Arrange & Act
+    const app = findAlreadyInstalledApp(installedApps, {
+      manifestUrl: "https://staging.pulse.saleor.app/api/manifest",
+      uniqueError: {
+        field: "identifier",
+        message: "App with the same identifier is already installed: Saleor Pulse",
+      },
+    });
+
+    // Assert
+    expect(app?.id).toBe("app-1");
+  });
+
+  it("falls back to manifest URL when identifier is missing", () => {
+    // Arrange & Act
+    const app = findAlreadyInstalledApp(installedApps, {
+      manifestUrl: "https://other.app/api/manifest",
+    });
+
+    // Assert
+    expect(app?.id).toBe("app-2");
+  });
+});

src/extensions/utils/findInstalledAppByIdentifier.ts

@@ -0,0 +1,55 @@
+import { findInstalledAppByManifestUrl } from "./findInstalledAppByManifestUrl";
+import { findInstalledAppFromUniqueError } from "./findInstalledAppFromUniqueError";
+
+export const findInstalledAppByIdentifier = <
+  T extends {
+    identifier: string | null;
+  },
+>(
+  installedApps: T[],
+  identifier: string,
+): T | undefined => installedApps.find(app => app.identifier === identifier);
+
+export const findAlreadyInstalledApp = <
+  T extends {
+    identifier: string | null;
+    manifestUrl: string | null;
+    name: string | null;
+  },
+>(
+  installedApps: T[],
+  {
+    identifier,
+    manifestUrl,
+    uniqueError,
+  }: {
+    identifier?: string | null;
+    manifestUrl?: string | null;
+    uniqueError?: {
+      field?: string | null;
+      message?: string | null;
+    };
+  },
+): T | undefined => {
+  if (identifier) {
+    const appByIdentifier = findInstalledAppByIdentifier(installedApps, identifier);
+
+    if (appByIdentifier) {
+      return appByIdentifier;
+    }
+  }
+
+  if (uniqueError) {
+    const appFromUniqueError = findInstalledAppFromUniqueError(installedApps, uniqueError);
+
+    if (appFromUniqueError) {
+      return appFromUniqueError;
+    }
+  }
+
+  if (manifestUrl) {
+    return findInstalledAppByManifestUrl(installedApps, manifestUrl);
+  }
+
+  return undefined;
+};

src/extensions/utils/findInstalledAppByManifestUrl.test.ts

@@ -0,0 +1,42 @@
+import {
+  findInstalledAppByManifestUrl,
+  normalizeManifestUrl,
+} from "./findInstalledAppByManifestUrl";
+
+describe("normalizeManifestUrl", () => {
+  it("normalizes URLs with trailing slashes", () => {
+    // Arrange & Act & Assert
+    expect(normalizeManifestUrl("https://example.com/manifest/")).toBe(
+      "https://example.com/manifest/",
+    );
+    expect(normalizeManifestUrl("https://example.com/manifest")).toBe(
+      "https://example.com/manifest",
+    );
+  });
+});
+
+describe("findInstalledAppByManifestUrl", () => {
+  const installedApps = [
+    { id: "app-1", manifestUrl: "https://pulse.saleor.app/api/manifest" },
+    { id: "app-2", manifestUrl: "https://other.app/api/manifest" },
+  ];
+
+  it("returns the installed app with a matching manifest URL", () => {
+    // Arrange & Act
+    const app = findInstalledAppByManifestUrl(
+      installedApps,
+      "https://pulse.saleor.app/api/manifest",
+    );
+
+    // Assert
+    expect(app?.id).toBe("app-1");
+  });
+
+  it("returns undefined when no installed app matches", () => {
+    // Arrange & Act
+    const app = findInstalledAppByManifestUrl(installedApps, "https://unknown.app/api/manifest");
+
+    // Assert
+    expect(app).toBeUndefined();
+  });
+});

src/extensions/utils/findInstalledAppByManifestUrl.ts

@@ -0,0 +1,21 @@
+export const normalizeManifestUrl = (manifestUrl: string): string => {
+  try {
+    return new URL(manifestUrl).href;
+  } catch {
+    return manifestUrl;
+  }
+};
+
+export const findInstalledAppByManifestUrl = <
+  T extends {
+    manifestUrl: string | null;
+  },
+>(
+  installedApps: T[],
+  manifestUrl: string,
+): T | undefined =>
+  installedApps.find(
+    app =>
+      app.manifestUrl &&
+      normalizeManifestUrl(app.manifestUrl) === normalizeManifestUrl(manifestUrl),
+  );

src/extensions/utils/findInstalledAppFromUniqueError.test.ts

@@ -0,0 +1,30 @@
+import { findInstalledAppFromUniqueError } from "./findInstalledAppFromUniqueError";
+
+describe("findInstalledAppFromUniqueError", () => {
+  const installedApps = [
+    { id: "app-1", name: "Saleor Pulse" },
+    { id: "app-2", name: "Other App" },
+  ];
+
+  it("returns the installed app named in Saleor's UNIQUE error message", () => {
+    // Arrange & Act
+    const app = findInstalledAppFromUniqueError(installedApps, {
+      field: "identifier",
+      message: "App with the same identifier is already installed: Saleor Pulse",
+    });
+
+    // Assert
+    expect(app?.id).toBe("app-1");
+  });
+
+  it("returns undefined when the error is not on the identifier field", () => {
+    // Arrange & Act
+    const app = findInstalledAppFromUniqueError(installedApps, {
+      field: "manifestUrl",
+      message: "App with the same identifier is already installed: Saleor Pulse",
+    });
+
+    // Assert
+    expect(app).toBeUndefined();
+  });
+});

src/extensions/utils/findInstalledAppFromUniqueError.ts

@@ -0,0 +1,29 @@
+// Saleor raises UNIQUE on identifier with:
+// "App with the same identifier is already installed: {app.name}"
+const SALEOR_UNIQUE_IDENTIFIER_PATTERN = /already installed:\s*(.+)$/i;
+
+export const findInstalledAppFromUniqueError = <
+  T extends {
+    name: string | null;
+  },
+>(
+  installedApps: T[],
+  error: {
+    field?: string | null;
+    message?: string | null;
+  },
+): T | undefined => {
+  if (error.field !== "identifier" || !error.message) {
+    return undefined;
+  }
+
+  const match = error.message.match(SALEOR_UNIQUE_IDENTIFIER_PATTERN);
+
+  if (!match) {
+    return undefined;
+  }
+
+  const appName = match[1].trim();
+
+  return installedApps.find(app => app.name === appName);
+};