List dependencies on build

This will prevent the case where we are using
an expired access token to call our API

Added a loadOnce to prevent not loading the page at least once

.github/workflows/build_and_push.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Install dependecies
         run: npm install
 
+      - name: List dependencies
+        run: npm list
+
       - name: Build 
         # skiping fail on warning for now
         run: CI=false npm run build

src/components/PeerUpdate.tsx

@@ -277,7 +277,7 @@ const PeerUpdate = () => {
                                     <Row align="top">
                                         <Col flex="none" style={{display: "flex"}}>
                                             {!editName && peer.id &&
-                                                <button type="button" aria-label="Close" className="ant-drawer-close"
+                                                <button type="button" aria-label="Close" autoFocus={true} className="ant-drawer-close"
                                                         style={{paddingTop: 3}}
                                                         onClick={onCancel}>
                                                     <span role="img" aria-label="close"
@@ -301,14 +301,12 @@ const PeerUpdate = () => {
                                                         message: 'Please add a new name for this peer',
                                                         whitespace: true
                                                     }]}
-                                                    style={{display: 'flex'}}
                                                 >
                                                     <Input
                                                         placeholder={peer.name}
                                                         ref={inputNameRef}
                                                         onPressEnter={() => toggleEditName(false)}
                                                         onBlur={() => toggleEditName(false)}
-                                                        // onChange={(e) => handleChangeName(e.)}
                                                         autoComplete="off"/>
                                                 </Form.Item>)}
                                         </Col>
@@ -322,17 +320,15 @@ const PeerUpdate = () => {
                             <Col span={24}>
                                 <Form.Item
                                     name="groups"
-                                    label="Select groups to associate with this peer"
+                                    label="Select peer groups"
                                     rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
+
                                 >
                                     <Select
                                         mode="tags"
                                         style={{ width: '100%' }}
                                         placeholder="Select groups..."
                                         tagRender={tagRender}
-                                        // onDropdownVisibleChange={evaluateSubmit}
-                                        // onSelect={evaluateSubmit}
 
                                         dropdownRender={dropDownRender}
                                         onChange={handleChangeTags}>

src/components/SetupKeyNew.tsx

@@ -290,7 +290,6 @@ const SetupKeyNew = () => {
                                                         message: 'Please add a new name for this peer',
                                                         whitespace: true
                                                     }]}
-                                                    style={{display: 'flex'}}
                                                 >
                                                     <Input
                                                         placeholder={setupKey.name}
@@ -351,7 +350,6 @@ const SetupKeyNew = () => {
                                     name="type"
                                     label="Type"
                                     rules={[{required: true, message: 'Please enter key type'}]}
-                                    style={{display: 'flex'}}
                                 >
                                     <Radio.Group style={{display: 'flex'}} disabled={setupKey.id}>
                                         <Space direction="vertical" style={{flex: 1}}>

src/views/AccessControl.tsx

@@ -22,6 +22,7 @@ import {Group} from "../store/group/types";
 import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
 import {useOidcAccessToken} from '@axa-fr/react-oidc';
+import {actions as userActions} from "../store/user";
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
 const { confirm } = Modal;
@@ -41,7 +42,7 @@ interface GroupsToShow {
 }
 
 export const AccessControl = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const rules = useSelector((state: RootState) => state.rule.data);
@@ -58,6 +59,9 @@ export const AccessControl = () => {
     const [dataTable, setDataTable] = useState([] as RuleDataTable[]);
     const [ruleToAction, setRuleToAction] = useState(null as RuleDataTable | null);
     const [groupsToShow, setGroupsToShow] = useState({} as GroupsToShow)
+    const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible);
+    const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const pageSizeOptions = [
         {label: "5", value: "5"},
@@ -105,11 +109,28 @@ export const AccessControl = () => {
         })
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(ruleActions.getRules.request({getAccessTokenSilently:accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
+
     useEffect(() => {
         setShowTutorial(isShowTutorial(rules))
         setDataTable(sortBy(transformDataTable(filterDataTable()), "name"))
@@ -269,24 +290,44 @@ export const AccessControl = () => {
         })
     }
 
+    useEffect(() => {
+        if (setupNewRuleVisible) {
+            setGroupPopupVisible(false)
+        }
+    }, [setupNewRuleVisible])
+
+    const onPopoverVisibleChange = (b:boolean) => {
+        if (setupNewRuleVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
     const renderPopoverGroups = (label: string, groups:Group[] | string[] | null, rule: RuleDataTable) => {
         const content = groups?.map((g, i) => {
             const _g = g as Group
             const peersCount = ` - ${_g.peers_count || 0} ${(!_g.peers_count || parseInt(_g.peers_count) !== 1) ? 'peers' : 'peer'} `
             return (
-                <div key={i}>
-                    <Tag
-                        color="blue"
-                        style={{ marginRight: 3 }}
-                    >
-                        <strong>{_g.name}</strong>
-                    </Tag>
-                    <span style={{fontSize: ".85em"}}>{peersCount}</span>
-                </div>
+                <Space direction="vertical">
+                    <div key={i}>
+                        <Tag
+                            color="blue"
+                            style={{ marginRight: 3 }}
+                        >
+                            <strong>{_g.name}</strong>
+                        </Tag>
+                        <span style={{fontSize: ".85em"}}>{peersCount}</span>
+                    </div>
+                </Space>
             )
         })
         return (
-            <Popover content={<Space direction="vertical">{content}</Space>} title={null}>
+            <Popover
+                onVisibleChange={onPopoverVisibleChange}
+                visible={groupPopupVisible}
+                content={content}
+                title={null}>
                 <Button type="link" onClick={() => setRuleAndView(rule)}>{label}</Button>
             </Popover>
         )

src/views/Peers.tsx

@@ -52,7 +52,7 @@ interface PeerDataTable extends Peer {
 
 export const Peers = () => {
 
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const peers = useSelector((state: RootState) => state.peer.data);
@@ -64,12 +64,15 @@ export const Peers = () => {
     const loadingGroups = useSelector((state: RootState) => state.group.loading);
     const savedGroups = useSelector((state: RootState) => state.peer.savedGroups);
     const updatedPeer = useSelector((state: RootState) => state.peer.updatedPeer);
+    const updateGroupsVisible =   useSelector((state: RootState) => state.peer.updateGroupsVisible)
 
     const [textToSearch, setTextToSearch] = useState('');
     const [optionOnOff, setOptionOnOff] = useState('all');
     const [pageSize, setPageSize] = useState(10);
     const [dataTable, setDataTable] = useState([] as PeerDataTable[]);
     const [peerToAction, setPeerToAction] = useState(null as PeerDataTable | null);
+    const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const pageSizeOptions = [
         {label: "5", value: "5"},
@@ -106,10 +109,26 @@ export const Peers = () => {
         })
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(peerActions.getPeers.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(routeActions.getRoutes.request({getAccessTokenSilently: accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     useEffect(() => {
@@ -305,6 +324,20 @@ export const Peers = () => {
         dispatch(peerActions.setPeer(peerToAction as Peer))
     }
 
+    useEffect(() => {
+        if (updateGroupsVisible) {
+            setGroupPopupVisible(false)
+        }
+    }, [updateGroupsVisible])
+
+    const onPopoverVisibleChange = (b:boolean) => {
+        if (updateGroupsVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
     const setUpdateGroupsVisible = (peerToAction: Peer, status: boolean) => {
         if (status) {
             dispatch(peerActions.setPeer({...peerToAction}))
@@ -338,7 +371,7 @@ export const Peers = () => {
         }
 
         return (
-            <Popover placement={popoverPlacement as TooltipPlacement} key={peerToAction.key} content={mainContent}
+            <Popover placement={popoverPlacement as TooltipPlacement} key={peerToAction.key} content={mainContent} onVisibleChange={onPopoverVisibleChange} visible={groupPopupVisible}
                      title={null}>
                 <Button type="link" onClick={() => setUpdateGroupsVisible(peerToAction, true)}>{label}</Button>
             </Popover>

src/views/Routes.tsx

@@ -22,13 +22,14 @@ import {
     RouteDataTable,GroupedDataTable,
     transformGroupedDataTable,transformDataTable
 } from '../utils/routes'
+import {actions as userActions} from "../store/user";
 
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
 const { confirm } = Modal;
 
 export const Routes = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const routes = useSelector((state: RootState) => state.route.data);
@@ -47,6 +48,7 @@ export const Routes = () => {
     const [routeToAction, setRouteToAction] = useState(null as RouteDataTable | null);
     const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
     const [expandRowsOnClick,setExpandRowsOnClick] = useState(true)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
 
@@ -82,8 +84,24 @@ export const Routes = () => {
         dispatch(routeActions.getRoutes.request({getAccessTokenSilently:accessToken, payload: null}));
     }, [peers])
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(peerActions.getPeers.request({getAccessTokenSilently:accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     const filterGroupedDataTable = (routes:GroupedDataTable[]):GroupedDataTable[] => {

src/views/SetupKeys.tsx

@@ -33,6 +33,7 @@ import tableSpin from "../components/Spin";
 import {actions as groupActions} from "../store/group";
 import {Group} from "../store/group/types";
 import {TooltipPlacement} from "antd/es/tooltip";
+import {actions as userActions} from "../store/user";
 
 const {Title, Text, Paragraph} = Typography;
 const {Column} = Table;
@@ -44,7 +45,7 @@ interface SetupKeyDataTable extends SetupKey {
 }
 
 export const SetupKeys = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const setupKeys = useSelector((state: RootState) => state.setupKey.data);
@@ -59,6 +60,9 @@ export const SetupKeys = () => {
     const [pageSize, setPageSize] = useState(10);
     const [dataTable, setDataTable] = useState([] as SetupKeyDataTable[]);
     const [setupKeyToAction, setSetupKeyToAction] = useState(null as SetupKeyDataTable | null);
+    const setupNewKeyVisible =   useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
+    const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const styleNotification = {marginTop: 85}
 
@@ -87,9 +91,25 @@ export const SetupKeys = () => {
         return d.map(p => ({...p, groupsCount: p.auto_groups ? p.auto_groups.length : 0} as SetupKeyDataTable))
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     useEffect(() => {
@@ -279,6 +299,20 @@ export const SetupKeys = () => {
         } as SetupKey))
     }
 
+    useEffect(() => {
+        if (setupNewKeyVisible) {
+            setGroupPopupVisible(false)
+        }
+    }, [setupNewKeyVisible])
+
+    const onPopoverVisibleChange = (b:boolean) => {
+        if (setupNewKeyVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
     const renderPopoverGroups = (label: string, rowGroups: string[] | string[] | null, setupKeyToAction: SetupKeyDataTable) => {
 
         let groupsMap = new Map<string, Group>();
@@ -318,7 +352,11 @@ export const SetupKeys = () => {
         }
 
         return (
-            <Popover placement={popoverPlacement as TooltipPlacement} key={setupKeyToAction.key} content={mainContent}
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={setupKeyToAction.key}
+                     onVisibleChange={onPopoverVisibleChange}
+                     visible={groupPopupVisible}
+                     content={mainContent}
                      title={null}>
                 {btn}
             </Popover>

src/views/Users.tsx

@@ -15,6 +15,9 @@ import {
 import { User } from "../store/user/types";
 import {filter} from "lodash";
 import tableSpin from "../components/Spin";
+import {actions as peerActions} from "../store/peer";
+import {actions as groupActions} from "../store/group";
+import {actions as routeActions} from "../store/route";
 
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
@@ -24,7 +27,7 @@ interface UserDataTable extends User {
 }
 
 export const Users = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const users = useSelector((state: RootState) => state.user.data);
@@ -40,13 +43,32 @@ export const Users = () => {
         {label: "15", value: "15"}
     ]
 
+    const [loadOnce, setLoadOnce] = useState(false)
+
     const transformDataTable = (d:User[]):UserDataTable[] => {
         return d.map(p => ({ key: p.id, ...p } as UserDataTable))
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(userActions.getUsers.request({getAccessTokenSilently:accessToken,payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
+
     useEffect(() => {
         setDataTable(transformDataTable(users))
     }, [users])