Allow device readonly linking

3 files changed, 28 insertions, 19 deletions

diff --git a/modern/src/settings/DevicesPage.js b/modern/src/settings/DevicesPage.js
index 8f267a21..5a053766 100644
--- a/modern/src/settings/DevicesPage.js
+++ b/modern/src/settings/DevicesPage.js
@@ -15,6 +15,7 @@ import TableShimmer from '../common/components/TableShimmer';
 import SearchHeader, { filterByKeyword } from './components/SearchHeader';
 import { usePreference } from '../common/util/preferences';
 import { formatTime } from '../common/util/formatter';
+import { useDeviceReadonly } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -30,6 +31,8 @@ const DevicesPage = () => {
 
   const hours12 = usePreference('twelveHourFormat');
 
+  const deviceReadonly = useDeviceReadonly();
+
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -87,6 +90,7 @@ const DevicesPage = () => {
                   endpoint="devices"
                   setTimestamp={setTimestamp}
                   customActions={[actionConnections]}
+                  readonly={deviceReadonly}
                 />
               </TableCell>
             </TableRow>
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index b84d8f0f..177295b1 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 const CollectionActions = ({
-  itemId, editPath, endpoint, setTimestamp, customActions,
+  itemId, editPath, endpoint, setTimestamp, customActions, readonly,
 }) => {
   const theme = useTheme();
   const classes = useStyles();
@@ -62,8 +62,12 @@ const CollectionActions = ({
             {customActions && customActions.map((action) => (
               <MenuItem onClick={() => handleCustom(action)} key={action.key}>{action.title}</MenuItem>
             ))}
-            <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
-            <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
+            {!readonly && (
+              <>
+                <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
+                <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
+              </>
+            )}
           </Menu>
         </>
       ) : (
@@ -73,12 +77,16 @@ const CollectionActions = ({
               {action.icon}
             </IconButton>
           ))}
-          <IconButton size="small" onClick={handleEdit}>
-            <EditIcon fontSize="small" />
-          </IconButton>
-          <IconButton size="small" onClick={handleRemove}>
-            <DeleteIcon fontSize="small" />
-          </IconButton>
+          {!readonly && (
+            <>
+              <IconButton size="small" onClick={handleEdit}>
+                <EditIcon fontSize="small" />
+              </IconButton>
+              <IconButton size="small" onClick={handleRemove}>
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </>
+          )}
         </div>
       )}
       <RemoveDialog style={{ transform: 'none' }} open={removing} endpoint={endpoint} itemId={itemId} onResult={handleRemoveResult} />
diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js
index c732fc9f..eecdad79 100644
--- a/modern/src/settings/components/SettingsMenu.js
+++ b/modern/src/settings/components/SettingsMenu.js
@@ -17,7 +17,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import {
-  useAdministrator, useDeviceReadonly, useManager, useRestriction,
+  useAdministrator, useManager, useRestriction,
 } from '../../common/util/permissions';
 import useFeatures from '../../common/util/useFeatures';
 
@@ -35,7 +35,6 @@ const SettingsMenu = () => {
   const location = useLocation();
 
   const readonly = useRestriction('readonly');
-  const deviceReadonly = useDeviceReadonly();
   const admin = useAdministrator();
   const manager = useManager();
   const userId = useSelector((state) => state.session.user.id);
@@ -65,14 +64,12 @@ const SettingsMenu = () => {
               icon={<PersonIcon />}
               selected={location.pathname === `/settings/user/${userId}`}
             />
-            {!deviceReadonly && (
-              <MenuItem
-                title={t('deviceTitle')}
-                link="/settings/devices"
-                icon={<SmartphoneIcon />}
-                selected={location.pathname.startsWith('/settings/device')}
-              />
-            )}
+            <MenuItem
+              title={t('deviceTitle')}
+              link="/settings/devices"
+              icon={<SmartphoneIcon />}
+              selected={location.pathname.startsWith('/settings/device')}
+            />
             <MenuItem
               title={t('sharedGeofences')}
               link="/geofences"