Implemented close file button, menu item and before new scan import

Signed-off-by: Omkar Phansopkar <[email protected]>

src/components/FileTree/FileTree.tsx

@@ -41,7 +41,10 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
   }, [currentPath]);
 
   useEffect(() => {
-    if (!initialized || !db || !importedSqliteFilePath) return;
+    if (!initialized || !db || !importedSqliteFilePath) {
+      setTreeData(null);
+      return;
+    }
 
     db.findAllJSTree().then((treeData) => {
       // Wrap with react-scroll wrapper

src/constants/IpcConnection.ts

@@ -5,33 +5,34 @@ export interface ErrorInfo {
 }
 
 export const OPEN_DIALOG_CHANNEL = {
-  JSON: 'open-json-file',
-  SQLITE_PATH_FOR_JSON: 'choose-sqlite-path-for-json-file',
-  SQLITE: 'open-sqlite-file',
-  SAVE_SQLITE: 'save-sqlite-file',
-}
+  JSON: "open-json-file",
+  SQLITE_PATH_FOR_JSON: "choose-sqlite-path-for-json-file",
+  SQLITE: "open-sqlite-file",
+  SAVE_SQLITE: "save-sqlite-file",
+};
 
 export const IMPORT_REPLY_CHANNEL = {
-  JSON: 'import-json-reply',
-  SQLITE: 'import-sqlite-reply',
-}
+  JSON: "import-json-reply",
+  SQLITE: "import-sqlite-reply",
+};
 
 export const SAVE_REPLY_CHANNEL = {
-  SQLITE: 'save-sqlite-reply',
-}
+  SQLITE: "save-sqlite-reply",
+};
 
 export const UTIL_CHANNEL = {
-  SET_CURRENT_FILE_TITLE: 'set-current-file-title',
-}
+  SET_CURRENT_FILE_TITLE: "set-current-file-title",
+  CLOSE_FILE: "close-file",
+};
 
-export const NAVIGATION_CHANNEL = 'NAVIGATE_TO';
+export const NAVIGATION_CHANNEL = "NAVIGATE_TO";
 export type NAVIGATION_CHANNEL_MESSAGE = string;
 
 export const GENERAL_ACTIONS = {
-  ZOOM_IN: 'zoom_in',
-  ZOOM_OUT: 'zoom_out',
-  ZOOM_RESET: 'zoom_reset',
-}
+  ZOOM_IN: "zoom_in",
+  ZOOM_OUT: "zoom_out",
+  ZOOM_RESET: "zoom_reset",
+};
 
 export interface SQLITE_PATH_FOR_JSON_REQUEST_FORMAT {
   jsonFilePath: string;
@@ -45,4 +46,4 @@ export interface SQLITE_IMPORT_REPLY_FORMAT {
 }
 export interface SQLITE_SAVE_REPLY_FORMAT {
   sqliteFilePath: string;
-}
+}

src/contexts/dbContext.tsx

@@ -42,6 +42,7 @@ interface WorkbenchContextProperties extends BasicValueState {
   processingQuery: boolean;
   startImport: () => void;
   abortImport: () => void;
+  closeFile: () => void,
   startProcessing: () => void;
   endProcessing: () => void;
   sqliteParser: (sqliteFilePath: string, preventNavigation?: boolean) => void;
@@ -71,6 +72,7 @@ export const defaultWorkbenchContextValue: WorkbenchContextProperties = {
   updateLoadingStatus: () => null,
   startImport: () => null,
   abortImport: () => null,
+  closeFile: () => null,
   startProcessing: () => null,
   endProcessing: () => null,
   updateCurrentPath: () => null,
@@ -113,6 +115,7 @@ export const WorkbenchDBProvider = (
 
   const startImport = () => {
     updateLoadingStatus(0);
+    setProcessingQuery(false);
     setValue({
       db: null,
       initialized: false,
@@ -123,6 +126,18 @@ export const WorkbenchDBProvider = (
 
   const abortImport = () => updateLoadingStatus(null);
 
+  const closeFile = () => {
+    updateLoadingStatus(null);
+    setProcessingQuery(false);
+    setValue({
+      db: null,
+      initialized: false,
+      importedSqliteFilePath: null,
+      scanInfo: null,
+    });
+    navigate(ROUTES.HOME)
+  }
+
   const updateWorkbenchDB = async (db: WorkbenchDB, sqliteFilePath: string) => {
     updateLoadingStatus(100);
     setValue({
@@ -440,6 +455,10 @@ export const WorkbenchDBProvider = (
         }
       }
     );
+    ipcRenderer.on(
+      UTIL_CHANNEL.CLOSE_FILE,
+      closeFile
+    )
 
     // Remove all listeners on window unmount
     return () => {
@@ -461,6 +480,7 @@ export const WorkbenchDBProvider = (
         importJsonFile,
         startImport,
         abortImport,
+        closeFile,
         startProcessing: () => setProcessingQuery(true),
         endProcessing: () => setProcessingQuery(false),
         updateCurrentPath,

src/mainActions.ts

@@ -113,6 +113,10 @@ export function saveSqliteFile(mainWindow: BrowserWindow) {
     });
 }
 
+export function closeFile(mainWindow: BrowserWindow) {
+  mainWindow.webContents.send(UTIL_CHANNEL.CLOSE_FILE);
+}
+
 export function showErrorDialog(err: ErrorInfo) {
   console.log("Showing error to user:", err);
   dialog.showErrorBox(err.title, err.message);

src/mainMenu.ts

@@ -1,6 +1,11 @@
 import { GENERAL_ACTIONS, NAVIGATION_CHANNEL } from "./constants/IpcConnection";
 import { app, BrowserWindow, MenuItem, shell } from "electron";
-import { importJsonFile, openSqliteFile, saveSqliteFile } from "./mainActions";
+import {
+  closeFile,
+  importJsonFile,
+  openSqliteFile,
+  saveSqliteFile,
+} from "./mainActions";
 import { ROUTES } from "./constants/routes";
 import { createWindow } from "./main";
 import { WORKBENCH_VERSION } from "./constants/general";
@@ -46,6 +51,12 @@ function getTemplate() {
           click: (_: MenuItem, currentWindow: BrowserWindow) =>
             importJsonFile(currentWindow),
         },
+        {
+          label: "Close File",
+          // accelerator: "CmdOrCtrl+",
+          click: (_: MenuItem, currentWindow: BrowserWindow) =>
+            closeFile(currentWindow),
+        },
         // @TODO-discuss This is duplicated in App's menu tab, is it necessary under file tab also ??
         // ...(
         //   isMac ? [

src/pages/Home/Home.tsx

@@ -3,7 +3,9 @@ import electron from "electron";
 import * as electronFs from "fs";
 import { toast } from "react-toastify";
 import React, { useMemo, useState } from "react";
+import { Button } from "react-bootstrap";
 import {
+  faClose,
   faCogs,
   faDatabase,
   faFileCode,
@@ -32,9 +34,11 @@ const Home = () => {
     db,
     loadingStatus,
     initialized,
+    scanInfo,
+    importedSqliteFilePath,
     jsonParser,
     sqliteParser,
-    importedSqliteFilePath,
+    closeFile,
   } = useWorkbenchDB();
 
   const [historyRefreshToken, setRefreshToken] = useState(0);
@@ -114,6 +118,21 @@ const Home = () => {
                 OR Simply drop your json / sqlite file anywhere in the app !!
               </h5>
             </div>
+            {db && initialized && (
+              <div className="currentscan">
+                <h5>
+                  Imported scan - {scanInfo.json_file_name}
+                  <Button
+                    variant="outline-danger"
+                    className="mx-2"
+                    size="sm"
+                    onClick={closeFile}
+                  >
+                    <FontAwesomeIcon icon={faClose} /> Close
+                  </Button>
+                </h5>
+              </div>
+            )}
             <div className="history">
               <br />
               <h5>Recent files</h5>

src/pages/Home/home.css

@@ -41,16 +41,25 @@
 .drop-instruction {
   text-align: center;
   width: 100%;
-  margin-top: 50px;
+  margin-top: 25px;
   color: var(--lightTextColor);
 }
 
 .quicklinks,
+.currentscan,
 .history {
-  margin-top: 15px;
   padding-left: 2rem;
 }
 
+.currentscan {
+  margin-top: 35px;
+  margin-bottom: 5px;
+}
+
+.quicklinks {
+  margin-top: 10px;
+}
+
 .history table {
   min-width: 80%;
   max-width: 95%;

src/pages/ScanInfo/ScanInfo.tsx

@@ -19,6 +19,8 @@ const ScanInfo = () => {
       {scanInfo ? (
         <table border={1} className="overview-table">
           <tbody>
+            <InfoEntry name="Scan">{scanInfo.json_file_name}</InfoEntry>
+
             <InfoEntry name="Tool">{scanInfo.tool_name}</InfoEntry>
 
             <InfoEntry name="Tool version">{scanInfo.tool_version}</InfoEntry>

src/services/importedJsonTypes.ts

@@ -1,6 +1,7 @@
 import { JSON_Type } from "./models/databaseUtils";
 
 export interface ParsedJsonHeader {
+  json_file_name: string;
   tool_name: string;
   tool_version: string;
   notice: string;

src/services/models/header.ts

@@ -19,6 +19,7 @@ import { JSON_Type, jsonDataType } from "./databaseUtils";
 
 export interface HeaderAttributes {
   id: number;
+  json_file_name: string;
   tool_name: string;
   tool_version: string;
   notice: string;
@@ -52,6 +53,7 @@ export default function headerModel(sequelize: Sequelize) {
         primaryKey: true,
         type: DataTypes.INTEGER,
       },
+      json_file_name: DataTypes.STRING,
       tool_name: DataTypes.STRING,
       tool_version: DataTypes.STRING,
       notice: DataTypes.STRING,

src/services/workbenchDB.ts

@@ -61,7 +61,7 @@ const { version: workbenchVersion } = packageJson;
  *
  * The config will load an existing database or will create a new, empty
  * database if none exists. For a new database, the data is loaded from a JSON
- * file by calling addFromJson(jsonFileName).
+ * file by calling addFromJson(jsonFilePath).
  *
  * @param config
  * @param config.dbName
@@ -271,16 +271,16 @@ export class WorkbenchDB {
 
   // Add rows to the flattened files table from a ScanCode json object
   addFromJson(
-    jsonFileName: string,
+    jsonFilePath: string,
     onProgressUpdate: (progress: number) => void
   ): Promise<void> {
-    if (!jsonFileName) {
-      throw new Error("Invalid json file name: " + jsonFileName);
+    if (!jsonFilePath) {
+      throw new Error("Invalid json file name: " + jsonFilePath);
     }
 
-    // console.log("Adding from json with params", { jsonFileName, workbenchVersion, onProgressUpdate });
+    // console.log("Adding from json with params", { jsonFilePath, workbenchVersion, onProgressUpdate });
 
-    const stream = fs.createReadStream(jsonFileName, { encoding: "utf8" });
+    const stream = fs.createReadStream(jsonFilePath, { encoding: "utf8" });
     let files_count = 0;
     let dirs_count = 0;
     let index = 0;
@@ -303,7 +303,7 @@ export class WorkbenchDB {
           let batchCount = 0;
           let TopLevelData: TopLevelDataFormat = {
             header: null,
-            parsedHeader: this._parseHeader(workbenchVersion, {}),
+            parsedHeader: this._parseHeader(jsonFilePath, workbenchVersion, {}),
             packages: [],
             dependencies: [],
             license_clues: [],
@@ -318,7 +318,10 @@ export class WorkbenchDB {
           stream
             .pipe(JSONStream.parse("files.*")) // files field is piped to 'data' & rest to 'header' (Includes other top level fields)
             .on("header", (rawTopLevelData: any) => {
-              TopLevelData = this._parseTopLevelFields(rawTopLevelData);
+              TopLevelData = this._parseTopLevelFields(
+                jsonFilePath,
+                rawTopLevelData
+              );
 
               files_count = Number(TopLevelData.parsedHeader.files_count);
               promiseChain = promiseChain
@@ -443,11 +446,18 @@ export class WorkbenchDB {
   }
 
   // Helper function for parsing Toplevel data
-  _parseTopLevelFields(rawTopLevelData: any): TopLevelDataFormat {
+  _parseTopLevelFields(
+    jsonFilePath: string,
+    rawTopLevelData: any
+  ): TopLevelDataFormat {
     const header = rawTopLevelData.headers
       ? rawTopLevelData.headers[0] || {}
       : {};
-    const parsedHeader = this._parseHeader(workbenchVersion, header);
+    const parsedHeader = this._parseHeader(
+      jsonFilePath,
+      workbenchVersion,
+      header
+    );
     const packages = rawTopLevelData.packages || [];
     const dependencies = rawTopLevelData.dependencies || [];
     const license_detections: TopLevelLicenseDetection[] = (
@@ -493,10 +503,11 @@ export class WorkbenchDB {
     };
   }
 
-  _parseHeader(workbenchVersion: string, header: any) {
+  _parseHeader(jsonFilePath: string, workbenchVersion: string, header: any) {
     const input = header.options?.input || [];
     delete header.options?.input;
     const parsedHeader: ParsedJsonHeader = {
+      json_file_name: path.basename(jsonFilePath),
       tool_name: header.tool_name,
       tool_version: header.tool_version,
       notice: header.notice,

src/utils/parsers.ts

@@ -33,6 +33,7 @@ export enum ScanOptionKeys {
 }
 
 export interface ScanInfo {
+  json_file_name: string;
   tool_name: string;
   tool_version: string;
   notice: string;
@@ -65,6 +66,7 @@ export function parseScanInfo(
   );
 
   const parsedScanInfo: ScanInfo = {
+    json_file_name: rawInfo.getDataValue("json_file_name") || "Not available",
     tool_name: rawInfo.getDataValue("tool_name") || "",
     tool_version: rawInfo.getDataValue("tool_version") || "",
     notice: rawInfo.getDataValue("notice") || "",