[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,137 +43,141 @@ const RadiusForm = ({
           Radius
         </Heading>
       </div>
-      <ConfigurationResourcePicker
-        name={namePrefix}
-        prefix="interface.ssid.radius"
-        isDisabled={!editing}
-        defaultValue={INTERFACE_SSID_RADIUS_SCHEMA}
-      />
+      {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 ? (
-      <>
-        <SimpleGrid minChildWidth="300px" spacing="20px">
-          <StringField
-            name={`${namePrefix}.authentication.host`}
-            label="authentication.host"
-            isDisabled={!editing}
-            isRequired
-          />
-          <NumberField
-            name={`${namePrefix}.authentication.port`}
-            label="authentication.port"
-            isDisabled={!editing}
-            isRequired
-            hideArrows
-            w={24}
-          />
-          <StringField
-            name={`${namePrefix}.authentication.secret`}
-            label="authentication.secret"
-            isDisabled={!editing}
-            isRequired
-            hideButton
-          />
-          <ToggleField
-            name={`${namePrefix}.authentication.mac-filter`}
-            label="authentication.mac-filter"
-            isDisabled={!editing}
-            falseIsUndefined
-          />
-        </SimpleGrid>
-        <FormControl isDisabled={!editing}>
-          <FormLabel ms="4px" fontSize="md" fontWeight="normal">
-            Enable Accounting
-          </FormLabel>
-          <Switch
-            onChange={onAccountingChange}
-            isChecked={isAccountingEnabled}
-            borderRadius="15px"
-            size="lg"
-            isDisabled={!editing}
-            _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
-          />
-        </FormControl>
-        {isAccountingEnabled && (
+    {isEnabled &&
+      (isUsingCustom || !variableBlock ? (
+        <>
           <SimpleGrid minChildWidth="300px" spacing="20px">
             <StringField
-              name={`${namePrefix}.accounting.host`}
-              label="accounting.host"
+              name={`${namePrefix}.authentication.host`}
+              label="authentication.host"
               isDisabled={!editing}
               isRequired
             />
             <NumberField
-              name={`${namePrefix}.accounting.port`}
-              label="accounting.port"
+              name={`${namePrefix}.authentication.port`}
+              label="authentication.port"
               isDisabled={!editing}
               isRequired
               hideArrows
               w={24}
             />
             <StringField
-              name={`${namePrefix}.accounting.secret`}
-              label="accounting.secret"
+              name={`${namePrefix}.authentication.secret`}
+              label="authentication.secret"
               isDisabled={!editing}
               isRequired
               hideButton
             />
-          </SimpleGrid>
-        )}
-        <FormControl isDisabled={!editing}>
-          <FormLabel ms="4px" fontSize="md" fontWeight="normal">
-            Enable Dynamic Authorization
-          </FormLabel>
-          <Switch
-            onChange={onDynamicChange}
-            isChecked={isDynamicEnabled}
-            borderRadius="15px"
-            size="lg"
-            isDisabled={!editing}
-            _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
-          />
-        </FormControl>
-        {isDynamicEnabled && (
-          <SimpleGrid minChildWidth="300px" spacing="20px" mb={4}>
-            <StringField
-              name={`${namePrefix}.dynamic-authorization.host`}
-              label="dynamic-authorization.host"
+            <ToggleField
+              name={`${namePrefix}.authentication.mac-filter`}
+              label="authentication.mac-filter"
               isDisabled={!editing}
-              isRequired
-            />
-            <NumberField
-              name={`${namePrefix}.dynamic-authorization.port`}
-              label="dynamic-authorization.port"
-              isDisabled={!editing}
-              isRequired
-            />
-            <StringField
-              name={`${namePrefix}.dynamic-authorization.secret`}
-              label="dynamic-authorization.secret"
-              isDisabled={!editing}
-              isRequired
-              hideButton
+              falseIsUndefined
             />
           </SimpleGrid>
-        )}
-        <SimpleGrid minChildWidth="300px" spacing="20px">
-          <StringField
-            name={`${namePrefix}.nas-identifier`}
-            label="nas-identifier"
-            isDisabled={!editing}
-            emptyIsUndefined
-          />
-          <ToggleField
-            name={`${namePrefix}.chargeable-user-id`}
-            label="chargeable-user-id"
-            isDisabled={!editing}
-            falseIsUndefined
-          />
-        </SimpleGrid>
-        <Local editing={editing} namePrefix={`${namePrefix}.local`} />
-      </>
-    ) : (
-      <LockedRadius variableBlockId={variableBlock} />
-    )}
+          <FormControl isDisabled={!editing}>
+            <FormLabel ms="4px" fontSize="md" fontWeight="normal">
+              Enable Accounting
+            </FormLabel>
+            <Switch
+              onChange={onAccountingChange}
+              isChecked={isAccountingEnabled}
+              borderRadius="15px"
+              size="lg"
+              isDisabled={!editing}
+              _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
+            />
+          </FormControl>
+          {isAccountingEnabled && (
+            <SimpleGrid minChildWidth="300px" spacing="20px">
+              <StringField
+                name={`${namePrefix}.accounting.host`}
+                label="accounting.host"
+                isDisabled={!editing}
+                isRequired
+              />
+              <NumberField
+                name={`${namePrefix}.accounting.port`}
+                label="accounting.port"
+                isDisabled={!editing}
+                isRequired
+                hideArrows
+                w={24}
+              />
+              <StringField
+                name={`${namePrefix}.accounting.secret`}
+                label="accounting.secret"
+                isDisabled={!editing}
+                isRequired
+                hideButton
+              />
+            </SimpleGrid>
+          )}
+          <FormControl isDisabled={!editing}>
+            <FormLabel ms="4px" fontSize="md" fontWeight="normal">
+              Enable Dynamic Authorization
+            </FormLabel>
+            <Switch
+              onChange={onDynamicChange}
+              isChecked={isDynamicEnabled}
+              borderRadius="15px"
+              size="lg"
+              isDisabled={!editing}
+              _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
+            />
+          </FormControl>
+          {isDynamicEnabled && (
+            <SimpleGrid minChildWidth="300px" spacing="20px" mb={4}>
+              <StringField
+                name={`${namePrefix}.dynamic-authorization.host`}
+                label="dynamic-authorization.host"
+                isDisabled={!editing}
+                isRequired
+              />
+              <NumberField
+                name={`${namePrefix}.dynamic-authorization.port`}
+                label="dynamic-authorization.port"
+                isDisabled={!editing}
+                isRequired
+              />
+              <StringField
+                name={`${namePrefix}.dynamic-authorization.secret`}
+                label="dynamic-authorization.secret"
+                isDisabled={!editing}
+                isRequired
+                hideButton
+              />
+            </SimpleGrid>
+          )}
+          <SimpleGrid minChildWidth="300px" spacing="20px">
+            <StringField
+              name={`${namePrefix}.nas-identifier`}
+              label="nas-identifier"
+              isDisabled={!editing}
+              emptyIsUndefined
+            />
+            <ToggleField
+              name={`${namePrefix}.chargeable-user-id`}
+              label="chargeable-user-id"
+              isDisabled={!editing}
+              falseIsUndefined
+            />
+          </SimpleGrid>
+          <Local editing={editing} namePrefix={`${namePrefix}.local`} />
+        </>
+      ) : (
+        <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',