Add tooltips

10 files changed, 35 insertions, 16 deletions

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>