Feat: Incorporating new scan mode: Local File Scan (#103)

* feat/localFileScan: Add support for local file scan, but pending on select file icon and logic to support that * feat/localFileScan: Added UI Button of Local File Scan and link to backend * feat/localFileScan: Local File Scan Functionality works, but might implement the folder and edit icon
GovTechSG · Jun 20, 2024 · 33686af · 33686af
1 parent 8a1d90a
commit 33686af
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 96 deletions.
diff --git a/public/electron/main.js b/public/electron/main.js
@@ -4,6 +4,7 @@ const {
   ipcMain,
   shell,
   session,
+  dialog,
 } = require("electron");
 const { getDefaultChromeDataDir } = require("./constants")
 const os = require("os");
@@ -201,6 +202,22 @@ app.on("ready", async () => {
 
   ipcMain.handle("isWindows", (_event) => constants.isWindows);
 
+  ipcMain.handle('selectFile', async () => {
+    const result = await dialog.showOpenDialog(mainWindow, {
+      properties: ['openFile'],
+      filters: [
+        { name: 'XML Files', extensions: ['xml'] },
+        { name: 'All Files', extensions: ['*'] }
+      ]
+    });
+
+    if (!result.canceled && result.filePaths.length > 0) {
+      return result.filePaths[0];
+    } else {
+      return null;
+    }
+  });
+
   await mainReady;
 
   mainWindow.webContents.send("appStatus", "ready");

diff --git a/public/electron/preload.js b/public/electron/preload.js
@@ -128,5 +128,9 @@ contextBridge.exposeInMainWorld("services", {
     );
     return response;
   },
+  selectFile: async () => {
+    const filePath = await ipcRenderer.invoke('selectFile');
+    return filePath;
+  },
   getIsWindows: async () => ipcRenderer.invoke("isWindows"),
 });
diff --git a/src/MainWindow/HomePage/InitScanForm.jsx b/src/MainWindow/HomePage/InitScanForm.jsx
@@ -19,13 +19,15 @@ const InitScanForm = ({
   prevUrlErrorMessage,
   scanButtonIsClicked,
   setScanButtonIsClicked,
-  isAbortingScan
+  isAbortingScan,
 }) => {
   const [openPageLimitAdjuster, setOpenPageLimitAdjuster] = useState(false);
   const [pageWord, setPageWord] = useState("pages");
   const pageLimitAdjuster = useRef();
   const scanTypeOptions = Object.keys(scanTypes);
   const fileTypesOptions = Object.keys(fileTypes);
+  const [selectedFile, setSelectedFile] = useState(null); // State for selected file
+  const [fileUrl, setFileUrl] = useState(""); // State for the file URL
 
   if (isProxy) {
     delete viewportTypes.specific;
@@ -34,20 +36,31 @@ const InitScanForm = ({
   const viewportOptions = viewportTypes;
   const deviceOptions = isProxy ? [] : Object.keys(devices);
 
-  const cachedPageLimit = sessionStorage.getItem('pageLimit');
-  const cachedAdvancedOptions = sessionStorage.getItem('advancedOptions');
-  const cachedScanUrl = sessionStorage.getItem('scanUrl');
+  const cachedPageLimit = sessionStorage.getItem("pageLimit");
+  const cachedAdvancedOptions = sessionStorage.getItem("advancedOptions");
+  const cachedScanUrl = sessionStorage.getItem("scanUrl");
 
   const [pageLimit, setPageLimit] = useState(() => {
-    return cachedPageLimit? JSON.parse(cachedPageLimit) : "100"
+    return cachedPageLimit ? JSON.parse(cachedPageLimit) : "100";
   });
   const [advancedOptions, setAdvancedOptions] = useState(() => {
-    return cachedAdvancedOptions? JSON.parse(cachedAdvancedOptions) : getDefaultAdvancedOptions(isProxy)
+    return cachedAdvancedOptions
+      ? JSON.parse(cachedAdvancedOptions)
+      : getDefaultAdvancedOptions(isProxy);
   });
 
-  const [scanUrl, setScanUrl] = useState(() => {
-    return cachedScanUrl? JSON.parse(cachedScanUrl) : "https://"
-  });
+  const [scanUrl, setScanUrl] = useState("") ;
+
+  useEffect(() => {
+      const cachedScanUrl = sessionStorage.getItem("scanUrl");
+      if (cachedScanUrl) {
+        setScanUrl(JSON.parse(cachedScanUrl));
+      } else if (advancedOptions.scanType === scanTypeOptions[3]) {
+        setScanUrl("file:///");
+      } else {
+        setScanUrl("https://");
+      }
+    }, [advancedOptions.scanType]);
 
   useEffect(() => {
     const urlBarElem = document.getElementById("url-bar");
@@ -57,7 +70,7 @@ const InitScanForm = ({
   }, [scanButtonIsClicked, prevUrlErrorMessage]);
 
   useEffect(() => {
-    setPageWord(pageLimit === "1" ? 'page' : 'pages')
+    setPageWord(pageLimit === "1" ? "page" : "pages");
   }, [pageLimit]);
 
   const togglePageLimitAdjuster = (e) => {
@@ -72,19 +85,20 @@ const InitScanForm = ({
   };
 
   const handleScanButtonClicked = () => {
-    // If chosen device is Mobile in proxy environment, we override the default "Mobile"
-    // sent to cli.js with iPhone's width 414px
-    // Prevents the user-agent from triggering in cli.js
     if (isProxy && advancedOptions.viewport === viewportTypes.mobile) {
       advancedOptions.viewport = viewportTypes.custom;
       advancedOptions.viewportWidth = 414;
     }
 
     setScanButtonIsClicked(true);
-    sessionStorage.setItem('pageLimit', JSON.stringify(pageLimit));
-    sessionStorage.setItem('advancedOptions', JSON.stringify(advancedOptions));
-    sessionStorage.setItem('scanUrl', JSON.stringify(scanUrl));
-    startScan({ scanUrl: scanUrl.trim(), pageLimit, ...advancedOptions });
+    sessionStorage.setItem("pageLimit", JSON.stringify(pageLimit));
+    sessionStorage.setItem("advancedOptions", JSON.stringify(advancedOptions));
+    sessionStorage.setItem("scanUrl", JSON.stringify(scanUrl));
+    if (advancedOptions.scanType === scanTypeOptions[3] && selectedFile) {
+      startScan({ file: selectedFile, scanUrl, pageLimit, ...advancedOptions });
+    } else {
+      startScan({ scanUrl: scanUrl.trim(), pageLimit, ...advancedOptions });
+    }
   };
 
   // styles are in HomePage.scss
@@ -100,7 +114,33 @@ const InitScanForm = ({
             type="text"
             value={scanUrl}
             onChange={(e) => setScanUrl(e.target.value)}
+            style={{
+              display:
+                advancedOptions.scanType === scanTypeOptions[3]
+                  ? "none"
+                  : "block",
+            }} // Hide URL input for file scan
           />
+          {advancedOptions.scanType === scanTypeOptions[3] && (
+            <div id="file-input-container">
+              <input
+                type="file"
+                id="file-input"
+                accept=".xml"
+                style={{ display: "none" }}
+                onChange={async (e) => {
+                  const file = e.target.files[0];
+                  if (file) {
+                    setScanUrl("file://" + file.path);
+                  }
+                }}
+              />
+              <label htmlFor="file-input" id="file-input-label">
+                {scanUrl ? scanUrl : "Choose file"}
+              </label>
+            </div>
+          )}
+
           {advancedOptions.scanType !== scanTypeOptions[2] &&
             advancedOptions.scanType !== scanTypeOptions[3] && (
               <div>
@@ -153,7 +193,11 @@ const InitScanForm = ({
             onClick={handleScanButtonClicked}
             disabled={scanButtonIsClicked || isAbortingScan}
           >
-            {scanButtonIsClicked || isAbortingScan ? <LoadingSpinner></LoadingSpinner> : "Scan"}
+            {scanButtonIsClicked || isAbortingScan ? (
+              <LoadingSpinner></LoadingSpinner>
+            ) : (
+              "Scan"
+            )}
           </Button>
         </div>
         {prevUrlErrorMessage && (