Merge pull request #162 from stephb9959/main

[WIFI-12270] Now displaying information related to restricted device in dev mode

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.9.0(9)",
+  "version": "2.9.0(11)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.9.0(9)",
+      "version": "2.9.0(11)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.9.0(9)",
+  "version": "2.9.0(11)",
   "description": "",
   "private": true,
   "main": "index.tsx",

public/locales/de/translation.json

@@ -630,6 +630,8 @@
 		"one": "Gerät",
 		"reassign_already_owned": "Geräte neu zuweisen, die bereits vorhanden sind und einem anderen Unternehmen/Veranstaltungsort/Abonnenten gehören?",
 		"restricted": "Beschränkt",
+		"restricted_overriden": "Dies ist ein eingeschränktes Gerät, aber es befindet sich im Entwicklungsmodus. Alle Einschränkungen werden derzeit ignoriert",
+		"restrictions_overriden_title": "Dev-Modus",
 		"sanity": "Gesundheit",
 		"start_import": "Geräteimport starten",
 		"test_batch": "Testen Sie Importdaten",

public/locales/en/translation.json

@@ -630,6 +630,8 @@
 		"one": "Device",
 		"reassign_already_owned": "Reassign devices which already exist and are owned by another entity/venue/subscriber?",
 		"restricted": "Restricted",
+		"restricted_overriden": "This is a restricted device, but it is in development mode. All restrictions are currently ignored",
+		"restrictions_overriden_title": "Dev Mode",
 		"sanity": "Sanity",
 		"start_import": "Start Device Importation",
 		"test_batch": "Test Import Data",

public/locales/es/translation.json

@@ -630,6 +630,8 @@
 		"one": "Dispositivo",
 		"reassign_already_owned": "¿Reasignar dispositivos que ya existen y son propiedad de otra entidad/lugar/suscriptor?",
 		"restricted": "Restringido",
+		"restricted_overriden": "Este es un dispositivo restringido, pero está en modo de desarrollo. Actualmente se ignoran todas las restricciones.",
+		"restrictions_overriden_title": "MODO DE DESARROLLO",
 		"sanity": "Cordura",
 		"start_import": "Iniciar la importación de dispositivos",
 		"test_batch": "Datos de importación de prueba",

public/locales/fr/translation.json

@@ -630,6 +630,8 @@
 		"one": "Dispositif",
 		"reassign_already_owned": "Réattribuer des appareils qui existent déjà et qui appartiennent à une autre entité/salle/abonné ?",
 		"restricted": "Limité",
+		"restricted_overriden": "Il s'agit d'un appareil restreint, mais il est en mode développement. Toutes les restrictions sont actuellement ignorées",
+		"restrictions_overriden_title": "Mode développement",
 		"sanity": "Santé mentale",
 		"start_import": "Démarrer l'importation de l'appareil",
 		"test_batch": "Tester les données d'importation",

public/locales/pt/translation.json

@@ -630,6 +630,8 @@
 		"one": "Dispositivo",
 		"reassign_already_owned": "Reatribuir dispositivos que já existem e são de propriedade de outra entidade/local/assinante?",
 		"restricted": "Restrito",
+		"restricted_overriden": "Este é um dispositivo restrito, mas está em modo de desenvolvimento. Todas as restrições são atualmente ignoradas",
+		"restrictions_overriden_title": "Modo de desenvolvedor",
 		"sanity": "Sanidade",
 		"start_import": "Iniciar importação de dispositivos",
 		"test_batch": "Dados de importação de teste",

src/components/Modals/FirmwareUpgradeModal/index.tsx

@@ -57,7 +57,8 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
     upgrade({
       keepRedirector: isRedirector,
       uri,
-      signature: device?.restrictedDevice ? ref.current?.values?.signature : undefined,
+      signature:
+        device?.restrictedDevice && !device?.restrictionDetails?.developer ? ref.current?.values?.signature : undefined,
     });
   };
 
@@ -89,7 +90,7 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
                 </FormLabel>
                 <Switch isChecked={isRedirector} onChange={toggle} borderRadius="15px" size="lg" />
               </FormControl>
-              {device?.restrictedDevice && (
+              {device?.restrictedDevice && !device?.restrictionDetails?.developer && (
                 <Formik<{ signature?: string }>
                   innerRef={ref as Ref<FormikProps<{ signature?: string | undefined }>> | undefined}
                   key={formKey}

src/components/Modals/ScriptModal/Form.tsx

@@ -183,7 +183,9 @@ const CustomScriptForm = ({
             <>
               <Flex>
                 <Box>
-                  {device?.restrictedDevice && <SignatureField name="signature" isDisabled={areFieldsDisabled} />}
+                  {device?.restrictedDevice && !device?.restrictionDetails?.developer && (
+                    <SignatureField name="signature" isDisabled={areFieldsDisabled} />
+                  )}
                 </Box>
               </Flex>
               <SelectField

src/components/Modals/ScriptModal/index.tsx

@@ -76,7 +76,7 @@ export const ScriptModal = ({ device, modalProps }: ScriptModalProps) => {
         when: 0,
         deferred: data.deferred,
         timeout: data.timeout,
-        signature: device?.restrictedDevice ? data.signature : undefined,
+        signature: device?.restrictedDevice && !device?.restrictionDetails?.developer ? data.signature : undefined,
         uri: data.defaultUploadURI && data.defaultUploadURI?.length > 0 ? data.defaultUploadURI : undefined,
         scriptId: selectedScript,
         type: data.type,

src/pages/Device/RestrictionsCard/index.tsx

@@ -1,5 +1,16 @@
 import * as React from 'react';
-import { Box, Flex, Heading, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Heading,
+  ListItem,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  Text,
+  Tooltip,
+  UnorderedList,
+} from '@chakra-ui/react';
 import { LockSimple, LockSimpleOpen } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { Card } from 'components/Containers/Card';
@@ -20,7 +31,7 @@ const RestrictionsCard = ({ serialNumber }: Props) => {
     ssh: 'SSH',
     rtty: 'RTTY',
     tty: t('restrictions.tty'),
-    developer: t('restrictions.developer'),
+    // developer: t('restrictions.developer'),
     upgrade: t('restrictions.signed_upgrade'),
     commands: t('restrictions.gw_commands'),
   } as { [key: string]: string };
@@ -38,27 +49,52 @@ const RestrictionsCard = ({ serialNumber }: Props) => {
     return restrictedKeys.map(([k]) => <ListItem key={k}>{LABELS[k]}</ListItem>);
   };
 
+  const isMissingSigningInfo =
+    !restrictions.key_info ||
+    (!restrictions.key_info.algo && !restrictions.key_info.vendor) ||
+    (restrictions.key_info.algo.length === 0 && restrictions.key_info.vendor.length === 0);
+
   return (
     <Card mb={4}>
       <CardHeader>
-        <Heading size="md">{t('restrictions.title')}</Heading>
+        <Heading size="md" my="auto" mr={2}>
+          {t('restrictions.title')}
+        </Heading>
+        {getDevice.data?.restrictionDetails?.developer ? (
+          <Tooltip label={t('devices.restricted_overriden')} hasArrow>
+            <Tag size="lg" colorScheme="green">
+              <TagLeftIcon boxSize="18px" as={LockSimpleOpen} />
+              <TagLabel>{t('devices.restrictions_overriden_title')}</TagLabel>
+            </Tag>
+          </Tooltip>
+        ) : null}
       </CardHeader>
       <CardBody p={0} display="block">
         <Flex mt={2}>
-          <Heading size="sm" mr={2}>
+          <Heading size="sm" mr={2} my="auto">
             {t('restrictions.countries')}:
           </Heading>
-          <Text>{restrictions.country.join(', ')}</Text>
+          <Text my="auto">
+            {restrictions.country?.length === 0 ? t('common.all') : restrictions.country.join(', ')}
+          </Text>
         </Flex>
-        <Heading size="sm" mt={2}>
-          {t('restrictions.key_verification')}
-        </Heading>
-        <UnorderedList>
+        <Flex mt={2}>
+          <Heading size="sm" mt={2} my="auto">
+            {t('restrictions.key_verification')} {isMissingSigningInfo ? ':' : ''}
+          </Heading>
+          {isMissingSigningInfo ? (
+            <Text my="auto" ml={2}>
+              {t('common.none')}
+            </Text>
+          ) : null}
+        </Flex>
+        <UnorderedList hidden={isMissingSigningInfo}>
           <ListItem>
-            {t('controller.wifi.vendor')}: {restrictions.key_info?.vendor}
+            {t('controller.wifi.vendor')}:{' '}
+            {restrictions.key_info?.vendor?.length > 0 ? restrictions.key_info?.vendor : '-'}
           </ListItem>
           <ListItem>
-            {t('restrictions.algo')}: {restrictions.key_info?.algo}
+            {t('restrictions.algo')}: {restrictions.key_info?.algo?.length > 0 ? restrictions.key_info?.algo : '-'}
           </ListItem>
         </UnorderedList>
         <Flex mt={2}>

src/pages/Device/Wrapper.tsx

@@ -13,7 +13,7 @@ import {
   useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react';
-import { Heart, HeartBreak, LockSimple, WifiHigh, WifiSlash } from 'phosphor-react';
+import { Heart, HeartBreak, LockSimple, LockSimpleOpen, WifiHigh, WifiSlash } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import Masonry from 'react-masonry-css';
 import DeviceDetails from './Details';
@@ -59,6 +59,9 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
   const traceModalProps = useDisclosure();
   const rebootModalProps = useDisclosure();
   const scriptModal = useScriptModal();
+  // Sticky-top styles
+  const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md';
+  const boxShadow = useColorModeValue('0px 7px 23px rgba(0, 0, 0, 0.05)', 'none');
   const connectedTag = React.useMemo(() => {
     if (!getStatus.data) return null;
 
@@ -102,9 +105,28 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
     );
   }, [getStatus.data, getHealth.data]);
 
-  // Sticky-top styles
-  const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md';
-  const boxShadow = useColorModeValue('0px 7px 23px rgba(0, 0, 0, 0.05)', 'none');
+  const restrictedTag = React.useMemo(() => {
+    if (!getDevice.data || !getDevice.data.restrictedDevice) return null;
+
+    if (getDevice.data.restrictionDetails?.developer)
+      return (
+        <Tooltip label={t('devices.restricted_overriden')} hasArrow>
+          <Tag size="lg" colorScheme="green">
+            <TagLeftIcon boxSize="18px" as={LockSimpleOpen} />
+            <TagLabel>
+              {t('devices.restricted')} {isCompact ? '' : '(Dev Mode)'}
+            </TagLabel>
+          </Tag>
+        </Tooltip>
+      );
+
+    return (
+      <Tag size="lg" colorScheme="red">
+        <TagLeftIcon boxSize="18px" as={LockSimple} />
+        <TagLabel>{t('devices.restricted')}</TagLabel>
+      </Tag>
+    );
+  }, [getDevice.data, isCompact]);
 
   const refresh = () => {
     getDevice.refetch();
@@ -121,12 +143,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
               <Heading size="md">{serialNumber}</Heading>
               {connectedTag}
               {healthTag}
-              {getDevice.data?.restrictedDevice && (
-                <Tag size="lg" colorScheme="gray">
-                  <TagLeftIcon boxSize="18px" as={LockSimple} />
-                  <TagLabel>{t('devices.restricted')}</TagLabel>
-                </Tag>
-              )}
+              {restrictedTag}
             </HStack>
             <Spacer />
             <HStack spacing={2}>
@@ -175,12 +192,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
                 <Heading size="md">{serialNumber}</Heading>
                 {connectedTag}
                 {healthTag}
-                {getDevice.data?.restrictedDevice && (
-                  <Tag size="lg" colorScheme="gray">
-                    <TagLeftIcon boxSize="18px" as={LockSimple} />
-                    <TagLabel>{t('devices.restricted')}</TagLabel>
-                  </Tag>
-                )}
+                {restrictedTag}
               </HStack>
               <Spacer />
               <HStack spacing={2}>

src/pages/Devices/Blacklist/CreateModal.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Box,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Textarea,
-  useDisclosure,
-  useToast,
-} from '@chakra-ui/react';
+import { FormControl, FormErrorMessage, FormLabel, Input, Textarea, useDisclosure, useToast } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { CreateButton } from 'components/Buttons/CreateButton';
 import { SaveButton } from 'components/Buttons/SaveButton';
 import { Modal } from 'components/Modals/Modal';
 import { useCreateBlacklist } from 'hooks/Network/Blacklist';
+import { AxiosError } from 'models/Axios';
 
 const CreateBlacklistModal = () => {
   const { t } = useTranslation();
   const toast = useToast();
+  const initialRef = React.useRef<HTMLInputElement>(null);
   const modalProps = useDisclosure();
   const createDevice = useCreateBlacklist();
   const [serialNumber, setSerialNumber] = React.useState<string>('');
@@ -43,41 +32,50 @@ const CreateBlacklistModal = () => {
           });
           modalProps.onClose();
         },
+        onError: (e) => {
+          toast({
+            id: 'add-blacklist-error',
+            title: t('common.error'),
+            description: (e as AxiosError)?.response?.data?.ErrorDescription,
+            status: 'error',
+            duration: 5000,
+            isClosable: true,
+            position: 'top-right',
+          });
+        },
       },
     );
   };
 
   const isSerialValid = serialNumber.length === 12 && serialNumber.match('^[a-fA-F0-9]+$') !== null;
 
-  React.useEffect(() => {
+  const onOpen = () => {
     setSerialNumber('');
     setReason('');
-  }, [modalProps.isOpen]);
+    modalProps.onOpen();
+    setTimeout(() => {
+      initialRef.current?.focus();
+    }, 200);
+  };
 
   return (
     <>
-      <CreateButton onClick={modalProps.onOpen} isCompact ml={2} />
+      <CreateButton onClick={onOpen} isCompact ml={2} />
       <Modal
         {...modalProps}
         title={t('controller.devices.add_blacklist')}
         topRightButtons={<SaveButton onClick={onSave} isLoading={createDevice.isLoading} isCompact />}
       >
         <>
-          {createDevice.error && (
-            <Alert status="error" mb={4}>
-              <AlertIcon />
-              <Box>
-                <AlertTitle>{t('common.error')}</AlertTitle>
-                {
-                  // @ts-ignore
-                  <AlertDescription>{createDevice.error?.response?.data?.ErrorDescription}</AlertDescription>
-                }
-              </Box>
-            </Alert>
-          )}
           <FormControl isInvalid={!isSerialValid} mb={2}>
             <FormLabel>{t('inventory.serial_number')}</FormLabel>
-            <Input type="text" onChange={(e) => setSerialNumber(e.target.value)} value={serialNumber} w="140px" />
+            <Input
+              type="text"
+              onChange={(e) => setSerialNumber(e.target.value)}
+              value={serialNumber}
+              w="140px"
+              ref={initialRef}
+            />
             <FormErrorMessage>{t('inventory.invalid_serial_number')}</FormErrorMessage>
           </FormControl>
           <FormControl>