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

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

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

* Fix imports after refactor
This commit is contained in:
Lukasz Ostrowski 2022-11-17 15:10:33 +01:00 committed by GitHub
parent f0918842e6
commit 8ab43fd519
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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)}

36
src/apps/urls.test.ts Normal file
View file

@ -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);
},
);
});

18
src/apps/urls.ts
View file

@ -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);
};