djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Provide active theme to app in iframe URL (#3028)

Browse source
This commit is contained in:
Lukasz Ostrowski 2023-01-26 11:09:39 +01:00 committed by GitHub
parent aecf3768c8
commit f1d13dd264
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/apps/components/AppFrame/AppFrame.tsx
View file

@ -108,6 +108,7 @@ export const AppFrame: React.FC<Props> = ({
src={resolveAppIframeUrl(appId, src, { src={resolveAppIframeUrl(appId, src, {
...params, ...params,
featureFlags: prepareFeatureFlagsList(flags), featureFlags: prepareFeatureFlagsList(flags),
theme: themeType,
})} })}
onError={onError} onError={onError}
onLoad={handleLoad} onLoad={handleLoad}

13
src/apps/urls.test.ts
View file

@ -1,5 +1,6 @@
import { resolveAppIframeUrl } from "@dashboard/apps/urls"; import { resolveAppIframeUrl } from "@dashboard/apps/urls";
import * as config from "@dashboard/config"; import * as config from "@dashboard/config";
import { ThemeType } from "@saleor/app-sdk/app-bridge";
describe("resolveAppIframeUrl", () => { describe("resolveAppIframeUrl", () => {
afterAll(() => { afterAll(() => {
@ -13,18 +14,20 @@ describe("resolveAppIframeUrl", () => {
.mockImplementation(() => "https://shop.saleor.cloud/graphql/"); .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", "XyZ123",
"https://my-app.vercel.app", "https://my-app.vercel.app",
{ 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", "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", "AbC987",
"https://my-app.vercel.app/configuration", "https://my-app.vercel.app/configuration",
{ 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", "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", "Generates valid URL from segments",

7
src/apps/urls.ts
View file

@ -1,6 +1,7 @@
import { getApiUrl } from "@dashboard/config"; import { getApiUrl } from "@dashboard/config";
import { FlagWithName } from "@dashboard/hooks/useFlags/types"; import { FlagWithName } from "@dashboard/hooks/useFlags/types";
import { stringifyQs } from "@dashboard/utils/urls"; import { stringifyQs } from "@dashboard/utils/urls";
import { ThemeType } from "@saleor/app-sdk/app-bridge";
import urlJoin from "url-join"; import urlJoin from "url-join";
import { ActiveTab, Dialog, Pagination, SingleAction } from "../types"; import { ActiveTab, Dialog, Pagination, SingleAction } from "../types";
@ -27,6 +28,10 @@ export interface AppDetailsUrlMountQueryParams {
customerIds?: string[]; customerIds?: string[];
} }
export interface AppDetailsCommonParams {
theme: ThemeType;
}
interface FeatureFlagsQueryParams { interface FeatureFlagsQueryParams {
featureFlags?: Record<string, string>; featureFlags?: Record<string, string>;
} }
@ -109,7 +114,7 @@ export const appsListUrl = (params?: AppListUrlQueryParams) =>
export const resolveAppIframeUrl = ( export const resolveAppIframeUrl = (
appId: string, appId: string,
appUrl: string, appUrl: string,
params: AppDetailsUrlQueryParams, params: AppDetailsUrlQueryParams & AppDetailsCommonParams,
) => { ) => {
const apiUrl = new URL(getApiUrl(), window.location.origin).href; const apiUrl = new URL(getApiUrl(), window.location.origin).href;
/** /**