From 9ffa0f5703fea98f9353afb6f2988056a549a25a Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Fri, 7 Feb 2025 11:14:57 -0500
Subject: [PATCH] add tooltips back to icon buttons on model show page

---
 .../components/ButtonWithConfirmation.tsx     | 17 +++---
 .../components/ProcessModelFileList.tsx       | 55 +++++++++++--------
 .../components/ProcessModelTestRun.tsx        | 49 ++++++++++-------
 .../a-spiffui-v3/views/ProcessModelShow.tsx   | 17 +++---
 4 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/components/ButtonWithConfirmation.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/components/ButtonWithConfirmation.tsx
index 4a4653229..4ee6d0488 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/components/ButtonWithConfirmation.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/components/ButtonWithConfirmation.tsx
@@ -6,6 +6,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { IconButton } from '@mui/material';
+import SpiffTooltip from './SpiffTooltip';
 
 type OwnProps = {
   'data-qa'?: string;
@@ -78,13 +79,15 @@ export default function ButtonWithConfirmation({
   if (hasIconOnly) {
     return (
       <>
-        <IconButton
-          data-qa={dataQa}
-          onClick={handleShowConfirmationPrompt}
-          aria-label={iconDescription || ''}
-        >
-          {renderIcon}
-        </IconButton>
+        <SpiffTooltip title={iconDescription || ''} placement="top">
+          <IconButton
+            data-qa={dataQa}
+            onClick={handleShowConfirmationPrompt}
+            aria-label={iconDescription || ''}
+          >
+            {renderIcon}
+          </IconButton>
+        </SpiffTooltip>
         {confirmationDialog()}
       </>
     );
diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelFileList.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelFileList.tsx
index f919cf81a..ac09fb032 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelFileList.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelFileList.tsx
@@ -21,6 +21,7 @@ import { PureAbility } from '@casl/ability';
 import ButtonWithConfirmation from './ButtonWithConfirmation';
 import ProcessModelTestRun from './ProcessModelTestRun';
 import { ProcessFile } from '../interfaces';
+import SpiffTooltip from './SpiffTooltip';
 
 interface ProcessModelFileListProps {
   processModel: any;
@@ -73,29 +74,33 @@ export default function ProcessModelFileList({
           a={targetUris.processModelFileCreatePath}
           ability={ability}
         >
-          <IconButton
-            aria-label={`${actionWord} File`}
-            data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`}
-            href={editUrl}
-          >
-            {icon}
-          </IconButton>
+          <SpiffTooltip title={`${actionWord} File`} placement="top">
+            <IconButton
+              aria-label={`${actionWord} File`}
+              data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`}
+              href={editUrl}
+            >
+              {icon}
+            </IconButton>
+          </SpiffTooltip>
         </Can>,
       );
     }
     elements.push(
       <Can I="GET" a={targetUris.processModelFileCreatePath} ability={ability}>
-        <IconButton
-          aria-label="Download File"
-          onClick={() =>
-            window.open(
-              `/${targetUris.processModelFilePath}/${processModelFile.name}`,
-              '_blank',
-            )
-          }
-        >
-          <GetApp />
-        </IconButton>
+        <SpiffTooltip title="Download File" placement="top">
+          <IconButton
+            aria-label="Download File"
+            onClick={() =>
+              window.open(
+                `/${targetUris.processModelFilePath}/${processModelFile.name}`,
+                '_blank',
+              )
+            }
+          >
+            <GetApp />
+          </IconButton>
+        </SpiffTooltip>
       </Can>,
     );
 
@@ -123,12 +128,14 @@ export default function ProcessModelFileList({
     if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) {
       elements.push(
         <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
-          <IconButton
-            aria-label="Set As Primary File"
-            onClick={() => onSetPrimaryFile(processModelFile.name)}
-          >
-            <Favorite />
-          </IconButton>
+          <SpiffTooltip title="Set As Primary File" placement="top">
+            <IconButton
+              aria-label="Set As Primary File"
+              onClick={() => onSetPrimaryFile(processModelFile.name)}
+            >
+              <Favorite />
+            </IconButton>
+          </SpiffTooltip>
         </Can>,
       );
     }
diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelTestRun.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelTestRun.tsx
index e21ab3a62..35419c545 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelTestRun.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelTestRun.tsx
@@ -15,6 +15,7 @@ import {
   childrenForErrorObject,
   errorForDisplayFromTestCaseErrorDetails,
 } from './ErrorDisplay';
+import SpiffTooltip from './SpiffTooltip';
 
 type OwnProps = {
   processModelFile?: ProcessFile;
@@ -41,23 +42,27 @@ export default function ProcessModelTestRun({
     if (testCaseResults) {
       if (testCaseResults.all_passed) {
         return (
-          <IconButton
-            color="success"
-            aria-label="All BPMN unit tests passed"
-            onClick={() => setShowTestCaseResultsModal(true)}
-          >
-            <CheckCircle />
-          </IconButton>
+          <SpiffTooltip title="All BPMN unit tests passed" placement="top">
+            <IconButton
+              color="success"
+              aria-label="All BPMN unit tests passed"
+              onClick={() => setShowTestCaseResultsModal(true)}
+            >
+              <CheckCircle />
+            </IconButton>
+          </SpiffTooltip>
         );
       }
       return (
-        <IconButton
-          color="error"
-          aria-label="BPMN unit tests failed"
-          onClick={() => setShowTestCaseResultsModal(true)}
-        >
-          <Cancel />
-        </IconButton>
+        <SpiffTooltip title="BPMN unit tests failed" placement="top">
+          <IconButton
+            color="error"
+            aria-label="BPMN unit tests failed"
+            onClick={() => setShowTestCaseResultsModal(true)}
+          >
+            <Cancel />
+          </IconButton>
+        </SpiffTooltip>
       );
     }
     return null;
@@ -159,13 +164,15 @@ export default function ProcessModelTestRun({
 
   const buttonElement = () => {
     return (
-      <IconButton
-        color="primary"
-        aria-label={titleText}
-        onClick={() => onProcessModelTestRun()}
-      >
-        <Rule />
-      </IconButton>
+      <SpiffTooltip title={titleText} placement="top">
+        <IconButton
+          color="primary"
+          aria-label={titleText}
+          onClick={() => onProcessModelTestRun()}
+        >
+          <Rule />
+        </IconButton>
+      </SpiffTooltip>
     );
   };
 
diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelShow.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelShow.tsx
index 20a146161..d48a2c8c9 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelShow.tsx
@@ -22,6 +22,7 @@ import { Notification } from '../components/Notification';
 import ProcessModelTestRun from '../components/ProcessModelTestRun';
 import ProcessModelTabs from '../components/ProcessModelTabs';
 import ProcessModelFileUploadModal from '../components/ProcessModelFileUploadModal';
+import SpiffTooltip from '../components/SpiffTooltip';
 
 export default function ProcessModelShow() {
   const params = useParams();
@@ -242,13 +243,15 @@ export default function ProcessModelShow() {
             Process Model: {processModel.display_name}
           </Typography>
           <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
-            <IconButton
-              data-qa="edit-process-model-button"
-              component="a"
-              href={`/process-models/${modifiedProcessModelId}/edit`}
-            >
-              <Edit />
-            </IconButton>
+            <SpiffTooltip title="Edit Process Model" placement="top">
+              <IconButton
+                data-qa="edit-process-model-button"
+                component="a"
+                href={`/process-models/${modifiedProcessModelId}/edit`}
+              >
+                <Edit />
+              </IconButton>
+            </SpiffTooltip>
           </Can>
           <Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}>
             <ButtonWithConfirmation