From 0e6c9258b75be73f7162b643850101cfa0e33982 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 3 Jul 2020 00:58:50 -0300
Subject: [PATCH] OHIF-202: Add tooltip for locked/unlocked SR viewport icon
 (#1858)

* OHIF-202: Add tooltip for locked/unlocked SR viewport icon

* fix edit margin

* Update platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

* Apply suggestions from code review

* Fix tooltip (func comp)

* Don't render the `0` of data.length used to check a render condition

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
---
 .../MeasurementTable/MeasurementTable.jsx     | 51 ++++++++-----------
 .../ViewportActionBar/ViewportActionBar.jsx   | 42 ++++++++++-----
 2 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
index 70efc44c6..73eb38775 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
@@ -8,37 +8,30 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
   return (
     <div>
       <div className="flex justify-between px-2 py-1 bg-secondary-main">
-        <span className="text-base font-bold text-white tracking-widest uppercase">
+        <span className="text-base font-bold tracking-widest text-white uppercase">
           {title}
         </span>
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
-      <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
-        {data.length && data.map((measurementItem, index) => (
-          <MeasurementItem
-            key={measurementItem.id}
-            id={measurementItem.id}
-            index={index + 1}
-            label={measurementItem.label}
-            isActive={measurementItem.isActive}
-            displayText={measurementItem.displayText}
-            onClick={onClick}
-            onEdit={onEdit}
-          />
-        ))}
-        {!data.length && (
-          <div
-            className={classnames(
-              'group flex cursor-default bg-black border border-transparent transition duration-300 '
-            )}
-          >
-            <div
-              className={classnames(
-                'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
-              )}
-            ></div>
-            <div className="px-2 py-4 flex flex-1 items-center justify-between">
-              <span className="text-base text-primary-light mb-1 flex items-center flex-1">
+      <div className="overflow-x-hidden overflow-y-auto ohif-scrollbar max-h-112">
+        {data.length !== 0 &&
+          data.map((measurementItem, index) => (
+            <MeasurementItem
+              key={measurementItem.id}
+              id={measurementItem.id}
+              index={index + 1}
+              label={measurementItem.label}
+              isActive={measurementItem.isActive}
+              displayText={measurementItem.displayText}
+              onClick={onClick}
+              onEdit={onEdit}
+            />
+          ))}
+        {data.length === 0 && (
+          <div className="flex transition duration-300 bg-black border border-transparent cursor-default group">
+            <div className="w-6 py-1 text-base text-center transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main"></div>
+            <div className="flex items-center justify-between flex-1 px-2 py-4">
+              <span className="flex items-center flex-1 mb-1 text-base text-primary-light">
                 No tracked measurements
               </span>
             </div>
@@ -52,8 +45,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
 MeasurementTable.defaultProps = {
   amount: null,
   data: [],
-  onClick: () => { },
-  onEdit: () => { },
+  onClick: () => {},
+  onEdit: () => {},
 };
 
 MeasurementTable.propTypes = {
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
index 53455ab18..00c24ef22 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
@@ -52,22 +52,38 @@ const ViewportActionBar = ({
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
+      const TooltipMessage = isLocked
+        ? () => (
+            <div>
+              This SR is locked. <br />
+              Measurements cannot be duplicated.
+            </div>
+          )
+        : () => (
+            <div>
+              This SR is unlocked. <br />
+              You can duplicate measurements on your current report <br /> by
+              clicking &apos;Edit&apos;.
+            </div>
+          );
       return (
         <>
-          <div className="relative flex p-1 border rounded border-primary-light">
-            <span className="text-sm font-bold leading-none text-primary-light">
-              SR
-            </span>
-            {isLocked && (
-              <Icon
-                name="lock"
-                className="absolute w-3 text-white"
-                style={{ top: -6, right: -6 }}
-              />
-            )}
-          </div>
+          <Tooltip content={<TooltipMessage />} position="bottom-left">
+            <div className="relative flex p-1 border rounded cursor-default border-primary-light">
+              <span className="text-sm font-bold leading-none text-primary-light">
+                SR
+              </span>
+              {isLocked && (
+                <Icon
+                  name="lock"
+                  className="absolute w-3 text-white"
+                  style={{ top: -6, right: -6 }}
+                />
+              )}
+            </div>
+          </Tooltip>
           {!isLocked && !isHydrated && (
-            <div className="relative flex p-1 border rounded border-primary-light">
+            <div className="relative flex p-1 ml-1 border rounded cursor-pointer border-primary-light">
               <span
                 className="text-sm font-bold leading-none text-primary-light"
                 onClick={onHydrationClick}