Merge pull request #114 from SolidLabResearch/fix/112

Fix/112

Author: EmilioTR

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Clear query cache at logout (#106)
 - Cypress test suite version updated to ^13.8.0 (#109)
+- Hovering over query menu now displays a tooltip with information instead of expanding inside the menu (#112)
 
 ### Fixed
 

src/App.jsx

@@ -68,7 +68,7 @@ function App() {
           <Resource
             key={query.id}
             name={query.id}
-            options={{ label: query.name }}
+            options={{ label: query.name, descr: query.description }}
             icon={IconProvider[query.icon]}
             list={TemplatedListResultTable}
           />

src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx

@@ -1,8 +1,8 @@
+import React, { Component } from 'react';
 import { useResourceDefinitions } from "ra-core";
 import { DashboardMenuItem } from "ra-ui-materialui";
 import { Menu } from "react-admin";
-import { ThemeProvider, createTheme } from "@mui/material";
-import { Component } from "react";
+import { ThemeProvider, createTheme, Tooltip, Box, Typography } from "@mui/material";
 
 /**
  * A custom menu as defined in React Admin for selecting the query the user whishes to execute.
@@ -12,13 +12,25 @@ function SelectionMenu() {
   const resources = useResourceDefinitions();
   return (
     <ThemeProvider theme={menuItemTheme}>
-       <div style={{ height: '100%', overflowY: 'auto'}}>
-      <Menu>
-        <DashboardMenuItem />
-        {Object.keys(resources).map((id) => (
-          <Menu.ResourceItem key={id} name={id} />
-        ))}
-      </Menu>
+      <div style={{ height: '100%', overflowY: 'auto', backgroundColor: 'white' }}>
+        <Menu>
+          <DashboardMenuItem />
+          {Object.keys(resources).map((id) => (
+            <Tooltip
+              key={id}
+              placement="right"
+              title={
+                <TooltipContent
+                  title={resources[id].options.label}
+                  description={resources[id].options.descr} />
+              }
+            >
+              <div >
+                <Menu.ResourceItem name={id} />
+              </div>
+            </Tooltip>
+          ))}
+        </Menu>
       </div>
     </ThemeProvider>
   );
@@ -39,15 +51,43 @@ const menuItemTheme = createTheme({
             verticalAlign: "middle",
           },
           "&:hover": {
-            display: "inline-flex",
-            overflow: "visible",
-            whiteSpace: "normal" ,
-            minWidth: "fit-content",
+            display: "block",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
           }
         },
       },
     }
   },
 });
 
+
+const TooltipContent = ({ title, description }) => (
+  <React.Fragment>
+    <Box
+      sx={{
+        width: 'fit-content',
+        backgroundColor: '#6d6d6d',
+        paddingX: 1,
+        marginX: -1,
+        
+      }}
+    >
+      <Typography variant="h6" component="div">
+        {title}
+      </Typography>
+
+      <Typography variant="body2" component="div"
+        sx={{
+          fontStyle: 'italic',
+          marginTop: 1,
+        }}
+      >
+        {description}
+      </Typography>
+    </Box>
+  </React.Fragment>
+)
+
+
 export default SelectionMenu;