HPCC-32594 ECL Watch v9 prevent duplicate errors logged on File Details

esp/src/src-react/components/FileDetails.tsx

@@ -156,3 +156,5 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
         </div>
     }</SizeMe>;
 };
+
+export default FileDetails;

esp/src/src-react/components/LogicalFileSummary.tsx

@@ -147,7 +147,7 @@ export const LogicalFileSummary: React.FunctionComponent<LogicalFileSummaryProps
     ], [_protected, canReplicateFlag, canSave, description, file, logicalFile, refresh, replicateFlag, restricted, setShowDeleteConfirm]);
 
     const protectedImage = _protected ? Utility.getImageURL("locked.png") : Utility.getImageURL("unlocked.png");
-    const stateImage = Utility.getImageURL(getStateImageName(file as unknown as IFile));
+    const stateImage = Utility.getImageURL(getStateImageName(file as unknown as IFile ?? { isSuperfile: false, StateID: 999, ContentType: "" }));
     const compressedImage = file?.IsCompressed ? Utility.getImageURL("compressed.png") : "";
 
     return <>
@@ -170,7 +170,7 @@ export const LogicalFileSummary: React.FunctionComponent<LogicalFileSummaryProps
                         <img src={compressedImage} />&nbsp;
                         <img src={protectedImage} />&nbsp;
                         <img src={stateImage} />&nbsp;
-                        {file?.Name}
+                        {file?.Name ?? `${logicalFile} (${nlsHPCC.Deleted})`}
                     </h2>
                 </div>
             </Sticky>

esp/src/src-react/components/contexts/FileContext.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { LogicalFile } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { singletonDebounce } from "../../util/throttle";
+import { useCounter } from "../../hooks/util";
+
+const logger = scopedLogger("../components/controls/FileContext.tsx");
+
+const FileContext = React.createContext(null);
+
+export const FileContextProvider = ({ cluster, logicalFile, children }) => {
+    const [file, setFile] = React.useState<LogicalFile>();
+    const [isProtected, setIsProtected] = React.useState(false);
+    const [lastUpdate, setLastUpdate] = React.useState(Date.now());
+    const [count, increment] = useCounter();
+
+    React.useEffect(() => {
+        const file = LogicalFile.attach({ baseUrl: "" }, cluster === "undefined" ? undefined : cluster, logicalFile);
+        let active = true;
+        let handle;
+        const fetchInfo = singletonDebounce(file, "fetchInfo");
+        fetchInfo()
+            .then((response) => {
+                if (active) {
+                    setFile(file);
+                    setIsProtected(response.ProtectList?.DFUFileProtect?.length > 0 || false);
+                    setLastUpdate(Date.now());
+                    handle = file.watch(() => {
+                        setIsProtected(response.ProtectList?.DFUFileProtect?.length > 0 || false);
+                        setLastUpdate(Date.now());
+                    });
+                }
+            })
+            .catch(err => logger.error(err));
+
+        return () => {
+            active = false;
+            handle?.release();
+        };
+    }, [cluster, count, logicalFile]);
+
+    return (
+        <FileContext.Provider value={{ file, isProtected, lastUpdate, increment }}>
+            {children}
+        </FileContext.Provider>
+    );
+};
+
+export const useFileContext = () => {
+    const context = React.useContext(FileContext);
+    if (!context) {
+        throw new Error("useFileContext must be used within a FileContextProvider");
+    }
+    return context;
+};
+
+export default FileContextProvider;

esp/src/src-react/hooks/file.ts

@@ -1,43 +1,13 @@
 import * as React from "react";
 import { LogicalFile, WsDfu } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
-import { singletonDebounce } from "../util/throttle";
 import { useCounter } from "./util";
+import { useFileContext } from "../components/contexts/FileContext";
 
 const logger = scopedLogger("../hooks/file.ts");
 
 export function useFile(cluster: string, name: string): [LogicalFile, boolean, number, () => void] {
-
-    const [file, setFile] = React.useState<LogicalFile>();
-    const [isProtected, setIsProtected] = React.useState(false);
-    const [lastUpdate, setLastUpdate] = React.useState(Date.now());
-    const [count, increment] = useCounter();
-
-    React.useEffect(() => {
-        const file = LogicalFile.attach({ baseUrl: "" }, cluster === "undefined" ? undefined : cluster, name);
-        let active = true;
-        let handle;
-        const fetchInfo = singletonDebounce(file, "fetchInfo");
-        fetchInfo()
-            .then((response) => {
-                if (active) {
-                    setFile(file);
-                    setIsProtected(response.ProtectList?.DFUFileProtect?.length > 0 || false);
-                    setLastUpdate(Date.now());
-                    handle = file.watch(() => {
-                        setIsProtected(response.ProtectList?.DFUFileProtect?.length > 0 || false);
-                        setLastUpdate(Date.now());
-                    });
-                }
-            })
-            .catch(err => logger.error(err))
-            ;
-        return () => {
-            active = false;
-            handle?.release();
-        };
-    }, [cluster, count, name]);
-
+    const { file, isProtected, lastUpdate, increment } = useFileContext();
     return [file, isProtected, lastUpdate, increment];
 }
 

esp/src/src-react/routes.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Route, RouterContext } from "universal-router";
 import { initialize, parsePage, parseSearch, parseSort, pushUrl, replaceUrl } from "./util/history";
+import nlsHPCC from "src/nlsHPCC";
 
 declare const dojoConfig;
 
@@ -130,19 +131,40 @@ export const routes: RoutesEx = [
                 })
             },
             {
-                path: "/:Name", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={undefined} logicalFile={params.Name as string} />;
-                })
+                path: "/:Name", action: (ctx, params) => {
+                    const FileContextProvider = React.lazy(() => import("./components/contexts/FileContext"));
+                    const FileDetails = React.lazy(() => import("./components/FileDetails"));
+
+                    return <React.Suspense fallback={<div>{nlsHPCC.Loading}</div>}>
+                        <FileContextProvider cluster={undefined} logicalFile={params.Name as string}>
+                            <FileDetails cluster={undefined} logicalFile={params.Name as string} />
+                        </FileContextProvider>
+                    </React.Suspense>;
+                }
             },
             {
-                path: "/:NodeGroup/:Name", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} />;
-                })
+                path: "/:NodeGroup/:Name", action: (ctx, params) => {
+                    const FileContextProvider = React.lazy(() => import("./components/contexts/FileContext"));
+                    const FileDetails = React.lazy(() => import("./components/FileDetails"));
+
+                    return <React.Suspense fallback={<div>{nlsHPCC.Loading}</div>}>
+                        <FileContextProvider cluster={params.NodeGroup as string} logicalFile={params.Name as string}>
+                            <FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} />
+                        </FileContextProvider>
+                    </React.Suspense>;
+                }
             },
             {
-                path: "/:NodeGroup/:Name/:Tab", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={{ [params.Tab as string]: parseSort(ctx.search) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
-                })
+                path: "/:NodeGroup/:Name/:Tab", action: (ctx, params) => {
+                    const FileContextProvider = React.lazy(() => import("./components/contexts/FileContext"));
+                    const FileDetails = React.lazy(() => import("./components/FileDetails"));
+
+                    return <React.Suspense fallback={<div>{nlsHPCC.Loading}</div>}>
+                        <FileContextProvider cluster={params.NodeGroup as string} logicalFile={params.Name as string}>
+                            <FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={{ [params.Tab as string]: parseSort(ctx.search) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />
+                        </FileContextProvider>
+                    </React.Suspense>;
+                }
             },
         ]
     },