DT-1442 Fixes error/warnings on dialogs

scanoss · Jan 2, 2024 · 82056d3 · 82056d3
1 parent 8307e43
commit 82056d3
Show file tree

Hide file tree

Showing 17 changed files with 69 additions and 76 deletions.
diff --git a/assets/i18n/en/Tooltip.json b/assets/i18n/en/Tooltip.json
@@ -47,5 +47,6 @@
   "Detected": "Detected",
   "NotDetected": "Not Detected",
   "Ignored": "Ignored",
-  "Progress": "Progress"
+  "Progress": "Progress",
+  "RefreshReportButtonLabel": "Update report for the latest vulnerabilities and cryptography data"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -107,8 +107,8 @@
   },
   "dependencies": {
     "@electron/rebuild": "^3.2.13",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",

diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/src/api/services/cryptography.service.ts b/src/api/services/cryptography.service.ts
@@ -8,8 +8,4 @@ class CryptographyService extends BaseService {
   }
 }
 
-
-
 export const cryptographyService = new CryptographyService();
-
-document.crypto = cryptographyService;
diff --git a/src/api/services/vulnerability.service.ts b/src/api/services/vulnerability.service.ts
@@ -1,7 +1,7 @@
-import { VulnerabilitiesGetAllDTO } from "@api/dto";
-import { IpcChannels } from "@api/ipc-channels";
-import { ComponentVulnerability } from "main/model/entity/ComponentVulnerability";
-import { BaseService } from "./base.service";
+import { VulnerabilitiesGetAllDTO } from '@api/dto';
+import { IpcChannels } from '@api/ipc-channels';
+import { ComponentVulnerability } from 'main/model/entity/ComponentVulnerability';
+import { BaseService } from './base.service';
 
 class VulnerabilityService extends BaseService {
   public async getAll(params: VulnerabilitiesGetAllDTO): Promise<ComponentVulnerability[]> {
@@ -16,5 +16,3 @@ class VulnerabilityService extends BaseService {
 }
 
 export const vulnerabilityService = new VulnerabilityService();
-
-document.vul = vulnerabilityService;
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -96,7 +96,7 @@ const createWindow = async () => {
 
   mainWindow = new BrowserWindow({
     show: false,
-    width: 1300,
+    width: 1330,
     height: 820,
     icon: getAssetPath('icon.png'),
     webPreferences: {

diff --git a/src/renderer/components/LicenseSelector/LicenseSelector.tsx b/src/renderer/components/LicenseSelector/LicenseSelector.tsx
@@ -84,7 +84,6 @@ const LicenseSelector: React.FC<Partial<LicenseSelectorProps>> = (props) => {
               InputProps={{
                 ...params.InputProps,
                 startAdornment: <SearchIcon />,
-                disableUnderline: true,
                 className: 'autocomplete-option',
               }}
             />

diff --git a/src/renderer/features/workbench/pages/report/components/CryptographyDataTable.tsx b/src/renderer/features/workbench/pages/report/components/CryptographyDataTable.tsx
@@ -42,7 +42,11 @@ const CryptographyDataTable = ({ data }) => {
 
   // empty
   if (!data || data.length === 0) {
-    return <p className="text-center mt-5 mb-3">{t('NoData')}</p>;
+    return (
+      <div className="empty-table">
+        <p className="text-center mt-5 mb-3">{t('NoDataFound')}</p>
+      </div>
+    );
   }
 
   return (
@@ -57,6 +61,7 @@ const CryptographyDataTable = ({ data }) => {
           rowGetter={({ index }) => items.current[index]}
           headerClassName={classes.headerColumn}
           rowClassName={classes.row}
+          index={(index) => `${items.current[index].purl}@${items.current[index].version}`}
         >
           <Column label={t('Table:Header:PURL')} dataKey="purl" width={200} flexGrow={1} flexShrink={0} />
           <Column label={t('Table:Header:Version')} dataKey="version" width={100} flexGrow={1} flexShrink={0} />

diff --git a/src/renderer/features/workbench/pages/report/pages/scan/DetectedReport.tsx b/src/renderer/features/workbench/pages/report/pages/scan/DetectedReport.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Chart, registerables } from 'chart.js';
 import {
   Button,
-  Card, IconButton, Tab, Tabs,
+  Card, IconButton, Tab, Tabs, Tooltip,
 } from '@mui/material';
 import obligationsService from '@api/services/obligations.service';
 import ArrowForwardOutlinedIcon from '@mui/icons-material/ArrowForwardOutlined';
@@ -108,17 +108,20 @@ const DetectedReport = ({ data, onRefresh }) => {
         </ConditionalLink>
       </Card>
 
-      <Tabs value={tab} onChange={(e, value) => setTab(value)} className="tabs-navigator">
-        <Tab value="matches" label={t('Title:MatchedTab')} />
-        { layers.current.has(Scanner.ScannerType.DEPENDENCIES) && <Tab value="dependencies" label={t('Title:DeclaredDependenciesTab')} />}
-        <Tab value="obligations" label={t('Title:ObligationsTab')} />
-        { layers.current.has(Scanner.ScannerType.CRYPTOGRAPHY) && <Tab value="cryptography" label={t('Title:CryptographyTab')} />}
-        <div className="refresh-btn-container">
+      <div className="tabs-navigator">
+        <Tabs value={tab} onChange={(e, value) => setTab(value)}>
+          <Tab value="matches" label={t('Title:MatchedTab')} />
+          { layers.current.has(Scanner.ScannerType.DEPENDENCIES) && <Tab value="dependencies" label={t('Title:DeclaredDependenciesTab')} />}
+          <Tab value="obligations" label={t('Title:ObligationsTab')} />
+          { layers.current.has(Scanner.ScannerType.CRYPTOGRAPHY) && <Tab value="cryptography" label={t('Title:CryptographyTab')} />}
+        </Tabs>
+
+        <Tooltip title={t('Tooltip:RefreshReportButtonLabel')} classes={{ tooltip: 'tooltip' }}>
           <IconButton onClick={onRefresh}>
             <RefreshIcon />
           </IconButton>
-        </div>
-      </Tabs>
+        </Tooltip>
+      </div>
 
       {tab === 'matches' && (
         <Card className="report-item matches-for-license">

diff --git a/src/renderer/features/workbench/pages/report/pages/scan/IdentifiedReport.tsx b/src/renderer/features/workbench/pages/report/pages/scan/IdentifiedReport.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Chart, registerables } from 'chart.js';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
 import {
-  Button, Card, IconButton, Tab, Tabs,
+  Button, Card, IconButton, Tab, Tabs, Tooltip,
 } from '@mui/material';
 import obligationsService from '@api/services/obligations.service';
 import { ConditionalLink } from '@components/ConditionalLink/ConditionalLink';
@@ -132,17 +132,21 @@ const IdentifiedReport = ({ data, onRefresh }) => {
         </ConditionalLink>
       </Card>
 
-      <Tabs value={tab} onChange={(e, value) => setTab(value)} className="tabs-navigator">
-        <Tab value="matches" label={t('Title:MatchedTab')} />
-        { layers.current.has(Scanner.ScannerType.DEPENDENCIES) && <Tab value="dependencies" label={t('Title:IdentifiedDependenciesTab')} />}
-        <Tab value="obligations" label={t('Title:ObligationsTab')} />
-        { layers.current.has(Scanner.ScannerType.CRYPTOGRAPHY) && <Tab value="cryptography" label={t('Title:CryptographyTab')} />}
-        <div className="refresh-btn-container">
+
+      <div className="tabs-navigator">
+        <Tabs value={tab} onChange={(e, value) => setTab(value)}>
+          <Tab value="matches" label={t('Title:MatchedTab')} />
+          { layers.current.has(Scanner.ScannerType.DEPENDENCIES) && <Tab value="dependencies" label={t('Title:IdentifiedDependenciesTab')} />}
+          <Tab value="obligations" label={t('Title:ObligationsTab')} />
+          { layers.current.has(Scanner.ScannerType.CRYPTOGRAPHY) && <Tab value="cryptography" label={t('Title:CryptographyTab')} />}
+        </Tabs>
+
+        <Tooltip title={t('Tooltip:RefreshReportButtonLabel')} classes={{ tooltip: 'tooltip' }}>
           <IconButton onClick={onRefresh}>
             <RefreshIcon />
           </IconButton>
-        </div>
-      </Tabs>
+        </Tooltip>
+      </div>
 
       {tab === 'matches' && (
         <Card className="report-item matches-for-license">

diff --git a/src/renderer/features/workbench/pages/report/pages/scan/ScanReport.scss b/src/renderer/features/workbench/pages/report/pages/scan/ScanReport.scss
@@ -56,19 +56,12 @@
 
     .tabs-navigator {
       grid-area: C;
-      position: relative;
-
-      .refresh-btn-container {
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 0;
-        height: 100%;
-        right: 0;
-      }
 
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
+
     .licenses-obligation, .matches-for-license, .cryptography, .dependencies-table {
       grid-area: D;
 
@@ -107,7 +100,6 @@
         grid-area: A2;
       }
 
-
     }
 
     .report-item {

diff --git a/src/renderer/features/workbench/pages/report/pages/vulnerabilities/VulnerabilitiesReport.tsx b/src/renderer/features/workbench/pages/report/pages/vulnerabilities/VulnerabilitiesReport.tsx
@@ -24,7 +24,6 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 import TableCellActions from '@components/TableCellActions/TableCellActions';
 import { vulnerabilityService } from '@api/services/vulnerability.service';
-import { cryptographyService } from '@api/services/cryptography.service';
 import { SourceType } from '@api/dto';
 import useSearchParams from '@hooks/useSearchParams';
 import { useNavigate } from 'react-router-dom'; // TODO: use alias?
@@ -53,10 +52,6 @@ const VulnerabilitiesReport = () => {
   const init = async () => {
     const source = type === SourceType.identified ? SourceType.identified : SourceType.detected;
     const response = await vulnerabilityService.getAll({ type: source });
-
-    // TODO:Remove this line , just for testing
-    await cryptographyService.update();
-
     data.current = response;
 
     setItems(data.current);

diff --git a/src/renderer/theme/Main.global.scss b/src/renderer/theme/Main.global.scss
@@ -166,3 +166,9 @@ a {
 .selectable, .selectable * {
   -webkit-user-select: text !important;
 }
+
+.tooltip {
+  text-align: center;
+  font-size: .75rem;
+  max-width: 140px;
+}
diff --git a/src/renderer/ui/dialog/ComponentSearcherDialog.tsx b/src/renderer/ui/dialog/ComponentSearcherDialog.tsx
@@ -238,7 +238,6 @@ const ComponentSearcherDialog = (props: ComponentSearcherDialogProps) => {
                       {...params}
                       InputProps={{
                         ...params.InputProps,
-                        disableUnderline: true,
                         className: 'autocomplete-option',
                       }}
                     />

diff --git a/src/renderer/ui/dialog/InventoryDialog.tsx b/src/renderer/ui/dialog/InventoryDialog.tsx
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
   keep: {
     '& .MuiInputBase-input': {
       fontStyle: 'italic',
-      color: 'gray'
+      color: 'gray',
     }
   },
 }));
@@ -436,7 +436,6 @@ export const InventoryDialog = (props: InventoryDialogProps) => {
                       InputProps={{
                         ...params.InputProps,
                         startAdornment: <SearchIcon />,
-                        disableUnderline: true,
                         className: 'autocomplete-option',
                       }}
                     />
@@ -475,7 +474,6 @@ export const InventoryDialog = (props: InventoryDialogProps) => {
                       InputProps={{
                         ...params.InputProps,
                         startAdornment: <SearchIcon />,
-                        disableUnderline: true,
                         className: 'autocomplete-option',
                       }}
                     />
@@ -573,8 +571,7 @@ export const InventoryDialog = (props: InventoryDialogProps) => {
                   size="small"
                   fullWidth
                   value={form?.usage || 'file'}
-                  disableUnderline
-                  className={ form?.usage === 'keep' ? classes.keep : ''}
+                  className={form?.usage === 'keep' ? classes.keep : ''}
                   onChange={(e) => inputHandler(e)}
                 >
                   { options.keepOriginalOption && <MenuItem value="keep" sx={{fontStyle: 'italic', color: 'gray'}}>{t('KeepOriginalUsage')}</MenuItem> }

diff --git a/src/renderer/ui/dialog/SettingsDialog.tsx b/src/renderer/ui/dialog/SettingsDialog.tsx
@@ -140,9 +140,9 @@ interface SettingDialogProps {
 const SettingDialog = ({ open, onClose, onCancel }: SettingDialogProps) => {
   const { t, i18n } = useTranslation();
 
-  const [selectedApi, setSelectedApi] = useState(null);
-  const [apis, setApis] = useState([]);
-  const [sbomLedgerToken, setSbomLedgerToken] = useState(null);
+  const [selectedApi, setSelectedApi] = useState<any>('');
+  const [apis, setApis] = useState<any[]>([]);
+  const [sbomLedgerToken, setSbomLedgerToken] = useState<string>('');
   const [language, setLanguage] = useState<string>('en');
   const [apiDialog, setApiDialog] = useState({
     open: false,
@@ -266,7 +266,7 @@ const SettingDialog = ({ open, onClose, onCancel }: SettingDialogProps) => {
                   <Paper className="dialog-form-field-control">
                     <Autocomplete
                       fullWidth
-                      value={selectedApi}
+                      value={selectedApi || ''}
                       onChange={handleOnChange}
                       onKeyPress={(e: any) => {
                         if (e.key === 'Enter') {
@@ -344,7 +344,6 @@ const SettingDialog = ({ open, onClose, onCancel }: SettingDialogProps) => {
                           {...params}
                           InputProps={{
                             ...params.InputProps,
-                            disableUnderline: true,
                           }}
                         />
                       )}
@@ -371,7 +370,7 @@ const SettingDialog = ({ open, onClose, onCancel }: SettingDialogProps) => {
                 <TextField
                   name="token"
                   fullWidth
-                  value={sbomLedgerToken}
+                  value={sbomLedgerToken || ''}
                   onChange={(e) => setSbomLedgerToken(e.target.value)}
                 />
               </Paper>
@@ -385,8 +384,7 @@ const SettingDialog = ({ open, onClose, onCancel }: SettingDialogProps) => {
                   name="usage"
                   size="small"
                   fullWidth
-                  disableUnderline
-                  value={language}
+                  value={language || ''}
                   onChange={(e) => setLanguage(e.target.value as string)}
                 >
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,8 +8,4 @@ class CryptographyService extends BaseService { @@
       }
     }
     export const cryptographyService = new CryptographyService();
-    document.crypto = cryptographyService;