Improved styling of dashboard header buttons, download CSV button

src/chart/table/TableChart.tsx

@@ -243,7 +243,7 @@ export const NeoTableChart = (props: ChartProps) => {
                 downloadCSV(rows);
               }}
               aria-label='download csv'
-              className='n-absolute n-z-10 n-bottom-4 n-left-1'
+              className='n-absolute n-z-10 n-bottom-7 n-left-1'
               clean
             >
               <CloudArrowDownIconOutline />

src/dashboard/header/DashboardTitle.tsx

@@ -124,34 +124,10 @@ export const NeoDashboardTitle = ({
       {/* If the app is not running in standalone mode (i.e. in edit mode) always show dashboard settings. */}
       {!standaloneSettings.standalone ? (
         <div className='flex flex-row flex-wrap items-center gap-2'>
-          {editable ? renderExtensionsButtons() : <></>}
+          <NeoSettingsModal dashboardSettings={dashboardSettings} updateDashboardSetting={updateDashboardSetting} />
+          {editable ? <NeoExportModal /> : <></>}
           {editable ? <NeoExtensionsModal closeMenu={handleSettingsMenuClose} /> : <></>}
-          <IconButton aria-label='Dashboard actions' onClick={handleSettingsMenuOpen}>
-            <EllipsisHorizontalIconOutline />
-          </IconButton>
-          <Menu
-            anchorOrigin={{
-              horizontal: 'right',
-              vertical: 'bottom',
-            }}
-            transformOrigin={{
-              horizontal: 'right',
-              vertical: 'top',
-            }}
-            anchorEl={anchorEl}
-            open={menuOpen}
-            onClose={handleSettingsMenuClose}
-            size='large'
-          >
-            <MenuItems>
-              <NeoSettingsModal
-                dashboardSettings={dashboardSettings}
-                updateDashboardSetting={updateDashboardSetting}
-              ></NeoSettingsModal>
-
-              <NeoExportModal />
-            </MenuItems>
-          </Menu>
+          {editable ? renderExtensionsButtons() : <></>}
         </div>
       ) : (
         <></>

src/extensions/ExtensionsModal.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Tooltip } from '@mui/material';
 import { EXTENSIONS } from './ExtensionConfig';
 import { connect } from 'react-redux';
 import { createNotificationThunk } from '../page/PageThunks';
@@ -9,6 +8,7 @@ import { setExtensionReducerEnabled } from './state/ExtensionActions';
 import { Dialog, Label, MenuItem, TextLink, Typography, Checkbox, IconButton } from '@neo4j-ndl/react';
 import { PuzzlePieceIconSolid } from '@neo4j-ndl/react/icons';
 import { Section, SectionContent } from '../modal/ModalUtils';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 
 const NeoExtensionsModal = ({
   extensions,
@@ -30,9 +30,11 @@ const NeoExtensionsModal = ({
 
   return (
     <>
-      <IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
-        <PuzzlePieceIconSolid />
-      </IconButton>
+      <Tooltip title='Extensions' aria-label='extensions' disableInteractive>
+        <IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
+          <PuzzlePieceIconSolid />
+        </IconButton>
+      </Tooltip>
 
       {open ? (
         <Dialog size='large' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>

src/extensions/text2cypher/component/QueryTranslatorButton.tsx

@@ -4,18 +4,21 @@ import { IconButton, MenuItem } from '@neo4j-ndl/react';
 import QueryTranslatorSettingsModal from './QueryTranslatorSettingsModal';
 import { ExclamationTriangleIconSolid, LanguageIconSolid } from '@neo4j-ndl/react/icons';
 import { getModelProvider } from '../state/QueryTranslatorSelector';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 
 const QueryTranslatorButton = (active) => {
   const [open, setOpen] = React.useState(false);
   const button = (
-    <IconButton className='n-mx-1' aria-label='Text2Cypher' onClick={() => setOpen(true)}>
-      <LanguageIconSolid />
-      {active.active == '' || active.active == undefined ? (
-        <ExclamationTriangleIconSolid color='red' className='-n-mt-1 n-ml-3 n-w-4/5'></ExclamationTriangleIconSolid>
-      ) : (
-        <></>
-      )}
-    </IconButton>
+    <Tooltip title='Text2Cypher' aria-label='text2cypher' disableInteractive>
+      <IconButton className='n-mx-1' aria-label='Text2Cypher' onClick={() => setOpen(true)}>
+        <LanguageIconSolid />
+        {active.active == '' || active.active == undefined ? (
+          <ExclamationTriangleIconSolid color='red' className='-n-mt-1 n-ml-3 n-w-4/5'></ExclamationTriangleIconSolid>
+        ) : (
+          <></>
+        )}
+      </IconButton>
+    </Tooltip>
   );
 
   const component = (

src/modal/ExportModal.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { MenuItem } from '@neo4j-ndl/react';
+import { IconButton, MenuItem } from '@neo4j-ndl/react';
 import NeoDashboardSidebarExportModal from '../dashboard/sidebar/modal/DashboardSidebarExportModal';
 import { getDashboardJson } from './ModalSelectors';
-import { DocumentTextIconOutline } from '@neo4j-ndl/react/icons';
+import { DocumentArrowDownIconOutline, DocumentTextIconOutline } from '@neo4j-ndl/react/icons';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 /**
  * A modal to save a dashboard as a JSON text string.
  * The button to open the modal is intended to use in a drawer at the side of the page.
  */
 export const NeoExportModal = ({ dashboard }) => {
   const [open, setOpen] = React.useState(false);
   return (
-    <div>
-      <MenuItem onClick={() => setOpen(true)} icon={<DocumentTextIconOutline />} title='Export' />
+    <>
+      <Tooltip title='Export' aria-label='export' disableInteractive>
+        <IconButton className='n-mx-1' onClick={() => setOpen(true)} aria-label='Export' title='Export'>
+          <DocumentArrowDownIconOutline />
+        </IconButton>
+      </Tooltip>
       <NeoDashboardSidebarExportModal
         open={open}
         dashboard={dashboard}
         handleClose={() => {
           setOpen(false);
         }}
       />
-    </div>
+    </>
   );
 };
 

src/settings/SettingsModal.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import NeoSetting from '../component/field/Setting';
 import { DASHBOARD_SETTINGS } from '../config/DashboardConfig';
-import { Dialog, MenuItem } from '@neo4j-ndl/react';
+import { Dialog, IconButton, MenuItem } from '@neo4j-ndl/react';
 import { Cog6ToothIconOutline } from '@neo4j-ndl/react/icons';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 
 export const NeoSettingsModal = ({ dashboardSettings, updateDashboardSetting }) => {
   const [open, setOpen] = React.useState(false);
@@ -42,7 +43,11 @@ export const NeoSettingsModal = ({ dashboardSettings, updateDashboardSetting })
 
   return (
     <>
-      <MenuItem onClick={handleClickOpen} icon={<Cog6ToothIconOutline />} title='Dashboard settings' />
+      <Tooltip title='Settings' aria-label='settings' disableInteractive>
+        <IconButton className='n-mx-1' onClick={handleClickOpen} aria-label='Settings' title='Settings'>
+          <Cog6ToothIconOutline />
+        </IconButton>
+      </Tooltip>
 
       <Dialog size='large' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>
         <Dialog.Header id='form-dialog-title'>