Add delete widget support

src/misc/fileContext.tsx

@@ -178,20 +178,27 @@ export type FileContextType = {
     location: string,
     fileDesc: FileDescription,
     pathname?: string,
-    pvwsHost?: string
+    pvwsHost?: string,
+    replace?: boolean
+  ) => void;
+  removePage: (
+    location: string,
+    fileDesc?: FileDescription,
+    replace?: boolean
   ) => void;
-  removePage: (location: string, fileDesc?: FileDescription) => void;
   addTab: (
     location: string,
     tabName: string,
-    fileDesc: FileDescription
+    fileDesc: FileDescription,
+    replace?: boolean
   ) => void;
   removeTab: (
     location: string,
     tabName: string,
-    fileDesc: FileDescription
+    fileDesc: FileDescription,
+    replace?: boolean
   ) => void;
-  selectTab: (location: string, index: number) => void;
+  selectTab: (location: string, index: number, replace?: boolean) => void;
 };
 
 // React.useContext(FileContext) gives access to each of the
@@ -249,7 +256,8 @@ export const FileProvider: React.FC<FileProviderProps> = (
       location: string,
       fileDesc: FileDescription,
       pathname?: string,
-      pvwsHost?: string
+      pvwsHost?: string,
+      replace?: boolean
     ): void => {
       dispatch(setPvwsSettings({ pvwsHost }));
       const newPageState = addPage(pageState, location, fileDesc);
@@ -258,55 +266,61 @@ export const FileProvider: React.FC<FileProviderProps> = (
           pageState: newPageState,
           tabState: historyLocation.state?.tabState ?? tabState
         },
-        replace: false
+        replace: replace ?? false
       });
     },
-    removePage: (location: string, fileDesc?: FileDescription): void => {
+    removePage: (
+      location: string,
+      fileDesc?: FileDescription,
+      replace?: boolean
+    ): void => {
       const newPageState = removePage(pageState, location, fileDesc);
       navigate(historyLocation.pathname, {
         state: {
           pageState: newPageState,
           tabState: historyLocation.state?.tabState ?? tabState
         },
-        replace: false
+        replace: replace ?? false
       });
     },
     addTab: (
       location: string,
       tabName: string,
-      fileDesc: FileDescription
+      fileDesc: FileDescription,
+      replace?: boolean
     ): void => {
       const newTabState = addTab(tabState, location, tabName, fileDesc);
       navigate(historyLocation.pathname, {
         state: {
           pageState: historyLocation.state?.pageState ?? pageState,
           tabState: newTabState
         },
-        replace: false
+        replace: replace ?? false
       });
     },
     removeTab: (
       location: string,
       tabName: string,
-      fileDesc: FileDescription
+      fileDesc: FileDescription,
+      replace?: boolean
     ): void => {
       const newTabState = removeTab(tabState, location, tabName, fileDesc);
       navigate(historyLocation.pathname, {
         state: {
           pageState: historyLocation.state?.pageState ?? pageState,
           tabState: newTabState
         },
-        replace: false
+        replace: replace ?? false
       });
     },
-    selectTab: (location: string, index: number): void => {
+    selectTab: (location: string, index: number, replace?: boolean): void => {
       const newTabState = selectTab(tabState, location, index);
       navigate(historyLocation.pathname, {
         state: {
           pageState: historyLocation.state?.pageState ?? pageState,
           tabState: newTabState
         },
-        replace: false
+        replace: replace ?? false
       });
     }
   };

src/redux/slices/fileCacheSlice.test.ts

@@ -679,6 +679,58 @@ describe("createDisplayInstanceFromQuickScreen", () => {
     expect(result.displayInstanceIndex[hash]).toBeDefined();
     expect(result.fileCache["my screen"]).toBeDefined();
   });
+  it("sets editable to true when creating an editable display instance", () => {
+    const state: FileCacheState = {
+      fileCache: {
+        "file.bob": {
+          id: "root",
+          type: "display",
+          fileId: "file.bob",
+          position: newAbsolutePosition("0", "0", "100", "100")
+        }
+      },
+      displayInstanceCache: {},
+      displayInstanceIndex: {}
+    };
+
+    const action = createDisplayInstanceFromFile({
+      file: "file.bob",
+      macros: {},
+      editable: true
+    });
+
+    const result = fileCacheReducer(state, action);
+
+    const instance = Object.values(result.displayInstanceCache)[0];
+
+    expect(instance.description.editable).toBe(true);
+  });
+  it("sets editable to false when creating a non-editable display instance", () => {
+    const state: FileCacheState = {
+      fileCache: {
+        "file.bob": {
+          id: "root",
+          type: "display",
+          fileId: "file.bob",
+          position: newAbsolutePosition("0", "0", "100", "100")
+        }
+      },
+      displayInstanceCache: {},
+      displayInstanceIndex: {}
+    };
+
+    const action = createDisplayInstanceFromFile({
+      file: "file.bob",
+      macros: {},
+      editable: false
+    });
+
+    const result = fileCacheReducer(state, action);
+
+    const instance = Object.values(result.displayInstanceCache)[0];
+
+    expect(instance.description.editable).toBe(false);
+  });
 });
 
 describe("displayInstanceUpdateGridLayout", () => {
@@ -783,6 +835,55 @@ describe("displayInstanceUpdateGridLayout", () => {
 
     expect(result).toEqual(badState);
   });
+  it("deletes a widget when update type is delete", () => {
+    const state: FileCacheState = {
+      fileCache: {},
+      displayInstanceCache: {
+        UUID1: {
+          uuid: "UUID1",
+          fileId: "file.bob",
+          macros: {},
+          hash: "",
+          description: {
+            id: "display1",
+            type: "displayGridLayout",
+            fileId: "file.bob",
+            children: [
+              {
+                id: "child1",
+                type: "shape",
+                fileId: "file.bob"
+              },
+              {
+                id: "child2",
+                type: "shape",
+                fileId: "file.bob"
+              }
+            ]
+          } as any
+        }
+      },
+      displayInstanceIndex: {}
+    };
+
+    const result = fileCacheReducer(
+      state,
+      displayInstanceUpdateGridLayout({
+        embeddedDisplayUuid: "UUID1",
+        gridDisplayId: "display1",
+        gridLayout: [{ i: "child2", x: 0, y: 0, w: 2, h: 2 }],
+        update: {
+          type: "delete",
+          widgetId: "child1"
+        }
+      })
+    );
+
+    const children = result.displayInstanceCache.UUID1.description.children;
+
+    expect(children).toHaveLength(1);
+    expect(children?.[0].id).toBe("child2");
+  });
 });
 
 describe("displayInstanceUpdateResponsiveLayout", () => {
@@ -852,6 +953,60 @@ describe("displayInstanceUpdateResponsiveLayout", () => {
 
     expect(result).toEqual(state);
   });
+  it("deletes a widget when update type is delete", () => {
+    const state: FileCacheState = {
+      fileCache: {},
+      displayInstanceCache: {
+        uuid1: {
+          uuid: "uuid1",
+          fileId: "file",
+          macros: {},
+          hash: "",
+          description: {
+            id: "display1",
+            type: "displayResponsive",
+            responsiveLayouts: {},
+            children: [
+              {
+                id: "child1",
+                type: "shape",
+                fileId: "file"
+              },
+              {
+                id: "child2",
+                type: "shape",
+                fileId: "file"
+              }
+            ]
+          } as any
+        }
+      },
+      displayInstanceIndex: {}
+    };
+
+    const layouts = {
+      lg: [{ i: "child2", x: 0, y: 0, w: 2, h: 2 }]
+    };
+
+    const result = fileCacheReducer(
+      state,
+      displayInstanceUpdateResponsiveLayout({
+        embeddedDisplayUuid: "uuid1",
+        displayId: "display1",
+        responsiveLayouts: layouts,
+        update: {
+          type: "delete",
+          widgetId: "child1"
+        }
+      })
+    );
+
+    const display = result.displayInstanceCache.uuid1.description;
+
+    expect(display.responsiveLayouts).toEqual(layouts);
+    expect(display.children).toHaveLength(1);
+    expect(display.children?.[0].id).toBe("child2");
+  });
 });
 
 describe("convertDisplayInstanceType", () => {

src/redux/slices/fileCacheSlice.ts

@@ -14,7 +14,10 @@ import { Position } from "../../types";
 import { MacroMap } from "../../types/macros";
 import stringify from "safe-stable-stringify";
 import { Breakpoints, Layout, ResponsiveLayouts } from "react-grid-layout";
-import { resolveWidgetPathsAndMacros } from "./fileCacheSliceUtils";
+import {
+  deleteWidgetById,
+  resolveWidgetPathsAndMacros
+} from "./fileCacheSliceUtils";
 
 export interface FileCache {
   [fileId: string]: WidgetDescription;
@@ -46,6 +49,12 @@ export interface FileCacheState {
   };
 }
 
+export interface DisplayInstanceUpdateType {
+  type: string; // is either add, delete or move
+  widgetId: string;
+  widgetDescription?: WidgetDescription;
+}
+
 const initialState: FileCacheState = {
   fileCache: {},
   displayInstanceCache: {},
@@ -128,22 +137,32 @@ const fileCacheSlice = createSlice({
         embeddedDisplayUuid: string;
         gridDisplayId: string;
         gridLayout: Layout;
+        update?: DisplayInstanceUpdateType;
       }>
     ) {
-      const { embeddedDisplayUuid, gridDisplayId, gridLayout } = action.payload;
+      const { embeddedDisplayUuid, gridDisplayId, gridLayout, update } =
+        action.payload;
 
       const displayInstance = state.displayInstanceCache?.[embeddedDisplayUuid];
       if (!displayInstance) {
         return;
       }
-
       const display = findWidgetById(
         [displayInstance.description],
         gridDisplayId
       );
 
       if (!display || display.type !== "displayGridLayout") return;
+
       display.gridLayout = gridLayout;
+      if (!update) return;
+      // Check what the update type is
+      if (update.type === "delete") {
+        // Find and remove widget by id
+        display.children = deleteWidgetById(display.children, update.widgetId);
+      } else if (update.type === "add") {
+        // TO DO - add support for adding widgets
+      }
     },
 
     displayInstanceSetResponsiveLayout(
@@ -200,20 +219,29 @@ const fileCacheSlice = createSlice({
         embeddedDisplayUuid: string;
         displayId: string;
         responsiveLayouts: ResponsiveLayouts<string>;
+        update?: DisplayInstanceUpdateType;
       }>
     ) {
-      const { embeddedDisplayUuid, displayId, responsiveLayouts } =
+      const { embeddedDisplayUuid, displayId, responsiveLayouts, update } =
         action.payload;
 
       const displayInstance = state.displayInstanceCache[embeddedDisplayUuid];
       const display = findWidgetById([displayInstance.description], displayId);
 
       if (!display || display.type !== "displayResponsive") return;
       display.responsiveLayouts = responsiveLayouts;
+      if (!update) return;
+      // Check what the update type is
+      if (update.type === "delete") {
+        // Find and remove widget by id
+        display.children = deleteWidgetById(display.children, update.widgetId);
+      } else if (update.type === "add") {
+        // TO DO - add support for adding widgets
+      }
     },
 
     createDisplayInstanceFromFile(state, action) {
-      const { file, macros } = action.payload;
+      const { file, macros, editable } = action.payload;
       const fileDescription = state.fileCache?.[file];
 
       const hash = `${file}::${stringify(macros)}`;
@@ -231,6 +259,8 @@ const fileCacheSlice = createSlice({
       injectFieldsIntoAllDescriptions(description, {
         embeddedDisplayUuid: uuid
       });
+      // If the file is loaded in an editable view, set editable prop
+      description.editable = editable ? true : false;
 
       if (state.displayInstanceCache) {
         const parentDir = file.slice(0, file.lastIndexOf("/"));
@@ -298,6 +328,7 @@ const fileCacheSlice = createSlice({
         instance.description,
         displayType
       );
+
       state.displayInstanceCache[id] = instance;
     }
   },