rearrange shell providers so apps do not have to supply

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<DialogContextProps>(
 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]

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx

@@ -105,7 +105,6 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
   );
 
   const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    console.log(`set Group ${e.target.value}`);
     setGroup(e.target.value);
   }, []);
 

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: (
-              <SaveLayoutPanel
-                onCancel={handleCloseDialog}
-                onSave={handleSave}
-                componentId={action.options?.controlledComponentId}
-                defaultTitle={
-                  action.options?.controlledComponentTitle as string
-                }
-              />
-            ),
-            title: "Save Layout",
-            hideCloseButton: true,
-          });
+          showDialog(
+            <SaveLayoutPanel
+              onCancel={handleCloseDialog}
+              onSave={handleSave}
+              componentId={action.options?.controlledComponentId}
+              defaultTitle={action.options?.controlledComponentTitle as string}
+            />,
+            "Save Layout",
+            [],
+            true
+          );
           return true;
         }
         return false;
       },
     ];
-  }, [handleCloseDialog, handleSave, setDialogState]);
+  }, [handleCloseDialog, handleSave, showDialog]);
 
   return {
     buildMenuOptions,

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<HTMLDivElement> {
   user: VuuUser;
 }
 
-export const Shell = ({
+const VuuApplication = ({
   LayoutProps,
   LeftSidePanelProps = defaultLeftSidePanel,
   children,
@@ -85,10 +90,8 @@ export const Shell = ({
   });
 
   const rootRef = useRef<HTMLDivElement>(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 : (
-    <ApplicationProvider user={user}>
-      <ContextMenuProvider
-        menuActionHandler={handleMenuAction}
-        menuBuilder={buildMenuOptions}
+    <ContextMenuProvider
+      menuActionHandler={handleMenuAction}
+      menuBuilder={buildMenuOptions}
+    >
+      <LayoutProvider
+        {...LayoutProps}
+        layout={applicationJson.layout}
+        onLayoutChange={handleLayoutChange}
       >
-        <LayoutProvider
-          {...LayoutProps}
-          layout={applicationJson.layout}
-          onLayoutChange={handleLayoutChange}
+        <DraggableLayout
+          className={className}
+          ref={rootRef}
+          {...htmlAttributes}
         >
-          <DraggableLayout
-            className={className}
-            ref={rootRef}
-            {...htmlAttributes}
-          >
-            {shellLayout}
-          </DraggableLayout>
-        </LayoutProvider>
-        {children || dialog}
-      </ContextMenuProvider>
+          {shellLayout}
+        </DraggableLayout>
+      </LayoutProvider>
+      {children}
+    </ContextMenuProvider>
+  );
+};
+
+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.
+    <ApplicationProvider user={user}>
+      <LayoutManagementProvider>
+        <DialogProvider>
+          <NotificationsProvider>
+            <VuuApplication {...props} user={user} />
+          </NotificationsProvider>
+        </DialogProvider>
+      </LayoutManagementProvider>
     </ApplicationProvider>
   );
 };

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 (
-    <NotificationsProvider>
-      <LayoutManagementProvider>
-        <DragDropProvider dragSources={dragSource}>
-          <ShellContextProvider
-            value={{ getDefaultColumnConfig, handleRpcResponse }}
-          >
-            <Shell
-              LayoutProps={layoutProps}
-              LeftSidePanelProps={leftSidePanelProps}
-              className="App"
-              leftSidePanelLayout="full-height"
-              saveUrl="https://localhost:8443/api/vui"
-              serverUrl={serverUrl}
-              user={user}
-            >
-              {dialog}
-            </Shell>
-          </ShellContextProvider>
-        </DragDropProvider>
-      </LayoutManagementProvider>
-    </NotificationsProvider>
+    <DragDropProvider dragSources={dragSource}>
+      <ShellContextProvider
+        value={{ getDefaultColumnConfig, handleRpcResponse }}
+      >
+        <Shell
+          LayoutProps={layoutProps}
+          LeftSidePanelProps={leftSidePanelProps}
+          className="App"
+          leftSidePanelLayout="full-height"
+          saveUrl="https://localhost:8443/api/vui"
+          serverUrl={serverUrl}
+          user={user}
+        >
+          {dialog}
+        </Shell>
+      </ShellContextProvider>
+    </DragDropProvider>
   );
 };

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,23 +112,15 @@ const ShellWithNewTheme = () => {
             "--vuuShell-width": "100vw",
           } as CSSProperties
         }
-      >
-        {dialog}
-      </Shell>
+      ></Shell>
     </DragDropProvider>
   );
 };
 
 export const ShellWithNewThemeAndLayoutManagement = () => {
   document.cookie = `vuu-username=${user.username}`;
 
-  return (
-    <NotificationsProvider>
-      <LayoutManagementProvider>
-        <ShellWithNewTheme />
-      </LayoutManagementProvider>
-    </NotificationsProvider>
-  );
+  return <ShellWithNewTheme />;
 };
 
 ShellWithNewThemeAndLayoutManagement.displaySequence = displaySequence++;