[WIFI-13515] Supporting deviceTypes in lowercase

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "3.0.2(8)",
+  "version": "3.0.2(9)",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "3.0.2(8)",
+      "version": "3.0.2(9)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/anatomy": "^2.1.1",

package.json

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

src/components/Form/MultiSelectField/FastMultiSelectInput.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
-import { Select } from 'chakra-react-select';
+import { CreatableSelect, Select } from 'chakra-react-select';
 import PropTypes from 'prop-types';
 import isEqual from 'react-fast-compare';
 import { useTranslation } from 'react-i18next';
@@ -25,6 +25,7 @@ const propTypes = {
   isHidden: PropTypes.bool,
   isPortal: PropTypes.bool.isRequired,
   definitionKey: PropTypes.string,
+  isCreatable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -36,6 +37,7 @@ const defaultProps = {
   isDisabled: false,
   isHidden: false,
   definitionKey: null,
+  isCreatable: false,
 };
 
 const FastMultiSelectInput = ({
@@ -50,6 +52,7 @@ const FastMultiSelectInput = ({
   isRequired,
   isDisabled,
   isHidden,
+  isCreatable,
   isPortal,
   definitionKey,
 }) => {
@@ -61,6 +64,32 @@ const FastMultiSelectInput = ({
         {label}
         <ConfigurationFieldExplanation definitionKey={definitionKey} />
       </FormLabel>
+      {isCreatable ? (
+        <CreatableSelect
+          chakraStyles={{
+            control: (provided, { isDisabled: isControlDisabled }) => ({
+              ...provided,
+              borderRadius: '15px',
+              opacity: isControlDisabled ? '0.8 !important' : '1',
+              border: '2px solid',
+            }),
+            dropdownIndicator: (provided) => ({
+              ...provided,
+              backgroundColor: 'unset',
+              border: 'unset',
+            }),
+          }}
+          classNamePrefix={isPortal ? 'chakra-react-select' : ''}
+          menuPortalTarget={isPortal ? document.body : undefined}
+          isMulti
+          closeMenuOnSelect={false}
+          options={options}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          isDisabled={isDisabled}
+        />
+      ) : (
         <Select
           chakraStyles={{
             control: (provided, { isDisabled: isControlDisabled }) => ({
@@ -90,6 +119,7 @@ const FastMultiSelectInput = ({
           onBlur={onBlur}
           isDisabled={isDisabled}
         />
+      )}
       <FormErrorMessage>{error}</FormErrorMessage>
     </FormControl>
   );

src/components/Form/MultiSelectField/index.jsx

@@ -20,6 +20,7 @@ const propTypes = {
   canSelectAll: PropTypes.bool,
   isPortal: PropTypes.bool,
   definitionKey: PropTypes.string,
+  isCreatable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -31,6 +32,7 @@ const defaultProps = {
   canSelectAll: false,
   isPortal: false,
   definitionKey: null,
+  isCreatable: false,
 };
 
 const MultiSelectField = ({
@@ -43,12 +45,23 @@ const MultiSelectField = ({
   emptyIsUndefined,
   canSelectAll,
   hasVirtualAll,
+  isCreatable,
   isPortal,
   definitionKey,
 }) => {
   const [{ value }, { touched, error }, { setValue, setTouched }] = useField(name);
 
-  const onChange = useCallback((option) => {
+  const onChange = useCallback(
+    (option) => {
+      if (isCreatable) {
+        if (typeof option === 'string') {
+          setValue([...value, option]);
+        } else {
+          setValue(option);
+        }
+
+        // setValue([...value, option]);
+      } else {
         const allIndex = option.findIndex((opt) => opt.value === '*');
         if (option.length === 0 && emptyIsUndefined) {
           setValue(undefined);
@@ -61,7 +74,10 @@ const MultiSelectField = ({
         } else if (option.length > 0) setValue(option.map((val) => val.value));
         else setValue([]);
         setTouched(true);
-  }, []);
+      }
+    },
+    [value],
+  );
 
   const onFieldBlur = useCallback(() => {
     setTouched(true);
@@ -82,6 +98,7 @@ const MultiSelectField = ({
       isHidden={isHidden}
       isPortal={isPortal}
       definitionKey={definitionKey}
+      isCreatable={isCreatable}
     />
   );
 };

src/pages/DefaultConfigurations/List/CreateModal.tsx

@@ -69,7 +69,9 @@ const CreateDefaultConfigurationModal = () => {
             key={formKey}
             validationSchema={DefaultConfigurationSchema(t)}
             onSubmit={(data, { setSubmitting, resetForm }) => {
-              createConfig.mutateAsync(data, {
+              createConfig.mutateAsync(
+                { ...data, modelIds: data.modelIds.map((v) => v.value) },
+                {
                   onSuccess: () => {
                     toast({
                       id: `config-create-success`,
@@ -97,7 +99,8 @@ const CreateDefaultConfigurationModal = () => {
                     });
                     setSubmitting(false);
                   },
-              });
+                },
+              );
             }}
           >
             <Box>
@@ -133,6 +136,7 @@ const CreateDefaultConfigurationModal = () => {
                     value: devType,
                   })) ?? []
                 }
+                isCreatable
                 isRequired
               />
               <StringField name="configuration" label={t('configurations.one')} isArea isDisabled={isDisabled} mt={4} />

src/pages/DefaultConfigurations/List/EditModal.tsx

@@ -70,12 +70,15 @@ const EditDefaultConfiguration = ({ modalProps, config }: Props) => {
               innerRef={formRef as React.Ref<FormikProps<DefaultConfigurationResponse>>}
               initialValues={{
                 ...config,
+                modelIds: config.modelIds.map((v) => ({ label: v, value: v })),
                 configuration: JSON.stringify(config.configuration, null, 2),
               }}
               key={formKey}
               validationSchema={DefaultConfigurationSchema(t)}
               onSubmit={(data, { setSubmitting, resetForm }) => {
-                updateConfig.mutateAsync(data, {
+                updateConfig.mutateAsync(
+                  { ...data, modelIds: data.modelIds.map((v) => v.value) },
+                  {
                     onSuccess: () => {
                       toast({
                         id: `config-edit-success`,
@@ -103,7 +106,8 @@ const EditDefaultConfiguration = ({ modalProps, config }: Props) => {
                       });
                       setSubmitting(false);
                     },
-                });
+                  },
+                );
               }}
             >
               <Box>
@@ -139,6 +143,7 @@ const EditDefaultConfiguration = ({ modalProps, config }: Props) => {
                       value: devType,
                     })) ?? []
                   }
+                  isCreatable
                   isRequired
                 />
                 <StringField

src/pages/DefaultConfigurations/utils.ts

@@ -6,7 +6,7 @@ export const DefaultConfigurationSchema = (t: (str: string) => string) =>
     .shape({
       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')),
+      modelIds: Yup.array().of(Yup.object()).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'))