[WIFI-11892] Fixed interface.select-ports configuration options

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "2.8.0(25)",
+  "version": "2.8.0(26)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "wlan-cloud-owprov-ui",
-      "version": "2.8.0(25)",
+      "version": "2.8.0(26)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "2.8.0(25)",
+  "version": "2.8.0(26)",
   "description": "",
   "main": "index.tsx",
   "scripts": {

src/components/CustomFields/ConfigurationSelectPortsField/Input.tsx

@@ -14,20 +14,9 @@ interface Props {
   isDisabled: boolean;
 }
 
-export const WAN_OPTIONS = ['WAN1', 'WAN2', 'WAN3', 'WAN4'];
 const lanOptions = ['LAN1', 'LAN2', 'LAN3', 'LAN4', 'LAN5', 'LAN6', 'LAN7', 'LAN8', 'LAN9', 'LAN10', 'LAN11', 'LAN12'];
 
-const MultiSelectInput = (
+const MultiSelectInput: React.FC<Props> = ({ value, onChange, onBlur, options, error, isError, isDisabled }) => {
-  {
-    value,
-    onChange,
-    onBlur,
-    options,
-    error,
-    isError,
-    isDisabled
-  }: Props
-) => {
   const { t } = useTranslation();
 
   const onValueChange = useCallback(
@@ -43,13 +32,17 @@ const MultiSelectInput = (
       if (v) {
         let newValue = v;
         const newestValue = newValue.length === 0 ? '' : newValue[newValue.length - 1]?.value ?? '';
-
+        if (newestValue === '*') {
-        if (WAN_OPTIONS.includes(newestValue)) newValue = newValue.filter((val) => val?.value !== 'WAN*');
+          newValue = [{ value: '*', label: t('common.all') }];
-        else if (newestValue === 'WAN*') newValue = newValue.filter((val) => !WAN_OPTIONS.includes(val?.value ?? ''));
+        }
         if (lanOptions.includes(newestValue)) newValue = newValue.filter((val) => val?.value !== 'LAN*');
         else if (newestValue === 'LAN*') newValue = newValue.filter((val) => !lanOptions.includes(val?.value ?? ''));
 
-        onChange(newValue.map((val) => val?.value ?? ''));
+        onChange(
+          newValue.length === 1
+            ? newValue.map((val) => val?.value ?? '')
+            : newValue.map((val) => val?.value ?? '').filter((newV) => newV !== '*'),
+        );
       }
     },
     [],

src/components/CustomFields/ConfigurationSelectPortsField/index.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import MultiSelectInput from './Input';
 import useFastField from 'hooks/useFastField';
 
@@ -7,11 +8,16 @@ interface Props {
   name: string;
 }
 
-const ConfigurationSelectPortsField = ({ name, isDisabled = false }: Props) => {
+const ConfigurationSelectPortsField: React.FC<Props> = ({ name, isDisabled = false }) => {
+  const { t } = useTranslation();
   const { value, error, isError, onChange, onBlur } = useFastField<string[] | undefined>({ name });
 
   const options = useMemo(
     () => [
+      {
+        value: '*',
+        label: t('common.all'),
+      },
       {
         value: 'WAN*',
         label: 'WAN*',
@@ -20,22 +26,6 @@ const ConfigurationSelectPortsField = ({ name, isDisabled = false }: Props) => {
         value: 'LAN*',
         label: 'LAN*',
       },
-      {
-        value: 'WAN1',
-        label: 'WAN1',
-      },
-      {
-        value: 'WAN2',
-        label: 'WAN2',
-      },
-      {
-        value: 'WAN3',
-        label: 'WAN3',
-      },
-      {
-        value: 'WAN4',
-        label: 'WAN4',
-      },
       {
         value: 'LAN1',
         label: 'LAN1',
@@ -90,7 +80,7 @@ const ConfigurationSelectPortsField = ({ name, isDisabled = false }: Props) => {
 
   return (
     <MultiSelectInput
-      value={value}
+      value={value ?? []}
       onChange={onChange}
       onBlur={onBlur}
       options={options}

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/index.tsx

@@ -23,9 +23,9 @@ interface Props {
   remove: (e: number) => void;
 }
 
-const SingleInterface = ({ editing, index, remove }: Props) => {
+const SingleInterface: React.FC<Props> = ({ editing, index, remove }) => {
   const { t } = useTranslation();
-  const { value } = useFastField({ name: `configuration[${index}].ssids` });
+  const { value } = useFastField<unknown[]>({ name: `configuration[${index}].ssids` });
   const removeRadio = () => remove(index);
 
   const roleOpts = useMemo(

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/index.jsx

@@ -11,7 +11,6 @@ import InterfaceExpertModal from './InterfaceExpertModal';
 import Interfaces from './Interfaces';
 import { INTERFACES_SCHEMA } from './interfacesConstants';
 import DeleteButton from 'components/Buttons/DeleteButton';
-import { WAN_OPTIONS } from 'components/CustomFields/ConfigurationSelectPortsField/Input';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 
 const propTypes = {
@@ -29,10 +28,7 @@ const warningTests = (values) => {
   for (const config of values.configuration) {
     if (config.ethernet?.length > 0) {
       for (let i = 0; i < config.ethernet[0]['select-ports'].length; i += 1) {
-        if (
+        if (config.ethernet[0]['select-ports'][i] === 'WAN*' || config.ethernet[0]['select-ports'][i] === '*') {
-          config.ethernet[0]['select-ports'][i] === 'WAN*' ||
-          WAN_OPTIONS.includes(config.ethernet[0]['select-ports'][i])
-        ) {
           foundWan = true;
           break;
         }