From 69eeb4c280f09bf310aa1c86306b9d57b58a5b0b Mon Sep 17 00:00:00 2001
From: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date: Fri, 24 Jun 2022 14:17:58 +0200
Subject: [PATCH] Pass query params for product and order details app mounting
 points (#2100)

* Pass query params to iframe from dashboard

* Pass search params in product details and order details extensions

* Move released features in Changelog

* Add entry to chagnelog

* Fix ESLint issues
---
 CHANGELOG.md                                  |  7 +++
 src/apps/components/AppFrame/AppFrame.tsx     |  6 ++-
 .../ExternalAppContext/ExternalAppContext.tsx |  7 ++-
 src/apps/urls.ts                              |  8 ++-
 src/apps/useExtensions.ts                     | 52 +++++++++++++++----
 .../OrderDetailsPage/OrderDetailsPage.tsx     |  7 ++-
 .../ProductUpdatePage/ProductUpdatePage.tsx   |  7 ++-
 7 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 258313f5a..153e357c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,10 +3,17 @@
 All notable, unreleased changes to this project will be documented in this file. For the released changes, please visit the [Releases](https://github.com/saleor/saleor-dashboard/releases) page.
 
 ## [Unreleased]
+
+- Pass query params in `ORDER_DETAILS_MORE_ACTIONS` and `PRODUCT_DETAILS_MORE_ACTIONS` mounting points - #2100 by @witoszekdev
+
+## 3.4
+
 - Added links instead of imperative navigation with onClick - #1969 by @taniotanio7
 - Fixed clearing attribute values - #2047 by @witoszekdev
 - Fixed EditorJS integration in RichTextEditor input - #2052 by @witoszekdev
 - Improvements to the app list page: added toggle and permision preview - #2035 by @witoszekdev
+### 3.4.1
+
 - Added links to table pagination buttons - #2063 by @witoszekdev
 - Using push instead of replace to history stack for pagination navigation - #2063 by @witoszekdev
 
diff --git a/src/apps/components/AppFrame/AppFrame.tsx b/src/apps/components/AppFrame/AppFrame.tsx
index 8f846657e..f157b8f1c 100644
--- a/src/apps/components/AppFrame/AppFrame.tsx
+++ b/src/apps/components/AppFrame/AppFrame.tsx
@@ -55,7 +55,11 @@ export const AppFrame: React.FC<Props> = ({
   return (
     <iframe
       ref={frameRef}
-      src={urlJoin(src, `?domain=${shop.domain.host}&id=${appId}`)}
+      src={urlJoin(
+        src,
+        window.location.search,
+        `?domain=${shop.domain.host}&id=${appId}`,
+      )}
       onError={onError}
       onLoad={handleLoad}
       className={clsx(classes.iframe, className)}
diff --git a/src/apps/components/ExternalAppContext/ExternalAppContext.tsx b/src/apps/components/ExternalAppContext/ExternalAppContext.tsx
index c47369832..700dd4183 100644
--- a/src/apps/components/ExternalAppContext/ExternalAppContext.tsx
+++ b/src/apps/components/ExternalAppContext/ExternalAppContext.tsx
@@ -1,4 +1,4 @@
-import { appDeepUrl } from "@saleor/apps/urls";
+import { appDeepUrl, AppDetailsUrlMountQueryParams } from "@saleor/apps/urls";
 import { AppExtensionTargetEnum } from "@saleor/graphql";
 import useNavigator from "@saleor/hooks/useNavigator";
 import React from "react";
@@ -12,6 +12,7 @@ export interface AppData {
   src: string;
   label: string;
   target: AppExtensionTargetEnum;
+  params?: AppDetailsUrlMountQueryParams;
 }
 
 const ExternalAppContext = React.createContext<{
@@ -55,7 +56,9 @@ export const useExternalApp = () => {
       setOpen(true);
       setAppData(appData);
     } else {
-      navigate(appDeepUrl(appData.id, appData.src), { resetScroll: true });
+      navigate(appDeepUrl(appData.id, appData.src, appData.params), {
+        resetScroll: true,
+      });
     }
   };
 
diff --git a/src/apps/urls.ts b/src/apps/urls.ts
index fdb2187d2..702f15de1 100644
--- a/src/apps/urls.ts
+++ b/src/apps/urls.ts
@@ -19,8 +19,14 @@ export type AppListUrlQueryParams = ActiveTab &
   SingleAction &
   Pagination;
 
+export interface AppDetailsUrlMountQueryParams {
+  productId?: string;
+  orderId?: string;
+}
+
 export type AppDetailsUrlQueryParams = Dialog<AppDetailsUrlDialog> &
-  SingleAction;
+  SingleAction &
+  AppDetailsUrlMountQueryParams;
 
 export type AppInstallUrlQueryParams = Partial<{ [MANIFEST_ATTR]: string }>;
 
diff --git a/src/apps/useExtensions.ts b/src/apps/useExtensions.ts
index 30f0ee417..9096b6dc6 100644
--- a/src/apps/useExtensions.ts
+++ b/src/apps/useExtensions.ts
@@ -9,6 +9,7 @@ import { RelayToFlat } from "@saleor/types";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 
 import { AppData, useExternalApp } from "./components/ExternalAppContext";
+import { AppDetailsUrlMountQueryParams } from "./urls";
 
 export interface Extension {
   id: string;
@@ -20,6 +21,11 @@ export interface Extension {
   url: string;
   open(): void;
 }
+
+export interface ExtensionWithParams extends Omit<Extension, "open"> {
+  open(params: AppDetailsUrlMountQueryParams): void;
+}
+
 export const extensionMountPoints = {
   PRODUCT_LIST: [
     AppExtensionMountEnum.PRODUCT_OVERVIEW_CREATE,
@@ -44,7 +50,7 @@ export const extensionMountPoints = {
 const filterAndMapToTarget = (
   extensions: RelayToFlat<ExtensionListQuery["appExtensions"]>,
   openApp: (appData: AppData) => void,
-): Extension[] =>
+): ExtensionWithParams[] =>
   extensions.map(
     ({ id, accessToken, permissions, url, label, mount, target, app }) => ({
       id,
@@ -54,17 +60,45 @@ const filterAndMapToTarget = (
       url,
       label,
       mount,
-      open: () =>
-        openApp({ id: app.id, appToken: accessToken, src: url, label, target }),
+      open: (params: AppDetailsUrlMountQueryParams) =>
+        openApp({
+          id: app.id,
+          appToken: accessToken,
+          src: url,
+          label,
+          target,
+          params,
+        }),
     }),
   );
 
-export const mapToMenuItems = (extensions: Extension[]) =>
-  extensions.map(({ label, id, open }) => ({
-    label,
-    testId: `extension-${id}`,
-    onSelect: open,
-  }));
+const mapToMenuItem = ({ label, id, open }: Extension) => ({
+  label,
+  testId: `extension-${id}`,
+  onSelect: open,
+});
+
+export const mapToMenuItems = (extensions: ExtensionWithParams[]) =>
+  extensions.map(mapToMenuItem);
+
+export const mapToMenuItemsForProductDetails = (
+  extensions: ExtensionWithParams[],
+  productId: string,
+) =>
+  extensions.map(extension =>
+    mapToMenuItem({ ...extension, open: () => extension.open({ productId }) }),
+  );
+
+export const mapToMenuItemsForOrderDetails = (
+  extensions: ExtensionWithParams[],
+  orderId?: string,
+) =>
+  extensions.map(extension =>
+    mapToMenuItem({
+      ...extension,
+      open: () => extension.open({ orderId }),
+    }),
+  );
 
 export const useExtensions = <T extends AppExtensionMountEnum>(
   mountList: T[],
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 7bf2d2fee..d6a02fe78 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -1,7 +1,7 @@
 import { Typography } from "@material-ui/core";
 import {
   extensionMountPoints,
-  mapToMenuItems,
+  mapToMenuItemsForOrderDetails,
   useExtensions,
 } from "@saleor/apps/useExtensions";
 import { Backlink } from "@saleor/components/Backlink";
@@ -225,7 +225,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
     extensionMountPoints.ORDER_DETAILS,
   );
 
-  const extensionMenuItems = mapToMenuItems(ORDER_DETAILS_MORE_ACTIONS);
+  const extensionMenuItems = mapToMenuItemsForOrderDetails(
+    ORDER_DETAILS_MORE_ACTIONS,
+    order?.id,
+  );
 
   return (
     <Form confirmLeave initial={initial} onSubmit={handleSubmit}>
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index 61cc871ec..721310300 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -1,7 +1,7 @@
 import { OutputData } from "@editorjs/editorjs";
 import {
   extensionMountPoints,
-  mapToMenuItems,
+  mapToMenuItemsForProductDetails,
   useExtensions,
 } from "@saleor/apps/useExtensions";
 import {
@@ -252,7 +252,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
     extensionMountPoints.PRODUCT_DETAILS,
   );
 
-  const extensionMenuItems = mapToMenuItems(PRODUCT_DETAILS_MORE_ACTIONS);
+  const extensionMenuItems = mapToMenuItemsForProductDetails(
+    PRODUCT_DETAILS_MORE_ACTIONS,
+    productId,
+  );
 
   return (
     <ProductUpdateForm