sartography/spiff-arena
1
0
Fork 0
mirror of https://github.com/sartography/spiff-arena.git synced 2025-02-23 06:38:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tooltips back to icon buttons on model show page

Browse Source
This commit is contained in:
jasquat 2025-02-07 11:14:57 -05:00
parent 471aa5f0cd
commit 9ffa0f5703
No known key found for this signature in database
4 changed files with 79 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
spiffworkflow-frontend/src/a-spiffui-v3/components/ButtonWithConfirmation.tsx
View File

@ -6,6 +6,7 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import { IconButton } from '@mui/material'; import { IconButton } from '@mui/material';
import SpiffTooltip from './SpiffTooltip';
type OwnProps = { type OwnProps = {
'data-qa'?: string; 'data-qa'?: string;
@ -78,13 +79,15 @@ export default function ButtonWithConfirmation({
if (hasIconOnly) { if (hasIconOnly) {
return ( return (
<> <>
<IconButton <SpiffTooltip title={iconDescription || ''} placement="top">
data-qa={dataQa} <IconButton
onClick={handleShowConfirmationPrompt} data-qa={dataQa}
aria-label={iconDescription || ''} onClick={handleShowConfirmationPrompt}
> aria-label={iconDescription || ''}
{renderIcon} >
</IconButton> {renderIcon}
</IconButton>
</SpiffTooltip>
{confirmationDialog()} {confirmationDialog()}
</> </>
); );

55
spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelFileList.tsx
View File

@ -21,6 +21,7 @@ import { PureAbility } from '@casl/ability';
import ButtonWithConfirmation from './ButtonWithConfirmation'; import ButtonWithConfirmation from './ButtonWithConfirmation';
import ProcessModelTestRun from './ProcessModelTestRun'; import ProcessModelTestRun from './ProcessModelTestRun';
import { ProcessFile } from '../interfaces'; import { ProcessFile } from '../interfaces';
import SpiffTooltip from './SpiffTooltip';
interface ProcessModelFileListProps { interface ProcessModelFileListProps {
processModel: any; processModel: any;
@ -73,29 +74,33 @@ export default function ProcessModelFileList({
a={targetUris.processModelFileCreatePath} a={targetUris.processModelFileCreatePath}
ability={ability} ability={ability}
> >
<IconButton <SpiffTooltip title={`${actionWord} File`} placement="top">
aria-label={`${actionWord} File`} <IconButton
data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`} aria-label={`${actionWord} File`}
href={editUrl} data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`}
> href={editUrl}
{icon} >
</IconButton> {icon}
</IconButton>
</SpiffTooltip>
</Can>, </Can>,
); );
} }
elements.push( elements.push(
<Can I="GET" a={targetUris.processModelFileCreatePath} ability={ability}> <Can I="GET" a={targetUris.processModelFileCreatePath} ability={ability}>
<IconButton <SpiffTooltip title="Download File" placement="top">
aria-label="Download File" <IconButton
onClick={() => aria-label="Download File"
window.open( onClick={() =>
`/${targetUris.processModelFilePath}/${processModelFile.name}`, window.open(
'_blank', `/${targetUris.processModelFilePath}/${processModelFile.name}`,
) '_blank',
} )
> }
<GetApp /> >
</IconButton> <GetApp />
</IconButton>
</SpiffTooltip>
</Can>, </Can>,
); );
@ -123,12 +128,14 @@ export default function ProcessModelFileList({
if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) { if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) {
elements.push( elements.push(
<Can I="PUT" a={targetUris.processModelShowPath} ability={ability}> <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
<IconButton <SpiffTooltip title="Set As Primary File" placement="top">
aria-label="Set As Primary File" <IconButton
onClick={() => onSetPrimaryFile(processModelFile.name)} aria-label="Set As Primary File"
> onClick={() => onSetPrimaryFile(processModelFile.name)}
<Favorite /> >
</IconButton> <Favorite />
</IconButton>
</SpiffTooltip>
</Can>, </Can>,
); );
} }

49
spiffworkflow-frontend/src/a-spiffui-v3/components/ProcessModelTestRun.tsx
View File

@ -15,6 +15,7 @@ import {
childrenForErrorObject, childrenForErrorObject,
errorForDisplayFromTestCaseErrorDetails, errorForDisplayFromTestCaseErrorDetails,
} from './ErrorDisplay'; } from './ErrorDisplay';
import SpiffTooltip from './SpiffTooltip';
type OwnProps = { type OwnProps = {
processModelFile?: ProcessFile; processModelFile?: ProcessFile;
@ -41,23 +42,27 @@ export default function ProcessModelTestRun({
if (testCaseResults) { if (testCaseResults) {
if (testCaseResults.all_passed) { if (testCaseResults.all_passed) {
return ( return (
<IconButton <SpiffTooltip title="All BPMN unit tests passed" placement="top">
color="success" <IconButton
aria-label="All BPMN unit tests passed" color="success"
onClick={() => setShowTestCaseResultsModal(true)} aria-label="All BPMN unit tests passed"
> onClick={() => setShowTestCaseResultsModal(true)}
<CheckCircle /> >
</IconButton> <CheckCircle />
</IconButton>
</SpiffTooltip>
); );
} }
return ( return (
<IconButton <SpiffTooltip title="BPMN unit tests failed" placement="top">
color="error" <IconButton
aria-label="BPMN unit tests failed" color="error"
onClick={() => setShowTestCaseResultsModal(true)} aria-label="BPMN unit tests failed"
> onClick={() => setShowTestCaseResultsModal(true)}
<Cancel /> >
</IconButton> <Cancel />
</IconButton>
</SpiffTooltip>
); );
} }
return null; return null;
@ -159,13 +164,15 @@ export default function ProcessModelTestRun({
const buttonElement = () => { const buttonElement = () => {
return ( return (
<IconButton <SpiffTooltip title={titleText} placement="top">
color="primary" <IconButton
aria-label={titleText} color="primary"
onClick={() => onProcessModelTestRun()} aria-label={titleText}
> onClick={() => onProcessModelTestRun()}
<Rule /> >
</IconButton> <Rule />
</IconButton>
</SpiffTooltip>
); );
}; };

17
spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelShow.tsx
View File

@ -22,6 +22,7 @@ import { Notification } from '../components/Notification';
import ProcessModelTestRun from '../components/ProcessModelTestRun'; import ProcessModelTestRun from '../components/ProcessModelTestRun';
import ProcessModelTabs from '../components/ProcessModelTabs'; import ProcessModelTabs from '../components/ProcessModelTabs';
import ProcessModelFileUploadModal from '../components/ProcessModelFileUploadModal'; import ProcessModelFileUploadModal from '../components/ProcessModelFileUploadModal';
import SpiffTooltip from '../components/SpiffTooltip';
export default function ProcessModelShow() { export default function ProcessModelShow() {
const params = useParams(); const params = useParams();
@ -242,13 +243,15 @@ export default function ProcessModelShow() {
Process Model: {processModel.display_name} Process Model: {processModel.display_name}
</Typography> </Typography>
<Can I="PUT" a={targetUris.processModelShowPath} ability={ability}> <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
<IconButton <SpiffTooltip title="Edit Process Model" placement="top">
data-qa="edit-process-model-button" <IconButton
component="a" data-qa="edit-process-model-button"
href={`/process-models/${modifiedProcessModelId}/edit`} component="a"
> href={`/process-models/${modifiedProcessModelId}/edit`}
<Edit /> >
</IconButton> <Edit />
</IconButton>
</SpiffTooltip>
</Can> </Can>
<Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}> <Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}>
<ButtonWithConfirmation <ButtonWithConfirmation