EDD-6: Tweaking more info button on autenticating state

nasa · Jul 3, 2023 · 65f89bd · 65f89bd
1 parent faa08f9
commit 65f89bd
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 48 deletions.
diff --git a/src/app/components/DownloadItem/DownloadItem.jsx b/src/app/components/DownloadItem/DownloadItem.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import {
   FaCheckCircle,
+  FaInfoCircle,
   FaLock,
   FaSpinner
 } from 'react-icons/fa'
@@ -87,8 +88,9 @@ const DownloadItem = ({
   if (state === downloadStates.waitingForAuth) {
     primaryActions.push(
       <Tooltip
-        content="Log In with Earthdata Login"
         key="LogIn"
+        content="Log In with Earthdata Login"
+        delayDuration={300}
       >
         <Button
           className={styles.action}
@@ -113,7 +115,11 @@ const DownloadItem = ({
       actionGroup.forEach((action) => {
         primaryActions.push(
           (action.isActive && action.isPrimary) && (
-            <Tooltip content={action.label} key={action.label}>
+            <Tooltip
+              key={action.label}
+              content={action.label}
+              delayDuration={300}
+            >
               <Button
                 className={styles.action}
                 size="sm"
@@ -233,59 +239,64 @@ const DownloadItem = ({
                   className={styles.statusDescription}
                   data-testid="download-item-status-description"
                 >
-                  {
-                    shouldShowProgress && (
-                      <>
-                        {commafy(finishedFiles)}
-                        {
-                        !loadingMoreFiles && (
+                  <p className={styles.statusInformation}>
+                    {
+                      shouldShowProgress && (
+                        <>
+                          {commafy(finishedFiles)}
+                          {
+                          !loadingMoreFiles && (
+                            <>
+                              {' '}
+                              of
+                              {' '}
+                              {commafy(totalFiles)}
+                            </>
+                          )
+                        }
+                          {' '}
+                          files
+                        </>
+                      )
+                    }
+                    {
+                      (
+                        shouldShowTime && (
                           <>
                             {' '}
-                            of
+                            done in
                             {' '}
-                            {commafy(totalFiles)}
+                            {humanizeDuration(totalTime * 1000)}
                           </>
                         )
-                      }
-                        {' '}
-                        files
-                      </>
-                    )
-                  }
-                  {
-                    (
-                      shouldShowTime && (
+                      )
+                    }
+                    {
+                      loadingMoreFiles && (
                         <>
                           {' '}
-                          done in
+                          (determining file count)
+                        </>
+                      )
+                    }
+                    {
+                      state === downloadStates.waitingForAuth && (
+                        <>
                           {' '}
-                          {humanizeDuration(totalTime * 1000)}
+                          Waiting for log in with Earthdata Login
+                          {' '}
+                          <Tooltip
+                            content="This download requires authentication with Earthdata Login. If your browser did not automatically open, click Log In"
+                          >
+                            <span className={styles.statusInformationTooltip}>
+                              <FaInfoCircle className={styles.statusInformationIcon} />
+                              <span>More Info</span>
+                            </span>
+                          </Tooltip>
                         </>
                       )
-                    )
-                  }
-                  {
-                    loadingMoreFiles && (
-                      <>
-                        {' '}
-                        (determining file count)
-                      </>
-                    )
-                  }
-                  {
-                    state === downloadStates.waitingForAuth && (
-                      <>
-                        {' '}
-                        Waiting for log in with Earthdata Login
-                        {' '}
-                        <Tooltip
-                          content="This download requires authentication with Earthdata Login. If your browser did not automatically open, click Log In"
-                        >
-                          <span>(More Info)</span>
-                        </Tooltip>
-                      </>
-                    )
-                  }
+                    }
+                  </p>
                 </div>
               )
             }

diff --git a/src/app/components/DownloadItem/DownloadItem.module.scss b/src/app/components/DownloadItem/DownloadItem.module.scss
@@ -164,6 +164,30 @@
   }
 }
 
+.statusInformation {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.statusInformationTooltip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--size__150);
+  color: var(--color__black--600);
+  cursor: default;
+  text-decoration: underline;
+
+  &:hover {
+    color: var(--color__black--700);
+  }
+}
+
+.statusInformationIcon {
+  margin-right: var(--size__050);
+}
+
 .metaSecondary {
   position: fixed;
   display: flex;

diff --git a/src/app/components/Dropdown/Dropdown.jsx b/src/app/components/Dropdown/Dropdown.jsx
@@ -59,7 +59,10 @@ const Dropdown = ({
 
   return (
     <RadixDropdown.Root modal="false">
-      <Tooltip content="More Actions">
+      <Tooltip
+        content="More Actions"
+        delayDuration={300}
+      >
         <RadixDropdown.Trigger asChild className={styles.trigger}>
           <Button
             data-testid="dropdown-trigger"

diff --git a/src/app/components/Tooltip/Tooltip.jsx b/src/app/components/Tooltip/Tooltip.jsx
@@ -6,9 +6,11 @@ import * as styles from './Tooltip.module.scss'
 
 /**
  * @typedef {Object} TooltipProps
+ * @property {React.ReactNode} [additionalContent]  A React node to be used as the additional content for the tooltip.
  * @property {React.ReactNode} children A React node to be wrapped in the tooltip trigger.
  * @property {React.ReactNode} content A React node to be used as the content for the tooltip.
- * @property {React.ReactNode} [additionalContent]  A React node to be used as the additional content for the tooltip.
+ * @property {Number} delayDuration A number representing the tooltip delay in milliseconds.
+ * @property {Boolean} open A boolean representing the "open" state of the tooltip.
 */
 
 /**
@@ -30,14 +32,15 @@ const Tooltip = ({
   additionalContent,
   children,
   content,
+  delayDuration,
   open
 }) => {
   const conditionalRootProps = {}
 
   if (open) conditionalRootProps.open = true
 
   return (
-    <RadixTooltip.Provider delayDuration={300}>
+    <RadixTooltip.Provider delayDuration={delayDuration}>
       <RadixTooltip.Root {...conditionalRootProps}>
         <RadixTooltip.Trigger asChild>
           {children}
@@ -65,11 +68,13 @@ const Tooltip = ({
 
 Tooltip.defaultProps = {
   additionalContent: null,
+  delayDuration: 0,
   open: undefined
 }
 
 Tooltip.propTypes = {
   additionalContent: PropTypes.node,
+  delayDuration: PropTypes.number,
   children: PropTypes.node.isRequired,
   content: PropTypes.node.isRequired,
   open: PropTypes.bool

diff --git a/src/app/components/Tooltip/Tooltip.module.scss b/src/app/components/Tooltip/Tooltip.module.scss
@@ -57,6 +57,11 @@
   white-space: normal;
 }
 
+.triggerWrapper {
+  display: inline-flex;
+  cursor: pointer;
+}
+
 [data-radix-popper-content-wrapper] {
   pointer-events: none;
   user-select: none;

diff --git a/src/app/dialogs/InitializeDownload/InitializeDownload.jsx b/src/app/dialogs/InitializeDownload/InitializeDownload.jsx
@@ -85,6 +85,7 @@ const InitializeDownload = ({
         <span className={styles.downloadLocationLabel}>Download files to</span>
         <Tooltip
           content="Change the selected download location"
+          delayDuration={300}
         >
           <button
             className={styles.downloadLocationButton}