Merge pull request #35 from ScottLogic/feature/VUU-33-Layout-Manager-…

…Context VUU-33 add context for layouts
ScottLogic · Sep 6, 2023 · f7ceec0 · f7ceec0
2 parents 5c5fc6c + 82f0107
commit f7ceec0
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 100 deletions.
diff --git a/vuu-ui/packages/vuu-filters/src/index.ts b/vuu-ui/packages/vuu-filters/src/index.ts
@@ -2,3 +2,4 @@ export * from "./filter-bar";
 export * from "./filter-clause";
 export * from "./filter-input";
 export * from "./filter-utils";
+export * from "./local-config";
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -29,6 +29,7 @@
     padding: 8px 0px;
     align-self: stretch;
     flex: 1 1 auto;
+    cursor: pointer;
 }
 
 .vuuLayoutList-layoutName {

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx
@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { List } from '@finos/vuu-ui-controls';
 import { LayoutMetadata } from './layoutTypes';
+import { useLayoutManager } from './useLayoutManager';
 
 import './LayoutList.css'
 
@@ -10,10 +11,18 @@ type LayoutGroups = {
 
 const classBase = "vuuLayoutList";
 
-export const LayoutsList = (props: { layouts: LayoutMetadata[] } & HTMLAttributes<HTMLDivElement>) => {
-    const { layouts, ...otherProps } = props;
+export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
+    const { layouts } = useLayoutManager();
 
-    const layoutsByGroup = layouts.reduce((acc: LayoutGroups, cur) => {
+    const layoutMetadata = layouts.map(layout => layout.metadata)
+
+    const handleLoadLayout = (layoutId?: string) => {
+        // TODO load layout   
+        console.log("loading layout with id", layoutId)
+        console.log("json:", layouts.find(layout => layout.metadata.id === layoutId))
+    }
+
+    const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {
         if (acc[cur.group]) {
             return {
                 ...acc,
@@ -27,7 +36,7 @@ export const LayoutsList = (props: { layouts: LayoutMetadata[] } & HTMLAttribute
     }, {})
 
     return (
-        <div className={classBase} {...otherProps}>
+        <div className={classBase} {...props}>
             <div className={`${classBase}-header`}>My Layouts</div>
             <List<[string, LayoutMetadata[]]>
                 height='fit-content'
@@ -41,6 +50,7 @@ export const LayoutsList = (props: { layouts: LayoutMetadata[] } & HTMLAttribute
                             <div
                                 className={`${classBase}-layoutContainer`}
                                 key={layout?.id}
+                                onClick={() => handleLoadLayout(layout?.id)}
                             >
                                 <img className={`${classBase}-screenshot`} src={layout?.screenshot} />
                                 <div>

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -1,6 +1,8 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { Input, Button, FormField, FormFieldLabel, Text } from "@salt-ds/core";
-import { ComboBox, Checkbox, RadioButton, RadioIcon } from "@finos/vuu-ui-controls";
+import { ComboBox, Checkbox, RadioButton } from "@finos/vuu-ui-controls";
+import { formatDate, takeScreenshot } from "@finos/vuu-utils";
+import { LayoutMetadata } from "./layoutTypes";
 
 import "./SaveLayoutPanel.css";
 
@@ -30,17 +32,36 @@ type RadioValue = typeof radioValues[number];
 
 type SaveLayoutPanelProps = {
   onCancel: () => void;
-  onSave: (layoutName: string, group: string, checkValues: string[], radioValue: string) => void;
-  screenshot: string | undefined;
+  onSave: (layoutMetadata: Omit<LayoutMetadata, "id">) => void;
+  componentId?: string
 };
 
 export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
-  const { onCancel, onSave, screenshot } = props;
+  const { onCancel, onSave, componentId } = props;
 
   const [layoutName, setLayoutName] = useState<string>("");
   const [group, setGroup] = useState<string>("");
   const [checkValues, setCheckValues] = useState<string[]>([]);
   const [radioValue, setRadioValue] = useState<RadioValue>(radioValues[0]);
+  const [screenshot, setScreenshot] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (componentId) {
+      takeScreenshot(document.getElementById(componentId) as HTMLElement).then(screenshot =>
+        setScreenshot(screenshot)
+      )
+    }
+  }, [])
+
+  const handleSubmit = () => {
+    onSave({
+      name: layoutName,
+      group,
+      screenshot: screenshot ?? "",
+      user: "User",
+      date: formatDate(new Date(), "dd.mm.yyyy")
+    })
+  }
 
   return (
     <div className={`${classBase}-panelContainer`}>
@@ -118,14 +139,17 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
         </div>
       </div>
       <div className={`${classBase}-buttonsContainer`}>
-        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>
-          Cancel
+        <Button
+          className={`${classBase}-cancelButton`}
+          onClick={onCancel}
+        >Cancel
         </Button>
         <Button
           className={`${classBase}-saveButton`}
-          onClick={() => onSave(layoutName, group, checkValues, radioValue)}
-          disabled={layoutName === "" || group === ""}>
-          Save
+          onClick={handleSubmit}
+          disabled={layoutName === "" || group === ""}
+        >Save
+
         </Button>
       </div>
     </div>

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/index.ts b/vuu-ui/packages/vuu-shell/src/layout-management/index.ts
@@ -1,3 +1,4 @@
 export * from "./SaveLayoutPanel";
-export * from "./LayoutList";
-export * from "./layoutTypes";
+export * from "./LayoutList"
+export * from "./layoutTypes"
+export * from "./useLayoutManager"
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/layoutTypes.ts b/vuu-ui/packages/vuu-shell/src/layout-management/layoutTypes.ts
@@ -1,8 +1,15 @@
+import { LayoutJSON } from "@finos/vuu-layout";
+
 export type LayoutMetadata = {
-    name: string,
-    group: string,
-    screenshot: string,
-    user: string,
-    date: string,
-    id: string
-}
+  name: string;
+  group: string;
+  screenshot: string;
+  user: string;
+  date: string;
+  id: string;
+};
+
+export type Layout = {
+  json: LayoutJSON;
+  metadata: LayoutMetadata;
+};
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -0,0 +1,50 @@
+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";
+
+export const LayoutManagementContext = React.createContext<{
+  layouts: Layout[],
+  saveLayout: (n: Omit<LayoutMetadata, "id">) => void
+}>({ layouts: [], saveLayout: () => { } })
+
+export const LayoutManagementProvider = (props: { children: JSX.Element | JSX.Element[] }) => {
+
+  const [layouts, setLayouts] = useState<Layout[]>([])
+
+  useEffect(() => {
+    const layouts = getLocalEntity<Layout[]>("layouts")
+    setLayouts(layouts || [])
+  }, [])
+
+  useEffect(() => {
+    saveLocalEntity<Layout[]>("layouts", layouts)
+  }, [layouts])
+
+  const saveLayout = useCallback((metadata: Omit<LayoutMetadata, "id">) => {
+    const json = getLocalEntity<LayoutJSON>("api/vui")
+    if (json) {
+      setLayouts(prev =>
+        [
+          ...prev,
+          {
+            metadata: {
+              ...metadata,
+              id: getUniqueId()
+            },
+            json
+          }
+        ]
+      )
+    }
+  }, [])
+
+  return (
+    <LayoutManagementContext.Provider value={{ layouts, saveLayout }} >
+      {props.children}
+    </LayoutManagementContext.Provider>
+  )
+}
+
+export const useLayoutManager = () => useContext(LayoutManagementContext);
diff --git a/vuu-ui/packages/vuu-utils/src/index.ts b/vuu-ui/packages/vuu-utils/src/index.ts
@@ -30,3 +30,4 @@ export * from "./selection-utils";
 export * from "./sort-utils";
 export * from "./text-utils";
 export * from "./url-utils";
+export * from "./screenshot-utils"
diff --git a/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts b/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts
@@ -6,7 +6,6 @@ import { toPng } from "html-to-image";
  * @returns Base64 encoded image url
  */
 export async function takeScreenshot(node: HTMLElement) {
-  localStorage.removeItem("layout-screenshot");
 
   const screenshot = await toPng(node, { cacheBust: true })
     .then((dataUrl) => {
@@ -20,7 +19,5 @@ export async function takeScreenshot(node: HTMLElement) {
   if (!screenshot) {
     return undefined;
   }
-
-  localStorage.setItem("layout-screenshot", screenshot);
   return screenshot;
 }
diff --git a/vuu-ui/packages/vuu-utils/test/screenshot-utils.test.ts b/vuu-ui/packages/vuu-utils/test/screenshot-utils.test.ts
@@ -6,11 +6,8 @@ import { describe, expect, it, vi } from "vitest";
  * @vitest-environment happy-dom
  */
 
-describe("screenshot-utils", () => {
-  vi.mock("html-to-image");
-
-  it("takes a screenshot and saves it to local storage", async () => {
-    const setItem = vi.spyOn(window.localStorage, "setItem");
+describe("takeScreenshot", () => {
+  it("returns a string when toPng() promise is resolved", async () => {
     const placeholderImage =
       "data:image/png;base64,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";
 
@@ -20,15 +17,22 @@ describe("screenshot-utils", () => {
 
     const node = document.createElement("div");
 
-    node.style.backgroundColor = "red";
-    node.style.border = "1px solid black";
-    node.style.width = "100px";
-    node.style.height = "100px";
+    const screenshot = await takeScreenshot(node);
+
+    expect(typeof screenshot).toEqual("string");
+  });
+
+  it("returns undefined when toPng() promise is rejected", async () => {
+    // We need to mock the html-to-image package because the web API operations it relies on (e.g. canvas.toDataUrl) are not available in the test environment
+    const htmlToImage = await import("html-to-image");
+    htmlToImage.toPng = vi.fn().mockRejectedValue({});
+
+    const node = document.createElement("div");
 
     const screenshot = await takeScreenshot(node);
 
-    expect(screenshot).toBeDefined();
-    expect(setItem).toHaveBeenCalledWith("layout-screenshot", screenshot);
-    expect(localStorage.getItem("layout-screenshot")).toEqual(screenshot);
+    console.log(screenshot);
+
+    expect(screenshot).toBeUndefined();
   });
 });
diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx
@@ -1,12 +1,18 @@
-import { LeftNav, SaveLayoutPanel, Shell } from "@finos/vuu-shell";
 import {
   CSSProperties,
   ReactElement,
   useCallback,
   useMemo,
   useState,
 } from "react";
-import { AutoTableNext } from "../Table/TableNext.examples";
+import {
+  LayoutMetadata,
+  LeftNav,
+  SaveLayoutPanel,
+  Shell,
+  LayoutManagementProvider,
+  useLayoutManager
+} from "@finos/vuu-shell";
 import { registerComponent } from "@finos/vuu-layout";
 import { TableSettingsPanel } from "@finos/vuu-table-extras";
 import {
@@ -18,44 +24,31 @@ import {
   ContextMenuItemDescriptor,
   MenuActionHandler,
   MenuBuilder,
-} from "packages/vuu-data-types";
+} from "@finos/vuu-data-types";
+import { AutoTableNext } from "../Table/TableNext.examples";
 
 import "./NewTheme.examples.css";
-import { takeScreenshot } from "@finos/vuu-utils/src/screenshot-utils";
-
 registerComponent("AutoTableNext", AutoTableNext, "view");
 registerComponent("TableSettings", TableSettingsPanel, "view");
 
 const user = { username: "test-user", token: "test-token" };
 
 let displaySequence = 1;
 
-export const ShellWithNewTheme = () => {
+const ShellWithNewTheme = () => {
   const [dialogContent, setDialogContent] = useState<ReactElement>();
 
   const handleCloseDialog = useCallback(() => {
     setDialogContent(undefined);
   }, []);
 
-  const handleSave = useCallback(
-    (
-      layoutName: string,
-      layoutGroup: string,
-      checkValues: string[],
-      radioValues: string
-    ) => {
-      console.log(
-        `Save Layout as ${layoutName} to group ${layoutGroup} with settings [${checkValues}] and ${radioValues}`
-      );
-    },
-    []
-  );
+  const { saveLayout } = useLayoutManager();
 
-  const handleScreenshot = async (nodeId: string) => {
-    await takeScreenshot(document.getElementById(nodeId) as HTMLElement);
-
-    return localStorage.getItem("layout-screenshot") || undefined;
-  };
+  const handleSave = useCallback((layoutMetadata: Omit<LayoutMetadata, "id">) => {
+    console.log(`Save layout as ${layoutMetadata.name} to group ${layoutMetadata.group}`);
+    saveLayout(layoutMetadata)
+    setDialogContent(undefined)
+  }, []);
 
   const [buildMenuOptions, handleMenuAction] = useMemo<
     [MenuBuilder, MenuActionHandler]
@@ -81,7 +74,7 @@ export const ShellWithNewTheme = () => {
         }
         return menuDescriptors;
       },
-      async (action: MenuActionClosePopup) => {
+      (action: MenuActionClosePopup) => {
         console.log("menu action", {
           action,
         });
@@ -90,9 +83,7 @@ export const ShellWithNewTheme = () => {
             <SaveLayoutPanel
               onCancel={handleCloseDialog}
               onSave={handleSave}
-              screenshot={await handleScreenshot(
-                action.options.controlledComponentId as string
-              )}
+              componentId={action.options.controlledComponentId}
             />
           );
           return true;
@@ -170,6 +161,7 @@ export const ShellWithNewTheme = () => {
         leftSidePanel={<LeftNav style={{ width: 240 }} />}
         loginUrl={window.location.toString()}
         user={user}
+        saveLocation="local"
         style={
           {
             "--vuuShell-height": "100vh",
@@ -191,4 +183,12 @@ export const ShellWithNewTheme = () => {
   );
 };
 
-ShellWithNewTheme.displaySequence = displaySequence++;
+export const ShellWithNewThemeAndLayoutManagement = () => {
+  return (
+    <LayoutManagementProvider>
+      <ShellWithNewTheme />
+    </LayoutManagementProvider>
+  )
+}
+
+ShellWithNewThemeAndLayoutManagement.displaySequence = displaySequence++;