Revise Workspace and Layout

finos · Aug 14, 2024 · d1a7f12 · d1a7f12
1 parent d7b8cf7
commit d1a7f12
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 32 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProvider.tsx b/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProvider.tsx
@@ -231,16 +231,10 @@ export const useLayoutCreateNewChild = () => {
     () =>
       function createNewChild() {
         if (layoutPlaceholderJSON) {
-          const placeholder = (layoutPlaceholderJSON as unknown as LayoutJSON)
-            .props
-            ? (layoutPlaceholderJSON as unknown as LayoutJSON)
-            : (layoutPlaceholderJSON as unknown as LayoutJSON[])[
-                (layoutPlaceholderJSON as unknown as LayoutJSON[]).length - 1
-              ];
-          const { props } = placeholder;
+          const { props } = layoutPlaceholderJSON;
           return layoutFromJson(
             {
-              ...placeholder,
+              ...layoutPlaceholderJSON,
               props: {
                 ...props,
                 resizeable: true,

diff --git a/vuu-ui/packages/vuu-shell/src/workspace-management/WorkspaceProvider.tsx b/vuu-ui/packages/vuu-shell/src/workspace-management/WorkspaceProvider.tsx
@@ -22,7 +22,7 @@ import {
 const { info } = logger("useLayoutManager");
 
 export type WorkspaceProps = WorkspaceStackProps & {
-  layoutPlaceholderJSON?: LayoutJSON | LayoutJSON[];
+  layoutPlaceholderJSON?: LayoutJSON;
   /**
    * layoutJSON defines the default layout to render on first load and until such time as
    * layout state has been persisted. After that, the persisted state will be rendered.
@@ -42,7 +42,7 @@ export interface WorkspaceProviderProps extends WorkspaceProps {
   /**
    * layoutPlaceholderJSON defines the layout to render when a new workspace layout is created.
    */
-  layoutPlaceholderJSON?: LayoutJSON | LayoutJSON[];
+  layoutPlaceholderJSON?: LayoutJSON;
 }
 
 const ensureLayoutHasTitle = (

diff --git a/vuu-ui/packages/vuu-shell/src/workspace-management/defaultWorkspaceJSON.ts b/vuu-ui/packages/vuu-shell/src/workspace-management/defaultWorkspaceJSON.ts
@@ -33,26 +33,24 @@ export const getStackWorkspaceJSON = (
   StackProps & {
     preserve: boolean;
   }
-> => {
-  return {
-    type: "Stack",
-    id: VuuShellLocation.Workspace,
-    props: {
-      className: `${VuuShellLocation.Workspace}-tabs`,
-      TabstripProps: {
-        allowAddTab: true,
-        allowCloseTab: true,
-        allowRenameTab: true,
-        animateSelectionThumb: false,
-        "aria-label": "Workspace Tabs",
-        location: "workspace-tab",
-        variant: "primary",
-      },
-      preserve: true,
-      active: activeLayoutIndex ?? 0,
+> => ({
+  type: "Stack",
+  id: VuuShellLocation.Workspace,
+  props: {
+    className: `${VuuShellLocation.Workspace}-tabs`,
+    TabstripProps: {
+      allowAddTab: true,
+      allowCloseTab: true,
+      allowRenameTab: true,
+      animateSelectionThumb: false,
+      "aria-label": "Workspace Tabs",
+      location: "workspace-tab",
+      variant: "primary",
     },
-  };
-};
+    preserve: true,
+    active: activeLayoutIndex ?? 0,
+  },
+});
 
 const placeholderLayout: LayoutJSON = {
   props: {

diff --git a/vuu-ui/packages/vuu-utils/src/context-definitions/WorkspaceContext.tsx b/vuu-ui/packages/vuu-utils/src/context-definitions/WorkspaceContext.tsx
@@ -8,7 +8,7 @@ import { LayoutMetadata, LayoutMetadataDto } from "../layout-types";
 
 export interface WorkspaceContextProps {
   layoutMetadata: LayoutMetadata[];
-  layoutPlaceholderJSON?: LayoutJSON | LayoutJSON[];
+  layoutPlaceholderJSON?: LayoutJSON;
   getApplicationSettings: (
     key?: keyof ApplicationSettings
   ) => ApplicationSettings | ApplicationSetting | undefined;

diff --git a/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx
@@ -210,7 +210,16 @@ export const SimpleShellMultiLayouts = () => {
   const persistNothing = useMemo(() => new StaticPersistenceManager({}), []);
 
   const workspaceProps = useMemo<WorkspaceProps>(() => {
-    const placeHolder = [
+    const placeHolder = {
+      type: "Placeholder",
+      props: {
+        "data-testid": "custom-placeholder",
+        style: {
+          background: "yellow",
+        },
+      },
+    };
+    const layouts = [
       {
         type: "Placeholder",
         props: {
@@ -240,7 +249,7 @@ export const SimpleShellMultiLayouts = () => {
       },
     ];
     return {
-      layoutJSON: placeHolder,
+      layoutJSON: layouts,
       layoutPlaceholderJSON: placeHolder,
       activeLayoutIndex: 1,
     };