Merge pull request rowyio#1430 from janvi01/BtnTooltips

feat: added tooltip to buttons
rad10wave · Oct 25, 2023 · fd8df49 · fd8df49
2 parents 093183e + 204ed46
commit fd8df49
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 75 deletions.
diff --git 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,15 +99,17 @@ export default function Details() {
               Description
             </Typography>
             {isAdmin && (
-              <IconButton
-                aria-label="Edit description"
-                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 ? (
@@ -145,15 +148,17 @@ export default function Details() {
               Details
             </Typography>
             {isAdmin && (
-              <IconButton
-                aria-label="Edit details"
-                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
@@ -10,6 +10,7 @@ import {
   IconButton,
   Stack,
   styled,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
@@ -111,12 +112,14 @@ export default function SideDrawer() {
                   Information
                 </Typography>
               </Stack>
-              <IconButton
-                onClick={() => setSideDrawer(RESET)}
-                aria-label="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
@@ -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,16 +50,18 @@ export default function ActionsMenu({
 
   return (
     <>
-      <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 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
@@ -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,16 +61,18 @@ export default function DeleteMenu({ clearDialog, data }: IDeleteMenuProps) {
 
   return (
     <>
-      <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 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
@@ -137,39 +137,45 @@ export default function TablesPage() {
   const getActions = (table: TableSettings) => (
     <>
       {userRoles.includes("ADMIN") && (
-        <IconButton
-          aria-label="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 />}
-        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"
-        size={view === "list" ? "large" : undefined}
-        component={Link}
-        to={`${getLink(table)}#sideDrawer="table-information"`}
-        style={{ marginLeft: 0 }}
-      >
-        <InfoIcon />
-      </IconButton>
+      </Tooltip>
     </>
   );