@vuu-ui/vuu-shell 3.3.10 → 4.0.0-alpha.1

package/src/shell.js

@@ -1,108 +1,186 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { GridLayout, GridLayoutItem, GridLayoutProvider } from "@heswell/grid-layout";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { useAuthenticatedUser } from "@vuu-ui/core";
 import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
-import { LayoutProvider, StackLayout } from "@vuu-ui/vuu-layout";
+import { useLostConnection } from "@vuu-ui/vuu-data-react";
 import { NotificationsProvider } from "@vuu-ui/vuu-notifications";
-import { ModalProvider } from "@vuu-ui/vuu-ui-controls";
-import { logger, registerComponent } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo } from "react";
+import { ContextPanelProvider, ModalProvider } from "@vuu-ui/vuu-ui-controls";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { createContext, isValidElement, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { AppHeader } from "./app-header/index.js";
 import { ApplicationProvider } from "./application-provider/index.js";
-import { LocalPersistenceManager, PersistenceProvider, usePersistenceManager } from "./persistence-manager/index.js";
-import { useShellLayout } from "./shell-layout-templates/index.js";
-import { UserSettingsPanel } from "./user-settings/index.js";
-import { WorkspaceProvider, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
-import { loadingJSON } from "./workspace-management/defaultWorkspaceJSON.js";
-import { useLostConnection } from "@vuu-ui/vuu-data-react";
+import { LeftNav } from "./left-nav/index.js";
+import { ContextPanel, SidePanel } from "./shell-layout-templates/index.js";
+import { WorkspaceHost, WorkspaceProvider, createWorkspaceComponentRegistries, shellWorkspaceComponentRegistrations, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
 import shell from "./shell.css";
-registerComponent("ApplicationSettings", UserSettingsPanel, "view");
-if ("production" === process.env.NODE_ENV) {
-    if ("function" != typeof StackLayout) console.warn("StackLayout module not loaded, will be unable to deserialize from layout JSON");
-}
-const { error: error } = logger("Shell");
 const defaultAppHeader = /*#__PURE__*/ jsx(AppHeader, {});
-const getAppHeader = (shellLayoutProps)=>shellLayoutProps?.appHeader ?? defaultAppHeader;
-const defaultHTMLAttributes = {
-    className: "vuuShell"
+const defaultRegistries = createWorkspaceComponentRegistries(shellWorkspaceComponentRegistrations);
+const ShellContextPanelStateContext = /*#__PURE__*/ createContext(void 0);
+const StaticContextPanel = ()=>{
+    const contextPanel = useContext(ShellContextPanelStateContext);
+    return /*#__PURE__*/ jsx(ContextPanel, {
+        content: contextPanel?.content,
+        expanded: void 0 !== contextPanel,
+        id: VuuShellLocation.ContextPanel,
+        overlay: true,
+        title: contextPanel?.title
+    });
 };
-const getHTMLAttributes = (props)=>{
-    if (props?.htmlAttributes) return {
-        ...defaultHTMLAttributes,
-        ...props.htmlAttributes
-    };
-    return defaultHTMLAttributes;
+const StaticShellLayout = ({ appHeader = defaultAppHeader, className, leftNavWidth: initialLeftNavWidth = 200, style, workspaceHost = /*#__PURE__*/ jsx(WorkspaceHost, {}), ...htmlAttributes })=>{
+    const { setApplicationSetting } = useWorkspace();
+    const [leftNavWidth, setLeftNavWidth] = useState(initialLeftNavWidth);
+    const [contextPanel, setContextPanel] = useState();
+    const contextPanelTrigger = useRef(null);
+    const handleLeftNavWidthChange = useCallback((width)=>{
+        setLeftNavWidth(width);
+    }, []);
+    const showContextPanel = useCallback((content, title)=>{
+        if (!/*#__PURE__*/ isValidElement(content)) throw new Error(`Context panel component "${content}" must be provided as a React element`);
+        contextPanelTrigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        setContextPanel({
+            content,
+            title
+        });
+    }, []);
+    const hideContextPanel = useCallback(()=>{
+        setContextPanel(void 0);
+        setApplicationSetting("applicationSettings.panelOpen", false).catch(()=>void 0);
+        requestAnimationFrame(()=>contextPanelTrigger.current?.focus());
+    }, [
+        setApplicationSetting
+    ]);
+    return /*#__PURE__*/ jsx(ContextPanelProvider, {
+        hideContextPanel: hideContextPanel,
+        showContextPanel: showContextPanel,
+        children: /*#__PURE__*/ jsx(ShellContextPanelStateContext.Provider, {
+            value: contextPanel,
+            children: /*#__PURE__*/ jsxs(GridLayout, {
+                ...htmlAttributes,
+                className: clsx("vuuShell", "vuuShell-staticGrid", className),
+                colsAndRows: {
+                    cols: [
+                        `${initialLeftNavWidth}px`,
+                        "1fr",
+                        "0px"
+                    ],
+                    rows: [
+                        "48px",
+                        "1fr"
+                    ]
+                },
+                "full-page": true,
+                id: "vuu-shell-grid",
+                style: {
+                    ...style,
+                    gridTemplateColumns: `${leftNavWidth}px minmax(0, 1fr) 0px`
+                },
+                children: [
+                    /*#__PURE__*/ jsx(GridLayoutItem, {
+                        id: "vuu-shell-left-nav",
+                        style: {
+                            gridArea: "1/1/3/2"
+                        },
+                        children: /*#__PURE__*/ jsx(SidePanel, {
+                            id: "vuu-side-panel",
+                            sizeOpen: initialLeftNavWidth,
+                            children: /*#__PURE__*/ jsx(LeftNav, {
+                                onWidthChange: handleLeftNavWidthChange,
+                                sizeExpanded: initialLeftNavWidth
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(GridLayoutItem, {
+                        id: "vuu-shell-header",
+                        style: {
+                            gridArea: "1/2/2/3"
+                        },
+                        children: appHeader
+                    }),
+                    /*#__PURE__*/ jsx(GridLayoutItem, {
+                        className: "vuuShell-content",
+                        id: "vuu-shell-workspace-host",
+                        style: {
+                            gridArea: "2/2/3/3"
+                        },
+                        children: workspaceHost
+                    }),
+                    /*#__PURE__*/ jsx(GridLayoutItem, {
+                        id: "vuu-shell-context-panel-host",
+                        style: {
+                            gridArea: "1/3/3/4",
+                            overflow: "visible",
+                            position: "relative"
+                        },
+                        children: /*#__PURE__*/ jsx(StaticContextPanel, {})
+                    })
+                ]
+            })
+        })
+    });
 };
-const VuuApplication = ({ shellLayoutProps: ShellLayoutProps, children })=>{
+const VuuApplication = ({ appHeader, children, htmlAttributes, leftNavWidth })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-shell",
         css: shell,
         window: targetWindow
     });
-    const { workspaceJSON, saveApplicationLayout } = useWorkspace();
     const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
-    const handleLayoutChange = useCallback((layout)=>{
-        try {
-            saveApplicationLayout(layout);
-        } catch  {
-            error?.("Failed to save layout");
-        }
-    }, [
-        saveApplicationLayout
-    ]);
-    const isLayoutLoading = workspaceJSON === loadingJSON;
-    const initialLayout = useShellLayout({
-        ...ShellLayoutProps,
-        appHeader: getAppHeader(ShellLayoutProps),
-        htmlAttributes: getHTMLAttributes(ShellLayoutProps)
-    });
     useLostConnection();
-    return isLayoutLoading ? null : /*#__PURE__*/ jsxs(ContextMenuProvider, {
+    return /*#__PURE__*/ jsxs(ContextMenuProvider, {
         menuActionHandler: handleMenuAction,
         menuBuilder: buildMenuOptions,
         children: [
-            /*#__PURE__*/ jsx(LayoutProvider, {
-                workspaceJSON: workspaceJSON,
-                onLayoutChange: handleLayoutChange,
-                children: initialLayout
+            /*#__PURE__*/ jsx(GridLayoutProvider, {
+                children: /*#__PURE__*/ jsx(StaticShellLayout, {
+                    ...htmlAttributes,
+                    appHeader: appHeader,
+                    leftNavWidth: leftNavWidth
+                })
             }),
             children
         ]
     });
 };
-const Shell = ({ logout, user, userSettingsSchema, workspaceProps, ...props })=>{
-    const persistenceManager = usePersistenceManager();
-    const localPersistenceManager = useMemo(()=>{
-        if (persistenceManager) return;
-        console.log(`No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`);
-        return new LocalPersistenceManager(`vuu/${user.username}`);
-    }, [
-        persistenceManager,
-        user.username
+const Shell = ({ appHeader, children, leftNavWidth, logout, saveUrl: _saveUrl, serverUrl: _serverUrl, shellLayoutProps, workspaceProps, ...htmlAttributes })=>{
+    const user = useAuthenticatedUser();
+    const resolvedWorkspaceProps = useMemo(()=>({
+            ...workspaceProps,
+            componentRenderers: workspaceProps?.componentRenderers ?? defaultRegistries.renderers,
+            settingsCodecs: workspaceProps?.settingsCodecs ?? defaultRegistries.settingsCodecs
+        }), [
+        workspaceProps
     ]);
-    const shellProviders = /*#__PURE__*/ jsx(ApplicationProvider, {
+    const resolvedHtmlAttributes = {
+        ...htmlAttributes,
+        ...shellLayoutProps?.htmlAttributes,
+        className: clsx(htmlAttributes.className, shellLayoutProps?.htmlAttributes?.className),
+        style: {
+            ...htmlAttributes.style,
+            ...shellLayoutProps?.htmlAttributes?.style
+        }
+    };
+    return /*#__PURE__*/ jsx(ApplicationProvider, {
         density: "high",
         logout: logout,
         theme: "vuu-theme",
-        user: user,
-        userSettingsSchema: userSettingsSchema,
-        children: /*#__PURE__*/ jsx(WorkspaceProvider, {
-            ...workspaceProps,
-            children: /*#__PURE__*/ jsx(ModalProvider, {
-                children: /*#__PURE__*/ jsx(NotificationsProvider, {
+        children: /*#__PURE__*/ jsx(ModalProvider, {
+            children: /*#__PURE__*/ jsx(NotificationsProvider, {
+                children: /*#__PURE__*/ jsx(WorkspaceProvider, {
+                    ...resolvedWorkspaceProps,
+                    userId: user.userName,
                     children: /*#__PURE__*/ jsx(VuuApplication, {
-                        ...props,
-                        user: user
+                        appHeader: appHeader ?? shellLayoutProps?.appHeader,
+                        htmlAttributes: resolvedHtmlAttributes,
+                        leftNavWidth: leftNavWidth ?? shellLayoutProps?.SidePanelProps?.sizeOpen,
+                        children: children
                     })
                 })
             })
         })
     });
-    if (persistenceManager) return shellProviders;
-    return /*#__PURE__*/ jsx(PersistenceProvider, {
-        persistenceManager: localPersistenceManager,
-        children: shellProviders
-    });
 };
-export { Shell };
+export { Shell, StaticShellLayout };

package/src/workspace-management/LayoutList.js

@@ -1,15 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createElement, useCallback, useMemo } from "react";
-import { IconButton } from "@vuu-ui/vuu-ui-controls";
 import { ListBox, Option } from "@salt-ds/core";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
-import { LayoutTile } from "./LayoutTile.js";
 import { useWorkspace } from "./WorkspaceProvider.js";
-import { useLayouts } from "../feature-and-layout-provider/index.js";
-import { layoutFromJson, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import LayoutList from "./LayoutList.css";
 const classBase = "vuuLayoutList";
 const NO_SELECTION = [];
@@ -20,108 +15,73 @@ const LayoutList_LayoutList = ({ className, title, ...htmlAttributes })=>{
         css: LayoutList,
         window: targetWindow
     });
-    const { layoutMetadata, loadLayoutById } = useWorkspace();
-    const { systemLayouts } = useLayouts();
-    const handleLoadLayout = useCallback((layoutId)=>{
-        if (layoutId) loadLayoutById(layoutId);
-    }, [
-        loadLayoutById
-    ]);
-    const dispatch = useLayoutProviderDispatch();
-    const handleLoadSysLayout = (layoutId, layoutJSON)=>{
-        if (layoutJSON) dispatch({
-            type: "add",
-            path: `#${VuuShellLocation.Workspace}`,
-            component: layoutFromJson(layoutJSON, "0")
-        });
-        else throw Error("layoutJSON is required for system layouts");
-    };
-    const layoutsByGroup = layoutMetadata.reduce((acc, cur)=>{
-        if (acc[cur.group]) return {
-            ...acc,
-            [cur.group]: [
-                ...acc[cur.group],
-                cur
-            ]
-        };
-        return {
-            ...acc,
-            [cur.group]: [
-                cur
-            ]
-        };
-    }, {});
-    let sysContent = [];
-    if (systemLayouts) sysContent = [
-        /*#__PURE__*/ jsxs("div", {
-            className: `${classBase}-group`,
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: `${classBase}-groupHeader`,
-                    children: "System Layout"
-                }),
-                /*#__PURE__*/ jsx(ListBox, {
-                    selected: NO_SELECTION,
-                    children: systemLayouts.map((layout)=>/*#__PURE__*/ jsx(Option, {
-                            value: layout,
-                            children: /*#__PURE__*/ createElement(LayoutTile, {
-                                ...htmlAttributes,
-                                key: layout.id,
-                                metadata: layout,
-                                onLoadLayout: handleLoadSysLayout
-                            })
-                        }, layout.id))
-                })
-            ]
-        }, 0)
-    ];
-    const content = useMemo(()=>Object.entries(layoutsByGroup).map(([heading, layoutMetadata], index)=>/*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-group`,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-groupHeader`,
-                        children: heading
-                    }),
-                    /*#__PURE__*/ jsx(ListBox, {
-                        selected: NO_SELECTION,
-                        children: layoutMetadata.map((layout)=>/*#__PURE__*/ jsxs(Option, {
-                                value: layout,
-                                children: [
-                                    /*#__PURE__*/ createElement(LayoutTile, {
-                                        ...htmlAttributes,
-                                        key: layout.id,
-                                        metadata: layout,
-                                        onLoadLayout: handleLoadLayout
-                                    }),
-                                    /*#__PURE__*/ jsx(IconButton, {
-                                        className: `${classBase}-menu`,
-                                        "data-embedded": true,
-                                        icon: "more-vert",
-                                        appearance: "transparent",
-                                        sentiment: "neutral"
-                                    })
-                                ]
-                            }, layout.id))
-                    })
-                ]
-            }, index)), [
-        handleLoadLayout,
-        htmlAttributes,
-        layoutsByGroup
-    ]);
+    const { deleteNamedWorkspace, namedWorkspaces, openNamedWorkspace, openSystemWorkspace, status, systemWorkspaces } = useWorkspace();
     return /*#__PURE__*/ jsxs("div", {
         ...htmlAttributes,
-        className: clsx(classBase, "vuuScrollable"),
+        className: clsx(classBase, className, "vuuScrollable"),
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-header`,
                 children: title
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsxs("div", {
                 className: `${classBase}-content`,
                 children: [
-                    sysContent,
-                    ...content
+                    "loading" === status ? /*#__PURE__*/ jsx("div", {
+                        role: "status",
+                        children: "Loading layouts…"
+                    }) : null,
+                    systemWorkspaces.length > 0 ? /*#__PURE__*/ jsxs("div", {
+                        className: `${classBase}-group`,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: `${classBase}-groupHeader`,
+                                children: "System Layouts"
+                            }),
+                            /*#__PURE__*/ jsx(ListBox, {
+                                selected: NO_SELECTION,
+                                children: systemWorkspaces.map((definition)=>/*#__PURE__*/ jsx(Option, {
+                                        value: definition.id,
+                                        children: /*#__PURE__*/ jsx("button", {
+                                            onClick: ()=>void openSystemWorkspace(definition),
+                                            type: "button",
+                                            children: definition.name
+                                        })
+                                    }, definition.id))
+                            })
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ jsxs("div", {
+                        className: `${classBase}-group`,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: `${classBase}-groupHeader`,
+                                children: "My Layouts"
+                            }),
+                            0 === namedWorkspaces.length && "loading" !== status ? /*#__PURE__*/ jsx("div", {
+                                children: "No saved workspaces"
+                            }) : /*#__PURE__*/ jsx(ListBox, {
+                                selected: NO_SELECTION,
+                                children: namedWorkspaces.map((definition)=>/*#__PURE__*/ jsxs(Option, {
+                                        value: definition.id,
+                                        children: [
+                                            /*#__PURE__*/ jsx("button", {
+                                                onClick: ()=>void openNamedWorkspace(definition.id),
+                                                type: "button",
+                                                children: definition.name
+                                            }),
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                "aria-label": `Delete ${definition.name}`,
+                                                appearance: "transparent",
+                                                icon: "delete",
+                                                onClick: ()=>void deleteNamedWorkspace(definition.id),
+                                                sentiment: "neutral"
+                                            })
+                                        ]
+                                    }, definition.id))
+                            })
+                        ]
+                    })
                 ]
             })
         ]

package/src/workspace-management/SaveLayoutPanel.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ComboBox, FormField, FormFieldLabel, Input, Option, Text } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { useAuthenticatedUser } from "@vuu-ui/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { takeScreenshot } from "./screenshot-utils.js";
 import SaveLayoutPanel from "./SaveLayoutPanel.css";
-import { useApplicationUser } from "../application-provider/index.js";
 const classBase = "vuuSaveLayoutPanel";
 const groups = [
     "Group 1",
@@ -26,7 +26,7 @@ const SaveLayoutPanel_SaveLayoutPanel = (props)=>{
     const [group, setGroup] = useState("");
     const [screenshot, setScreenshot] = useState();
     const [screenshotErrorMessage, setScreenshotErrorMessage] = useState();
-    const { username } = useApplicationUser();
+    const { userName } = useAuthenticatedUser();
     useEffect(()=>{
         if (componentId) takeScreenshot(document.getElementById(componentId)).then((screenshot)=>{
             setScreenshot(screenshot);
@@ -41,7 +41,7 @@ const SaveLayoutPanel_SaveLayoutPanel = (props)=>{
             name: layoutName,
             group,
             screenshot: screenshot ?? "",
-            user: username
+            user: userName
         });
     };
     const screenshotContent = useMemo(()=>{

package/src/workspace-management/WorkspaceController.js

@@ -0,0 +1,73 @@
+import { GridLayoutDocumentController } from "@heswell/grid-layout";
+import { WorkspacePersistentStateStore } from "./WorkspacePersistentState.js";
+import { WorkspaceRepository } from "./WorkspaceRepository.js";
+import { WORKSPACE_SNAPSHOT_VERSION } from "./workspace-schemas.js";
+class WorkspaceController {
+    definitionId;
+    documentController;
+    instanceId;
+    name;
+    persistentState;
+    renderers;
+    repository;
+    settingsCodecs;
+    #disposed = false;
+    #savingStructure = false;
+    #onError;
+    #unsubscribe;
+    constructor(options){
+        this.definitionId = options.definitionId;
+        this.instanceId = options.instanceId;
+        this.name = options.name;
+        this.renderers = options.renderers;
+        this.settingsCodecs = options.settingsCodecs;
+        this.#onError = options.onError;
+        this.repository = new WorkspaceRepository(options.service, options.instanceId, void 0 === options.revision ? void 0 : {
+            revision: options.revision,
+            snapshot: options.snapshot,
+            version: 1,
+            workspaceInstanceId: options.instanceId
+        });
+        this.persistentState = new WorkspacePersistentStateStore(options.snapshot.componentState);
+        this.documentController = new GridLayoutDocumentController(options.snapshot.layout);
+        this.#unsubscribe = this.persistentState.subscribe(()=>{
+            if (!this.#savingStructure) this.#save();
+        });
+    }
+    get snapshot() {
+        const layout = this.documentController.getSnapshot();
+        if (!layout) throw new Error(`Workspace "${this.instanceId}" has no layout document`);
+        return {
+            version: WORKSPACE_SNAPSHOT_VERSION,
+            layout,
+            componentState: this.persistentState.getSnapshot()
+        };
+    }
+    handleDocumentChange = (document, change)=>{
+        if (this.#disposed) return;
+        this.documentController.replace(document);
+        this.#savingStructure = true;
+        try {
+            for (const componentId of change.removedComponentInstanceIds)this.persistentState.purge(componentId);
+        } finally{
+            this.#savingStructure = false;
+        }
+        this.#save();
+    };
+    rename(name) {
+        this.name = name;
+    }
+    dispose() {
+        if (!this.#disposed) {
+            this.#disposed = true;
+            this.#unsubscribe();
+        }
+        return this.repository.dispose();
+    }
+    #save() {
+        if (!this.#disposed) this.repository.save(this.snapshot).catch((cause)=>{
+            if (!this.#disposed) this.#onError(cause instanceof Error ? cause : new Error("Workspace snapshot persistence failed"));
+        });
+    }
+}
+export { WorkspaceController };