Option to hide attributes

9 files changed, 125 insertions, 176 deletions

diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
index 463b7d8c..896a77c4 100644
--- a/modern/src/settings/CalendarPage.js
+++ b/modern/src/settings/CalendarPage.js
@@ -7,7 +7,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { DropzoneArea } from 'react-mui-dropzone';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import SettingsMenu from './components/SettingsMenu';
 import components from '../common/theme/components';
@@ -72,20 +72,11 @@ const CalendarPage = () => {
               />
             </AccordionDetails>
           </Accordion>
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{}}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{}}
+          />
         </>
       )}
     </EditItemView>
diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js
index cecd2066..d0d5dd5e 100644
--- a/modern/src/settings/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -13,7 +13,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { DropzoneArea } from 'react-mui-dropzone';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import SelectField from '../common/components/SelectField';
 import deviceCategories from '../common/util/deviceCategories';
 import LinkField from '../common/components/LinkField';
@@ -158,20 +158,11 @@ const DevicePage = () => {
               </AccordionDetails>
             </Accordion>
           )}
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{ ...commonDeviceAttributes, ...deviceAttributes }}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{ ...commonDeviceAttributes, ...deviceAttributes }}
+          />
           {item.id && (
             <Accordion>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index 30f5106f..83d1f88f 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -6,7 +6,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import SettingsMenu from './components/SettingsMenu';
 
@@ -57,20 +57,11 @@ const DriverPage = () => {
               />
             </AccordionDetails>
           </Accordion>
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{}}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{}}
+          />
         </>
       )}
     </EditItemView>
diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js
index d7d1c50c..3bebea30 100644
--- a/modern/src/settings/GeofencePage.js
+++ b/modern/src/settings/GeofencePage.js
@@ -7,7 +7,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes';
 import SettingsMenu from './components/SettingsMenu';
@@ -77,20 +77,11 @@ const GeofencePage = () => {
               />
             </AccordionDetails>
           </Accordion>
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={geofenceAttributes}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={geofenceAttributes}
+          />
         </>
       )}
     </EditItemView>
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index c4c0fa5c..b4b0a92a 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -7,7 +7,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import SelectField from '../common/components/SelectField';
 import LinkField from '../common/components/LinkField';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -79,20 +79,11 @@ const GroupPage = () => {
               />
             </AccordionDetails>
           </Accordion>
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{ ...commonDeviceAttributes, ...groupAttributes }}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{ ...commonDeviceAttributes, ...groupAttributes }}
+          />
           {item.id && (
             <Accordion>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index d2cf02d9..c434f11e 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -15,7 +15,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { prefixString } from '../common/util/stringUtils';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useAttributePreference } from '../common/util/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
@@ -164,20 +164,11 @@ const MaintenancePage = () => {
               />
             </AccordionDetails>
           </Accordion>
-          <Accordion>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{}}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{}}
+          />
         </>
       )}
     </EditItemView>
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index ee2d5f31..22dd66af 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -21,7 +21,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { sessionActions } from '../store';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import SelectField from '../common/components/SelectField';
 import PageLayout from '../common/components/PageLayout';
@@ -241,20 +241,11 @@ const ServerPage = () => {
                 </FormGroup>
               </AccordionDetails>
             </Accordion>
-            <Accordion>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography variant="subtitle1">
-                  {t('sharedAttributes')}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails className={classes.details}>
-                <EditAttributesView
-                  attributes={item.attributes}
-                  setAttributes={(attributes) => setItem({ ...item, attributes })}
-                  definitions={{ ...commonUserAttributes, ...commonDeviceAttributes, ...serverAttributes }}
-                />
-              </AccordionDetails>
-            </Accordion>
+            <EditAttributesAccordion
+              attributes={item.attributes}
+              setAttributes={(attributes) => setItem({ ...item, attributes })}
+              definitions={{ ...commonUserAttributes, ...commonDeviceAttributes, ...serverAttributes }}
+            />
           </>
         )}
         <div className={classes.buttons}>
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index 6ca55187..5d29c0b4 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -23,7 +23,7 @@ import CachedIcon from '@mui/icons-material/Cached';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import EditItemView from './components/EditItemView';
-import EditAttributesView from './components/EditAttributesView';
+import EditAttributesAccordion from './components/EditAttributesAccordion';
 import LinkField from '../common/components/LinkField';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import useUserAttributes from '../common/attributes/useUserAttributes';
@@ -314,21 +314,12 @@ const UserPage = () => {
               </FormGroup>
             </AccordionDetails>
           </Accordion>
-          <Accordion defaultExpanded={!!attribute}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="subtitle1">
-                {t('sharedAttributes')}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails className={classes.details}>
-              <EditAttributesView
-                attributes={item.attributes}
-                setAttributes={(attributes) => setItem({ ...item, attributes })}
-                definitions={{ ...commonUserAttributes, ...userAttributes }}
-                focusAttribute={attribute}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <EditAttributesAccordion
+            attributes={item.attributes}
+            setAttributes={(attributes) => setItem({ ...item, attributes })}
+            definitions={{ ...commonUserAttributes, ...userAttributes }}
+            focusAttribute={attribute}
+          />
           {item.id && manager && (
             <Accordion>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesAccordion.js
index 3329d7bc..d159dafe 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesAccordion.js
@@ -10,27 +10,41 @@ import {
   IconButton,
   InputAdornment,
   InputLabel,
+  Accordion,
+  AccordionSummary,
+  Typography,
+  AccordionDetails,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import AddIcon from '@mui/icons-material/Add';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import AddAttributeDialog from './AddAttributeDialog';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAttributePreference } from '../../common/util/preferences';
 import {
   distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString,
 } from '../../common/util/converter';
+import useFeatures from '../../common/util/useFeatures';
 
 const useStyles = makeStyles((theme) => ({
   removeButton: {
     marginRight: theme.spacing(1.5),
   },
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
 }));
 
-const EditAttributesView = ({ attributes, setAttributes, definitions, focusAttribute }) => {
+const EditAttributesAccordion = ({ attributes, setAttributes, definitions, focusAttribute }) => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const features = useFeatures();
+
   const speedUnit = useAttributePreference('speedUnit');
   const distanceUnit = useAttributePreference('distanceUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
@@ -145,64 +159,71 @@ const EditAttributesView = ({ attributes, setAttributes, definitions, focusAttri
     }
   };
 
-  return (
-    <>
-      {convertToList(attributes).map(({
-        key, value, type, subtype,
-      }) => {
-        if (type === 'boolean') {
+  return features.disableAttributes ? '' : (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography variant="subtitle1">
+          {t('sharedAttributes')}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails className={classes.details}>
+        {convertToList(attributes).map(({
+          key, value, type, subtype,
+        }) => {
+          if (type === 'boolean') {
+            return (
+              <Grid container direction="row" justifyContent="space-between" key={key}>
+                <FormControlLabel
+                  control={(
+                    <Checkbox
+                      checked={value}
+                      onChange={(e) => updateAttribute(key, e.target.checked)}
+                    />
+                  )}
+                  label={getAttributeName(key, subtype)}
+                />
+                <IconButton size="small" className={classes.removeButton} onClick={() => deleteAttribute(key)}>
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              </Grid>
+            );
+          }
           return (
-            <Grid container direction="row" justifyContent="space-between" key={key}>
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    checked={value}
-                    onChange={(e) => updateAttribute(key, e.target.checked)}
-                  />
-                )}
+            <FormControl key={key}>
+              <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
+              <OutlinedInput
                 label={getAttributeName(key, subtype)}
+                type={type === 'number' ? 'number' : 'text'}
+                value={getDisplayValue(value, subtype)}
+                onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
+                autoFocus={focusAttribute === key}
+                endAdornment={(
+                  <InputAdornment position="end">
+                    <IconButton size="small" onClick={() => deleteAttribute(key)}>
+                      <CloseIcon fontSize="small" />
+                    </IconButton>
+                  </InputAdornment>
+                )}
               />
-              <IconButton size="small" className={classes.removeButton} onClick={() => deleteAttribute(key)}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            </Grid>
+            </FormControl>
           );
-        }
-        return (
-          <FormControl key={key}>
-            <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
-            <OutlinedInput
-              label={getAttributeName(key, subtype)}
-              type={type === 'number' ? 'number' : 'text'}
-              value={getDisplayValue(value, subtype)}
-              onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
-              autoFocus={focusAttribute === key}
-              endAdornment={(
-                <InputAdornment position="end">
-                  <IconButton size="small" onClick={() => deleteAttribute(key)}>
-                    <CloseIcon fontSize="small" />
-                  </IconButton>
-                </InputAdornment>
-              )}
-            />
-          </FormControl>
-        );
-      })}
-      <Button
-        variant="outlined"
-        color="primary"
-        onClick={() => setAddDialogShown(true)}
-        startIcon={<AddIcon />}
-      >
-        {t('sharedAdd')}
-      </Button>
-      <AddAttributeDialog
-        open={addDialogShown}
-        onResult={handleAddResult}
-        definitions={definitions}
-      />
-    </>
+        })}
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={() => setAddDialogShown(true)}
+          startIcon={<AddIcon />}
+        >
+          {t('sharedAdd')}
+        </Button>
+        <AddAttributeDialog
+          open={addDialogShown}
+          onResult={handleAddResult}
+          definitions={definitions}
+        />
+      </AccordionDetails>
+    </Accordion>
   );
 };
 
-export default EditAttributesView;
+export default EditAttributesAccordion;