From f1d13dd2644d20b45212e250ad8008e9a2f78aa2 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 26 Jan 2023 11:09:39 +0100
Subject: [PATCH] Provide active theme to app in iframe URL (#3028)

---
 src/apps/components/AppFrame/AppFrame.tsx |  1 +
 src/apps/urls.test.ts                     | 13 ++++++++-----
 src/apps/urls.ts                          |  7 ++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/apps/components/AppFrame/AppFrame.tsx b/src/apps/components/AppFrame/AppFrame.tsx
index a88176047..58b1312da 100644
--- a/src/apps/components/AppFrame/AppFrame.tsx
+++ b/src/apps/components/AppFrame/AppFrame.tsx
@@ -108,6 +108,7 @@ export const AppFrame: React.FC<Props> = ({
       src={resolveAppIframeUrl(appId, src, {
         ...params,
         featureFlags: prepareFeatureFlagsList(flags),
+        theme: themeType,
       })}
       onError={onError}
       onLoad={handleLoad}
diff --git a/src/apps/urls.test.ts b/src/apps/urls.test.ts
index 499f967b9..0b681b5f3 100644
--- a/src/apps/urls.test.ts
+++ b/src/apps/urls.test.ts
@@ -1,5 +1,6 @@
 import { resolveAppIframeUrl } from "@dashboard/apps/urls";
 import * as config from "@dashboard/config";
+import { ThemeType } from "@saleor/app-sdk/app-bridge";
 
 describe("resolveAppIframeUrl", () => {
   afterAll(() => {
@@ -13,18 +14,20 @@ describe("resolveAppIframeUrl", () => {
         .mockImplementation(() => "https://shop.saleor.cloud/graphql/");
     });
 
-    it.each<[string, string, Record<string, string>, string]>([
+    it.each<
+      [string, string, Record<string, string> & { theme: ThemeType }, string]
+    >([
       [
         "XyZ123",
         "https://my-app.vercel.app",
-        { param1: "param1" },
-        "https://my-app.vercel.app?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=XyZ123&param1=param1",
+        { param1: "param1", theme: "light" },
+        "https://my-app.vercel.app?domain=shop.saleor.cloud&saleorApiUrl=https%3A%2F%2Fshop.saleor.cloud%2Fgraphql%2F&id=XyZ123&param1=param1&theme=light",
       ],
       [
         "AbC987",
         "https://my-app.vercel.app/configuration",
-        { 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",
+        { param1: "param1", param2: "param2", theme: "light" },
+        "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&theme=light",
       ],
     ])(
       "Generates valid URL from segments",
diff --git a/src/apps/urls.ts b/src/apps/urls.ts
index a064aab3c..65607b718 100644
--- a/src/apps/urls.ts
+++ b/src/apps/urls.ts
@@ -1,6 +1,7 @@
 import { getApiUrl } from "@dashboard/config";
 import { FlagWithName } from "@dashboard/hooks/useFlags/types";
 import { stringifyQs } from "@dashboard/utils/urls";
+import { ThemeType } from "@saleor/app-sdk/app-bridge";
 import urlJoin from "url-join";
 
 import { ActiveTab, Dialog, Pagination, SingleAction } from "../types";
@@ -27,6 +28,10 @@ export interface AppDetailsUrlMountQueryParams {
   customerIds?: string[];
 }
 
+export interface AppDetailsCommonParams {
+  theme: ThemeType;
+}
+
 interface FeatureFlagsQueryParams {
   featureFlags?: Record<string, string>;
 }
@@ -109,7 +114,7 @@ export const appsListUrl = (params?: AppListUrlQueryParams) =>
 export const resolveAppIframeUrl = (
   appId: string,
   appUrl: string,
-  params: AppDetailsUrlQueryParams,
+  params: AppDetailsUrlQueryParams & AppDetailsCommonParams,
 ) => {
   const apiUrl = new URL(getApiUrl(), window.location.origin).href;
   /**