Merge branch 'main' of https://github.com/ScottLogic/finos-vuu into s…

…ync-SL-main

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

@@ -6,6 +6,7 @@ export * from "./DraggableLayout";
 export * from "./flexbox";
 export { Action } from "./layout-action";
 export * from "./layout-header";
+export * from "./layout-persistence";
 export * from "./layout-provider";
 export * from "./layout-reducer";
 export * from "./layout-view";

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

@@ -0,0 +1,46 @@
+import { LayoutJSON } from "@finos/vuu-layout";
+import { LayoutMetadata } from "@finos/vuu-shell";
+
+export interface LayoutPersistenceManager {
+  /**
+   * Saves a new layout and its corresponding metadata
+   *
+   * @param metadata - Metadata about the layout to be saved
+   * @param layout   - Full JSON representation of the layout to be saved
+   *
+   * @returns Unique identifier assigned to the saved layout
+   */
+  createLayout: (metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON) => string;
+
+  /**
+   * Overwrites an existing layout and its corresponding metadata with the provided infromation
+   *
+   * @param id       - Unique identifier of the existing layout to be updated
+   * @param metadata - Metadata describing the new layout to overwrite with
+   * @param layout   - Full JSON representation of the new layout to overwrite with
+   */
+  updateLayout: (id: string, metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON) => void;
+
+  /**
+   * Deletes an existing layout and its corresponding metadata
+   *
+   * @param id - Unique identifier of the existing layout to be deleted
+   */
+  deleteLayout: (id: string) => void;
+
+  /**
+   * Retrieves an existing layout
+   *
+   * @param id - Unique identifier of the existing layout to be retrieved
+   *
+   * @returns Full JSON representation of the layout corresponding to the provided ID
+   */
+  loadLayout: (id: string) => LayoutJSON;
+
+  /**
+   * Retrieves metadata for all existing layouts
+   *
+   * @returns an array of all persisted layout metadata
+   */
+  loadMetadata: () => LayoutMetadata[];
+}

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

@@ -0,0 +1,79 @@
+import { Layout, LayoutMetadata } from "@finos/vuu-shell";
+import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
+
+import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
+import { getUniqueId } from "@finos/vuu-utils";
+
+const metadataSaveLocation = "layouts/metadata";
+const layoutsSaveLocation = "layouts/layouts";
+
+export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
+  createLayout(metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON): string {
+    console.log(`Saving layout as ${metadata.name} to group ${metadata.group}...`);
+
+    const existingLayouts = this.loadLayouts();
+    const existingMetadata = this.loadMetadata();
+
+    const id = getUniqueId();
+
+    this.appendAndPersist(id, metadata, layout, existingLayouts, existingMetadata);
+
+    return id;
+  }
+
+  updateLayout(id: string, metadata: Omit<LayoutMetadata, "id">, newLayoutJson: LayoutJSON): void {
+    const existingLayouts = this.loadLayouts().filter(layout => layout.id !== id);
+    const existingMetadata = this.loadMetadata().filter(metadata => metadata.id !== id);
+
+    this.appendAndPersist(id, metadata, newLayoutJson, existingLayouts, existingMetadata);
+  }
+
+  deleteLayout(id: string): void {
+    const layouts = this.loadLayouts().filter(layout => layout.id !== id);
+    const metadata = this.loadMetadata().filter(metadata => metadata.id !== id);
+
+    this.saveLayoutsWithMetadata(layouts, metadata);
+  }
+
+  loadLayout(id: string): LayoutJSON {
+    const layout = this.loadLayouts().filter(layout => layout.id === id);
+
+    switch (layout.length) {
+      case 1: {
+        return layout[0].json;
+      }
+      case 0: {
+        console.log(`WARNING: no layout exists for ID "${id}"; returning empty layout`);
+        return {} as LayoutJSON;
+      }
+      default: {
+        console.log(`WARNING: multiple layouts exist for ID "${id}"; returning first instance`)
+        return layout[0].json;
+      }
+    }
+  }
+
+  loadMetadata(): LayoutMetadata[] {
+    return getLocalEntity<LayoutMetadata[]>(metadataSaveLocation) || [];
+  }
+
+  private loadLayouts(): Layout[] {
+    return getLocalEntity<Layout[]>(layoutsSaveLocation) || [];
+  }
+
+  private appendAndPersist(newId: string,
+                           newMetadata: Omit<LayoutMetadata, "id">,
+                           newLayout: LayoutJSON,
+                           existingLayouts: Layout[],
+                           existingMetadata: LayoutMetadata[]) {
+    existingLayouts.push({id: newId, json: newLayout});
+    existingMetadata.push({id: newId, ...newMetadata});
+
+    this.saveLayoutsWithMetadata(existingLayouts, existingMetadata);
+  }
+
+  private saveLayoutsWithMetadata(layouts: Layout[], metadata: LayoutMetadata[]): void {
+    saveLocalEntity<Layout[]>(layoutsSaveLocation, layouts);
+    saveLocalEntity<LayoutMetadata[]>(metadataSaveLocation, metadata);
+  }
+}

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

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

vuu-ui/packages/vuu-popups/src/dialog/Dialog.css

@@ -36,4 +36,5 @@
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 16px;
   font-weight: 600;
+  font-family: Nunito Sans Regular;
 }

vuu-ui/packages/vuu-popups/src/menu/MenuList.css

@@ -18,7 +18,6 @@
 
   background-clip: padding-box;
   background-color: white;
-  border-style: var(--vuuMenuList-borderStyle, none);
   font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
   font-weight: var(--salt-typography-fontWeight-medium);
   list-style: none;

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

@@ -1,21 +1,21 @@
+.vuuLayoutList {
+    align-self: stretch;
+}
+
 .vuuLayoutList-header {
     color: var(--light-text-primary, #15171B);
     font-weight: 700;
     letter-spacing: 0.48px;
     text-transform: uppercase;
     display: flex;
     padding: 16px 0px;
-    align-items: center;
-    align-self: stretch;
     border-bottom: 1px solid rgba(119, 124, 148, 0.10);
     line-height: 200%;
 }
 
 .vuuLayoutList-groupName {
     display: flex;
     padding-top: 24px;
-    align-items: center;
-    align-self: stretch;
     color: var(--light-text-secondary, #606477);
     font-weight: 700;
     letter-spacing: 0.48px;
@@ -27,7 +27,6 @@
     align-items: center;
     gap: 8px;
     padding: 8px 0px;
-    align-self: stretch;
     flex: 1 1 auto;
     cursor: pointer;
 }

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

@@ -12,14 +12,12 @@ type LayoutGroups = {
 const classBase = "vuuLayoutList";
 
 export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
-    const { layouts } = useLayoutManager();
-
-    const layoutMetadata = layouts.map(layout => layout.metadata)
+    const { layoutMetadata } = useLayoutManager();
 
     const handleLoadLayout = (layoutId?: string) => {
         // TODO load layout
         console.log("loading layout with id", layoutId)
-        console.log("json:", layouts.find(layout => layout.metadata.id === layoutId))
+        console.log("json:", layoutMetadata.find(metadata => metadata.id === layoutId))
     }
 
     const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {

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

@@ -38,6 +38,7 @@
 
 .saveLayoutPanel-inputText {
   color: var(--light-text-secondary, #606477);
+  font-family: Nunito Sans Regular;
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 12px;
   font-weight: 400;

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

@@ -71,14 +71,6 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
           <FormField className={formField}>
             <FormFieldLabel>Group</FormFieldLabel>
             <ComboBox
-              ListProps={{
-                style: {
-                  zIndex: 10000,
-                  border: "1px solid #777C94",
-                  borderRadius: 10,
-                  boxSizing: "border-box"
-                }
-              }}
               source={groups}
               allowFreeText={true}
               InputProps={{

vuu-ui/packages/vuu-shell/src/layout-management/layoutTypes.ts

@@ -1,15 +1,15 @@
 import { LayoutJSON } from "@finos/vuu-layout";
 
 export type LayoutMetadata = {
+  id: string;
   name: string;
   group: string;
   screenshot: string;
   user: string;
   date: string;
-  id: string;
 };
 
 export type Layout = {
+  id: string,
   json: LayoutJSON;
-  metadata: LayoutMetadata;
 };

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

@@ -1,47 +1,46 @@
 import React, { useState, useCallback, useContext, useEffect } from "react";
-import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
-import { LayoutJSON } from "@finos/vuu-layout";
-import { getUniqueId } from "@finos/vuu-utils";
-import { LayoutMetadata, Layout } from "./layoutTypes";
+import { getLocalEntity } from "@finos/vuu-filters";
+import { LayoutJSON, LocalLayoutPersistenceManager } from "@finos/vuu-layout";
+import { LayoutMetadata } from "./layoutTypes";
+
+const persistenceManager = new LocalLayoutPersistenceManager();
 
 export const LayoutManagementContext = React.createContext<{
-  layouts: Layout[],
+  layoutMetadata: LayoutMetadata[],
   saveLayout: (n: Omit<LayoutMetadata, "id">) => void
-}>({ layouts: [], saveLayout: () => { } })
-
-export const LayoutManagementProvider = (props: { children: JSX.Element | JSX.Element[] }) => {
+}>({ layoutMetadata: [], saveLayout: () => { } })
 
-  const [layouts, setLayouts] = useState<Layout[]>([])
+export const LayoutManagementProvider = (props: {
+    children: JSX.Element | JSX.Element[]
+  }) => {
+  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);
 
   useEffect(() => {
-    const layouts = getLocalEntity<Layout[]>("layouts")
-    setLayouts(layouts || [])
+    const loadedMetadata = persistenceManager.loadMetadata();
+    setLayoutMetadata(loadedMetadata || [])
   }, [])
 
-  useEffect(() => {
-    saveLocalEntity<Layout[]>("layouts", layouts)
-  }, [layouts])
-
   const saveLayout = useCallback((metadata: Omit<LayoutMetadata, "id">) => {
-    const json = getLocalEntity<LayoutJSON>("api/vui")
+    const json = getLocalEntity<LayoutJSON>("api/vui");
+
     if (json) {
-      setLayouts(prev =>
-        [
-          ...prev,
-          {
-            metadata: {
-              ...metadata,
-              id: getUniqueId()
-            },
-            json
-          }
-        ]
-      )
+      // Persist layouts
+      const generatedId = persistenceManager.createLayout(metadata, json);
+
+      // Update state
+      const newMetadata: LayoutMetadata = {
+        ...metadata,
+        id: generatedId
+      };
+
+      setLayoutMetadata(prev => [...prev, newMetadata]);
     }
   }, [])
 
+  // TODO: add loadLayout function
+
   return (
-    <LayoutManagementContext.Provider value={{ layouts, saveLayout }} >
+    <LayoutManagementContext.Provider value={{ layoutMetadata, saveLayout }} >
       {props.children}
     </LayoutManagementContext.Provider>
   )

vuu-ui/packages/vuu-theme/css/characteristics/focused.css

@@ -1,21 +1,7 @@
 .vuu-theme {
-  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
-  --salt-focused-outlineStyle: dotted;
-  --salt-focused-outlineWidth: 2px;
-  --salt-focused-outlineInset: 0;
-  --salt-focused-outlineOffset: 0;
-
-  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); /* CSS shortcut token: not in Figma */
+  --vuu-editable-borderColor-active: var(--editable-border-active, #6D18BD);
 }
 
-.saltFocusVisible:after,
-.focused:focus:after,
-.focused:focus-visible:after {
-  content: "";
-  inset: var(--salt-focused-outlineInset);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  position: absolute;
-}
+.saltInput-focused {
+  border-color: var(--vuu-editable-borderColor-active) !important;
+}

vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css

@@ -1,4 +1,5 @@
 .vuuCheckbox {
+  --vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);
   display: flex;
   height: 24px;
   align-items: center;

vuu-ui/packages/vuu-ui-controls/src/list/List.css

@@ -13,15 +13,17 @@
   --vuuMeasuredContainer-height: var(--computed-list-height);
 
   background: var(--list-background);
-  border-color: var(--salt-container-primary-borderColor);
-  border-style: var(--list-borderStyle);
-  border-width: var(--list-borderWidth);
   height: var(--saltList-height, var(--list-height));
   max-height: var(--list-maxHeight);
   outline: none;
   position: relative;
   user-select: none;
   width: var(--saltList-width, auto);
+  padding: 0 1px;
+}
+
+.vuuList-contentSized {
+  box-sizing: content-box;
 }
 
 .vuuList-contentSized {

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

@@ -108,9 +108,6 @@ const ShellWithNewTheme = () => {
 
   const handleSave = useCallback(
     (layoutMetadata: Omit<LayoutMetadata, "id">) => {
-      console.log(
-        `Save layout as ${layoutMetadata.name} to group ${layoutMetadata.group}`
-      );
       saveLayout(layoutMetadata);
       setDialogContent(undefined);
     },
@@ -252,7 +249,6 @@ const ShellWithNewTheme = () => {
           style={{ maxHeight: 500, borderColor: "#6d188b" }}
           title={"Save Layout"}
           hideCloseButton
-          headerProps={{ className: "dialogHeader" }}
         >
           {dialogContent}
         </Dialog>