add Layout Management Provider to sample apps (#917)

* add Layout Management Provider to sample apps

* fix test dependencies

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

@@ -1,3 +1,4 @@
-export * from './LayoutPersistenceManager';
-export * from './LocalLayoutPersistenceManager';
-export * from './data';
+export * from "./data";
+export * from "./LayoutPersistenceManager";
+export * from "./LocalLayoutPersistenceManager";
+export * from "./useLayoutContextMenuItems";

vuu-ui/packages/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx

@@ -0,0 +1,80 @@
+import {
+  LayoutMetadata,
+  SaveLayoutPanel,
+  useLayoutManager,
+} from "@finos/vuu-shell";
+import {
+  ContextMenuItemDescriptor,
+  MenuActionHandler,
+  MenuBuilder,
+} from "@finos/vuu-data-types";
+import { ReactElement, useCallback, useMemo, useState } from "react";
+import { MenuActionClosePopup } from "@finos/vuu-popups";
+
+export const useLayoutContextMenuItems = () => {
+  const [dialogContent, setDialogContent] = useState<ReactElement>();
+
+  const { saveLayout } = useLayoutManager();
+
+  const handleCloseDialog = useCallback(() => {
+    setDialogContent(undefined);
+  }, []);
+
+  const handleSave = useCallback(
+    (layoutMetadata: Omit<LayoutMetadata, "id">) => {
+      saveLayout(layoutMetadata);
+      setDialogContent(undefined);
+    },
+    [saveLayout]
+  );
+
+  const [buildMenuOptions, handleMenuAction] = useMemo<
+    [MenuBuilder, MenuActionHandler]
+  >(() => {
+    return [
+      (location, options) => {
+        console.log({ options });
+        const locations = location.split(" ");
+        const menuDescriptors: ContextMenuItemDescriptor[] = [];
+        if (locations.includes("main-tab")) {
+          menuDescriptors.push(
+            {
+              label: "Save Layout",
+              action: "save-layout",
+              options,
+            },
+            {
+              label: "Layout Settings",
+              action: "layout-settings",
+              options,
+            }
+          );
+        }
+        return menuDescriptors;
+      },
+      (action: MenuActionClosePopup) => {
+        console.log("menu action", {
+          action,
+        });
+        if (action.menuId === "save-layout") {
+          setDialogContent(
+            <SaveLayoutPanel
+              onCancel={handleCloseDialog}
+              onSave={handleSave}
+              componentId={action.options.controlledComponentId}
+            />
+          );
+          return true;
+        }
+        return false;
+      },
+    ];
+  }, [handleCloseDialog, handleSave]);
+
+  return {
+    buildMenuOptions,
+    dialogContent,
+    handleCloseDialog,
+    handleMenuAction,
+  };
+};

vuu-ui/packages/vuu-layout/test/global-mocks.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { vi } from "vitest";
+
+const BlobMock = vi.fn(() => ({}));
+const URLMock = {
+  createObjectURL: () => ({}),
+};
+vi.stubGlobal("Blob", BlobMock);
+vi.stubGlobal("URL", URLMock);
+vi.stubGlobal("loggingSettings", { loggingLevel: "error" });
+
+vi.mock("@finos/vuu-utils", async () => {
+  const actual = await vi.importActual("@finos/vuu-utils");
+  return {
+    // @ts-ignore
+    ...actual,
+    uuid: () => "uuid-1",
+  };
+});
+
+vi.mock("./inlined-worker", async () => ({
+  workerSourceCode: "",
+}));