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, {
...params,
featureFlags: prepareFeatureFlagsList(flags),
theme: themeType,
})}
onError={onError}
onLoad={handleLoad}

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

@ -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",

7
src/apps/urls.ts
View file

@ -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;
/**