VUU-71: Extract app layout in remote manager

finos · heswell · Nov 21, 2023 · Jan 5, 2023 · Jan 5, 2023 · Jan 5, 2023
commit 956840d9a88b19d9b2c1954c2b3b8921c84bf1c8
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts
@@ -1,9 +1,5 @@
 import { LayoutJSON } from "@finos/vuu-layout";
-import {
-  ApplicationLayout,
-  LayoutMetadata,
-  LayoutMetadataDto
-} from "@finos/vuu-shell";
+import { LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
 
 export interface LayoutPersistenceManager {
   /**
@@ -53,7 +49,7 @@ export interface LayoutPersistenceManager {
    *
    * @returns Full JSON representation of the application layout
    */
-  loadApplicationLayout: () => Promise<ApplicationLayout>;
+  loadApplicationLayout: () => Promise<LayoutJSON>;
 
   /**
   * Saves the application layout which includes all layouts on screen

diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
@@ -1,5 +1,4 @@
 import {
-  ApplicationLayout,
   Layout,
   LayoutMetadata,
   LayoutMetadataDto,
@@ -112,15 +111,13 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
     });
   }
 
-  loadApplicationLayout(): Promise<ApplicationLayout> {
-    console.log("LOCAL: LOAD APP LAYOUT");
-    console.log("loadApplicationLAyout");
+  loadApplicationLayout(): Promise<LayoutJSON> {
     return new Promise((resolve) => {
       const applicationLayout = getLocalEntity<LayoutJSON>(this.#urlKey);
       if (applicationLayout) {
-        resolve({username: "vuu-user", definition: applicationLayout});
+        resolve(applicationLayout);
       } else {
-        resolve({username: "vuu-user", definition: defaultLayout});
+        resolve(defaultLayout);
       }
     });
   }

diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts
@@ -5,13 +5,13 @@ import {
 } from "@finos/vuu-shell";
 import { LayoutPersistenceManager } from "./LayoutPersistenceManager";
 import { LayoutJSON } from "../layout-reducer";
-import { defaultLayout } from "./data";
 
 const DEFAULT_SERVER_BASE_URL = "http://127.0.0.1:8081/api";
 
 const baseURL = process.env.LAYOUT_BASE_URL ?? DEFAULT_SERVER_BASE_URL;
 const metadataSaveLocation = "layouts/metadata";
 const layoutsSaveLocation = "layouts";
+const applicationLayoutsSaveLocation = "application-layouts";
 
 export type CreateLayoutResponseDto = { metadata: LayoutMetadata };
 export type GetLayoutResponseDto = { definition: LayoutJSON };
@@ -140,14 +140,12 @@ export class RemoteLayoutPersistenceManager
   saveApplicationLayout(layout: LayoutJSON): Promise<void> {
     return new Promise((resolve, reject) =>
       fetch(`${baseURL}/${applicationLayoutsSaveLocation}`, {
-        method: "POST",
+        method: "PUT",
         headers: {
           "Content-Type": "application/json",
-          "user": "vuu-user"
+          "username": "vuu-user"
         },
-        body: JSON.stringify({
-          layoutDefinition: layout,
-        }),
+        body: JSON.stringify(layout),
       })
       .then((response) => {
         if (!response.ok) {
@@ -161,12 +159,12 @@ export class RemoteLayoutPersistenceManager
     );
   }
 
-  loadApplicationLayout(): Promise<ApplicationLayout> {
+  loadApplicationLayout(): Promise<LayoutJSON> {
     return new Promise((resolve, reject) =>
       fetch(`${baseURL}/${applicationLayoutsSaveLocation}`, {
         method: "GET",
         headers: {
-          "user": "vuu-user",
+          "username": "vuu-user",
         },
       })
       .then((response) => {
@@ -175,9 +173,9 @@ export class RemoteLayoutPersistenceManager
         }
         response.json().then((response: ApplicationLayout) => {
           if (!response) {
-            reject(new Error("Response did not contain valid layout information"));
+            reject(new Error("Response did not contain valid application layout information"));
           }
-          resolve(response);
+          resolve(response.definition);
         });
       })
       .catch((error: Error) => {

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -6,13 +6,15 @@ import React, {
   useState,
 } from "react";
 import {
-  ApplicationLayout,
   LayoutJSON,
   LocalLayoutPersistenceManager,
   RemoteLayoutPersistenceManager,
   resolveJSONPath,
 } from "@finos/vuu-layout";
-import { LayoutMetadata, LayoutMetadataDto } from "./layoutTypes";
+import {
+  LayoutMetadata,
+  LayoutMetadataDto
+} from "./layoutTypes";
 import { defaultLayout } from "@finos/vuu-layout/";
 
 const local = process.env.LOCAL ?? true;
@@ -59,21 +61,23 @@ export const LayoutManagementProvider = (
   );
 
   useEffect(() => {
-    persistenceManager.loadMetadata().then((metadata) => {
-      setLayoutMetadata(metadata);
-    });
-    persistenceManager
-      .loadApplicationLayout()
-      .then((layoutDto: ApplicationLayout) => {
-        if (layoutDto.username === null) {
-          persistenceManager.saveApplicationLayout(layoutDto.definition);
-        }
-        setApplicationLayout(layoutDto.definition);
+    persistenceManager.loadMetadata()
+      .then((metadata) => {
+        setLayoutMetadata(metadata);
       })
       .catch((error: Error) => {
         //TODO: Show error toaster
         console.error("Error occurred while retrieving metadata", error);
       });
+
+      persistenceManager.loadApplicationLayout()
+      .then((layout: LayoutJSON) => {
+        setApplicationLayout(layout);
+      })
+      .catch((error: Error) => {
+        //TODO: Show error toaster
+        console.error("Error occurred while retrieving application layout", error);
+      });
   }, [setApplicationLayout]);
 
   const saveApplicationLayout = useCallback(