From b85d9867487079862682a44b3b6075ac11da1c09 Mon Sep 17 00:00:00 2001
From: Omkar Phansopkar <omkarphansopkar@gmail.com>
Date: Sat, 11 Nov 2023 01:04:06 +0530
Subject: [PATCH] Added info popup for reviews

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>
---
 .../LicenseEntity/LicenseMatchesTable.tsx     |  5 ++-
 .../LicenseEntity/licenseEntity.css           |  4 ++
 .../DependencyInfoDash/dependencyInfoDash.css |  9 +++--
 src/pages/Licenses/Licenses.css               | 11 ++++++
 src/pages/Licenses/Licenses.tsx               | 39 +++++++++++++------
 src/pages/Licenses/licenseDefinitions.ts      |  7 +++-
 src/styles/entityCommonStyles.css             |  8 ++--
 7 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/LicenseEntity/LicenseMatchesTable.tsx b/src/components/LicenseEntity/LicenseMatchesTable.tsx
index 19ddc465..daaf0009 100644
--- 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
index 30e8655a..73a4cdb8 100644
--- 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
index 491961ab..c46637c5 100644
--- 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;
-}
\ No newline at end of file
+.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
index 49522b08..9d76c964 100644
--- 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
index 8873e22d..70e60756 100644
--- 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
index 806c565a..4a8a6025 100644
--- 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
index f0b296b3..8791acf4 100644
--- 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;
+}
\ No newline at end of file