From f205cd63019282709393489f42eb1f0259c20e12 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 7 Oct 2022 17:28:00 +0000
Subject: [PATCH] refactor: Display tooltip on cancel action

---
 .../components/DropdownButton/ActionCtas.tsx  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx
index 98b43e29c0875..8306c4673725f 100644
--- a/site/src/components/DropdownButton/ActionCtas.tsx
+++ b/site/src/components/DropdownButton/ActionCtas.tsx
@@ -1,3 +1,4 @@
+import Tooltip from "@material-ui/core/Tooltip"
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import BlockIcon from "@material-ui/icons/Block"
@@ -73,12 +74,19 @@ export const CancelButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ han
 
   // this is an icon button, so it's important to include an aria label
   return (
-    <WorkspaceActionButton
-      icon={<BlockIcon />}
-      onClick={handleAction}
-      className={styles.cancelButton}
-      ariaLabel="cancel action"
-    />
+    <div>
+      <Tooltip title="Cancel action">
+        {/* We had to wrap the button to make it work with the tooltip. */}
+        <div>
+          <WorkspaceActionButton
+            icon={<BlockIcon />}
+            onClick={handleAction}
+            className={styles.cancelButton}
+            ariaLabel="cancel action"
+          />
+        </div>
+      </Tooltip>
+    </div>
   )
 }