Merge pull request #58 from ScottLogic/VUU-47-link-layoutProvider-and…

…-layoutManagerProvider

Vuu 47 link layout provider and layout manager provider

.gitignore

@@ -20,6 +20,7 @@ yarn-debug.log*
 yarn-error.log*
 
 /vuu-ui/showcase/src/examples/**/*.js
+/vuu-ui/cypress/screenshots
 
 deployed_apps
 dist

vuu-ui/cypress/e2e/layout-management/screenshot.cy.js

@@ -9,7 +9,7 @@ context("Screenshot", () => {
   // TODO (#VUU24): Improve test alignment with the user flow
   it("Takes a screenshot of the current layout and displays it in the save layout dialog", () => {
     // TODO (#VUU24): Improve selector
-    cy.findByRole("tab", { name: "My Instruments" }).then((tab) => {
+    cy.get("#tab1-tab").then((tab) => {
       cy.wrap(tab).findByRole("button").click();
     });
 

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: () => Promise<LayoutMetadata[]>;
+
+  /**
+   * Retrieves the application layout which includes all layouts on screen
+   *
+   * @returns Full JSON representation of the application layout
+   */
+  loadApplicationLayout: () => Promise<LayoutJSON>;
+
+  /**
+  * Saves the application layout which includes all layouts on screen
+  *   
+  * @param layout - Full JSON representation of the application layout to be saved
+  */
+   saveApplicationLayout: (layout: LayoutJSON) => Promise<void>
 }

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

@@ -1,9 +1,10 @@
 import { Layout, LayoutMetadata, WithId } from "@finos/vuu-shell";
 import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
-
 import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
 import { getUniqueId } from "@finos/vuu-utils";
 
+import { defaultLayout } from "./data";
+
 const metadataSaveLocation = "layouts/metadata";
 const layoutsSaveLocation = "layouts/layouts";
 
@@ -72,10 +73,32 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
   }
 
   loadMetadata(): Promise<LayoutMetadata[]> {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const metadata = getLocalEntity<LayoutMetadata[]>(metadataSaveLocation);
       resolve(metadata || []);
-    })
+    });
+  }
+
+  loadApplicationLayout(): Promise<LayoutJSON> {
+    return new Promise((resolve) => {
+      const applicationLayout = getLocalEntity<LayoutJSON>("api/vui");
+      if (applicationLayout) {
+        resolve(applicationLayout);
+      } else {
+        resolve(defaultLayout);
+      }
+    });
+  }
+
+  saveApplicationLayout(layout: LayoutJSON): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const savedLayout = saveLocalEntity<LayoutJSON>("api/vui", layout);
+      if (savedLayout) {
+        resolve();
+      } else {
+        reject(new Error("Layout failed to save"));
+      }
+    });
   }
 
   private loadLayouts(): Promise<Layout[]> {

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

@@ -1,14 +1,42 @@
-export const warningLayout = {
-    type: "View",
-    props: {
-      style: { height: "calc(100% - 6px)" },
+import { LayoutJSON } from "../layout-reducer";
+
+export const warningLayout: LayoutJSON = {
+  type: "View",
+  props: {
+    style: { height: "calc(100% - 6px)" },
+  },
+  children: [
+    {
+      props: {
+        className: "vuuShell-warningPlaceholder",
+      },
+      type: "Placeholder",
+    },
+  ],
+};
+
+export const defaultLayout: LayoutJSON = {
+  type: "Stack",
+  id: "main-tabs",
+  props: {
+    className: "vuuShell-mainTabs",
+    TabstripProps: {
+      allowAddTab: true,
+      allowRenameTab: true,
+      animateSelectionThumb: false,
+      location: "main-tab",
+      allowCloseTab: true
     },
-    children: [
-      {
-        props: {
-          className: "vuuShell-warningPlaceholder",
-        },
-        type: "Placeholder",
+    preserve: true,
+    active: 0,
+  },
+  children: [
+    {
+      props: {
+        id: "tab1",
+        className: "vuuShell-Placeholder",
       },
-    ],
-  };
+      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-layout/src/layout-reducer/layoutTypes.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ReactElement } from "react";
+import { CSSProperties, ReactElement } from "react";
 import { DragDropRect, DragInstructions } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
 import { ContributionLocation } from "../layout-view";
@@ -26,6 +26,7 @@ export interface LayoutJSON extends WithType {
   props?: { [key: string]: any };
   state?: any;
   type: string;
+  style?: CSSProperties;
 }
 
 export interface WithActive {

vuu-ui/packages/vuu-shell/src/index.ts

@@ -1,7 +1,6 @@
 export * from "./connection-status";
 export * from "./density-switch";
 export * from "./feature";
-export * from "./layout-config";
 export * from "./layout-management";
 export * from "./left-nav";
 export * from "./login";

vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css

@@ -1,5 +1,7 @@
 .vuuLayoutList {
     align-self: stretch;
+    height: 100%;
+    overflow: hidden;
 }
 
 .vuuLayoutList-header {

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

@@ -12,12 +12,12 @@ type LayoutGroups = {
 const classBase = "vuuLayoutList";
 
 export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
-    const { layoutMetadata } = useLayoutManager();
+    const { layoutMetadata, loadLayoutById } = useLayoutManager();
 
     const handleLoadLayout = (layoutId?: string) => {
-        // TODO load layout
-        console.log("loading layout with id", layoutId)
-        console.log("json:", layoutMetadata.find(metadata => metadata.id === layoutId))
+        if (layoutId) {
+            loadLayoutById(layoutId)
+        }
     }
 
     const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {
@@ -39,12 +39,12 @@ export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
             <List<[string, LayoutMetadata[]]>
                 height='fit-content'
                 source={Object.entries(layoutsByGroup)}
-                ListItem={({ item }) => <>
-                    <div className={`${classBase}-groupName`}>{item?.[0]}</div>
-                    <List<LayoutMetadata>
-                        height='fit-content'
-                        source={item?.[1]}
-                        ListItem={({ item: layout }) =>
+                ListItem={({ item }) => {
+                    if (!item) return <></>
+                    const [groupName, layouts] = item
+                    return <>
+                        <div className={`${classBase}-groupName`}>{groupName}</div>
+                        {layouts.map(layout =>
                             <div
                                 className={`${classBase}-layoutContainer`}
                                 key={layout?.id}
@@ -58,9 +58,9 @@ export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
                                     </div>
                                 </div>
                             </div>
-                        }
-                    />
-                </>
+                        )}
+                    </>
+                }
                 }
             />
         </div>