diff --git a/.changeset/tall-files-marry.md b/.changeset/tall-files-marry.md new file mode 100644 index 000000000..04ed94319 --- /dev/null +++ b/.changeset/tall-files-marry.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Dashboard is sending Saleor and Dashboard versions with Handshake event to apps, via AppBridge. To achieve that, @saleor/app-sdk was updated to 0.41.0 diff --git a/package-lock.json b/package-lock.json index b97c47c45..c43cc1c2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -117,7 +117,7 @@ "@graphql-codegen/typescript-react-apollo": "^3.2.5", "@percy/cli": "^1.21.0", "@percy/cypress": "^3.1.2", - "@saleor/app-sdk": "0.39.1", + "@saleor/app-sdk": "0.41.0", "@swc/jest": "^0.2.26", "@types/apollo-upload-client": "^17.0.2", "@types/color-convert": "^2.0.0", @@ -7803,9 +7803,9 @@ } }, "node_modules/@saleor/app-sdk": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@saleor/app-sdk/-/app-sdk-0.39.1.tgz", - "integrity": "sha512-PBREZWwkk+DHCBhOZzsuFdp7/vLItxfAqKD+gcZ5QxzSAt82S0/FS6ii7igpW3H+bEiK4oBUjMxgUyhJMOXQHw==", + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@saleor/app-sdk/-/app-sdk-0.41.0.tgz", + "integrity": "sha512-9Yc73N8QvqfHlhsPzuWqwlbl+o/gq/VJ+HB2OUro68zTF+rapEssb79OUGLp2JmnTlM4xovCiPwPlDsW8nVSqw==", "dev": true, "dependencies": { "@changesets/cli": "^2.26.0", @@ -40625,9 +40625,9 @@ } }, "@saleor/app-sdk": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@saleor/app-sdk/-/app-sdk-0.39.1.tgz", - "integrity": "sha512-PBREZWwkk+DHCBhOZzsuFdp7/vLItxfAqKD+gcZ5QxzSAt82S0/FS6ii7igpW3H+bEiK4oBUjMxgUyhJMOXQHw==", + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@saleor/app-sdk/-/app-sdk-0.41.0.tgz", + "integrity": "sha512-9Yc73N8QvqfHlhsPzuWqwlbl+o/gq/VJ+HB2OUro68zTF+rapEssb79OUGLp2JmnTlM4xovCiPwPlDsW8nVSqw==", "dev": true, "requires": { "@changesets/cli": "^2.26.0", diff --git a/package.json b/package.json index 7e46a5061..1df571a31 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "@graphql-codegen/typescript-react-apollo": "^3.2.5", "@percy/cli": "^1.21.0", "@percy/cypress": "^3.1.2", - "@saleor/app-sdk": "0.39.1", + "@saleor/app-sdk": "0.41.0", "@swc/jest": "^0.2.26", "@types/apollo-upload-client": "^17.0.2", "@types/color-convert": "^2.0.0", diff --git a/src/apps/components/AppFrame/AppFrame.tsx b/src/apps/components/AppFrame/AppFrame.tsx index 9d479a278..72567e54e 100644 --- a/src/apps/components/AppFrame/AppFrame.tsx +++ b/src/apps/components/AppFrame/AppFrame.tsx @@ -4,6 +4,7 @@ import { useUpdateAppToken } from "@dashboard/apps/components/AppFrame/useUpdate import { AppDetailsUrlQueryParams } from "@dashboard/apps/urls"; import { useAllFlags } from "@dashboard/featureFlags"; import { CircularProgress } from "@material-ui/core"; +import { DashboardEventFactory } from "@saleor/app-sdk/app-bridge"; import clsx from "clsx"; import React, { useCallback } from "react"; @@ -19,6 +20,8 @@ interface Props { className?: string; params?: AppDetailsUrlQueryParams; refetch?: () => void; + dashboardVersion: string; + coreVersion?: string; onError?(): void; } @@ -32,6 +35,8 @@ export const AppFrame: React.FC = ({ params, onError, refetch, + dashboardVersion, + coreVersion, }) => { const frameRef = React.useRef(null); const classes = useStyles(); @@ -46,6 +51,10 @@ export const AppFrame: React.FC = ({ appOrigin, appId, appToken, + { + core: coreVersion, + dashboard: dashboardVersion, + }, ); /** @@ -62,13 +71,12 @@ export const AppFrame: React.FC = ({ * Move handshake to notifyReady, so app is requesting token after it's ready to receive it * Currently handshake it 2 times, for compatibility */ - postToExtension({ - type: "handshake", - payload: { - token: appToken, - version: 1, - }, - }); + postToExtension( + DashboardEventFactory.createHandshakeEvent(appToken, 1, { + core: coreVersion, + dashboard: dashboardVersion, + }), + ); setHandshakeDone(true); }, [appToken, postToExtension, setHandshakeDone]); diff --git a/src/apps/components/AppFrame/appActionsHandler.ts b/src/apps/components/AppFrame/appActionsHandler.ts index 55d0e20e8..5e90b5bb7 100644 --- a/src/apps/components/AppFrame/appActionsHandler.ts +++ b/src/apps/components/AppFrame/appActionsHandler.ts @@ -6,6 +6,7 @@ import { getAppMountUri } from "@dashboard/config"; import useNavigator from "@dashboard/hooks/useNavigator"; import useNotifier from "@dashboard/hooks/useNotifier"; import { + DashboardEventFactory, DispatchResponseEvent, NotificationAction, NotifyReady, @@ -185,6 +186,10 @@ const useNotifyReadyAction = ( frameEl: HTMLIFrameElement | null, appOrigin: string, appToken: string, + versions: { + core: string; + dashboard: string; + }, ) => { const postToExtension = usePostToExtension(frameEl, appOrigin); @@ -192,13 +197,12 @@ const useNotifyReadyAction = ( return { handle(action: NotifyReady) { - postToExtension({ - type: "handshake", - payload: { - token: appToken, - version: 1, - }, - }); + postToExtension( + DashboardEventFactory.createHandshakeEvent(appToken, 1, { + core: versions.core, + dashboard: versions.dashboard, + }), + ); return createResponseStatus(action.payload.actionId, true); }, }; diff --git a/src/apps/components/AppFrame/useAppActions.ts b/src/apps/components/AppFrame/useAppActions.ts index bcecefb5f..9d3c31d69 100644 --- a/src/apps/components/AppFrame/useAppActions.ts +++ b/src/apps/components/AppFrame/useAppActions.ts @@ -3,11 +3,18 @@ import { usePostToExtension } from "@dashboard/apps/components/AppFrame/usePostT import { Actions, DispatchResponseEvent } from "@saleor/app-sdk/app-bridge"; import React, { useState } from "react"; +/** + * TODO Refactor to named attributes + */ export const useAppActions = ( frameEl: HTMLIFrameElement | null, appOrigin: string, appId: string, appToken: string, + versions: { + core: string; + dashboard: string; + }, ) => { const postToExtension = usePostToExtension(frameEl, appOrigin); @@ -21,6 +28,7 @@ export const useAppActions = ( frameEl, appOrigin, appToken, + versions, ); /** diff --git a/src/apps/components/AppPage/AppPage.tsx b/src/apps/components/AppPage/AppPage.tsx index 4d735b5d7..cfd9ba351 100644 --- a/src/apps/components/AppPage/AppPage.tsx +++ b/src/apps/components/AppPage/AppPage.tsx @@ -5,7 +5,9 @@ import { topBarHeight, } from "@dashboard/components/AppLayout/consts"; import { DetailPageLayout } from "@dashboard/components/Layouts"; +import { APP_VERSION } from "@dashboard/config"; import { AppQuery } from "@dashboard/graphql"; +import useShop from "@dashboard/hooks/useShop"; import { Box } from "@saleor/macaw-ui/next"; import React from "react"; @@ -24,38 +26,51 @@ export const AppPage: React.FC = ({ url, onError, refetch, -}) => ( - - - - - {url && data?.id && data?.accessToken && ( - - )} - - - -); +}) => { + const shop = useShop(); + + /** + * TODO Make some loading state + */ + if (!shop?.version) { + return null; + } + + return ( + + + + + {url && data?.id && data?.accessToken && ( + + )} + + + + ); +}; AppPage.displayName = "AppPage"; export default AppPage; diff --git a/src/apps/components/ExternalAppContext/ExternalAppContext.tsx b/src/apps/components/ExternalAppContext/ExternalAppContext.tsx index 12ea0a1b7..83d3e13b7 100644 --- a/src/apps/components/ExternalAppContext/ExternalAppContext.tsx +++ b/src/apps/components/ExternalAppContext/ExternalAppContext.tsx @@ -1,6 +1,8 @@ import { AppUrls } from "@dashboard/apps/urls"; +import { APP_VERSION } from "@dashboard/config"; import { AppExtensionTargetEnum } from "@dashboard/graphql"; import useNavigator from "@dashboard/hooks/useNavigator"; +import useShop from "@dashboard/hooks/useShop"; import React from "react"; import { AppDialog } from "../AppDialog"; @@ -11,6 +13,8 @@ export const ExternalAppProvider: React.FC = ({ children }) => { const [open, setOpen] = React.useState(false); const [appData, setAppData] = React.useState(); + const shop = useShop(); + const handleClose = () => { setOpen(false); setAppData(undefined); @@ -26,6 +30,8 @@ export const ExternalAppProvider: React.FC = ({ children }) => { appToken={appData.appToken} appId={appData.id} params={appData.params} + dashboardVersion={APP_VERSION} + coreVersion={shop?.version} /> )}