Skip to content

Commit 5b6e2ed

Browse files
OmkarPhOmkarPh
committed
Fixed chart styles & added menu bar entries
Signed-off-by: Omkar Phansopkar <[email protected]>
1 parent ac4acaa commit 5b6e2ed

File tree

22 files changed

+636
-656
lines changed

22 files changed

+636
-656
lines changed

‎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 & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,143 @@
1-
import { faArchive, faBars, faChartColumn, faCopyright, faFileCode, faFileLines, faGavel, faHome, faInfoCircle, faList,faListCheck,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: "Copyright Info Dashboard",
35-
route: "/" + ROUTES.COPYRIGHT_DASHBOARD,
36-
icon: faCopyright,
37-
},
38-
{
39-
title: "Package Info Dashboard",
40-
route: "/" + ROUTES.PACKAGE_DASHBOARD,
41-
icon: faArchive,
42-
},
43-
{
44-
title: "Dependency Info Dashboard",
45-
route: "/" + ROUTES.DEPENDENCY_DASHBOARD,
46-
icon: faListCheck,
47-
},
48-
{
49-
title: "Licenses Explorer",
50-
route: "/" + ROUTES.LICENSES,
51-
icon: faList,
52-
},
53-
{
54-
title: "Packages Explorer",
55-
route: "/" + ROUTES.PACKAGES,
56-
icon: faList,
57-
},
58-
{
59-
title: "Chart Summary View",
60-
route: "/" + ROUTES.CHART_SUMMARY,
61-
icon: faChartColumn,
62-
},
63-
{
64-
title: "Scan Info",
65-
route: "/" + ROUTES.SCAN_INFO,
66-
icon: faFileCode,
67-
},
68-
{
69-
title: "About Workbench",
70-
route: "/" + ROUTES.ABOUT,
71-
icon: faInfoCircle,
72-
},
73-
]
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+
];
7494

7595
const Navbar = () => {
76-
const navigate = useNavigate();
77-
const location = useLocation();
78-
79-
const [collapsed, setCollapsed] = useState<boolean>(true);
80-
const expandOnHover = true;
96+
const navigate = useNavigate();
97+
const location = useLocation();
8198

82-
return (
83-
<>
84-
<ProSidebar
85-
collapsed={collapsed}
86-
onMouseEnter={() => expandOnHover && setCollapsed(false)}
87-
onMouseLeave={() => expandOnHover && setCollapsed(true)}
88-
className='navbar-wrapper'
89-
>
90-
<SidebarContent>
91-
<Menu iconShape="round">
92-
{
93-
MENU_ITEMS.map(menuItem => (
94-
<MenuItem
95-
key={menuItem.route}
96-
active={menuItem.route === location.pathname}
97-
icon={<FontAwesomeIcon icon={menuItem.icon} />}
98-
onClick={() => navigate(menuItem.route)}
99-
>
100-
{ menuItem.title }
101-
</MenuItem>
102-
))
103-
}
104-
</Menu>
105-
</SidebarContent>
106-
<SidebarFooter>
107-
<Menu iconShape="round">
108-
<MenuItem
109-
icon={<FontAwesomeIcon icon={faBars} />}
110-
onClick={() => setCollapsed(prev => !prev)}
111-
>
112-
Collapse
113-
</MenuItem>
114-
</Menu>
115-
</SidebarFooter>
116-
</ProSidebar>
99+
const [collapsed, setCollapsed] = useState<boolean>(true);
100+
const expandOnHover = true;
117101

118-
{/* Dummy sidebar-sized div to occupy space in dom */}
119-
{/* @TODO - Try :before or some other css way to handle this instead */}
120-
<div className='dummy-sidebar' />
121-
</>
122-
)
123-
}
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>
124135

125-
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;

‎src/components/PackagesEntityDetails/DependencyEntity.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
55
import { faCheck, faCogs } from "@fortawesome/free-solid-svg-icons";
66

77
import { DependencyDetails } from "../../pages/Packages/packageDefinitions";
8-
import { DependencyScopeMapping } from "./dependencyScopeMapper";
98

109
import "../../styles/entityCommonStyles.css";
11-
import "./dependencyEntity.css";
1210

1311
interface DependencyEntityProps {
1412
dependency: DependencyDetails;
@@ -32,25 +30,15 @@ const DependencyEntity = (props: DependencyEntityProps) => {
3230
return (
3331
<div className="dependency-entity">
3432
<h5>{dependency.purl}</h5>
35-
{dependency.is_runtime ? (
33+
{dependency.is_runtime && (
3634
<Badge pill bg="primary">
3735
<FontAwesomeIcon icon={faCogs} /> Runtime
3836
</Badge>
39-
) : dependency.is_optional ? (
40-
<Badge pill bg="dark">
41-
{DependencyScopeMapping[dependency.scope] ? (
42-
<>
43-
<FontAwesomeIcon
44-
icon={DependencyScopeMapping[dependency.scope].icon}
45-
/>{" "}
46-
{DependencyScopeMapping[dependency.scope].text}
47-
</>
48-
) : (
49-
dependency.scope || "Optional"
50-
)}
37+
)}
38+
{dependency.is_optional && (
39+
<Badge pill bg="warning" text="dark">
40+
<FontAwesomeIcon icon={faCogs} /> Optional
5141
</Badge>
52-
) : (
53-
""
5442
)}
5543
{dependency.is_resolved && (
5644
<Badge pill bg="success">

0 commit comments

Comments
 (0)