Adding a tooltip when the button is unavailable and displaying a mess…

…age explaining the unavailability Signed-off-by: aviya-gidan <[email protected]>
konveyor · Oct 13, 2024 · de69af0 · de69af0
1 parent 0d87a57
commit de69af0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -233,7 +233,9 @@
     "updateFailed": "Update failed.",
     "updateRequestSubmitted": "Update request submitted.",
     "cancelationFailed": "Cancelation failed.",
-    "cancelationRequestSubmitted": "Cancelation request submitted"
+    "cancelationRequestSubmitted": "Cancelation request submitted",
+    "cancelNotAvailable": "It is not possible to cancel a task that is in status {{statusName}}",
+    "togglePreemptionNotAvailable": "It is not possible to toggle preemption for a task that is in status {{statusName}}"
   },
   "proposedActions": {
     "refactor": "Refactor",

diff --git a/client/src/app/components/task-manager/TaskManagerDrawer.tsx b/client/src/app/components/task-manager/TaskManagerDrawer.tsx
@@ -189,7 +189,9 @@ const TaskItem: React.FC<{
             <MenuToggle
               ref={toggleRef}
               isExpanded={actionsExpanded}
-              isDisabled={taskActionItems.every(({ isDisabled }) => isDisabled)}
+              isDisabled={taskActionItems.every(
+                ({ isAriaDisabled }) => isAriaDisabled
+              )}
               onClick={() => onActionsExpandToggle(!actionsExpanded)}
               variant="plain"
               aria-label={`Actions for task ${task.name}`}
@@ -199,11 +201,11 @@ const TaskItem: React.FC<{
           )}
         >
           <DropdownList>
-            {taskActionItems.map(({ title, onClick, isDisabled }) => (
+            {taskActionItems.map(({ title, onClick, isAriaDisabled }) => (
               <DropdownItem
                 key={title}
                 onClick={onClick}
-                isDisabled={isDisabled}
+                isDisabled={isAriaDisabled}
               >
                 {title}
               </DropdownItem>

diff --git a/client/src/app/pages/tasks/useTaskActions.tsx b/client/src/app/pages/tasks/useTaskActions.tsx
@@ -69,15 +69,27 @@ export const useTaskActions = (task: Task) => {
   return [
     {
       title: t("actions.cancel"),
-      isDisabled: !canCancel(task.state),
+      isAriaDisabled: !canCancel(task.state),
+      tooltipProps: {
+        content: !canCancel(task.state)
+          ? `${t("message.cancelNotAvailable", { statusName: task.state })}`
+          : "",
+      },
       onClick: () => cancelTask(task.id),
     },
     {
       title: task.policy?.preemptEnabled
         ? t("actions.disablePreemption")
         : t("actions.enablePreemption"),
-      isDisabled: !canTogglePreemption(task.state),
+      isAriaDisabled: !canTogglePreemption(task.state),
       onClick: () => togglePreemption(task),
+      tooltipProps: {
+        content: !canTogglePreemption(task.state)
+          ? `${t("message.togglePreemptionNotAvailable", {
+              statusName: task.state,
+            })}`
+          : "",
+      },
     },
     {
       title: t("actions.taskDetails"),