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

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

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

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

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

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: () =>
+      open: (params: AppDetailsUrlMountQueryParams) =>
-        openApp({ id: app.id, appToken: accessToken, src: url, label, target }),
+        openApp({
+          id: app.id,
+          appToken: accessToken,
+          src: url,
+          label,
+          target,
+          params,
+        }),
     }),
   );
 
-export const mapToMenuItems = (extensions: Extension[]) =>
+const mapToMenuItem = ({ label, id, open }: Extension) => ({
-  extensions.map(({ label, id, open }) => ({
+  label,
-    label,
+  testId: `extension-${id}`,
-    testId: `extension-${id}`,
+  onSelect: open,
-    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[],

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

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