POC merge layout hooks

vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts

@@ -43,4 +43,18 @@ export interface LayoutPersistenceManager {
    * @returns an array of all persisted layout metadata
    */
   loadMetadata: () => LayoutMetadata[];
+
+  /**
+   * Retrieves temporary layout
+   *
+   * @returns a json representation of a layout
+   */
+    loadTempLayout: () => LayoutJSON;
+
+   /**
+   * Retrieves temporary layout
+   *   
+   * @param layout - json representation of layout to be saved
+   */
+    saveTempLayout: (layout: LayoutJSON) => void
 }

vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts

@@ -3,6 +3,7 @@ import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
 
 import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
 import { getUniqueId } from "@finos/vuu-utils";
+import { defaultLayout, warningLayout } from "./data";
 
 const metadataSaveLocation = "layouts/metadata";
 const layoutsSaveLocation = "layouts/layouts";
@@ -57,6 +58,15 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
     return getLocalEntity<LayoutMetadata[]>(metadataSaveLocation) || [];
   }
 
+  loadTempLayout(): LayoutJSON{
+
+    return getLocalEntity<LayoutJSON>("api/vui") || defaultLayout
+  }
+
+  saveTempLayout(layout: LayoutJSON): void{
+    saveLocalEntity<LayoutJSON>("api/vui", layout)
+  }
+
   private loadLayouts(): Layout[] {
     return getLocalEntity<Layout[]>(layoutsSaveLocation) || [];
   }

vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts

@@ -0,0 +1,68 @@
+export const defaultLayout = {
+  type: "Stack",
+  props: {
+    className: "vuuShell-mainTabs",
+    TabstripProps: {
+      allowAddTab: true,
+      allowRenameTab: true,
+      animateSelectionThumb: false,
+      location: "main-tab",
+    },
+    preserve: true,
+    active: 0,
+  },
+  children: [
+    {
+      type: "Stack",
+      props: {
+        active: 0,
+        title: "My Temp Layout",
+        TabstripProps: {
+          allowRenameTab: true,
+          allowCloseTab: true,
+        },
+      },
+      children: [
+        {
+          type: "View",
+          props: {
+            title: "Temp European Stock",
+          },
+          style: { height: "calc(100% - 6px)" },
+          children: [
+            {
+              type: "AutoTableNext",
+            },
+          ],
+        },
+        {
+          type: "View",
+          props: {
+            title: "Temp Other Stock",
+          },
+          style: { height: "calc(100% - 6px)" },
+          children: [
+            {
+              type: "AutoTableNext",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const warningLayout = {
+  type: "View",
+  props: {
+    style: { height: "calc(100% - 6px)" },
+  },
+  children: [
+    {
+      props: {
+        className: "vuuShell-warningPlaceholder",
+      },
+      type: "Placeholder",
+    },
+  ],
+};

vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts

@@ -1,2 +1,3 @@
 export * from './LayoutPersistenceManager';
 export * from './LocalLayoutPersistenceManager';
+export * from './data';

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

@@ -1,25 +1,46 @@
 import React, { useState, useCallback, useContext, useEffect } from "react";
 import { getLocalEntity } from "@finos/vuu-filters";
-import { LayoutJSON, LocalLayoutPersistenceManager } from "@finos/vuu-layout";
+import { LayoutJSON, LocalLayoutPersistenceManager, defaultLayout } from "@finos/vuu-layout";
 import { LayoutMetadata } from "./layoutTypes";
 
+const saveLocation = process.env.location || "local"
+// TODO: pick remote based on save location
+
 const persistenceManager = new LocalLayoutPersistenceManager();
 
 export const LayoutManagementContext = React.createContext<{
   layoutMetadata: LayoutMetadata[],
-  saveLayout: (n: Omit<LayoutMetadata, "id">) => void
-}>({ layoutMetadata: [], saveLayout: () => { } })
+  saveLayout: (n: Omit<LayoutMetadata, "id">) => void,
+  tempLayout: LayoutJSON,
+  saveTempLayout: (layout: LayoutJSON) => void,
+  loadLayoutById: (id: string) => LayoutJSON
+}>({
+  layoutMetadata: [],
+  saveLayout: () => { },
+  tempLayout: defaultLayout,
+  saveTempLayout: () => { },
+  loadLayoutById: () => defaultLayout
+
+})
 
 export const LayoutManagementProvider = (props: {
-    children: JSX.Element | JSX.Element[]
-  }) => {
+  children: JSX.Element | JSX.Element[]
+}) => {
   const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);
+  const [tempLayout, setTempLayout] = useState<LayoutJSON>(defaultLayout);
 
   useEffect(() => {
     const loadedMetadata = persistenceManager.loadMetadata();
+    const temp = persistenceManager.loadTempLayout();
+
     setLayoutMetadata(loadedMetadata || [])
+    setTempLayout(temp);
   }, [])
 
+  const saveTempLayout = useCallback((layout: LayoutJSON) => {
+    persistenceManager.saveTempLayout(layout)
+  }, []);
+
   const saveLayout = useCallback((metadata: Omit<LayoutMetadata, "id">) => {
     const json = getLocalEntity<LayoutJSON>("api/vui");
 
@@ -37,10 +58,10 @@ export const LayoutManagementProvider = (props: {
     }
   }, [])
 
-  // TODO: add loadLayout function
+  const loadLayoutById = useCallback((id) => persistenceManager.loadLayout(id), []);
 
   return (
-    <LayoutManagementContext.Provider value={{ layoutMetadata, saveLayout }} >
+    <LayoutManagementContext.Provider value={{ layoutMetadata, saveLayout, tempLayout, saveTempLayout, loadLayoutById }} >
       {props.children}
     </LayoutManagementContext.Provider>
   )

vuu-ui/packages/vuu-shell/src/shell.tsx

@@ -8,14 +8,14 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { useLayoutConfig } from "./layout-config";
 import { DraggableLayout, LayoutProvider } from "@finos/vuu-layout";
 import { LayoutJSON } from "@finos/vuu-layout/src/layout-reducer";
 import { AppHeader } from "./app-header";
 import { ThemeMode, ThemeProvider, useThemeAttributes } from "./theme-provider";
 import { logger } from "@finos/vuu-utils";
 import { useShellLayout } from "./shell-layouts";
 import { SaveLocation } from "./shellTypes";
+import { useLayoutManager } from "./layout-management";
 
 import "./shell.css";
 
@@ -26,21 +26,6 @@ export type VuuUser = {
 
 const { error } = logger("Shell");
 
-const warningLayout = {
-  type: "View",
-  props: {
-    style: { height: "calc(100% - 6px)" },
-  },
-  children: [
-    {
-      props: {
-        className: "vuuShell-warningPlaceholder",
-      },
-      type: "Placeholder",
-    },
-  ],
-};
-
 export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   defaultLayout?: LayoutJSON;
@@ -57,7 +42,6 @@ export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
 export const Shell = ({
   children,
   className: classNameProp,
-  defaultLayout = warningLayout,
   leftSidePanel,
   leftSidePanelLayout,
   loginUrl,
@@ -69,21 +53,17 @@ export const Shell = ({
 }: ShellProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
   const layoutId = useRef("latest");
-  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
-    defaultLayout,
-    saveLocation,
-    user,
-  });
+  const { tempLayout, saveTempLayout, loadLayoutById } = useLayoutManager();
 
   const handleLayoutChange = useCallback(
     (layout) => {
       try {
-        saveLayoutConfig(layout);
+        saveTempLayout(layout);
       } catch {
         error?.("Failed to save layout");
       }
     },
-    [saveLayoutConfig]
+    [saveTempLayout]
   );
 
   const handleSwitchTheme = useCallback((mode: ThemeMode) => {
@@ -92,11 +72,10 @@ export const Shell = ({
     }
   }, []);
 
-  const handleNavigate = useCallback(
-    (id) => {
-      layoutId.current = id;
-      loadLayoutById(id);
-    },
+  const handleNavigate = useCallback((id: string) => {
+    layoutId.current = id;
+    loadLayoutById(id);
+  },
     [loadLayoutById]
   );
 
@@ -130,7 +109,7 @@ export const Shell = ({
   return (
     // ShellContext TBD
     <ThemeProvider>
-      <LayoutProvider layout={layout} onLayoutChange={handleLayoutChange}>
+      <LayoutProvider layout={tempLayout} onLayoutChange={handleLayoutChange}>
         <DraggableLayout
           className={className}
           data-mode={dataMode}

vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx

@@ -94,69 +94,13 @@ const ShellWithNewTheme = () => {
   }, [handleCloseDialog, handleSave]);
 
   //TODO what the App actually receives is an array of layouts
-  const layout = useMemo(() => {
-    return {
-      type: "Stack",
-      props: {
-        className: "vuuShell-mainTabs",
-        TabstripProps: {
-          allowAddTab: true,
-          allowRenameTab: true,
-          animateSelectionThumb: false,
-          location: "main-tab",
-        },
-        preserve: true,
-        active: 0,
-      },
-      children: [
-        {
-          type: "Stack",
-          props: {
-            active: 0,
-            title: "My Instruments",
-            TabstripProps: {
-              allowRenameTab: true,
-              allowCloseTab: true,
-            },
-          },
-          children: [
-            {
-              type: "View",
-              props: {
-                title: "European Stock",
-              },
-              style: { height: "calc(100% - 6px)" },
-              children: [
-                {
-                  type: "AutoTableNext",
-                },
-              ],
-            },
-            {
-              type: "View",
-              props: {
-                title: "Other Stock",
-              },
-              style: { height: "calc(100% - 6px)" },
-              children: [
-                {
-                  type: "AutoTableNext",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-  }, []);
 
   return (
     <ContextMenuProvider
       menuActionHandler={handleMenuAction}
       menuBuilder={buildMenuOptions}
     >
       <Shell
-        defaultLayout={layout}
         leftSidePanelLayout="full-height"
         leftSidePanel={<LeftNav style={{ width: 240 }} />}
         loginUrl={window.location.toString()}