From b365c7c830928b437bd6cd2e7d70350540563398 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 22 Jun 2023 15:46:16 +0200
Subject: [PATCH] Add saleor versions to app bridge (#260)

---
 .changeset/purple-yaks-flash.md    |  5 +++++
 docs/app-bridge.md                 |  5 +++++
 src/app-bridge/app-bridge-state.ts |  6 ++++++
 src/app-bridge/app-bridge.test.ts  | 20 ++++++++++++++++++++
 src/app-bridge/app-bridge.ts       |  2 ++
 src/app-bridge/events.test.ts      |  9 ++++++++-
 src/app-bridge/events.ts           | 14 +++++++++++++-
 7 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/purple-yaks-flash.md

diff --git a/.changeset/purple-yaks-flash.md b/.changeset/purple-yaks-flash.md
new file mode 100644
index 0000000..6524a09
--- /dev/null
+++ b/.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.
diff --git a/docs/app-bridge.md b/docs/app-bridge.md
index 022fa17..3ee2e02 100644
--- a/docs/app-bridge.md
+++ b/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;
 };
 ```
 
diff --git a/src/app-bridge/app-bridge-state.ts b/src/app-bridge/app-bridge-state.ts
index 77b022c..6e1472e 100644
--- a/src/app-bridge/app-bridge-state.ts
+++ b/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.
diff --git a/src/app-bridge/app-bridge.test.ts b/src/app-bridge/app-bridge.test.ts
index 4efa4cb..559fefb 100644
--- a/src/app-bridge/app-bridge.test.ts
+++ b/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");
+  });
 });
diff --git a/src/app-bridge/app-bridge.ts b/src/app-bridge/app-bridge.ts
index b032ee2..9d912c7 100644
--- a/src/app-bridge/app-bridge.ts
+++ b/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,
diff --git a/src/app-bridge/events.test.ts b/src/app-bridge/events.test.ts
index 9b6b868..937470c 100644
--- a/src/app-bridge/events.test.ts
+++ b/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",
     });
diff --git a/src/app-bridge/events.ts b/src/app-bridge/events.ts
index ec76680..3f69c39 100644
--- a/src/app-bridge/events.ts
+++ b/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,
       },
     };
   },