[WIFI-13515] Supporting deviceTypes in lowercase

Signed-off-by: Charles <charles.bourque96@gmail.com>
2025-10-28 17:02:21 +00:00 · 2024-03-15 17:22:28 +01:00
parent a10f0c992e
commit 3d01c20339
11 changed files with 97 additions and 42 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "ucentral-client",
-  "version": "3.0.2(6)",
+  "version": "3.0.2(8)",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ucentral-client",
-      "version": "3.0.2(6)",
+      "version": "3.0.2(8)",
      "license": "ISC",
      "dependencies": {
        "@chakra-ui/anatomy": "^2.1.1",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ucentral-client",
-  "version": "3.0.2(6)",
+  "version": "3.0.2(8)",
  "description": "",
  "private": true,
  "main": "index.tsx",
--- a/src/components/Buttons/DeviceActionDropdown/index.tsx
+++ b/src/components/Buttons/DeviceActionDropdown/index.tsx
@@ -54,7 +54,7 @@ const DeviceActionDropdown = ({
 }: Props) => {
  const { t } = useTranslation();
  const toast = useToast();
-  const deviceType = device?.deviceType ?? 'AP';
+  const deviceType = device?.deviceType ?? 'ap';
  const connectColor = useColorModeValue('blackAlpha', 'gray');
  const addEventListeners = useControllerStore((state) => state.addEventListeners);
  const { refetch: getRtty, isFetching: isRtty } = useGetDeviceRtty({
@@ -173,7 +173,7 @@ const DeviceActionDropdown = ({
          isLoading={isRtty}
          onClick={handleConnectClick}
          colorScheme={connectColor}
-          hidden={isCompact || deviceType !== 'AP'}
+          hidden={isCompact || deviceType !== 'ap'}
        />
      </Tooltip>
      <Tooltip label={t('controller.configure.title')}>
@@ -206,7 +206,7 @@ const DeviceActionDropdown = ({
          isDisabled={isDisabled}
          onClick={handleOpenScan}
          colorScheme="teal"
-          hidden={isCompact || deviceType !== 'AP'}
+          hidden={isCompact || deviceType !== 'ap'}
        />
      </Tooltip>
      <Menu>
@@ -222,7 +222,7 @@ const DeviceActionDropdown = ({
        <Portal>
          <MenuList maxH="315px" overflowY="auto">
            <MenuItem onClick={handleBlinkClick}>{t('commands.blink')}</MenuItem>
-            <MenuItem onClick={handleOpenConfigure} hidden={!isCompact || deviceType !== 'AP'}>
+            <MenuItem onClick={handleOpenConfigure} hidden={!isCompact || deviceType !== 'ap'}>
              {t('controller.configure.title')}
            </MenuItem>
            <MenuItem onClick={handleConnectClick} hidden={!isCompact}>
@@ -240,7 +240,7 @@ const DeviceActionDropdown = ({
            <MenuItem onClick={handleUpdateToLatest} hidden>
              {t('premium.toolbox.upgrade_to_latest')}
            </MenuItem>
-            <MenuItem onClick={handleOpenScan} hidden={!isCompact || deviceType !== 'AP'}>
+            <MenuItem onClick={handleOpenScan} hidden={!isCompact || deviceType !== 'ap'}>
              {t('commands.wifiscan')}
            </MenuItem>
          </MenuList>
--- a/src/hooks/Network/DefaultConfigurations.ts
+++ b/src/hooks/Network/DefaultConfigurations.ts
@@ -3,10 +3,12 @@ import { axiosGw } from 'constants/axiosInstances';
 import { useEndpointStatus } from 'hooks/useEndpointStatus';
 import { AxiosError } from 'models/Axios';
 import { DeviceConfiguration } from 'models/Device';
+import { DevicePlatform } from './Devices';

 export type DefaultConfigurationResponse = {
  configuration: DeviceConfiguration;
  created: number;
+  platform: DevicePlatform;
  description: string;
  lastModified: number;
  modelIds: string[];
--- a/src/hooks/Network/Devices.ts
+++ b/src/hooks/Network/Devices.ts
@@ -11,7 +11,7 @@ import { Note } from 'models/Note';
 import { PageInfo } from 'models/Table';
 import { DeviceCommandHistory } from './Commands';

-export const DEVICE_PLATFORMS = ['ALL', 'AP', 'SWITCH'] as const;
+export const DEVICE_PLATFORMS = ['all', 'ap', 'switch'] as const;
 export type DevicePlatform = (typeof DEVICE_PLATFORMS)[number];

 const getDeviceCount = (platform: DevicePlatform) =>
@@ -19,7 +19,7 @@ const getDeviceCount = (platform: DevicePlatform) =>
    count: number;
  }>;

-export const useGetDeviceCount = ({ enabled, platform = 'ALL' }: { enabled: boolean; platform?: DevicePlatform }) => {
+export const useGetDeviceCount = ({ enabled, platform = 'all' }: { enabled: boolean; platform?: DevicePlatform }) => {
  const { t } = useTranslation();
  const toast = useToast();

@@ -55,7 +55,7 @@ export type DeviceWithStatus = {
  certificateExpiryDate?: number;
  createdTimestamp: number;
  devicePassword: string;
-  deviceType: 'AP' | 'SWITCH' | 'IOT' | 'MESH';
+  deviceType: 'ap' | 'switch';
  entity: string;
  firmware: string;
  fwUpdatePolicy: string;
@@ -111,7 +111,7 @@ export const useGetDevices = ({
  pageInfo,
  enabled,
  onError,
-  platform = 'ALL',
+  platform = 'all',
 }: {
  pageInfo?: PageInfo;
  enabled: boolean;
@@ -147,7 +147,7 @@ const getAllDevices = async (platform: DevicePlatform) => {

 export const useGetAllDevicesWithStatus = ({
  onError,
-  platform = 'ALL',
+  platform = 'all',
 }: {
  onError?: (e: AxiosError) => void;
  platform?: DevicePlatform;
--- a/src/pages/DefaultConfigurations/List/CreateModal.tsx
+++ b/src/pages/DefaultConfigurations/List/CreateModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, SimpleGrid, useBoolean, useDisclosure, useToast } from '@chakra-ui/react';
+import { Box, Flex, useBoolean, useDisclosure, useToast } from '@chakra-ui/react';
 import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
@@ -16,6 +16,7 @@ import { useGetDeviceTypes } from 'hooks/Network/Firmware';
 import { useFormModal } from 'hooks/useFormModal';
 import { useFormRef } from 'hooks/useFormRef';
 import { AxiosError } from 'models/Axios';
+import { SelectField } from 'components/Form/Fields/SelectField';

 const CreateDefaultConfigurationModal = () => {
  const { t } = useTranslation();
@@ -100,10 +101,28 @@ const CreateDefaultConfigurationModal = () => {
            }}
          >
            <Box>
-              <SimpleGrid spacing={4} minChildWidth="200px">
-                <StringField name="name" label={t('common.name')} isRequired isDisabled={isDisabled} />
-                <StringField name="description" label={t('common.description')} isDisabled={isDisabled} />
-              </SimpleGrid>
+              <Flex mb={4}>
+                <StringField
+                  name="name"
+                  label={t('common.name')}
+                  isRequired
+                  isDisabled={isDisabled}
+                  maxW="340px"
+                  mr={4}
+                />
+                <SelectField
+                  name="platform"
+                  label="Platform"
+                  options={[
+                    { label: 'AP', value: 'ap' },
+                    { label: 'Switch', value: 'switch' },
+                  ]}
+                  isRequired
+                  isDisabled={isDisabled}
+                  w="max-content"
+                />
+              </Flex>
+              <StringField name="description" label={t('common.description')} isDisabled={isDisabled} mb={4} />
              <MultiSelectField
                name="modelIds"
                label={t('controller.dashboard.device_types')}
@@ -116,7 +135,7 @@ const CreateDefaultConfigurationModal = () => {
                }
                isRequired
              />
-              <StringField name="configuration" label={t('configurations.one')} isArea isDisabled={isDisabled} />
+              <StringField name="configuration" label={t('configurations.one')} isArea isDisabled={isDisabled} mt={4} />
            </Box>
          </Formik>
        </Box>
--- a/src/pages/DefaultConfigurations/List/EditModal.tsx
+++ b/src/pages/DefaultConfigurations/List/EditModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, SimpleGrid, useBoolean, UseDisclosureReturn, useToast } from '@chakra-ui/react';
+import { Box, Flex, useBoolean, UseDisclosureReturn, useToast } from '@chakra-ui/react';
 import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
@@ -15,6 +15,7 @@ import { useGetDeviceTypes } from 'hooks/Network/Firmware';
 import { useFormModal } from 'hooks/useFormModal';
 import { useFormRef } from 'hooks/useFormRef';
 import { AxiosError } from 'models/Axios';
+import { SelectField } from 'components/Form/Fields/SelectField';

 type Props = {
  modalProps: UseDisclosureReturn;
@@ -106,10 +107,28 @@ const EditDefaultConfiguration = ({ modalProps, config }: Props) => {
              }}
            >
              <Box>
-                <SimpleGrid spacing={4} minChildWidth="200px">
-                  <StringField name="name" label={t('common.name')} isRequired isDisabled={isDisabled} />
-                  <StringField name="description" label={t('common.description')} isDisabled={isDisabled} />
-                </SimpleGrid>
+                <Flex mb={4}>
+                  <StringField
+                    name="name"
+                    label={t('common.name')}
+                    isRequired
+                    isDisabled={isDisabled}
+                    maxW="340px"
+                    mr={4}
+                  />
+                  <SelectField
+                    name="platform"
+                    label="Platform"
+                    options={[
+                      { label: 'AP', value: 'ap' },
+                      { label: 'Switch', value: 'switch' },
+                    ]}
+                    isRequired
+                    isDisabled
+                    w="max-content"
+                  />
+                </Flex>
+                <StringField name="description" label={t('common.description')} isDisabled={isDisabled} mb={4} />
                <MultiSelectField
                  name="modelIds"
                  label={t('controller.dashboard.device_types')}
@@ -122,7 +141,13 @@ const EditDefaultConfiguration = ({ modalProps, config }: Props) => {
                  }
                  isRequired
                />
-                <StringField name="configuration" label={t('configurations.one')} isArea isDisabled={isDisabled} />
+                <StringField
+                  name="configuration"
+                  label={t('configurations.one')}
+                  isArea
+                  isDisabled={isDisabled}
+                  mt={4}
+                />
              </Box>
            </Formik>
          )}
--- a/src/pages/DefaultConfigurations/List/index.tsx
+++ b/src/pages/DefaultConfigurations/List/index.tsx
@@ -58,6 +58,14 @@ const DefaultConfigurationsList = () => {
        Cell: ({ cell }) => dateCell(cell.row.original.lastModified),
        customWidth: '50px',
      },
+      {
+        id: 'platform',
+        Header: 'Platform',
+        Footer: '',
+        accessor: 'platform',
+        Cell: ({ cell }) => cell.row.original.platform.toUpperCase(),
+        customWidth: '50px',
+      },
      {
        id: 'modelIds',
        Header: t('controller.dashboard.device_types'),
--- a/src/pages/DefaultConfigurations/utils.ts
+++ b/src/pages/DefaultConfigurations/utils.ts
@@ -7,6 +7,7 @@ export const DefaultConfigurationSchema = (t: (str: string) => string) =>
      name: Yup.string().required(t('form.required')),
      description: Yup.string(),
      modelIds: Yup.array().of(Yup.string()).required(t('form.required')).min(1, t('form.required')),
+      platform: Yup.string().oneOf(['ap', 'switch']).required(t('form.required')),
      configuration: Yup.string()
        .required(t('form.required'))
        .test('configuration', t('form.invalid_json'), (v) => testJson(v ?? '')),
@@ -15,5 +16,6 @@ export const DefaultConfigurationSchema = (t: (str: string) => string) =>
      name: '',
      description: '',
      modelIds: [],
+      platform: 'ap',
      configuration: '',
    });
--- a/src/pages/Device/Wrapper.tsx
+++ b/src/pages/Device/Wrapper.tsx
@@ -80,19 +80,8 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
  const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md';
  const boxShadow = useColorModeValue('0px 7px 23px rgba(0, 0, 0, 0.05)', 'none');

-  const handleDeleteClick = () =>
+  const handleDeleteClick = () => {
    deleteDevice(serialNumber, {
-      onSuccess: () => {
-        toast({
-          id: `delete-device-success-${serialNumber}`,
-          title: t('common.success'),
-          status: 'success',
-          duration: 5000,
-          isClosable: true,
-          position: 'top-right',
-        });
-        navigate('/devices');
-      },
      onError: (e) => {
        if (axios.isAxiosError(e)) {
          toast({
@@ -107,6 +96,16 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
        }
      },
    });
+    toast({
+      id: `delete-device-success-${serialNumber}`,
+      title: t('common.success'),
+      status: 'success',
+      duration: 5000,
+      isClosable: true,
+      position: 'top-right',
+    });
+    navigate('/');
+  };

  const connectedTag = React.useMemo(() => {
    if (!getStatus.data) return null;
@@ -123,7 +122,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
    }

    let icon = getStatus.data.connected ? WifiHigh : WifiSlash;
-    if (getDevice.data?.deviceType === 'SWITCH')
+    if (getDevice.data?.deviceType === 'switch')
      icon = getStatus.data.connected ? ethernetConnected : ethernetDisconnected;

    return (
@@ -325,8 +324,8 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
          <DeviceSummary serialNumber={serialNumber} />
          <DeviceDetails serialNumber={serialNumber} />
          <DeviceStatisticsCard serialNumber={serialNumber} />
-          {getDevice.data?.deviceType === 'AP' ? <WifiAnalysisCard serialNumber={serialNumber} /> : null}
-          {getDevice.data?.deviceType === 'SWITCH' ? <SwitchPortExamination serialNumber={serialNumber} /> : null}
+          {getDevice.data?.deviceType === 'ap' ? <WifiAnalysisCard serialNumber={serialNumber} /> : null}
+          {getDevice.data?.deviceType === 'switch' ? <SwitchPortExamination serialNumber={serialNumber} /> : null}
          <DeviceLogsCard serialNumber={serialNumber} />
          {getDevice.data && getDevice.data?.hasRADIUSSessions > 0 ? (
            <RadiusClientsCard serialNumber={serialNumber} />
--- a/src/pages/Devices/ListCard/index.tsx
+++ b/src/pages/Devices/ListCard/index.tsx
@@ -737,8 +737,8 @@ const DeviceListCard = () => {
                ml={2}
              >
                <option value="ALL">All</option>
-                <option value="AP">APs</option>
-                <option value="SWITCH">Switches</option>
+                <option value="ap">APs</option>
+                <option value="switch">Switches</option>
              </Select>
            </>
          ),