Fix popover for groups (#78)

* Fix popover for groups

Fixed all popover overlay when opening
update modal

also fixed group input size problem
 with peers update

* remove style display flex from form tittle

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

@@ -58,6 +58,8 @@ 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 pageSizeOptions = [
         {label: "5", value: "5"},
@@ -269,24 +271,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

@@ -64,12 +64,14 @@ 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 pageSizeOptions = [
         {label: "5", value: "5"},
@@ -305,6 +307,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 +354,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/SetupKeys.tsx

@@ -59,6 +59,8 @@ 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 styleNotification = {marginTop: 85}
 
@@ -279,6 +281,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 +334,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>