From d3e89e6014022162c7cc268ca8e618e9d44376b8 Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Mon, 2 Oct 2023 11:47:52 +0530
Subject: [PATCH 1/2] feat: added tooltip to buttons

---
 src/components/TableInformationDrawer/Details.tsx              | 2 ++
 .../TableInformationDrawer/TableInformationDrawer.tsx          | 1 +
 src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx | 1 +
 src/components/TableSettingsDialog/DeleteMenu.tsx              | 1 +
 src/pages/TablesPage.tsx                                       | 3 +++
 5 files changed, 8 insertions(+)

diff --git a/src/components/TableInformationDrawer/Details.tsx b/src/components/TableInformationDrawer/Details.tsx
index 78dd02364..de5a26414 100644
--- a/src/components/TableInformationDrawer/Details.tsx
+++ b/src/components/TableInformationDrawer/Details.tsx
@@ -100,6 +100,7 @@ export default function Details() {
             {isAdmin && (
               <IconButton
                 aria-label="Edit description"
+                title="Edit"
                 onClick={() => {
                   setEditDescription(!editDescription);
                 }}
@@ -147,6 +148,7 @@ export default function Details() {
             {isAdmin && (
               <IconButton
                 aria-label="Edit details"
+                title="Edit"
                 onClick={() => {
                   setEditDetails(!editDetails);
                 }}
diff --git a/src/components/TableInformationDrawer/TableInformationDrawer.tsx b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
index 25b9a5e8e..22568666b 100644
--- a/src/components/TableInformationDrawer/TableInformationDrawer.tsx
+++ b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
@@ -114,6 +114,7 @@ export default function SideDrawer() {
               <IconButton
                 onClick={() => setSideDrawer(RESET)}
                 aria-label="Close"
+                title="Close"
               >
                 <CloseIcon />
               </IconButton>
diff --git a/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx b/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
index 3dc853a4a..49165f784 100644
--- a/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
+++ b/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
@@ -53,6 +53,7 @@ export default function ActionsMenu({
       <IconButton
         aria-label="Actions…"
         id="table-settings-actions-button"
+        title="Actions menu"
         aria-controls="table-settings-actions-menu"
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
diff --git a/src/components/TableSettingsDialog/DeleteMenu.tsx b/src/components/TableSettingsDialog/DeleteMenu.tsx
index 538679f85..393e604bf 100644
--- a/src/components/TableSettingsDialog/DeleteMenu.tsx
+++ b/src/components/TableSettingsDialog/DeleteMenu.tsx
@@ -58,6 +58,7 @@ export default function DeleteMenu({ clearDialog, data }: IDeleteMenuProps) {
       <IconButton
         aria-label="Delete table…"
         id="table-settings-delete-button"
+        title="Delete menu"
         aria-controls="table-settings-delete-menu"
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
diff --git a/src/pages/TablesPage.tsx b/src/pages/TablesPage.tsx
index e48ab4f3a..ea446c3de 100644
--- a/src/pages/TablesPage.tsx
+++ b/src/pages/TablesPage.tsx
@@ -139,6 +139,7 @@ export default function TablesPage() {
       {userRoles.includes("ADMIN") && (
         <IconButton
           aria-label="Edit table"
+          title="Edit table"
           onClick={() =>
             openTableSettingsDialog({ mode: "update", data: table })
           }
@@ -151,6 +152,7 @@ export default function TablesPage() {
         onChange={handleFavorite(table.id)}
         checked={favorites.includes(table.id)}
         icon={<FavoriteBorderIcon />}
+        title="Favorite"
         checkedIcon={
           <Zoom in>
             <FavoriteIcon />
@@ -163,6 +165,7 @@ export default function TablesPage() {
       />
       <IconButton
         aria-label="Table information"
+        title="Table information"
         size={view === "list" ? "large" : undefined}
         component={Link}
         to={`${getLink(table)}#sideDrawer="table-information"`}

From 204ed467d347cc32b183bffab0451934496bb49c Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Mon, 2 Oct 2023 12:13:07 +0530
Subject: [PATCH 2/2] fix: added mui tooltip component

---
 .../TableInformationDrawer/Details.tsx        | 43 ++++++------
 .../TableInformationDrawer.tsx                | 16 +++--
 .../ActionsMenu/ActionsMenu.tsx               | 25 +++----
 .../TableSettingsDialog/DeleteMenu.tsx        | 31 +++++----
 src/pages/TablesPage.tsx                      | 67 ++++++++++---------
 5 files changed, 99 insertions(+), 83 deletions(-)

diff --git a/src/components/TableInformationDrawer/Details.tsx b/src/components/TableInformationDrawer/Details.tsx
index de5a26414..b097198a1 100644
--- a/src/components/TableInformationDrawer/Details.tsx
+++ b/src/components/TableInformationDrawer/Details.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   Stack,
   TextField,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -98,16 +99,17 @@ export default function Details() {
               Description
             </Typography>
             {isAdmin && (
-              <IconButton
-                aria-label="Edit description"
-                title="Edit"
-                onClick={() => {
-                  setEditDescription(!editDescription);
-                }}
-                sx={{ top: 4 }}
-              >
-                {editDescription ? <EditOffIcon /> : <EditIcon />}
-              </IconButton>
+              <Tooltip title="Edit">
+                <IconButton
+                  aria-label="Edit description"
+                  onClick={() => {
+                    setEditDescription(!editDescription);
+                  }}
+                  sx={{ top: 4 }}
+                >
+                  {editDescription ? <EditOffIcon /> : <EditIcon />}
+                </IconButton>
+              </Tooltip>
             )}
           </Stack>
           {editDescription ? (
@@ -146,16 +148,17 @@ export default function Details() {
               Details
             </Typography>
             {isAdmin && (
-              <IconButton
-                aria-label="Edit details"
-                title="Edit"
-                onClick={() => {
-                  setEditDetails(!editDetails);
-                }}
-                sx={{ top: 4 }}
-              >
-                {editDetails ? <EditOffIcon /> : <EditIcon />}
-              </IconButton>
+              <Tooltip title="Edit">
+                <IconButton
+                  aria-label="Edit details"
+                  onClick={() => {
+                    setEditDetails(!editDetails);
+                  }}
+                  sx={{ top: 4 }}
+                >
+                  {editDetails ? <EditOffIcon /> : <EditIcon />}
+                </IconButton>
+              </Tooltip>
             )}
           </Stack>
           <Box
diff --git a/src/components/TableInformationDrawer/TableInformationDrawer.tsx b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
index 22568666b..c5bbd2115 100644
--- a/src/components/TableInformationDrawer/TableInformationDrawer.tsx
+++ b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
@@ -10,6 +10,7 @@ import {
   IconButton,
   Stack,
   styled,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
@@ -111,13 +112,14 @@ export default function SideDrawer() {
                   Information
                 </Typography>
               </Stack>
-              <IconButton
-                onClick={() => setSideDrawer(RESET)}
-                aria-label="Close"
-                title="Close"
-              >
-                <CloseIcon />
-              </IconButton>
+              <Tooltip title="Close">
+                <IconButton
+                  onClick={() => setSideDrawer(RESET)}
+                  aria-label="Close"
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Tooltip>
             </Stack>
             <Box
               sx={{
diff --git a/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx b/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
index 49165f784..a014727f3 100644
--- a/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
+++ b/src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
@@ -3,7 +3,7 @@ import { Control } from "react-hook-form";
 import { useSetAtom } from "jotai";
 import type { UseFormReturn, FieldValues } from "react-hook-form";
 
-import { IconButton, Menu, MenuItem } from "@mui/material";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
 import { Export as ExportIcon, Import as ImportIcon } from "@src/assets/icons";
 
 import ImportSettings from "./ImportSettings";
@@ -50,17 +50,18 @@ export default function ActionsMenu({
 
   return (
     <>
-      <IconButton
-        aria-label="Actions…"
-        id="table-settings-actions-button"
-        title="Actions menu"
-        aria-controls="table-settings-actions-menu"
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={handleOpen}
-      >
-        {mode === "create" ? <ImportIcon /> : <ExportIcon />}
-      </IconButton>
+      <Tooltip title="Actions menu">
+        <IconButton
+          aria-label="Actions…"
+          id="table-settings-actions-button"
+          aria-controls="table-settings-actions-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? "true" : undefined}
+          onClick={handleOpen}
+        >
+          {mode === "create" ? <ImportIcon /> : <ExportIcon />}
+        </IconButton>
+      </Tooltip>
 
       <Menu
         id="table-settings-actions-menu"
diff --git a/src/components/TableSettingsDialog/DeleteMenu.tsx b/src/components/TableSettingsDialog/DeleteMenu.tsx
index 393e604bf..c5444a79e 100644
--- a/src/components/TableSettingsDialog/DeleteMenu.tsx
+++ b/src/components/TableSettingsDialog/DeleteMenu.tsx
@@ -3,7 +3,13 @@ import { useAtom, useSetAtom } from "jotai";
 import { useNavigate } from "react-router-dom";
 import { useSnackbar } from "notistack";
 
-import { IconButton, Menu, MenuItem, DialogContentText } from "@mui/material";
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  DialogContentText,
+  Tooltip,
+} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 
 import {
@@ -55,17 +61,18 @@ export default function DeleteMenu({ clearDialog, data }: IDeleteMenuProps) {
 
   return (
     <>
-      <IconButton
-        aria-label="Delete table…"
-        id="table-settings-delete-button"
-        title="Delete menu"
-        aria-controls="table-settings-delete-menu"
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={(e) => setAnchorEl(e.currentTarget)}
-      >
-        <DeleteIcon />
-      </IconButton>
+      <Tooltip title="Delete menu">
+        <IconButton
+          aria-label="Delete table…"
+          id="table-settings-delete-button"
+          aria-controls="table-settings-delete-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? "true" : undefined}
+          onClick={(e) => setAnchorEl(e.currentTarget)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </Tooltip>
 
       <Menu
         id="table-settings-delete-menu"
diff --git a/src/pages/TablesPage.tsx b/src/pages/TablesPage.tsx
index ea446c3de..0e70b17ab 100644
--- a/src/pages/TablesPage.tsx
+++ b/src/pages/TablesPage.tsx
@@ -137,42 +137,45 @@ export default function TablesPage() {
   const getActions = (table: TableSettings) => (
     <>
       {userRoles.includes("ADMIN") && (
-        <IconButton
-          aria-label="Edit table"
-          title="Edit table"
-          onClick={() =>
-            openTableSettingsDialog({ mode: "update", data: table })
+        <Tooltip title="Edit Table">
+          <IconButton
+            aria-label="Edit table"
+            onClick={() =>
+              openTableSettingsDialog({ mode: "update", data: table })
+            }
+            size={view === "list" ? "large" : undefined}
+          >
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+      <Tooltip title="Favorite">
+        <Checkbox
+          onChange={handleFavorite(table.id)}
+          checked={favorites.includes(table.id)}
+          icon={<FavoriteBorderIcon />}
+          checkedIcon={
+            <Zoom in>
+              <FavoriteIcon />
+            </Zoom>
           }
+          name={`favorite-${table.id}`}
+          inputProps={{ "aria-label": "Favorite" }}
+          sx={view === "list" ? { p: 1.5 } : undefined}
+          color="secondary"
+        />
+      </Tooltip>
+      <Tooltip title="Table information">
+        <IconButton
+          aria-label="Table information"
           size={view === "list" ? "large" : undefined}
+          component={Link}
+          to={`${getLink(table)}#sideDrawer="table-information"`}
+          style={{ marginLeft: 0 }}
         >
-          <EditIcon />
+          <InfoIcon />
         </IconButton>
-      )}
-      <Checkbox
-        onChange={handleFavorite(table.id)}
-        checked={favorites.includes(table.id)}
-        icon={<FavoriteBorderIcon />}
-        title="Favorite"
-        checkedIcon={
-          <Zoom in>
-            <FavoriteIcon />
-          </Zoom>
-        }
-        name={`favorite-${table.id}`}
-        inputProps={{ "aria-label": "Favorite" }}
-        sx={view === "list" ? { p: 1.5 } : undefined}
-        color="secondary"
-      />
-      <IconButton
-        aria-label="Table information"
-        title="Table information"
-        size={view === "list" ? "large" : undefined}
-        component={Link}
-        to={`${getLink(table)}#sideDrawer="table-information"`}
-        style={{ marginLeft: 0 }}
-      >
-        <InfoIcon />
-      </IconButton>
+      </Tooltip>
     </>
   );