Add tooltips

13 files changed, 45 insertions, 18 deletions

diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index d26eff09..a7858ce5 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -8,6 +8,7 @@ import {
 import { geofencesActions } from '../store';
 import CollectionActions from '../settings/components/CollectionActions';
 import { useCatchCallback } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   list: {
@@ -24,6 +25,7 @@ const useStyles = makeStyles(() => ({
 const GeofencesList = ({ onGeofenceSelected }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
+  const t = useTranslation();
 
   const items = useSelector((state) => state.geofences.items);
 
@@ -42,7 +44,7 @@ const GeofencesList = ({ onGeofenceSelected }) => {
         <Fragment key={item.id}>
           <ListItemButton key={item.id} onClick={() => onGeofenceSelected(item.id)}>
             <ListItemText primary={item.name} />
-            <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
+            <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" collectionTitle={t('sharedGeofence')} setTimestamp={refreshGeofences} />
           </ListItemButton>
           {index < list.length - 1 ? <Divider /> : null}
         </Fragment>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 6ce7ae8e..cbbf3d40 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import {
   Divider, Typography, IconButton, useMediaQuery, Toolbar,
 } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material/styles';
 import Drawer from '@mui/material/Drawer';
@@ -117,7 +118,9 @@ const GeofencesPage = () => {
             <label htmlFor="upload-gpx">
               <input accept=".gpx" id="upload-gpx" type="file" className={classes.fileInput} onChange={handleFile} />
               <IconButton edge="end" component="span" onClick={() => {}}>
-                <UploadFileIcon />
+                <Tooltip title={t('sharedUploadGeofence')} enterDelay={500} enterNextDelay={500}>
+                  <UploadFileIcon />
+                </Tooltip>
               </IconButton>
             </label>
           </Toolbar>
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index d30cad7e..384e31e3 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -8,6 +8,8 @@
     "sharedEdit": "Edit",
     "sharedRemove": "Remove",
     "sharedRemoveConfirm": "Remove item?",
+    "sharedPublish": "Publish",
+    "sharedLink": "Link",
     "sharedNoData": "No data",
     "sharedYes": "Yes",
     "sharedNo": "No",
@@ -35,6 +37,7 @@
     "sharedGeofence": "Geofence",
     "sharedGeofences": "Geofences",
     "sharedCreateGeofence": "Create Geofence",
+    "sharedUploadGeofence": "Upload Geofence",
     "sharedNotifications": "Notifications",
     "sharedNotification": "Notification",
     "sharedAttributes": "Attributes",
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index de27a451..e0b957e4 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -50,7 +50,7 @@ const CalendarsPage = () => {
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
-                <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
+                <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" collectionTitle={t('sharedCalendar')} setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
           )) : (<TableShimmer columns={2} endAction />)}
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 1b893831..7a330874 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -59,7 +59,7 @@ const CommandsPage = () => {
               <TableCell>{formatBoolean(item.textChannel, t)}</TableCell>
               {!limitCommands && (
                 <TableCell className={classes.columnAction} padding="none">
-                  <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
+                  <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" collectionTitle={t('sharedSavedCommand')} setTimestamp={setTimestamp} />
                 </TableCell>
               )}
             </TableRow>
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 6d098547..d252bc4d 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -59,7 +59,7 @@ const ComputedAttributesPage = () => {
               <TableCell>{item.type}</TableCell>
               {administrator && (
                 <TableCell className={classes.columnAction} padding="none">
-                  <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" setTimestamp={setTimestamp} />
+                  <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" collectionTitle={t('sharedComputedAttribute')} setTimestamp={setTimestamp} />
                 </TableCell>
               )}
             </TableRow>
diff --git a/modern/src/settings/DevicesPage.js b/modern/src/settings/DevicesPage.js
index 5ef5aae5..6a285429 100644
--- a/modern/src/settings/DevicesPage.js
+++ b/modern/src/settings/DevicesPage.js
@@ -51,6 +51,7 @@ const DevicesPage = () => {
   const actionConnections = {
     key: 'connections',
     title: t('sharedConnections'),
+    tooltip: t('sharedLink').concat(' ').concat(t('reportDevice')),
     icon: <LinkIcon fontSize="small" />,
     handler: (deviceId) => navigate(`/settings/device/${deviceId}/connections`),
   };
@@ -86,6 +87,7 @@ const DevicesPage = () => {
                   itemId={item.id}
                   editPath="/settings/device"
                   endpoint="devices"
+                  collectionTitle={t('reportDevice')}
                   setTimestamp={setTimestamp}
                   customActions={[actionConnections]}
                   readonly={deviceReadonly}
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index 72834860..dcd3f9fb 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -52,7 +52,7 @@ const DriversPage = () => {
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.uniqueId}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
-                <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
+                <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" collectionTitle={t('sharedDriver')} setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
           )) : (<TableShimmer columns={3} endAction />)}
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index baba7f72..e009b06b 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -45,6 +45,11 @@ const GroupsPage = () => {
   const actionCommand = {
     key: 'command',
     title: t('deviceCommand'),
+    tooltip: t('commandSend')
+      .concat(' ')
+      .concat(t('reportGroup'))
+      .concat(' ')
+      .concat(t('commandTitle')),
     icon: <PublishIcon fontSize="small" />,
     handler: (groupId) => navigate(`/settings/group/${groupId}/command`),
   };
@@ -52,6 +57,7 @@ const GroupsPage = () => {
   const actionConnections = {
     key: 'connections',
     title: t('sharedConnections'),
+    tooltip: t('sharedLink').concat(' ').concat(t('reportGroup')),
     icon: <LinkIcon fontSize="small" />,
     handler: (groupId) => navigate(`/settings/group/${groupId}/connections`),
   };
@@ -75,6 +81,7 @@ const GroupsPage = () => {
                   itemId={item.id}
                   editPath="/settings/group"
                   endpoint="groups"
+                  collectionTitle={t('reportGroup')}
                   setTimestamp={setTimestamp}
                   customActions={limitCommands ? [actionConnections] : [actionConnections, actionCommand]}
                 />
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 2a66590c..4776deb6 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -79,7 +79,7 @@ const MaintenacesPage = () => {
               <TableCell>{convertAttribute(item.type, item.start)}</TableCell>
               <TableCell>{convertAttribute(item.type, item.period)}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
-                <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
+                <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" collectionTitle={t('sharedMaintenance')} setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
           )) : (<TableShimmer columns={5} endAction />)}
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index f1e70a85..7d6197c0 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -69,7 +69,7 @@ const NotificationsPage = () => {
               <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
               <TableCell>{formatList('notificator', item.notificators)}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
-                <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
+                <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" collectionTitle={t('sharedNotification')} setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
           )) : (<TableShimmer columns={5} endAction />)}
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index d04f2a2b..b4176763 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -44,6 +44,7 @@ const UsersPage = () => {
   const actionLogin = {
     key: 'login',
     title: t('loginLogin'),
+    tooltip: t('settingsUser').concat(' ').concat(t('loginTitle')),
     icon: <LoginIcon fontSize="small" />,
     handler: handleLogin,
   };
@@ -51,6 +52,7 @@ const UsersPage = () => {
   const actionConnections = {
     key: 'connections',
     title: t('sharedConnections'),
+    tooltip: t('sharedLink').concat(' ').concat(t('settingsUser')),
     icon: <LinkIcon fontSize="small" />,
     handler: (userId) => navigate(`/settings/user/${userId}/connections`),
   };
@@ -96,6 +98,7 @@ const UsersPage = () => {
                   itemId={item.id}
                   editPath="/settings/user"
                   endpoint="users"
+                  collectionTitle={t('settingsUser')}
                   setTimestamp={setTimestamp}
                   customActions={manager ? [actionLogin, actionConnections] : [actionConnections]}
                 />
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 177295b1..bf8eb257 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   IconButton, Menu, MenuItem, useMediaQuery, useTheme,
 } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -17,7 +18,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 const CollectionActions = ({
-  itemId, editPath, endpoint, setTimestamp, customActions, readonly,
+  itemId, editPath, endpoint, collectionTitle, setTimestamp, customActions, readonly,
 }) => {
   const theme = useTheme();
   const classes = useStyles();
@@ -73,18 +74,24 @@ const CollectionActions = ({
       ) : (
         <div className={classes.row}>
           {customActions && customActions.map((action) => (
-            <IconButton size="small" onClick={() => handleCustom(action)} key={action.key}>
-              {action.icon}
-            </IconButton>
+            <Tooltip title={action.tooltip} enterDelay={500} enterNextDelay={500}>
+              <IconButton size="small" onClick={() => handleCustom(action)} key={action.key}>
+                {action.icon}
+              </IconButton>
+            </Tooltip>
           ))}
           {!readonly && (
             <>
-              <IconButton size="small" onClick={handleEdit}>
-                <EditIcon fontSize="small" />
-              </IconButton>
-              <IconButton size="small" onClick={handleRemove}>
-                <DeleteIcon fontSize="small" />
-              </IconButton>
+              <Tooltip title={t('sharedEdit').concat(' ').concat(collectionTitle || '')} enterDelay={500} enterNextDelay={500}>
+                <IconButton size="small" onClick={handleEdit}>
+                  <EditIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title={t('sharedRemove').concat(' ').concat(collectionTitle || '')} enterDelay={500} enterNextDelay={500}>
+                <IconButton size="small" onClick={handleRemove}>
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
             </>
           )}
         </div>