remove domain from app bridge state

Author: lkostrowski

src/app-bridge/app-bridge-provider.test.tsx

@@ -39,7 +39,6 @@ describe("AppBridgeProvider", () => {
       <AppBridgeProvider
         appBridgeInstance={
           new AppBridge({
-            targetDomain: domain,
             saleorApiUrl,
           })
         }
@@ -77,19 +76,18 @@ describe("useAppBridge hook", () => {
 
   it("Returned instance provided in Provider", () => {
     const appBridge = new AppBridge({
-      targetDomain: domain,
+      saleorApiUrl,
     });
 
     const { result } = renderHook(() => useAppBridge(), {
       wrapper: (props: {}) => <AppBridgeProvider {...props} appBridgeInstance={appBridge} />,
     });
 
-    expect(result.current.appBridge?.getState().domain).toBe(domain);
+    expect(result.current.appBridge?.getState().saleorApiUrl).toBe(saleorApiUrl);
   });
 
   it("Stores active state in React State", () => {
     const appBridge = new AppBridge({
-      targetDomain: domain,
       saleorApiUrl,
     });
 
@@ -120,7 +118,6 @@ describe("useAppBridge hook", () => {
     return waitFor(() => {
       expect(renderCallback).toHaveBeenCalledTimes(2);
       expect(renderCallback).toHaveBeenCalledWith({
-        domain,
         id: "appid",
         path: "",
         ready: false,

src/app-bridge/app-bridge-state.test.ts

@@ -8,7 +8,6 @@ describe("app-bridge-state.ts", () => {
 
     expect(instance.getState()).toEqual({
       id: "",
-      domain: "",
       ready: false,
       path: "/",
       theme: "light",
@@ -21,7 +20,6 @@ describe("app-bridge-state.ts", () => {
     const instance = new AppBridgeStateContainer();
 
     const newState: Partial<AppBridgeState> = {
-      domain: "my-saleor-instance.cloud",
       saleorApiUrl: "https://my-saleor-instance.cloud/graphql/",
       id: "foo-bar",
       path: "/",
@@ -42,15 +40,15 @@ describe("app-bridge-state.ts", () => {
     expect(
       new AppBridgeStateContainer({
         initialLocale: "pl",
-      }).getState().locale
+      }).getState().locale,
     ).toBe("pl");
   });
 
   it("Can be constructed with initial theme", () => {
     expect(
       new AppBridgeStateContainer({
         initialTheme: "dark",
-      }).getState().theme
+      }).getState().theme,
     ).toBe("dark");
   });
 });

src/app-bridge/app-bridge-state.ts

@@ -6,15 +6,10 @@ export type AppBridgeState = {
   token?: string;
   id: string;
   ready: boolean;
-  domain: string;
   path: string;
   theme: ThemeType;
   locale: LocaleCode;
   saleorApiUrl: string;
-  /**
-   * Versions of Saleor that app is mounted. Passed from the Dashboard.
-   * Works form Saleor 3.15
-   */
   saleorVersion?: string;
   dashboardVersion?: string;
   user?: {
@@ -39,7 +34,6 @@ type Options = {
 export class AppBridgeStateContainer {
   private state: AppBridgeState = {
     id: "",
-    domain: "",
     saleorApiUrl: "",
     ready: false,
     path: "/",

src/app-bridge/app-bridge.test.ts

@@ -65,7 +65,7 @@ const mockDashboardActionResponse = (actionType: ActionType, actionID: string) =
             payload: { ok: true, actionId: actionID },
           } as DispatchResponseEvent,
           origin,
-        })
+        }),
       );
     }
   }
@@ -96,10 +96,6 @@ describe("AppBridge", () => {
     vi.clearAllMocks();
   });
 
-  it("correctly sets the default domain, if not set in constructor", () => {
-    expect(appBridge.getState().domain).toEqual(domain);
-  });
-
   it("authenticates", () => {
     expect(appBridge.getState().ready).toBe(false);
 
@@ -109,7 +105,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token } },
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().ready).toBe(true);
@@ -135,7 +131,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     // incorrect event type
@@ -144,7 +140,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "invalid", payload: { token: "invalid" } },
         origin,
-      })
+      }),
     );
 
     // incorrect origin
@@ -153,7 +149,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token } },
         origin: "http://wrong.origin.com",
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledTimes(1);
@@ -168,7 +164,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token: validJwtToken } },
         origin,
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledTimes(1);
@@ -188,7 +184,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: themeEvent,
         origin,
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledOnce();
@@ -197,10 +193,6 @@ describe("AppBridge", () => {
     unsubscribe();
   });
 
-  it("persists domain", () => {
-    expect(appBridge.getState().domain).toEqual(domain);
-  });
-
   it("dispatches valid action", () => {
     const target = "/test";
     const action = actions.Redirect({ to: target });
@@ -225,7 +217,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(cb1).toHaveBeenCalledTimes(1);
@@ -238,21 +230,13 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(cb1).toHaveBeenCalledTimes(1);
     expect(cb2).toHaveBeenCalledTimes(1);
   });
 
-  it("attaches domain from options in constructor", () => {
-    appBridge = new AppBridge({
-      targetDomain: "https://foo.bar",
-    });
-
-    expect(appBridge.getState().domain).toEqual("https://foo.bar");
-  });
-
   it.each<LocaleCode>(["pl", "en", "it"])("sets initial locale \"%s\" from constructor", (locale) => {
     const instance = new AppBridge({
       initialLocale: locale,
@@ -306,7 +290,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(handshakeEvent.payload.token);
@@ -316,7 +300,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: tokenRefreshEvent,
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(tokenRefreshEvent.payload.token);
@@ -334,7 +318,7 @@ describe("AppBridge", () => {
           dashboard: "3.15.1",
         }),
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(validJwtToken);

src/app-bridge/app-bridge.ts

@@ -85,7 +85,6 @@ const createEmptySubscribeMap = (): SubscribeMap => ({
 });
 
 export type AppBridgeOptions = {
-  targetDomain?: string;
   saleorApiUrl?: string;
   initialLocale?: LocaleCode;
   /**
@@ -103,12 +102,6 @@ const getLocaleFromUrl = () =>
   (new URL(window.location.href).searchParams.get(AppIframeParams.LOCALE) as LocaleCode) ||
   undefined;
 
-/**
- * TODO: Probably remove empty string fallback
- */
-const getDomainFromUrl = () =>
-  new URL(window.location.href).searchParams.get(AppIframeParams.DOMAIN) || "";
-
 const getSaleorApiUrlFromUrl = () =>
   new URL(window.location.href).searchParams.get(AppIframeParams.SALEOR_API_URL) || "";
 
@@ -125,7 +118,6 @@ const getThemeFromUrl = () => {
 };
 
 const getDefaultOptions = (): AppBridgeOptions => ({
-  targetDomain: getDomainFromUrl(),
   saleorApiUrl: getSaleorApiUrlFromUrl(),
   initialLocale: getLocaleFromUrl() ?? "en",
   autoNotifyReady: true,
@@ -146,7 +138,7 @@ export class AppBridge {
 
     if (SSR) {
       throw new Error(
-        "AppBridge detected you're running this app in SSR mode. Make sure to call `new AppBridge()` when window object exists."
+        "AppBridge detected you're running this app in SSR mode. Make sure to call `new AppBridge()` when window object exists.",
       );
     }
 
@@ -170,14 +162,8 @@ export class AppBridge {
       debug("?saleorApiUrl was not found in iframe url");
     }
 
-    if (!this.combinedOptions.targetDomain) {
-      debug("?domain was not found in iframe url");
-    }
-
-    if (!(this.combinedOptions.saleorApiUrl || this.combinedOptions.targetDomain)) {
-      console.error(
-        "domain and saleorApiUrl params were not found in iframe url. Ensure at least one of them is present"
-      );
+    if (!this.combinedOptions.saleorApiUrl) {
+      console.error("saleorApiUrl param was not found in iframe url");
     }
 
     this.setInitialState();
@@ -197,7 +183,7 @@ export class AppBridge {
    */
   subscribe<TEventType extends EventType, TPayload extends PayloadOfEvent<TEventType>>(
     eventType: TEventType,
-    cb: EventCallback<TPayload>
+    cb: EventCallback<TPayload>,
   ) {
     debug("subscribe() called with event %s and callback %s", eventType, cb.name);
 
@@ -251,7 +237,7 @@ export class AppBridge {
           type: action.type,
           payload: action.payload,
         },
-        "*"
+        "*",
       );
 
       let timeoutId: number;
@@ -261,7 +247,7 @@ export class AppBridge {
           "Subscribing to %s with action id: %s and status 'ok' is: %s",
           EventType.response,
           actionId,
-          ok
+          ok,
         );
 
         if (action.payload.actionId === actionId) {
@@ -274,8 +260,8 @@ export class AppBridge {
           } else {
             reject(
               new Error(
-                "Action responded with negative status. This indicates the action method was not used properly."
-              )
+                "Action responded with negative status. This indicates the action method was not used properly.",
+              ),
             );
           }
         }
@@ -312,7 +298,6 @@ export class AppBridge {
     const path = window.location.pathname || "";
 
     const state: Partial<AppBridgeState> = {
-      domain: this.combinedOptions.targetDomain,
       id,
       path,
       theme: this.combinedOptions.initialTheme,
@@ -355,7 +340,7 @@ export class AppBridge {
             this.subscribeMap[type][key](payload);
           });
         }
-      }
+      },
     );
   }
 }

src/app-bridge/fetch.test.ts

@@ -10,7 +10,6 @@ describe("createAuthenticatedFetch", () => {
   const mockedAppBridge: Pick<AppBridge, "getState"> = {
     getState(): AppBridgeState {
       return {
-        domain: "master.staging.saleor.cloud",
         token: "XXX_YYY",
         locale: "pl",
         path: "/",

src/app-bridge/index.ts

@@ -10,10 +10,3 @@ export * from "./fetch";
 export * from "./types";
 export * from "./use-dashboard-token";
 export * from "./with-authorization";
-
-/**
- * @deprecated use new AppBridge(), createApp will be removed
- */
-export const createApp = (targetDomain?: string) =>
-  new AppBridge(targetDomain ? { targetDomain } : undefined);
-export default createApp;

src/headers.ts

@@ -2,6 +2,9 @@ export const SALEOR_EVENT_HEADER = "saleor-event";
 export const SALEOR_SIGNATURE_HEADER = "saleor-signature";
 export const SALEOR_AUTHORIZATION_BEARER_HEADER = "authorization-bearer";
 export const SALEOR_API_URL_HEADER = "saleor-api-url";
+/**
+ * Available when Saleor executes "manifest" or "token exchange" requests.
+ */
 export const SALEOR_SCHEMA_VERSION_HEADER = "saleor-schema-version";
 
 const toStringOrUndefined = (value: string | string[] | undefined) =>