From 95f0f059f6af2d81c3a0ca4211be0681667f5794 Mon Sep 17 00:00:00 2001
From: Tri Thien Nguyen <119530400+AndrewThien@users.noreply.github.com>
Date: Tue, 17 Dec 2024 18:01:10 +0000
Subject: [PATCH] Add more contextual helps (#924)

---
 .../(protected)/scanreports/create/page.tsx   |  2 +-
 app/next-client-app/app/globals.css           |  4 +-
 app/next-client-app/components/Modal.tsx      | 37 --------
 app/next-client-app/components/Tooltips.tsx   |  2 +-
 .../components/core/footer.tsx                |  1 -
 .../components/datasets/CreateDatasetForm.tsx | 24 +++--
 .../scanreports/CreateScanReportForm.tsx      | 93 ++++++++++++-------
 7 files changed, 80 insertions(+), 83 deletions(-)
 delete mode 100644 app/next-client-app/components/Modal.tsx

diff --git a/app/next-client-app/app/(protected)/scanreports/create/page.tsx b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
index 5bcdd75f7..2dc425dd0 100644
--- a/app/next-client-app/app/(protected)/scanreports/create/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
@@ -17,7 +17,7 @@ export default async function ScanReports() {
         </Link>
       </div>
       <div className="flex justify-between mt-3">
-        <h1 className="text-4xl font-semibold">New Scan Report</h1>
+        <h1 className="text-4xl font-semibold">Upload Scan Report</h1>
       </div>
       <div className="mt-4">
         <CreateScanReportForm dataPartners={partners} projects={projects} />
diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index f6b5158aa..a2e642494 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -5,7 +5,7 @@
 @tailwind components {
   @layer components {
     .my-react-select-container .my-react-select__control {
-      @apply bg-white dark:bg-carrot-950 rounded-md border border-carrot-200 dark:border-carrot-800 hover:border-carrot-400 dark:hover:border-carrot-500;
+      @apply bg-white dark:bg-carrot-950 rounded-md border border-carrot-200 dark:border-carrot-800 hover:border-carrot-600 dark:hover:border-carrot-400;
     }
 
     .my-react-select-container .my-react-select__control--is-disabled {
@@ -13,7 +13,7 @@
     }
 
     .my-react-select-container .my-react-select__control--is-focused {
-      @apply border-carrot-500 hover:border-carrot-500 dark:border-carrot-400 dark:hover:border-carrot-400 shadow-none;
+      @apply ring-2 ring-carrot-950 ring-offset-2 hover:border-carrot-500 dark:border-carrot-400 dark:hover:border-carrot-400 shadow-none;
     }
 
     .my-react-select-container .my-react-select__menu {
diff --git a/app/next-client-app/components/Modal.tsx b/app/next-client-app/components/Modal.tsx
deleted file mode 100644
index 1bc334865..000000000
--- a/app/next-client-app/components/Modal.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-
-export function Modal({ children }: { children: React.ReactNode }) {
-  const handleOpenChange = () =>
-    // The below logic makes sure that the dialog will be closed and not coming back the last URL with pagination param, e.g., without ?p1,?p2
-    // --> Navigating to the new URL
-    (window.location.href = window.location.pathname.replace("summary", ""));
-
-  return (
-    <Dialog
-      defaultOpen={true}
-      open={true}
-      onOpenChange={handleOpenChange}
-      modal={true}
-    >
-      <DialogContent className="w-11/12 max-w-screen-2xl overflow-auto h-4/5">
-        <DialogHeader>
-          <DialogTitle>Summary of Mapping Rules list</DialogTitle>
-          <DialogDescription className="justify-center items-center text-center">
-            {" "}
-            The table below shows the list of mapping rules which have the Term
-            Map and have the Desination Field name without "_source_concept_id"
-          </DialogDescription>
-        </DialogHeader>
-        {children}
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/app/next-client-app/components/Tooltips.tsx b/app/next-client-app/components/Tooltips.tsx
index f78a98033..52ce5b20f 100644
--- a/app/next-client-app/components/Tooltips.tsx
+++ b/app/next-client-app/components/Tooltips.tsx
@@ -15,7 +15,7 @@ export function Tooltips({
   link?: string;
 }) {
   return (
-    <TooltipProvider>
+    <TooltipProvider delayDuration={100}>
       <Tooltip>
         <TooltipTrigger asChild>
           <InfoIcon className="ml-1 size-4 text-carrot" />
diff --git a/app/next-client-app/components/core/footer.tsx b/app/next-client-app/components/core/footer.tsx
index a610aacda..cad136baa 100644
--- a/app/next-client-app/components/core/footer.tsx
+++ b/app/next-client-app/components/core/footer.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import Image from "next/image";
 import { ReceiptText, ShieldQuestion } from "lucide-react";
 
 const Footer = () => {
diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index b54687df6..48a9c6c75 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -195,13 +195,17 @@ export function CreateDatasetForm({
                     {" "}
                     Viewers
                     <Tooltips
-                      content="All Dataset admins and editors also have Dataset viewer permissions."
+                      content="Members of the chosen projects above. All Dataset admins and editors also have Dataset viewer permissions."
                       link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                     />
                   </h3>
                   <FormikSelectUsers
                     name="viewers"
-                    placeholder="Choose Viewers"
+                    placeholder={
+                      values.projects
+                        ? "Choose viewers"
+                        : "To choose viewers, please select at least one Project"
+                    }
                     isMulti={true}
                     isDisabled={values.projects === 0}
                   />
@@ -212,13 +216,17 @@ export function CreateDatasetForm({
                   {" "}
                   Editors
                   <Tooltips
-                    content="Dataset admins and editors also have Scan Report editor permissions."
+                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                   />
                 </h3>
                 <FormikSelectUsers
                   name="editors"
-                  placeholder="Choose Editors"
+                  placeholder={
+                    values.projects
+                      ? "Choose editors"
+                      : "To choose editors, please select at least one Project"
+                  }
                   isMulti={true}
                   isDisabled={values.projects === 0}
                 />
@@ -228,13 +236,17 @@ export function CreateDatasetForm({
                   {" "}
                   Admins
                   <Tooltips
-                    content="Dataset admins and editors also have Scan Report editor permissions."
+                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                   />
                 </h3>
                 <FormikSelectUsers
                   name="admins"
-                  placeholder="Choose Admins"
+                  placeholder={
+                    values.projects
+                      ? "Choose admins"
+                      : "To choose admins, please select at least one Project"
+                  }
                   isMulti={true}
                   isDisabled={values.projects === 0}
                 />
diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index bb82a24b0..f35f8b2f1 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -111,6 +111,19 @@ export function CreateScanReportForm({
             encType="multipart/form-data"
           >
             <div className="flex flex-col gap-3 text-lg">
+              <div className="flex flex-col gap-2">
+                <h3 className="flex">
+                  {" "}
+                  Scan Report Name
+                  <Tooltips content="Name of the new Scan Report." />
+                </h3>
+                <Input
+                  onChange={handleChange}
+                  name="name"
+                  className="text-lg text-carrot"
+                  required
+                />
+              </div>
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
                   Data Partner{" "}
@@ -129,25 +142,34 @@ export function CreateScanReportForm({
                 />
               </div>
               <div className="flex flex-col gap-2">
-                <h3 className="flex items-center">
-                  {" "}
-                  Dataset
-                  <Tooltips
-                    content="The Dataset to add the new Scan Report to."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
-                  />
-                  {values.dataPartner !== 0 && (
-                    <CreateDatasetDialog
-                      projects={projects}
-                      dataPartnerID={values.dataPartner}
-                      description={true}
-                      setReloadDataset={setReloadDataset}
+                <div className="flex items-center">
+                  <h3 className="flex">
+                    {" "}
+                    Dataset
+                    <Tooltips
+                      content="The Dataset to add the new Scan Report to."
+                      link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                     />
+                  </h3>
+                  {values.dataPartner !== 0 && (
+                    <div className="flex">
+                      <CreateDatasetDialog
+                        projects={projects}
+                        dataPartnerID={values.dataPartner}
+                        description={true}
+                        setReloadDataset={setReloadDataset}
+                      />
+                      <Tooltips content="If you couldn't find a dataset you wanted, you can create a new dataset here" />
+                    </div>
                   )}
-                </h3>
+                </div>
                 <FormikSelectDataset
                   name="dataset"
-                  placeholder="Choose a Dataset"
+                  placeholder={
+                    values.dataPartner
+                      ? "Choose a Dataset"
+                      : "To choose a dataset, please select a Data partner"
+                  }
                   isMulti={false}
                   isDisabled={values.dataPartner === 0}
                   required={true}
@@ -188,7 +210,11 @@ export function CreateScanReportForm({
                   {/* Viewers field uses the same logic and data as Editors field */}
                   <FormikSelectEditors
                     name="viewers"
-                    placeholder="Choose viewers"
+                    placeholder={
+                      values.dataset
+                        ? "Choose viewers"
+                        : "To choose viewers, please select a Dataset"
+                    }
                     isMulti={true}
                     isDisabled={values.dataset === 0 || values.dataset === -1}
                   />
@@ -205,28 +231,21 @@ export function CreateScanReportForm({
                 </h3>
                 <FormikSelectEditors
                   name="editors"
-                  placeholder="Choose Editors"
+                  placeholder={
+                    values.dataset
+                      ? "Choose editors"
+                      : "To choose editors, please select a Dataset"
+                  }
                   isMulti={true}
                   isDisabled={values.dataset === 0 || values.dataset === -1}
                 />
               </div>
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
-                  {" "}
-                  Scan Report Name
-                  <Tooltips content="Name of the new Scan Report." />
-                </h3>
-                <Input
-                  onChange={handleChange}
-                  name="name"
-                  className="text-lg text-carrot"
-                  required
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  WhiteRabbit Scan Report
+                  <div className="flex items-center gap-2">
+                    WhiteRabbit Scan Report{" "}
+                    <span className="text-gray-500 text-sm">(.xlsx file)</span>
+                  </div>
                   <Tooltips
                     content="Scan Report file generated from White Rabbit application."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-scan-report-file-format"
@@ -252,10 +271,14 @@ export function CreateScanReportForm({
 
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
-                  {" "}
-                  Data Dictionary
+                  <div className="flex items-center gap-2">
+                    Data Dictionary{" "}
+                    <span className="text-gray-500 text-sm">
+                      (.csv file, optional)
+                    </span>
+                  </div>
                   <Tooltips
-                    content="Optional data dictionary to enable automatic OMOP mapping."
+                    content="Optional data dictionary to enable automatic building concepts from OMOP vocalubary."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-data-dictionary-file-format"
                   />
                 </h3>