✨ Adding a tooltip when the button is unavailable

client/public/locales/en/translation.json

@@ -239,7 +239,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",

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>

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"),