[WIFI-11713] Enabled radius for SSIDs with no encryption

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

package-lock.json

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

package.json

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

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Encryption.tsx

@@ -15,6 +15,7 @@ interface Props {
   isKeyNeeded: boolean;
   isUsingRadius: boolean;
   isPasspoint?: boolean;
+  canUseRadius: boolean;
 }
 
 const EncryptionForm = ({
@@ -26,6 +27,7 @@ const EncryptionForm = ({
   isKeyNeeded,
   isUsingRadius,
   isPasspoint,
+  canUseRadius,
 }: Props) => (
   <>
     <Flex mt={4}>
@@ -77,7 +79,9 @@ const EncryptionForm = ({
         defaultValue
       />
     </SimpleGrid>
-    {isUsingRadius && <Radius editing={editing} namePrefix={radiusPrefix} isPasspoint={isPasspoint} />}
+    {(isUsingRadius || canUseRadius) && (
+      <Radius editing={editing} namePrefix={radiusPrefix} isPasspoint={isPasspoint} isNotRequired={canUseRadius} />
+    )}
   </>
 );
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/Radius.tsx

@@ -19,6 +19,9 @@ type Props = {
   variableBlock?: string;
   // eslint-disable-next-line react/no-unused-prop-types
   isPasspoint?: boolean;
+  isEnabled: boolean;
+  onEnableToggle: () => void;
+  isNotRequired: boolean;
 };
 const RadiusForm = ({
   editing,
@@ -29,6 +32,9 @@ const RadiusForm = ({
   onDynamicChange,
   isDynamicEnabled,
   variableBlock,
+  isEnabled,
+  onEnableToggle,
+  isNotRequired,
 }: Props) => (
   <>
     <Flex mt={6}>
@@ -37,14 +43,18 @@ const RadiusForm = ({
           Radius
         </Heading>
       </div>
+      {isNotRequired && <Switch isChecked={isEnabled} onChange={onEnableToggle} size="lg" mt={2} mr={2} />}
+      {isEnabled && (
         <ConfigurationResourcePicker
           name={namePrefix}
           prefix="interface.ssid.radius"
           isDisabled={!editing}
           defaultValue={INTERFACE_SSID_RADIUS_SCHEMA}
         />
+      )}
     </Flex>
-    {isUsingCustom || !variableBlock ? (
+    {isEnabled &&
+      (isUsingCustom || !variableBlock ? (
         <>
           <SimpleGrid minChildWidth="300px" spacing="20px">
             <StringField
@@ -167,7 +177,7 @@ const RadiusForm = ({
         </>
       ) : (
         <LockedRadius variableBlockId={variableBlock} />
-    )}
+      ))}
   </>
 );
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/index.tsx

@@ -1,11 +1,15 @@
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { INTERFACE_SSID_RADIUS_SCHEMA } from '../../../../interfacesConstants';
 import RadiusForm from './Radius';
 import useFastField from 'hooks/useFastField';
 
-type Props = { editing: boolean; namePrefix: string; isPasspoint?: boolean };
+type Props = { editing: boolean; namePrefix: string; isPasspoint?: boolean; isNotRequired: boolean };
 
-const Radius = ({ editing, namePrefix, isPasspoint }: Props) => {
+const Radius = ({ editing, namePrefix, isPasspoint, isNotRequired }: Props) => {
+  const { t } = useTranslation();
   const { value: customRadius } = useFastField({ name: `${namePrefix}.__variableBlock` });
+  const { value: radius, onChange: onRadiusChange } = useFastField({ name: `${namePrefix}` });
   const { value: accounting, onChange: setAccounting } = useFastField({ name: `${namePrefix}.accounting` });
   const { value: dynamicAuth, onChange: setDynamicAuth } = useFastField({
     name: `${namePrefix}.dynamic-authorization`,
@@ -27,6 +31,11 @@ const Radius = ({ editing, namePrefix, isPasspoint }: Props) => {
 
   const isAccountingEnabled = useMemo(() => accounting !== undefined, [accounting !== undefined]);
 
+  const isEnabled = React.useMemo(() => radius !== undefined, [radius !== undefined]);
+  const onEnableToggle = React.useCallback(() => {
+    if (isEnabled) onRadiusChange(undefined);
+    else onRadiusChange(INTERFACE_SSID_RADIUS_SCHEMA(t, true).cast());
+  }, [isEnabled]);
   const onEnableDynamicChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
       setDynamicAuth({
@@ -51,7 +60,10 @@ const Radius = ({ editing, namePrefix, isPasspoint }: Props) => {
       isDynamicEnabled={isDynamicEnabled}
       variableBlock={customRadius}
       namePrefix={namePrefix}
+      isEnabled={isEnabled}
+      onEnableToggle={onEnableToggle}
       isPasspoint={isPasspoint}
+      isNotRequired={isNotRequired}
     />
   );
 };

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  ENCRYPTION_PROTOS_CAN_RADIUS,
   ENCRYPTION_PROTOS_REQUIRE_IEEE,
   ENCRYPTION_PROTOS_REQUIRE_KEY,
   ENCRYPTION_PROTOS_REQUIRE_RADIUS,
@@ -57,12 +58,13 @@ const Encryption = ({
     [isPasspoint],
   );
 
-  const { isKeyNeeded, needIeee, isUsingRadius } = useMemo(
+  const { isKeyNeeded, needIeee, isUsingRadius, canUseRadius } = useMemo(
     () => ({
       isKeyNeeded: ENCRYPTION_PROTOS_REQUIRE_KEY.includes(encryptionValue?.proto ?? ''),
       needIeee: ENCRYPTION_PROTOS_REQUIRE_IEEE.includes(encryptionValue?.proto ?? ''),
       isUsingRadius:
         ENCRYPTION_PROTOS_REQUIRE_RADIUS.includes(encryptionValue?.proto ?? '') || radiusValue !== undefined,
+      canUseRadius: ENCRYPTION_PROTOS_CAN_RADIUS.includes(encryptionValue?.proto ?? ''),
     }),
     [encryptionValue?.proto, radiusValue !== undefined],
   );
@@ -77,6 +79,7 @@ const Encryption = ({
       isKeyNeeded={isKeyNeeded}
       isUsingRadius={isUsingRadius}
       isPasspoint={isPasspoint}
+      canUseRadius={canUseRadius}
     />
   );
 };

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js

@@ -41,6 +41,7 @@ export const ENCRYPTION_PROTOS_REQUIRE_IEEE = [
   'owe',
   'owe-transition',
 ];
+export const ENCRYPTION_PROTOS_CAN_RADIUS = ['none'];
 export const ENCRYPTION_PROTOS_REQUIRE_RADIUS = [
   'psk2-radius',
   'wpa',