feat: add CanvasContext (#4439)

lumada-design · Nov 22, 2024 · 5f85304 · 5f85304
1 parent 333446e
commit 5f85304
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 117 deletions.
diff --git a/packages/cli/src/templates/Canvas/index.tsx b/packages/cli/src/templates/Canvas/index.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useState } from "react";
-import { cx } from "@emotion/css";
 import { ReactFlowInstance } from "reactflow";
 import {
   HvButton,
@@ -28,6 +27,7 @@ import {
 import {
   HvCanvasBottomPanel,
   HvCanvasBottomPanelProps,
+  HvCanvasProvider,
   HvCanvasToolbar,
 } from "@hitachivantara/uikit-react-pentaho";
 
@@ -201,97 +201,93 @@ const Page = () => {
 
   return (
     <div className={classes.root}>
-      <HvFlow
-        className={classes.flow}
-        nodes={initialNodes}
-        edges={initialEdges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onInit={setFlowInstance}
-        /** Flow sidebar passed as prop to access the flow's Dnd context inside CanvasSidePanel */
-        sidebar={
-          <CanvasSidebar
-            tabs={sidePanelTabs}
-            open={sidePanelOpen}
-            tab={sidePanelTab}
-            onToggle={(event, value) => setSidePanelOpen(value)}
-            onTabChange={(event, value) => setSidePanelTab(value as number)}
-          >
-            {sidePanelContent[sidePanelTab]}
-          </CanvasSidebar>
-        }
-      >
-        <HvFlowEmpty
-          className={classes.flowEmpty}
-          title={
-            <HvTypography variant="title3" component="p">
-              Drag and Drop your Nodes
-            </HvTypography>
-          }
-          message={
-            <HvTypography
-              className={classes.flowEmptyMessage}
-              variant="label"
-              component="p"
+      <HvCanvasProvider>
+        <HvFlow
+          className={classes.flow}
+          nodes={initialNodes}
+          edges={initialEdges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          onInit={setFlowInstance}
+          /** Flow sidebar passed as prop to access the flow's Dnd context inside CanvasSidePanel */
+          sidebar={
+            <CanvasSidebar
+              tabs={sidePanelTabs}
+              open={sidePanelOpen}
+              tab={sidePanelTab}
+              onToggle={(event, value) => setSidePanelOpen(value)}
+              onTabChange={(event, value) => setSidePanelTab(value as number)}
             >
-              Then you can start configuring your flow.
-            </HvTypography>
+              {sidePanelContent[sidePanelTab]}
+            </CanvasSidebar>
           }
-          icon={null}
-        />
-        <HvFlowBackground />
-        <HvFlowControls />
-      </HvFlow>
-      <HvCanvasToolbar
-        className={cx(classes.toolbar, {
-          [classes.fullWidth]: !sidePanelOpen,
-          [classes.minWidth]: sidePanelOpen,
-        })}
-        title={<HvInlineEditor defaultValue="My Canvas" variant="title4" />}
-      >
-        <HvButton variant="primary" onClick={handleExecute}>
-          Execute
-        </HvButton>
-      </HvCanvasToolbar>
-      {bottomTabs.length > 0 && bottomPanelOpen && (
-        <HvCanvasBottomPanel
-          className={cx({
-            [classes.fullWidth]: !sidePanelOpen,
-            [classes.minWidth]: sidePanelOpen,
-          })}
-          classes={{
-            rightActions: classes.rightActions,
-          }}
-          open={bottomPanelOpen}
-          minimize={minimize}
-          tabs={bottomTabs}
-          selectedTabId={selectedTable}
-          leftActions={leftActions}
-          rightActions={rightActions}
-          overflowActions={[...leftActions, ...rightActions]}
-          onTabChange={handleChangeTab}
-          onAction={handleAction}
         >
-          <DataTable id={selectedTable} />
-        </HvCanvasBottomPanel>
-      )}
-      {bottomPanelOpen && (
-        <HvDialog
-          fullWidth
-          maxWidth="lg"
-          open={fullscreen}
-          onClose={() => setFullscreen((prev) => !prev)}
+          <HvFlowEmpty
+            className={classes.flowEmpty}
+            title={
+              <HvTypography variant="title3" component="p">
+                Drag and Drop your Nodes
+              </HvTypography>
+            }
+            message={
+              <HvTypography
+                className={classes.flowEmptyMessage}
+                variant="label"
+                component="p"
+              >
+                Then you can start configuring your flow.
+              </HvTypography>
+            }
+            icon={null}
+          />
+          <HvFlowBackground />
+          <HvFlowControls />
+        </HvFlow>
+        <HvCanvasToolbar
+          className={classes.toolbar}
+          title={<HvInlineEditor defaultValue="My Canvas" variant="title4" />}
         >
-          <HvDialogTitle className={classes.dialogTitle}>
-            {(
-              bottomTabs?.find((x) => x.id === selectedTable)?.title as Function
-            )(false)}
-          </HvDialogTitle>
-          <HvDialogContent>
+          <HvButton variant="primary" onClick={handleExecute}>
+            Execute
+          </HvButton>
+        </HvCanvasToolbar>
+        {bottomTabs.length > 0 && bottomPanelOpen && (
+          <HvCanvasBottomPanel
+            classes={{
+              rightActions: classes.rightActions,
+            }}
+            open={bottomPanelOpen}
+            minimize={minimize}
+            tabs={bottomTabs}
+            selectedTabId={selectedTable}
+            leftActions={leftActions}
+            rightActions={rightActions}
+            overflowActions={[...leftActions, ...rightActions]}
+            onTabChange={handleChangeTab}
+            onAction={handleAction}
+          >
             <DataTable id={selectedTable} />
-          </HvDialogContent>
-        </HvDialog>
-      )}
+          </HvCanvasBottomPanel>
+        )}
+        {bottomPanelOpen && (
+          <HvDialog
+            fullWidth
+            maxWidth="lg"
+            open={fullscreen}
+            onClose={() => setFullscreen((prev) => !prev)}
+          >
+            <HvDialogTitle className={classes.dialogTitle}>
+              {(
+                bottomTabs?.find((x) => x.id === selectedTable)
+                  ?.title as Function
+              )(false)}
+            </HvDialogTitle>
+            <HvDialogContent>
+              <DataTable id={selectedTable} />
+            </HvDialogContent>
+          </HvDialog>
+        )}
+      </HvCanvasProvider>
     </div>
   );
 };

diff --git a/packages/cli/src/templates/Canvas/styles.tsx b/packages/cli/src/templates/Canvas/styles.tsx
@@ -22,16 +22,6 @@ export const classes = {
   toolbar: css({
     top: `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${theme.space.md})`,
   }),
-  fullWidth: css({
-    right: theme.space.lg,
-    marginLeft: "auto",
-    marginRight: "auto",
-    width: `calc(100% - 2 * ${theme.space.lg})`,
-  }),
-  minWidth: css({
-    right: theme.space.lg,
-    width: `calc(100% - 320px - 3 * ${theme.space.lg})`,
-  }),
   panel: css({
     top: `calc(${theme.header.height} + ${theme.header.secondLevelHeight})`,
     height: `calc(100% - ${theme.header.height} - ${theme.header.secondLevelHeight})`,

diff --git a/packages/pentaho/src/Canvas/BottomPanel/BottomPanel.tsx b/packages/pentaho/src/Canvas/BottomPanel/BottomPanel.tsx
@@ -13,6 +13,7 @@ import {
   useUniqueId,
 } from "@hitachivantara/uikit-react-core";
 
+import { useCanvasContext } from "../CanvasContext";
 import { HvCanvasPanelTab } from "../PanelTab";
 import { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from "../PanelTabs";
 import { staticClasses, useClasses } from "./BottomPanel.styles";
@@ -91,6 +92,9 @@ export const HvCanvasBottomPanel = forwardRef<
 
   const { classes, cx } = useClasses(classesProp);
 
+  const canvasContext = useCanvasContext();
+  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
+
   const id = useUniqueId(idProp);
 
   // Tab resize detector: to position tab actions and set the panel top right border radius
@@ -158,6 +162,10 @@ export const HvCanvasBottomPanel = forwardRef<
         },
         className,
       )}
+      style={{
+        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,
+        right: theme.space.sm,
+      }}
       {...others}
     >
       <div className={classes.tabsRoot}>

diff --git a/packages/pentaho/src/Canvas/CanvasContext.tsx b/packages/pentaho/src/Canvas/CanvasContext.tsx
@@ -0,0 +1,54 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+type HvCanvasContextValue = {
+  sidePanelOpen: boolean;
+  handleSidePanelOpen: (open: boolean) => void;
+  sidePanelWidth: number;
+  handleSidePanelWidth: (width: number) => void;
+};
+
+export const HvCanvasContext = createContext<HvCanvasContextValue | null>(null);
+
+export const HvCanvasProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+  onSidePanelResize?: (width: number) => void;
+}) => {
+  const [sidePanelOpen, setSidePanelOpen] = useState(false);
+  const [width, setWidth] = useState(0);
+
+  const handleSidePanelWidth = useCallback((newWidth: number) => {
+    setWidth(newWidth);
+  }, []);
+
+  const handleSidePanelOpen = useCallback((open: boolean) => {
+    setSidePanelOpen(open);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      sidePanelOpen,
+      handleSidePanelOpen,
+      sidePanelWidth: sidePanelOpen ? width : 0,
+      handleSidePanelWidth,
+    }),
+    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth],
+  );
+
+  return (
+    <HvCanvasContext.Provider value={value}>
+      {children}
+    </HvCanvasContext.Provider>
+  );
+};
+
+export const useCanvasContext = () => {
+  return useContext(HvCanvasContext);
+};
diff --git a/packages/pentaho/src/Canvas/SidePanel/SidePanel.test.tsx b/packages/pentaho/src/Canvas/SidePanel/SidePanel.test.tsx
@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { HvButton } from "@hitachivantara/uikit-react-core";
 
+import { HvCanvasProvider } from "../CanvasContext";
 import { HvCanvasSidePanel, HvCanvasSidePanelProps } from "./SidePanel";
 
 const label = "Test";
@@ -21,9 +22,11 @@ const tabs = [
 
 const renderSimplePanel = (props?: HvCanvasSidePanelProps) =>
   render(
-    <HvCanvasSidePanel {...props} tabs={tabs}>
-      <HvButton>{label}</HvButton>
-    </HvCanvasSidePanel>,
+    <HvCanvasProvider>
+      <HvCanvasSidePanel {...props} tabs={tabs}>
+        <HvButton>{label}</HvButton>
+      </HvCanvasSidePanel>
+    </HvCanvasProvider>,
   );
 
 const ControlledPanel = ({