Handle readonly cases

2 files changed, 30 insertions, 18 deletions

diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 6ffb56d9..de86b7af 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -9,12 +9,15 @@ import useReportStyles from '../common/useReportStyles';
 import { reportsActions } from '../../store';
 import SplitButton from '../../common/components/SplitButton';
 import SelectField from '../../common/components/SelectField';
+import { useRestriction } from '../../common/util/permissions';
 
 const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignoreDevice, multiDevice, includeGroups }) => {
   const classes = useReportStyles();
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const readonly = useRestriction('readonly');
+
   const devices = useSelector((state) => state.devices.items);
   const groups = useSelector((state) => state.groups.items);
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
@@ -208,7 +211,11 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
             onClick={handleClick}
             selected={button}
             setSelected={(value) => dispatch(reportsActions.updateButton(value))}
-            options={{
+            options={readonly ? {
+              json: t('reportShow'),
+              export: t('reportExport'),
+              mail: t('reportEmail'),
+            } : {
               json: t('reportShow'),
               export: t('reportExport'),
               mail: t('reportEmail'),
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
index 3616f828..a31c3afe 100644
--- a/modern/src/reports/components/ReportsMenu.js
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -13,7 +13,7 @@ import RouteIcon from '@mui/icons-material/Route';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from '../../common/components/LocalizationProvider';
-import { useAdministrator } from '../../common/util/permissions';
+import { useAdministrator, useRestriction } from '../../common/util/permissions';
 
 const MenuItem = ({
   title, link, icon, selected,
@@ -29,6 +29,7 @@ const ReportsMenu = () => {
   const location = useLocation();
 
   const admin = useAdministrator();
+  const readonly = useRestriction('readonly');
 
   return (
     <>
@@ -75,22 +76,26 @@ const ReportsMenu = () => {
           icon={<RouteIcon />}
         />
       </List>
-      <Divider />
-      <List>
-        <MenuItem
-          title={t('reportScheduled')}
-          link="/reports/scheduled"
-          icon={<EventRepeatIcon />}
-        />
-        {admin && (
-          <MenuItem
-            title={t('statisticsTitle')}
-            link="/reports/statistics"
-            icon={<BarChartIcon />}
-            selected={location.pathname === '/reports/statistics'}
-          />
-        )}
-      </List>
+      {(admin || !readonly) && (
+        <>
+          <Divider />
+          <List>
+            <MenuItem
+              title={t('reportScheduled')}
+              link="/reports/scheduled"
+              icon={<EventRepeatIcon />}
+            />
+            {admin && (
+              <MenuItem
+                title={t('statisticsTitle')}
+                link="/reports/statistics"
+                icon={<BarChartIcon />}
+                selected={location.pathname === '/reports/statistics'}
+              />
+            )}
+          </List>
+        </>
+      )}
     </>
   );
 };