From de69af03b310dc4aa85db8b3b55f3544c85bde1e Mon Sep 17 00:00:00 2001
From: aviya-gidan <aviya665040@gmail.com>
Date: Sun, 13 Oct 2024 12:20:45 +0300
Subject: [PATCH] Adding a tooltip when the button is unavailable and
 displaying a message explaining the unavailability

Signed-off-by: aviya-gidan <aviya665040@gmail.com>
---
 client/public/locales/en/translation.json        |  4 +++-
 .../task-manager/TaskManagerDrawer.tsx           |  8 +++++---
 client/src/app/pages/tasks/useTaskActions.tsx    | 16 ++++++++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 6942e06e7d..e7ef42b049 100644
--- 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
index 10824bc16e..03ca609a17 100644
--- 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
index bfcd70c288..066b007989 100644
--- 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"),