Provide full API URL of Saleor to app iframe, add test (#2579)

* Provide full API URL of Saleor to app iframe, add test

* Fix imports after refactor

src/apps/components/AppFrame/AppFrame.tsx

@@ -1,7 +1,7 @@
 import {
   AppDetailsUrlQueryParams,
-  appIframeUrl,
   getAppDeepPathFromDashboardUrl,
+  resolveAppIframeUrl,
 } from "@saleor/apps/urls";
 import useLocale from "@saleor/hooks/useLocale";
 import useShop from "@saleor/hooks/useShop";
@@ -102,7 +102,7 @@ export const AppFrame: React.FC<Props> = ({
   return (
     <iframe
       ref={frameRef}
-      src={appIframeUrl(appId, src, shop.domain.host, params)}
+      src={resolveAppIframeUrl(appId, src, shop.domain.host, params)}
       onError={onError}
       onLoad={handleLoad}
       className={clsx(classes.iframe, className)}

src/apps/urls.test.ts

@@ -0,0 +1,36 @@
+import { resolveAppIframeUrl } from "@saleor/apps/urls";
+
+jest.mock("@saleor/config", () => ({
+  ...jest.requireActual("@saleor/config"),
+  getApiUrl: () => "https://shop.saleor.cloud/graphql/",
+}));
+
+describe("resolveAppIframeUrl", () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each<[string, string, string, Record<string, unknown>, string]>([
+    [
+      "XyZ123",
+      "https://my-app.vercel.app",
+      "shop.saleor.cloud",
+      { param1: "param1" },
+      "https://my-app.vercel.app?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=XyZ123&param1=param1",
+    ],
+    [
+      "AbC987",
+      "https://my-app.vercel.app/configuration",
+      "shop.saleor.cloud",
+      { param1: "param1", param2: "param2" },
+      "https://my-app.vercel.app/configuration?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=AbC987&param1=param1&param2=param2",
+    ],
+  ])(
+    "Generates valid URL from segments",
+    (id, appUrl, shopHostname, params, expectedUrl) => {
+      const result = resolveAppIframeUrl(id, appUrl, shopHostname, params);
+
+      expect(result).toEqual(expectedUrl);
+    },
+  );
+});

src/apps/urls.ts

@@ -1,3 +1,4 @@
+import { getApiUrl } from "@saleor/config";
 import { stringifyQs } from "@saleor/utils/urls";
 import urlJoin from "url-join";
 
@@ -117,15 +118,28 @@ export const customAppAddUrl = customAppAddPath;
 export const appsListUrl = (params?: AppListUrlQueryParams) =>
   appsListPath + "?" + stringifyQs(params);
 
-export const appIframeUrl = (
+export const resolveAppIframeUrl = (
   appId: string,
   appUrl: string,
   shopDomainHost: string,
   params: AppDetailsUrlQueryParams,
 ) => {
   const iframeContextQueryString = `?${stringifyQs(
-    { domain: shopDomainHost, id: appId, ...params },
+    {
+      /**
+       * @deprecated - domain will be removed in favor of saleorApiUrl.
+       * Current hostname (used as domain) can be extracted from full URL
+       *
+       * Difference will be:
+       * shop.saleor.cloud -> https://shop.saleor.cloud/graphql/
+       */
+      domain: shopDomainHost,
+      saleorApiUrl: getApiUrl(),
+      id: appId,
+      ...params,
+    },
     "comma",
   )}`;
+
   return urlJoin(appUrl, window.location.search, iframeContextQueryString);
 };