From 71ddea52577fc69888eb8264c50f2cec5bc56910 Mon Sep 17 00:00:00 2001 From: heswell Date: Wed, 19 Jun 2024 12:52:46 +0100 Subject: [PATCH] rearrange shell providers so apps do not have to supply --- .../vuu-popups/src/dialog/useDialog.tsx | 7 +- .../src/layout-management/SaveLayoutPanel.tsx | 1 - .../useLayoutContextMenuItems.tsx | 44 ++++++------- vuu-ui/packages/vuu-shell/src/shell.tsx | 64 ++++++++++++------- .../sample-apps/app-vuu-example/src/App.tsx | 41 ++++++------ .../src/examples/Apps/NewTheme.examples.tsx | 23 +------ 6 files changed, 86 insertions(+), 94 deletions(-) diff --git a/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx b/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx index 87458eac3..0f618e741 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx +++ b/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx @@ -27,7 +27,8 @@ export type SetDialog = (dialogState?: DialogState) => void; export type ShowDialog = ( dialogContent: ReactElement, title: string, - dialogActionButtons?: ReactElement[] + dialogActionButtons?: ReactElement[], + hideCloseButton?: boolean ) => void; export interface DialogContextProps { @@ -101,12 +102,12 @@ const DialogContext = createContext( const DialogHost = ({ context }: { context: DialogContextProps }) => { const { dialog, setDialogState } = useDialog(); const showDialog: ShowDialog = useCallback( - (dialogContent, title, actionButtons) => { - console.log("show dialog"); + (dialogContent, title, actionButtons, hideCloseButton) => { setDialogState({ actions: actionButtons, content: dialogContent, title, + hideCloseButton, }); }, [setDialogState] diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index 0290a3a63..801073145 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -105,7 +105,6 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { ); const handleChange = useCallback((e: ChangeEvent) => { - console.log(`set Group ${e.target.value}`); setGroup(e.target.value); }, []); diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutContextMenuItems.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutContextMenuItems.tsx index 43089c29a..a52eb8fc6 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutContextMenuItems.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutContextMenuItems.tsx @@ -4,24 +4,26 @@ import { MenuBuilder, } from "@finos/vuu-data-types"; import { useCallback, useMemo } from "react"; -import { MenuActionClosePopup, SetDialog } from "@finos/vuu-popups"; +import { MenuActionClosePopup, useDialogContext } from "@finos/vuu-popups"; import { useLayoutManager } from "./useLayoutManager"; import { LayoutMetadataDto } from "./layoutTypes"; import { SaveLayoutPanel } from "./SaveLayoutPanel"; -export const useLayoutContextMenuItems = (setDialogState: SetDialog) => { +export const useLayoutContextMenuItems = () => { const { saveLayout } = useLayoutManager(); + const { showDialog, closeDialog } = useDialogContext(); + const handleCloseDialog = useCallback(() => { - setDialogState(undefined); - }, [setDialogState]); + closeDialog(); + }, [closeDialog]); const handleSave = useCallback( (layoutMetadata: LayoutMetadataDto) => { saveLayout(layoutMetadata); - setDialogState(undefined); + closeDialog(); }, - [saveLayout, setDialogState] + [saveLayout, closeDialog] ); const [buildMenuOptions, handleMenuAction] = useMemo< @@ -48,30 +50,24 @@ export const useLayoutContextMenuItems = (setDialogState: SetDialog) => { return menuDescriptors; }, (action: MenuActionClosePopup) => { - console.log("menu action", { - action, - }); if (action.menuId === "save-layout") { - setDialogState({ - content: ( - - ), - title: "Save Layout", - hideCloseButton: true, - }); + showDialog( + , + "Save Layout", + [], + true + ); return true; } return false; }, ]; - }, [handleCloseDialog, handleSave, setDialogState]); + }, [handleCloseDialog, handleSave, showDialog]); return { buildMenuOptions, diff --git a/vuu-ui/packages/vuu-shell/src/shell.tsx b/vuu-ui/packages/vuu-shell/src/shell.tsx index 187691e37..25da3fab5 100644 --- a/vuu-ui/packages/vuu-shell/src/shell.tsx +++ b/vuu-ui/packages/vuu-shell/src/shell.tsx @@ -6,7 +6,11 @@ import { LayoutProviderProps, StackLayout, } from "@finos/vuu-layout"; -import { ContextMenuProvider, useDialog } from "@finos/vuu-popups"; +import { + ContextMenuProvider, + DialogProvider, + NotificationsProvider, +} from "@finos/vuu-popups"; import { VuuUser, logger, registerComponent } from "@finos/vuu-utils"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; @@ -23,6 +27,7 @@ import { AppHeader } from "./app-header"; import { ApplicationProvider } from "./application-provider"; import { ApplicationSettingsPanel } from "./application-settings"; import { + LayoutManagementProvider, useLayoutContextMenuItems, useLayoutManager, } from "./layout-management"; @@ -65,7 +70,7 @@ export interface ShellProps extends HTMLAttributes { user: VuuUser; } -export const Shell = ({ +const VuuApplication = ({ LayoutProps, LeftSidePanelProps = defaultLeftSidePanel, children, @@ -85,10 +90,8 @@ export const Shell = ({ }); const rootRef = useRef(null); - const { dialog, setDialogState } = useDialog(); const { applicationJson, saveApplicationLayout } = useLayoutManager(); - const { buildMenuOptions, handleMenuAction } = - useLayoutContextMenuItems(setDialogState); + const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems(); const [connectionStatus, setConnectionStatus] = useState< "connected" | "rejected" >("connected"); @@ -130,26 +133,41 @@ export const Shell = ({ } return isLayoutLoading ? null : ( - - + - - - {shellLayout} - - - {children || dialog} - + {shellLayout} + + + {children} + + ); +}; + +export const Shell = ({ user, ...props }: ShellProps) => { + return ( + // ApplicationProvider must go outside Dialog and Notification providers + // ApplicationProvider injects the SaltProvider and this must be the root + // SaltProvider. + + + + + + + + ); }; diff --git a/vuu-ui/sample-apps/app-vuu-example/src/App.tsx b/vuu-ui/sample-apps/app-vuu-example/src/App.tsx index 4ebf9ad15..f798ee7e5 100644 --- a/vuu-ui/sample-apps/app-vuu-example/src/App.tsx +++ b/vuu-ui/sample-apps/app-vuu-example/src/App.tsx @@ -1,7 +1,6 @@ import { StackLayout } from "@finos/vuu-layout"; -import { NotificationsProvider, useDialog } from "@finos/vuu-popups"; +import { useDialog } from "@finos/vuu-popups"; import { - LayoutManagementProvider, LeftNav, Shell, ShellContextProvider, @@ -67,26 +66,22 @@ export const App = ({ user }: { user: VuuUser }) => { ); return ( - - - - - - {dialog} - - - - - + + + + {dialog} + + + ); }; diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx index 38688dfd2..d00dbad40 100644 --- a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx +++ b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx @@ -1,12 +1,5 @@ import { getAllSchemas } from "@finos/vuu-data-test"; -import { NotificationsProvider, useDialog } from "@finos/vuu-popups"; -import { - FeatureProps, - LayoutManagementProvider, - LeftNav, - Shell, - SidePanelProps, -} from "@finos/vuu-shell"; +import { FeatureProps, LeftNav, Shell, SidePanelProps } from "@finos/vuu-shell"; import { ColumnSettingsPanel, TableSettingsPanel, @@ -83,8 +76,6 @@ const filterTableFeatures = getFilterTableFeatures( ); const ShellWithNewTheme = () => { - const { dialog } = useDialog(); - const dragSource = useMemo( () => ({ "basket-instruments": { @@ -121,9 +112,7 @@ const ShellWithNewTheme = () => { "--vuuShell-width": "100vw", } as CSSProperties } - > - {dialog} - + > ); }; @@ -131,13 +120,7 @@ const ShellWithNewTheme = () => { export const ShellWithNewThemeAndLayoutManagement = () => { document.cookie = `vuu-username=${user.username}`; - return ( - - - - - - ); + return ; }; ShellWithNewThemeAndLayoutManagement.displaySequence = displaySequence++;