Handle limit commands

2 files changed, 15 insertions, 7 deletions

diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js
index 55e26ec8..d853f995 100644
--- a/modern/src/settings/CommandSendPage.js
+++ b/modern/src/settings/CommandSendPage.js
@@ -16,6 +16,7 @@ import SelectField from '../common/components/SelectField';
 import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
 import { useCatch } from '../reactHelper';
+import { useRestriction } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -48,6 +49,8 @@ const CommandSendPage = () => {
   const [savedId, setSavedId] = useState(0);
   const [item, setItem] = useState({});
 
+  const limitCommands = useRestriction('limitCommands');
+
   const handleSend = useCatch(async () => {
     let command;
     if (savedId) {
@@ -90,13 +93,14 @@ const CommandSendPage = () => {
           <AccordionDetails className={classes.details}>
             <SelectField
               value={savedId}
+              emptyValue={limitCommands ? null : 0}
               emptyTitle={t('sharedNew')}
               onChange={(e) => setSavedId(e.target.value)}
               endpoint={`/api/commands/send?deviceId=${deviceId}`}
               titleGetter={(it) => it.description}
               label={t('sharedSavedCommand')}
             />
-            {!savedId && (
+            {!limitCommands && !savedId && (
               <BaseCommandView item={item} setItem={setItem} />
             )}
           </AccordionDetails>
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 80ee7df1..01acb33e 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -13,6 +13,7 @@ import CollectionFab from './components/CollectionFab';
 import CollectionActions from './components/CollectionActions';
 import TableShimmer from '../common/components/TableShimmer';
 import SearchHeader, { filterByKeyword } from './components/SearchHeader';
+import { useRestriction } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -29,6 +30,7 @@ const CommandsPage = () => {
   const [items, setItems] = useState([]);
   const [searchKeyword, setSearchKeyword] = useState('');
   const [loading, setLoading] = useState(false);
+  const limitCommands = useRestriction('limitCommands');
 
   useEffectAsync(async () => {
     setLoading(true);
@@ -53,7 +55,7 @@ const CommandsPage = () => {
             <TableCell>{t('sharedDescription')}</TableCell>
             <TableCell>{t('sharedType')}</TableCell>
             <TableCell>{t('commandSendSms')}</TableCell>
-            <TableCell className={classes.columnAction} />
+            {!limitCommands && <TableCell className={classes.columnAction} />}
           </TableRow>
         </TableHead>
         <TableBody>
@@ -62,14 +64,16 @@ const CommandsPage = () => {
               <TableCell>{item.description}</TableCell>
               <TableCell>{t(prefixString('command', item.type))}</TableCell>
               <TableCell>{formatBoolean(item.textChannel, t)}</TableCell>
-              <TableCell className={classes.columnAction} padding="none">
-                <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
-              </TableCell>
+              {!limitCommands && (
+                <TableCell className={classes.columnAction} padding="none">
+                  <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
+                </TableCell>
+              )}
             </TableRow>
-          )) : (<TableShimmer columns={4} endAction />)}
+          )) : (<TableShimmer columns={limitCommands ? 3 : 4} endAction />)}
         </TableBody>
       </Table>
-      <CollectionFab editPath="/settings/command" />
+      <CollectionFab editPath="/settings/command" disabled={limitCommands} />
     </PageLayout>
   );
 };