Added info popup for reviews

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>
aboutcode-org · Nov 10, 2023 · b85d986 · b85d986
1 parent 5c24602
commit b85d986
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 20 deletions.
diff --git a/src/components/LicenseEntity/LicenseMatchesTable.tsx b/src/components/LicenseEntity/LicenseMatchesTable.tsx
@@ -29,7 +29,10 @@ const LicenseMatchesTable = (props: LicenseMatchProps) => {
     <MatchedTextProvider>
       <div>
         {matchesInfo.matches.map((match) => (
-          <div className="matches-table-container">
+          <div
+            className="matches-table-container"
+            key={match.license_expression}
+          >
             <Table size="sm" bordered>
               <tbody>
                 <tr>

diff --git a/src/components/LicenseEntity/licenseEntity.css b/src/components/LicenseEntity/licenseEntity.css
@@ -25,6 +25,10 @@
   margin: 0;
 }
 
+.matches-table-container table tr td {
+  padding: 7px;
+}
+
 .matches-table-container table tr td:first-child {
   font-weight: 500;
   width: 190px;

diff --git a/src/pages/DependencyInfoDash/dependencyInfoDash.css b/src/pages/DependencyInfoDash/dependencyInfoDash.css
@@ -26,6 +26,8 @@
   height: auto;
 }
 
+
+.scope-summary-table .ag-center-cols-viewport .ag-center-cols-container,
 .scope-summary-table .ag-body-viewport,
 .scope-summary-table .ag-body {
   height: auto;
@@ -35,6 +37,7 @@
   flex: none;
 }
 
-.scope-summary-table .ag-center-cols-viewport {
-  height: auto;
-}
+.scope-summary-table .ag-center-cols-viewport .ag-center-cols-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
diff --git a/src/pages/Licenses/Licenses.css b/src/pages/Licenses/Licenses.css
@@ -55,6 +55,17 @@
   padding: 1px;
   padding-left: 7px;
   font-weight: 700;
+  display: flex;
+  justify-content: space-between;
+}
+
+.licenses-navigator-pane-title .info-icon {
+  display: flex;
+  cursor: pointer;
+  flex-direction: row-reverse;
+  width: fit-content;
+  margin-right: 20px;
+  margin-top: 2px;
 }
 
 .license-item {

diff --git a/src/pages/Licenses/Licenses.tsx b/src/pages/Licenses/Licenses.tsx
@@ -1,18 +1,20 @@
-import { Allotment } from "allotment";
 import React, { useEffect, useState } from "react";
+import { Allotment } from "allotment";
 import {
   Badge,
   Form,
   InputGroup,
   ListGroup,
   ListGroupItem,
+  OverlayTrigger,
+  Tooltip,
 } from "react-bootstrap";
 import Select from "react-select";
 import { toast } from "react-toastify";
 import { ThreeDots } from "react-loader-spinner";
 import { useSearchParams } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faExclamation, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 
 import LicenseEntity from "../../components/LicenseEntity/LicenseEntity";
 import NoDataFallback from "../../components/NoDataSection";
@@ -224,9 +226,9 @@ const LicenseDetections = () => {
     license: LicenseDetectionDetails | LicenseClueDetails
   ) => {
     if (reviewFilter === REVIEW_STATUS_OPTIONS.ALL) return true;
-    if (reviewFilter === REVIEW_STATUS_OPTIONS.VETTED)
+    if (reviewFilter === REVIEW_STATUS_OPTIONS.REVIEWED)
       return reviewedLicenses.has(license.identifier);
-    if (reviewFilter === REVIEW_STATUS_OPTIONS.UNVETTED)
+    if (reviewFilter === REVIEW_STATUS_OPTIONS.UNREVIEWED)
       return !reviewedLicenses.has(license.identifier);
     return true;
   };
@@ -297,9 +299,26 @@ const LicenseDetections = () => {
               className="licenses-navigator-pane pb-2"
             >
               <div className="licenses-navigator-pane-title">
-                {licenseDetections.length > 0
-                  ? "License Detections"
-                  : "No license detections"}
+                <span>
+                  {licenseDetections.length > 0
+                    ? "License Detections"
+                    : "No license detections"}
+                </span>
+                <OverlayTrigger
+                  placement="left"
+                  trigger="click"
+                  overlay={
+                    <Tooltip>
+                      Tick the checkboxes below to mark licenses as reviewed
+                    </Tooltip>
+                  }
+                >
+                  <FontAwesomeIcon
+                    icon={faInfoCircle}
+                    width={200}
+                    className="info-icon"
+                  />
+                </OverlayTrigger>
               </div>
               <ListGroup
                 hidden={licenseDetections.length === 0}
@@ -437,11 +456,7 @@ const LicenseDetections = () => {
             </Allotment.Pane>
           </Allotment>
         </Allotment.Pane>
-        <Allotment.Pane
-          snap
-          minSize={500}
-          className="license-entity-pane overflow-scroll"
-        >
+        <Allotment.Pane snap minSize={500} className="license-entity-pane">
           <LicenseEntity
             activeLicenseEntity={activeLicense}
             activeLicenseTodo={todos.get(activeLicense?.license.identifier)}

diff --git a/src/pages/Licenses/licenseDefinitions.ts b/src/pages/Licenses/licenseDefinitions.ts
@@ -44,11 +44,16 @@ export type ActiveLicenseEntity =
       license: LicenseClueDetails;
     };
 
+export enum ReviewOptionKeys {
+  ALL = "ALL",
+  REVIEWED = "REVIEWED",
+  UNREVIEWED = "UNREVIEWED",
+}
 export interface ReviewOption {
   value: string;
   label: string;
 }
-export const REVIEW_STATUS_OPTIONS: Record<string, ReviewOption> = {
+export const REVIEW_STATUS_OPTIONS: Record<ReviewOptionKeys, ReviewOption> = {
   ALL: { value: "ALL", label: "All" },
   REVIEWED: { value: "REVIEWED", label: "Reviewed" },
   UNREVIEWED: { value: "UNREVIEWED", label: "Unreviewed" },

diff --git a/src/styles/entityCommonStyles.css b/src/styles/entityCommonStyles.css
@@ -42,6 +42,7 @@
   height: auto;
 }
 
+.entity-table .ag-center-cols-viewport .ag-center-cols-container,
 .entity-table .ag-body-viewport,
 .entity-table .ag-body {
   height: auto;
@@ -50,6 +51,7 @@
   flex: none;
 }
 
-.entity-table .ag-center-cols-viewport {
-  height: auto;
-}
+.entity-table .ag-center-cols-viewport .ag-center-cols-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+}