Skip to content

Commit 7b04e6a

Browse files
OmkarPhOmkarPh
authored
Merge pull request #585 from nexB/feature/dashboardUpdates
Dashboard updates
2 parents c8b8332 + 8783691 commit 7b04e6a

File tree

29 files changed

+1134
-683
lines changed

29 files changed

+1134
-683
lines changed

‎src/App.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { HashRouter, Route,Routes } from "react-router-dom";
2+
import { HashRouter, Route, Routes } from "react-router-dom";
33
import { ToastContainer } from "react-toastify";
44

55
import DropZone from "./components/DropZone/DropZone";
@@ -13,7 +13,9 @@ import FileInfoDash from "./pages/FileInfoDash/FileInfoDash";
1313
import Home from "./pages/Home/Home";
1414
import Licenses from "./pages/Licenses/Licenses";
1515
import LicenseInfoDash from "./pages/LicenseInfoDash/LicenseInfoDash";
16+
import CopyrightInfoDash from "./pages/CopyrightInfoDash/CopyrightInfoDash";
1617
import PackageInfoDash from "./pages/PackageInfoDash/PackageInfoDash";
18+
import DependencyInfoDash from "./pages/DependencyInfoDash/DependencyInfoDash";
1719
import Packages from "./pages/Packages/Packages";
1820
import PageNotFound from "./pages/PageNotFound";
1921
import ScanInfo from "./pages/ScanInfo/ScanInfo";
@@ -50,14 +52,19 @@ const App = () => {
5052
path={ROUTES.LICENSE_DASHBOARD}
5153
element={<LicenseInfoDash />}
5254
/>
55+
<Route
56+
path={ROUTES.COPYRIGHT_DASHBOARD}
57+
element={<CopyrightInfoDash />}
58+
/>
5359
<Route
5460
path={ROUTES.PACKAGE_DASHBOARD}
5561
element={<PackageInfoDash />}
5662
/>
5763
<Route
58-
path={ROUTES.LICENSES}
59-
element={<Licenses />}
64+
path={ROUTES.DEPENDENCY_DASHBOARD}
65+
element={<DependencyInfoDash />}
6066
/>
67+
<Route path={ROUTES.LICENSES} element={<Licenses />} />
6168
<Route path={ROUTES.PACKAGES} element={<Packages />} />
6269
<Route path={ROUTES.CHART_SUMMARY} element={<ChartView />} />
6370
<Route path={ROUTES.SCAN_INFO} element={<ScanInfo />} />
@@ -82,4 +89,4 @@ const App = () => {
8289
);
8390
};
8491

85-
export default App;
92+
export default App;

‎src/components/FileTree/FileTree.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@ import SwitcherIcon from "./SwitcherIcon";
1111
import "./FileTree.css";
1212

1313
const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
14-
const workbenchDB = useWorkbenchDB();
1514
const {
1615
db,
1716
initialized,
1817
importedSqliteFilePath,
1918
currentPath,
2019
updateCurrentPath,
21-
} = workbenchDB;
20+
} = useWorkbenchDB();
2221

2322
const [treeData, setTreeData] = useState<DataNode[] | null>(null);
2423
const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 134 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,143 @@
1-
import { faArchive, faBars, faChartColumn, faFileCode, faFileLines, faGavel, faHome, faInfoCircle, faList,faTable } from '@fortawesome/free-solid-svg-icons';
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import React, { useState } from 'react'
4-
import { Menu, MenuItem, ProSidebar, SidebarContent,SidebarFooter } from 'react-pro-sidebar';
5-
import { useLocation, useNavigate } from 'react-router-dom'
1+
import {
2+
faBars,
3+
faBoxOpen,
4+
faChartColumn,
5+
faCopyright,
6+
faFileCode,
7+
faFileLines,
8+
faFolderTree,
9+
faHome,
10+
faIdCard,
11+
faInfoCircle,
12+
faListCheck,
13+
faListUl,
14+
faTable,
15+
} from "@fortawesome/free-solid-svg-icons";
16+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
17+
import React, { useState } from "react";
18+
import {
19+
Menu,
20+
MenuItem,
21+
ProSidebar,
22+
SidebarContent,
23+
SidebarFooter,
24+
} from "react-pro-sidebar";
25+
import { useLocation, useNavigate } from "react-router-dom";
626

7-
import { ROUTES } from '../../constants/routes';
27+
import { ROUTES } from "../../constants/routes";
828

9-
import 'react-pro-sidebar/dist/css/styles.css';
10-
import './navbar.css';
29+
import "react-pro-sidebar/dist/css/styles.css";
30+
import "./navbar.css";
1131

1232
const MENU_ITEMS = [
13-
{
14-
title: "Home",
15-
route: ROUTES.HOME,
16-
icon: faHome,
17-
},
18-
{
19-
title: "Table View",
20-
route: "/" + ROUTES.TABLE_VIEW,
21-
icon: faTable,
22-
},
23-
{
24-
title: "File Info Dashboard",
25-
route: "/" + ROUTES.FILE_DASHBOARD,
26-
icon: faFileLines,
27-
},
28-
{
29-
title: "License Info Dashboard",
30-
route: "/" + ROUTES.LICENSE_DASHBOARD,
31-
icon: faGavel,
32-
},
33-
{
34-
title: "Package Info Dashboard",
35-
route: "/" + ROUTES.PACKAGE_DASHBOARD,
36-
icon: faArchive,
37-
},
38-
{
39-
title: "Licenses Explorer",
40-
route: "/" + ROUTES.LICENSES,
41-
icon: faList,
42-
},
43-
{
44-
title: "Packages Explorer",
45-
route: "/" + ROUTES.PACKAGES,
46-
icon: faList,
47-
},
48-
{
49-
title: "Chart Summary View",
50-
route: "/" + ROUTES.CHART_SUMMARY,
51-
icon: faChartColumn,
52-
},
53-
{
54-
title: "Scan Info",
55-
route: "/" + ROUTES.SCAN_INFO,
56-
icon: faFileCode,
57-
},
58-
{
59-
title: "About Workbench",
60-
route: "/" + ROUTES.ABOUT,
61-
icon: faInfoCircle,
62-
},
63-
]
33+
{
34+
title: "Home",
35+
route: ROUTES.HOME,
36+
icon: faHome,
37+
},
38+
{
39+
title: "Table View",
40+
route: "/" + ROUTES.TABLE_VIEW,
41+
icon: faTable,
42+
},
43+
{
44+
title: "File Info Dashboard",
45+
route: "/" + ROUTES.FILE_DASHBOARD,
46+
icon: faFileLines,
47+
},
48+
{
49+
title: "License Info Dashboard",
50+
route: "/" + ROUTES.LICENSE_DASHBOARD,
51+
icon: faIdCard,
52+
},
53+
{
54+
title: "Copyright Info Dashboard",
55+
route: "/" + ROUTES.COPYRIGHT_DASHBOARD,
56+
icon: faCopyright,
57+
},
58+
{
59+
title: "Package Info Dashboard",
60+
route: "/" + ROUTES.PACKAGE_DASHBOARD,
61+
icon: faBoxOpen,
62+
},
63+
{
64+
title: "Dependency Info Dashboard",
65+
route: "/" + ROUTES.DEPENDENCY_DASHBOARD,
66+
icon: faListCheck,
67+
},
68+
{
69+
title: "Licenses Explorer",
70+
route: "/" + ROUTES.LICENSES,
71+
icon: faListUl,
72+
},
73+
{
74+
title: "Packages Explorer",
75+
route: "/" + ROUTES.PACKAGES,
76+
icon: faFolderTree,
77+
},
78+
{
79+
title: "Chart Summary View",
80+
route: "/" + ROUTES.CHART_SUMMARY,
81+
icon: faChartColumn,
82+
},
83+
{
84+
title: "Scan Info",
85+
route: "/" + ROUTES.SCAN_INFO,
86+
icon: faFileCode,
87+
},
88+
{
89+
title: "About Workbench",
90+
route: "/" + ROUTES.ABOUT,
91+
icon: faInfoCircle,
92+
},
93+
];
6494

6595
const Navbar = () => {
66-
const navigate = useNavigate();
67-
const location = useLocation();
68-
69-
const [collapsed, setCollapsed] = useState<boolean>(true);
70-
const expandOnHover = true;
96+
const navigate = useNavigate();
97+
const location = useLocation();
7198

72-
return (
73-
<>
74-
<ProSidebar
75-
collapsed={collapsed}
76-
onMouseEnter={() => expandOnHover && setCollapsed(false)}
77-
onMouseLeave={() => expandOnHover && setCollapsed(true)}
78-
className='navbar-wrapper'
79-
>
80-
<SidebarContent>
81-
<Menu iconShape="round">
82-
{
83-
MENU_ITEMS.map(menuItem => (
84-
<MenuItem
85-
key={menuItem.route}
86-
active={menuItem.route === location.pathname}
87-
icon={<FontAwesomeIcon icon={menuItem.icon} />}
88-
onClick={() => navigate(menuItem.route)}
89-
>
90-
{ menuItem.title }
91-
</MenuItem>
92-
))
93-
}
94-
</Menu>
95-
</SidebarContent>
96-
<SidebarFooter>
97-
<Menu iconShape="round">
98-
<MenuItem
99-
icon={<FontAwesomeIcon icon={faBars} />}
100-
onClick={() => setCollapsed(prev => !prev)}
101-
>
102-
Collapse
103-
</MenuItem>
104-
</Menu>
105-
</SidebarFooter>
106-
</ProSidebar>
99+
const [collapsed, setCollapsed] = useState<boolean>(true);
100+
const expandOnHover = true;
107101

108-
{/* Dummy sidebar-sized div to occupy space in dom */}
109-
{/* @TODO - Try :before or some other css way to handle this instead */}
110-
<div className='dummy-sidebar' />
111-
</>
112-
)
113-
}
102+
return (
103+
<>
104+
<ProSidebar
105+
collapsed={collapsed}
106+
onMouseEnter={() => expandOnHover && setCollapsed(false)}
107+
onMouseLeave={() => expandOnHover && setCollapsed(true)}
108+
className="navbar-wrapper"
109+
>
110+
<SidebarContent>
111+
<Menu iconShape="round">
112+
{MENU_ITEMS.map((menuItem) => (
113+
<MenuItem
114+
key={menuItem.route}
115+
active={menuItem.route === location.pathname}
116+
icon={<FontAwesomeIcon icon={menuItem.icon} />}
117+
onClick={() => navigate(menuItem.route)}
118+
>
119+
{menuItem.title}
120+
</MenuItem>
121+
))}
122+
</Menu>
123+
</SidebarContent>
124+
<SidebarFooter>
125+
<Menu iconShape="round">
126+
<MenuItem
127+
icon={<FontAwesomeIcon icon={faBars} />}
128+
onClick={() => setCollapsed((prev) => !prev)}
129+
>
130+
Collapse
131+
</MenuItem>
132+
</Menu>
133+
</SidebarFooter>
134+
</ProSidebar>
114135

115-
export default Navbar
136+
{/* Dummy sidebar-sized div to occupy space in dom */}
137+
{/* @TODO - Try :before or some other css way to handle this instead */}
138+
<div className="dummy-sidebar" />
139+
</>
140+
);
141+
};
142+
143+
export default Navbar;

0 commit comments

Comments
 (0)