Merge branch 'master' into feature/NETEXP-2883-ap-details-redesign

.github/workflows/npm-build.yml

@@ -49,7 +49,7 @@ jobs:
     needs: test
 
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' || github.event_name == 'workflow_run'
 
     steps:
       - uses: actions/checkout@v2

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tip-wlan/wlan-cloud-ui-library",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tip-wlan/wlan-cloud-ui-library",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "author": "NetExperience",
   "description": "React UI Library",
   "engines": {

src/components/ContainedSelect/index.js

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import { Select as AntdSelect } from 'antd';
 
 const ContainedSelect = ({ children, ...restProps }) => (
-  <AntdSelect
-    getPopupContainer={triggerNode => triggerNode.parentElement}
-    dropdownStyle={{ zIndex: 9999 }}
-    {...restProps}
-  >
+  <AntdSelect dropdownStyle={{ zIndex: 9999 }} {...restProps}>
     {children}
   </AntdSelect>
 );

src/components/Modal/index.js

@@ -14,6 +14,7 @@ const Modal = ({
   buttonType,
   content,
   isSubmitable,
+  loading,
   ...restProps
 }) => {
   const { isReadOnly } = useRoles();
@@ -24,24 +25,27 @@ const Modal = ({
       title={title}
       onCancel={onCancel}
       footer={
-        <>
-          <div className={styles.Buttons}>
-            {!isReadOnly || isSubmitable ? (
-              <>
-                <Button className={styles.Button} onClick={onCancel}>
-                  Cancel
-                </Button>
-                <Button className={styles.Button} type={buttonType} onClick={onSuccess}>
-                  {buttonText}
-                </Button>
-              </>
-            ) : (
-              <Button className={styles.Button} type="primary" onClick={onCancel}>
-                Close
+        <div className={styles.Buttons}>
+          {!isReadOnly || isSubmitable ? (
+            <>
+              <Button className={styles.Button} onClick={onCancel}>
+                Cancel
               </Button>
-            )}
-          </div>
-        </>
+              <Button
+                className={styles.Button}
+                type={buttonType}
+                onClick={onSuccess}
+                loading={loading}
+              >
+                {buttonText}
+              </Button>
+            </>
+          ) : (
+            <Button className={styles.Button} type="primary" onClick={onCancel}>
+              Close
+            </Button>
+          )}
+        </div>
       }
       destroyOnClose
       {...restProps}
@@ -55,11 +59,12 @@ Modal.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onSuccess: PropTypes.func.isRequired,
   visible: PropTypes.bool.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   buttonText: PropTypes.string,
   buttonType: PropTypes.string,
   isSubmitable: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 Modal.defaultProps = {
@@ -68,6 +73,7 @@ Modal.defaultProps = {
   buttonType: 'primary',
   buttonText: 'Save',
   isSubmitable: false,
+  loading: false,
 };
 
 export default Modal;

src/components/WithRoles/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import {
   Input as AntdInput,
-  Select as AntdSelect,
   Switch as AntdSwitch,
   Radio,
   Checkbox as AntdCheckbox,
   Upload as AntdUpload,
   Button as AntdButton,
 } from 'antd';
+
+import ContainedSelect from 'components/ContainedSelect';
 import { useRoles } from 'contexts/RolesContext';
 
 const { Search: AntdSearch, TextArea: AntdTextArea, Password: AntdPassword } = AntdInput;
@@ -63,7 +64,7 @@ const withRoles = Component => ({ access, ...restProps }) => {
 export const RoleProtectedBtn = withRoles(AntdButton);
 
 export const Input = withDisabledRoles(AntdInput);
-export const Select = withDisabledRoles(AntdSelect);
+export const Select = withDisabledRoles(ContainedSelect);
 export const Switch = withDisabledRoles(AntdSwitch);
 export const Search = withDisabledRoles(AntdSearch);
 export const Upload = withDisabledRoles(AntdUpload);

src/containers/ProfileDetails/components/Radius/index.js

@@ -15,17 +15,29 @@ const { Item, List } = Form;
 
 const RadiusForm = ({ form, details }) => {
   const formatInitialAuthenticationValues = () => {
-    const values = [details?.primaryRadiusAuthServer];
+    const values = [
+      {
+        ipAddress: details?.primaryRadiusAuthServer?.ipAddress,
+        secret: details?.primaryRadiusAuthServer?.secret,
+        port: details?.primaryRadiusAuthServer?.port ?? 1812,
+        timeout: details?.primaryRadiusAuthServer?.timeout ?? 5,
+      },
+    ];
     if (details?.secondaryRadiusAuthServer) {
       values.push(details?.secondaryRadiusAuthServer);
     }
     return values;
   };
 
-  const formatInitialAccountingnValues = () => {
+  const formatInitialAccountingValues = () => {
     const values = [];
     if (details?.primaryRadiusAccountingServer) {
-      values.push(details?.primaryRadiusAccountingServer);
+      values.push({
+        ipAddress: details?.primaryRadiusAccountingServer?.ipAddress,
+        secret: details?.primaryRadiusAccountingServer?.secret,
+        port: details?.primaryRadiusAccountingServer?.port ?? 1813,
+        timeout: details?.primaryRadiusAccountingServer?.timeout ?? 5,
+      });
     }
     if (details?.secondaryRadiusAccountingServer) {
       values.push(details?.secondaryRadiusAccountingServer);
@@ -36,7 +48,7 @@ const RadiusForm = ({ form, details }) => {
   useEffect(() => {
     form.setFieldsValue({
       authenticationServer: formatInitialAuthenticationValues(),
-      accountingServer: formatInitialAccountingnValues(),
+      accountingServer: formatInitialAccountingValues(),
     });
   }, [details]);
 
@@ -106,7 +118,6 @@ const RadiusForm = ({ form, details }) => {
                   <Item
                     name={[field.name, 'port']}
                     label="Port"
-                    initialValue={1812}
                     rules={[
                       {
                         required: true,
@@ -136,7 +147,6 @@ const RadiusForm = ({ form, details }) => {
                   <Item
                     name={[field.name, 'timeout']}
                     label="Session Timeout"
-                    initialValue={5}
                     rules={[
                       {
                         required: true,
@@ -250,7 +260,6 @@ const RadiusForm = ({ form, details }) => {
                   <Item
                     name={[field.name, 'port']}
                     label="Port"
-                    initialValue={1813}
                     rules={[
                       {
                         required: true,
@@ -280,7 +289,6 @@ const RadiusForm = ({ form, details }) => {
                   <Item
                     name={[field.name, 'timeout']}
                     label="Session Timeout"
-                    initialValue={5}
                     rules={[
                       {
                         required: true,

src/index.js

@@ -49,6 +49,7 @@ export {
   List as SkeletonList,
   Card as SkeletonCard,
 } from 'components/Skeleton';
+export { default as DisabledText } from 'components/DisabledText';
 
 export { default as WithRoles } from 'components/WithRoles';
 export { Input, Select, Switch, RoleProtectedBtn } from 'components/WithRoles';