Add saleor versions to app bridge (#260)

.changeset/purple-yaks-flash.md

@@ -0,0 +1,5 @@
+---
+"@saleor/app-sdk": minor
+---
+
+Added saleorVersion and dashboardVersion fields to AppBridge state. They are optional - will be provided from 3.15.

docs/app-bridge.md

@@ -45,6 +45,11 @@ type AppBridgeState = {
    * Full URL including protocol and path where GraphQL API is available
    **/
   saleorApiUrl: string;
+  /**
+   * Versions of Saleor that app is being installed. Available from 3.15.
+   */
+  saleorVersion?: string;
+  dashboardVersion?: string;
 };
 ```
 

src/app-bridge/app-bridge-state.ts

@@ -11,6 +11,12 @@ export type AppBridgeState = {
   theme: ThemeType;
   locale: LocaleCode;
   saleorApiUrl: string;
+  /**
+   * Versions of Saleor that app is mounted. Passed from the Dashboard.
+   * Works form Saleor 3.15
+   */
+  saleorVersion?: string;
+  dashboardVersion?: string;
   user?: {
     /**
      * Original permissions of the user that is using the app.

src/app-bridge/app-bridge.test.ts

@@ -313,4 +313,24 @@ describe("AppBridge", () => {
 
     expect(appBridge.getState().token).toEqual(tokenRefreshEvent.payload.token);
   });
+
+  it("Saves saleorVersion field if provided in the Handshake event", () => {
+    expect(appBridge.getState().saleorVersion).toBeUndefined();
+    expect(appBridge.getState().dashboardVersion).toBeUndefined();
+
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: DashboardEventFactory.createHandshakeEvent(validJwtToken, 1, {
+          core: "3.15.0",
+          dashboard: "3.15.1",
+        }),
+        origin,
+      })
+    );
+
+    expect(appBridge.getState().token).toEqual(validJwtToken);
+    expect(appBridge.getState().saleorVersion).toEqual("3.15.0");
+    expect(appBridge.getState().dashboardVersion).toEqual("3.15.1");
+  });
 });

src/app-bridge/app-bridge.ts

@@ -28,6 +28,8 @@ function eventStateReducer(state: AppBridgeState, event: Events) {
         ...state,
         ready: true,
         token: event.payload.token,
+        saleorVersion: event.payload.saleorVersion,
+        dashboardVersion: event.payload.dashboardVersion,
         user: {
           email: userJwtPayload.email,
           permissions: userJwtPayload.userPermissions,

src/app-bridge/events.test.ts

@@ -4,10 +4,17 @@ import { DashboardEventFactory } from "./events";
 
 describe("DashboardEventFactory", () => {
   it("Creates handshake event", () => {
-    expect(DashboardEventFactory.createHandshakeEvent("mock-token")).toEqual({
+    expect(
+      DashboardEventFactory.createHandshakeEvent("mock-token", 1, {
+        dashboard: "3.15.3",
+        core: "3.15.1",
+      })
+    ).toEqual({
       payload: {
         token: "mock-token",
         version: 1,
+        saleorVersion: "3.15.1",
+        dashboardVersion: "3.15.3",
       },
       type: "handshake",
     });

src/app-bridge/events.ts

@@ -24,6 +24,8 @@ export type HandshakeEvent = Event<
   {
     token: string;
     version: Version;
+    saleorVersion?: string;
+    dashboardVersion?: string;
   }
 >;
 
@@ -104,12 +106,22 @@ export const DashboardEventFactory = {
       },
     };
   },
-  createHandshakeEvent(token: string, version: Version = 1): HandshakeEvent {
+  createHandshakeEvent(
+    token: string,
+    // eslint-disable-next-line default-param-last
+    version: Version = 1,
+    saleorVersions?: {
+      dashboard: string;
+      core: string;
+    }
+  ): HandshakeEvent {
     return {
       type: "handshake",
       payload: {
         token,
         version,
+        saleorVersion: saleorVersions?.core,
+        dashboardVersion: saleorVersions?.dashboard,
       },
     };
   },