Align peers count and font in the popover groups (#206)

src/components/AccessControlNew.tsx

@@ -29,6 +29,7 @@ import { uniq } from "lodash";
 import { Header } from "antd/es/layout/layout";
 import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -49,6 +50,11 @@ interface FormPolicy {
 }
 
 const AccessControlNew = () => {
+  const {
+    optionRender,
+      grayTagRender,
+      blueTagRender
+  } = useGetGroupTagHelpers()
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewPolicyVisible = useSelector(
@@ -262,63 +268,6 @@ const AccessControlNew = () => {
     });
   };
 
-  const blueTagRender = (props: CustomTagProps) => {
-    const { value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        color="blue"
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        {value}
-      </Tag>
-    );
-  };
-
-  const tagRender = (props: CustomTagProps) => {
-    const { value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        color="default"
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        {value}
-      </Tag>
-    );
-  };
-
-  const optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-    if (g)
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          {label}
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRenderGroups = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -801,7 +750,7 @@ const AccessControlNew = () => {
                     Allow only specified network protocols
                   </Paragraph>
                   <Select
-                    className="inconsolata-font"
+                    className="menlo-font"
                     style={{
                       width: "100%",
                       maxWidth: "80px",
@@ -858,9 +807,9 @@ const AccessControlNew = () => {
                       maxWidth: "280px",
                       fontWeight: "500",
                     }}
-                    className="inconsolata-font"
+                    className="menlo-font"
                     placeholder={ (formPolicy.protocol === "all" || formPolicy.protocol === "icmp") ? "Change protocol to add ports" : "Add ports"}
-                    tagRender={tagRender}
+                    tagRender={grayTagRender}
                     onChange={handleChangePorts}
                     dropdownRender={dropDownRenderPorts}
                     disabled={
@@ -871,7 +820,7 @@ const AccessControlNew = () => {
                     {formPolicy &&
                       formPolicy.ports?.map((m) => (
                         <Option key={m}>
-                          <Tag color="blue" style={{ marginRight: 3 }}>
+                          <Tag style={{ marginRight: 3 }}>
                             {m}
                           </Tag>
                         </Option>

src/components/NameServerGroupUpdate.tsx

@@ -41,7 +41,7 @@ interface formNSGroup extends NameServerGroup {
 
 const NameServerGroupUpdate = () => {
     const {
-        tagRender,
+        blueTagRender,
         handleChangeTags,
         dropDownRender,
         optionRender,
@@ -572,7 +572,7 @@ const NameServerGroupUpdate = () => {
                                         <Select mode="tags"
                                                 style={{width: '100%'}}
                                                 placeholder="Associate groups with the NS group"
-                                                tagRender={tagRender}
+                                                tagRender={blueTagRender}
                                                 onChange={handleChangeTags}
                                                 dropdownRender={dropDownRender}
                                         >

src/components/PeerUpdate.tsx

@@ -36,6 +36,7 @@ import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
 import { timeAgo } from "../utils/common";
 import { actions as routeActions } from "../store/route";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -47,6 +48,9 @@ const PeerUpdate = () => {
   const { getTokenSilently } = useGetTokenSilently();
   const { Column } = Table;
   const { confirm } = Modal;
+  const {
+    optionRender,
+  } = useGetGroupTagHelpers()
 
   const dispatch = useDispatch();
   const groups = useSelector((state: RootState) => state.group.data);
@@ -223,28 +227,11 @@ const PeerUpdate = () => {
         onClose={onClose}
         style={{ marginRight: 3 }}
       >
-        <strong>{value}</strong>
+        {value}
       </Tag>
     );
   };
 
-  const optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-    if (g)
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          <strong>{label}</strong>
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -640,7 +627,6 @@ const PeerUpdate = () => {
                   <Form.Item
                     name="groupsNames"
                     label="Select peer groups"
-                    style={{ fontWeight: "bold" }}
                     rules={[{ validator: selectValidator }]}
                   >
                     <Select

src/components/RouteUpdate.tsx

@@ -40,7 +40,7 @@ interface FormRoute extends Route {
 
 const RouteUpdate = () => {
     const {
-        tagRender,
+        blueTagRender,
         handleChangeTags,
         dropDownRender,
         optionRender,
@@ -430,7 +430,7 @@ const RouteUpdate = () => {
                                     <Select mode="tags"
                                             style={{width: '100%'}}
                                             placeholder="Associate groups with the network route"
-                                            tagRender={tagRender}
+                                            tagRender={blueTagRender}
                                             onChange={handleChangeTags}
                                             dropdownRender={dropDownRender}
                                     >

src/components/SetupKeyEdit.tsx

@@ -33,6 +33,7 @@ import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { EditOutlined, LockOutlined } from "@ant-design/icons";
 import { actions as personalAccessTokenActions } from "../store/personal-access-token";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
@@ -43,6 +44,10 @@ const customExpiresFormat = (value: Date): string | null => {
 };
 
 const SetupKeyNew = () => {
+  const {
+    optionRender,
+      blueTagRender
+  } = useGetGroupTagHelpers()
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
 
@@ -195,46 +200,6 @@ const SetupKeyNew = () => {
     return Promise.resolve();
   };
 
-  const tagRender = (props: CustomTagProps) => {
-    const { value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        color="blue"
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        <strong>{value}</strong>
-      </Tag>
-    );
-  };
-
-  const optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-
-    if (g) {
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    }
-
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          <strong>{label}</strong>
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -435,7 +400,7 @@ const SetupKeyNew = () => {
                       mode="tags"
                       style={{ width: "100%" }}
                       placeholder="Associate groups with the key"
-                      tagRender={tagRender}
+                      tagRender={blueTagRender}
                       dropdownRender={dropDownRender}
                       // enabled only when we have a new key !setupkey.id or when the key is valid
                       disabled={!(!setupKey.id || setupKey.valid)}

src/components/SetupKeyNew.tsx

@@ -32,12 +32,16 @@ import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
 import { copyToClipboard } from "../utils/common";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
 const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const SetupKeyNew = () => {
+  const {
+    optionRender,
+  } = useGetGroupTagHelpers()
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewKeyVisible = useSelector(
@@ -243,26 +247,6 @@ const SetupKeyNew = () => {
     );
   };
 
-  const optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-
-    if (g) {
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    }
-
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          <strong>{label}</strong>
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -551,7 +535,6 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
                   }}
                 >
                   Auto-assigned groups

src/components/UserEdit.tsx

@@ -28,9 +28,9 @@ import tableSpin from "./Spin";
 import AddPATPopup from "./popups/AddPATPopup";
 import {fullDate} from "../utils/common";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {Container} from "./Container";
 import Column from "antd/lib/table/Column";
 import {useOidcUser} from "@axa-fr/react-oidc";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const {Option} = Select;
 const {Meta} = Card;
@@ -45,6 +45,10 @@ interface TokenDataTable extends PersonalAccessToken {
 const UserEdit = () => {
     const {getTokenSilently} = useGetTokenSilently()
     const dispatch = useDispatch()
+    const {
+        optionRender,
+        blueTagRender
+    } = useGetGroupTagHelpers()
 
     const groups = useSelector((state: RootState) => state.group.data)
     const users = useSelector((state: RootState) => state.user.data)
@@ -151,26 +155,6 @@ const UserEdit = () => {
         return Promise.resolve()
     }
 
-    const tagRender = (props: CustomTagProps) => {
-        const {label, value, closable, onClose} = props;
-        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
-
-        return (
-            <Tag
-                color="blue"
-                onMouseDown={onPreventMouseDown}
-                closable={closable}
-                onClose={onClose}
-                style={{marginRight: 3}}
-            >
-                <strong>{value}</strong>
-            </Tag>
-        );
-    }
-
     const dropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
@@ -190,23 +174,6 @@ const UserEdit = () => {
         </>
     )
 
-    const optionRender = (label: string) => {
-        let peersCount = ''
-        const g = groups.find(_g => _g.name === label)
-        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
-        return (
-            <>
-                <Tag
-                    color="blue"
-                    style={{marginRight: 3}}
-                >
-                    <strong>{label}</strong>
-                </Tag>
-                <span style={{fontSize: ".85em"}}>{peersCount}</span>
-            </>
-        )
-    }
-
     const transformTokenTable = (d: PersonalAccessToken[]): TokenDataTable[] => {
         if (!d) {
             return []
@@ -397,12 +364,12 @@ const UserEdit = () => {
                         label={<Text style={{}}>Auto-assigned groups</Text>}
                         tooltip="Every peer enrolled with this user will be automatically added to these groups"
                         rules={[{ validator: selectValidator }]}
-                        style={{ marginRight: "70px", fontWeight: "bold" }}
+                        style={{ marginRight: "70px" }}
                       >
                         <Select
                           mode="tags"
                           placeholder="Associate groups with the user"
-                          tagRender={tagRender}
+                          tagRender={blueTagRender}
                           dropdownRender={dropDownRender}
                           disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
                         >

src/components/popups/InviteUserPopup.tsx

@@ -22,11 +22,16 @@ import {User, UserToSave} from "../../store/user/types";
 import {RuleObject} from "antd/lib/form";
 import {CustomTagProps} from "rc-select/lib/BaseSelect";
 import {QuestionCircleFilled} from "@ant-design/icons";
+import {useGetGroupTagHelpers} from "../../utils/groups";
 
 const {Title, Text, Paragraph} = Typography;
 const {Option} = Select;
 
 const InviteUserPopup = () => {
+    const {
+        optionRender,
+        blueTagRender
+    } = useGetGroupTagHelpers()
     const {getTokenSilently} = useGetTokenSilently()
     const dispatch = useDispatch()
 
@@ -108,26 +113,6 @@ const InviteUserPopup = () => {
         return Promise.resolve()
     }
 
-    const tagRender = (props: CustomTagProps) => {
-        const {label, value, closable, onClose} = props;
-        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
-
-        return (
-            <Tag
-                color="blue"
-                onMouseDown={onPreventMouseDown}
-                closable={closable}
-                onClose={onClose}
-                style={{marginRight: 3}}
-            >
-                <strong>{value}</strong>
-            </Tag>
-        );
-    }
-
     const handleChangeTags = (value: string[]) => {
         let validatedValues: string[] = []
         value.forEach(function (v) {
@@ -157,23 +142,6 @@ const InviteUserPopup = () => {
         </>
     )
 
-    const optionRender = (label: string) => {
-        let peersCount = ''
-        const g = groups.find(_g => _g.name === label)
-        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
-        return (
-            <>
-                <Tag
-                    color="blue"
-                    style={{marginRight: 3}}
-                >
-                    <strong>{label}</strong>
-                </Tag>
-                <span style={{fontSize: ".85em"}}>{peersCount}</span>
-            </>
-        )
-    }
-
     useEffect(() => {
         setTagGroups(groups?.filter(g => g.name != "All").map(g => g.name) || [])
     }, [groups])
@@ -287,7 +255,7 @@ const InviteUserPopup = () => {
                                     <Select mode="tags"
                                             style={{width: '100%'}}
                                             placeholder="Associate groups with the user"
-                                            tagRender={tagRender}
+                                            tagRender={blueTagRender}
                                             onChange={handleChangeTags}
                                             dropdownRender={dropDownRender}
                                     >

src/index.css

@@ -191,9 +191,9 @@ td.non-highlighted-table-column {
   font-weight: 500;
 }
 
-.inconsolata-font,
-.inconsolata-font * {
-  font-family: 'Inconsolata', monospace !important;
+.menlo-font,
+.menlo-font * {
+  font-family: 'Menlo', monospace !important;
 }
 
 .tag-box .ant-select-selector {

src/utils/groups.tsx

@@ -12,7 +12,14 @@ export const useGetGroupTagHelpers = () => {
     const [groupTagFilterAll, setGroupTagFilterAll] = useState(false)
     const [selectedTagGroups, setSelectedTagGroups] = useState([] as string[])
 
-    const tagRender = (props: CustomTagProps) => {
+    const blueTagRender = (props: CustomTagProps) => {
+        return tagRender(props, "blue")
+    }
+    const grayTagRender = (props: CustomTagProps) => {
+        return tagRender(props, "")
+    }
+
+    const tagRender = (props: CustomTagProps, color: string) => {
         const {value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
@@ -21,13 +28,13 @@ export const useGetGroupTagHelpers = () => {
 
         return (
             <Tag
-                color="blue"
+                color={color}
                 onMouseDown={onPreventMouseDown}
                 closable={closable}
                 onClose={onClose}
                 style={{marginRight: 3}}
             >
-                <strong>{value}</strong>
+                {value}
             </Tag>
         );
     }
@@ -62,21 +69,21 @@ export const useGetGroupTagHelpers = () => {
     )
 
     const optionRender = (label: string) => {
-        let peersCount = ''
-        const g = groups.find(_g => _g.name === label)
-        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
+        let peersCount = "";
+        const g = groups.find((_g) => _g.name === label);
+        if (g)
+            peersCount = ` - ${g.peers_count || 0} ${
+                !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
+            } `;
         return (
-            <>
-                <Tag
-                    color="blue"
-                    style={{marginRight: 3}}
-                >
-                    <strong>{label}</strong>
+            <div>
+                <Tag color="blue" style={{ marginRight: 3}}>
+                    {label}
                 </Tag>
-                <span style={{fontSize: ".85em"}}>{peersCount}</span>
-            </>
-        )
-    }
+                <span style={{ fontSize: ".85em" }}>{peersCount}</span>
+            </div>
+        );
+    };
 
     const getExistingAndToCreateGroupsLists = (groupNameList: string[]): [string[], string[]] => {
         const groupIDList = groups?.filter(g => groupNameList.includes(g.name)).map(g => g.id || '') || []
@@ -127,6 +134,8 @@ export const useGetGroupTagHelpers = () => {
 
     return {
         tagRender,
+        blueTagRender,
+        grayTagRender,
         handleChangeTags,
         dropDownRender,
         optionRender,

src/views/AccessControl.tsx

@@ -435,7 +435,7 @@ export const AccessControl = () => {
       } `;
       return (
         <div key={i}>
-          <Tag color="blue" style={{ marginRight: 3 }}>
+          <Tag color="blue" style={{ marginRight: 3}}>
             {_g.name}
           </Tag>
           <span style={{ fontSize: ".85em" }}>{peersCount}</span>
@@ -472,7 +472,7 @@ export const AccessControl = () => {
     const content = ports?.map((p, i) => {
       return (
         <Tag key={i} style={{ marginRight: 3 }}>
-          <span className="inconsolata-font">{p}</span>
+          <span className="menlo-font">{p}</span>
         </Tag>
       );
     });
@@ -739,7 +739,7 @@ export const AccessControl = () => {
                         render={(text, record: PolicyDataTable, index) => {
                           return (
                             <Tag
-                                className="inconsolata-font"
+                                className="menlo-font"
                                 style={{
                                 marginRight: "3",
                                 textTransform: "uppercase",

src/views/DNSSettings.tsx

@@ -25,7 +25,7 @@ export const DNSSettingsForm = () => {
     const dispatch = useDispatch()
 
     const {
-        tagRender,
+        blueTagRender,
         handleChangeTags,
         dropDownRender,
         optionRender,
@@ -148,7 +148,7 @@ export const DNSSettingsForm = () => {
                                 >
                                     <Select mode="tags"
                                             style={{width: '100%'}}
-                                            tagRender={tagRender}
+                                            tagRender={blueTagRender}
                                             onChange={handleChangeTags}
                                             dropdownRender={dropDownRender}
                                     >

src/views/Nameservers.tsx

@@ -200,7 +200,7 @@ export const Nameservers = () => {
                         color="blue"
                         style={{marginRight: 3}}
                     >
-                        <strong>{_g.name}</strong>
+                        {_g.name}
                     </Tag>
                     <span style={{fontSize: ".85em"}}>{peersCount}</span>
                 </div>
@@ -243,7 +243,7 @@ export const Nameservers = () => {
                         color="blue"
                         style={{marginRight: 3}}
                     >
-                        <strong>{d}</strong>
+                        {d}
                     </Tag>
                 </div>
             )

src/views/Peers.tsx

@@ -485,7 +485,7 @@ export const Peers = () => {
       return (
         <div key={i}>
           <Tag color="blue" style={{ marginRight: 3 }}>
-            <strong>{_g.name}</strong>
+            {_g.name}
           </Tag>
           <span style={{ fontSize: ".85em" }}>{peersCount}</span>
         </div>

src/views/RegularUsers.tsx

@@ -164,7 +164,7 @@ export const RegularUsers = () => {
                         color="blue"
                         style={{marginRight: 3}}
                     >
-                        <strong>{_g.name}</strong>
+                        {_g.name}
                     </Tag>
                     <span style={{fontSize: ".85em"}}>{peersCount}</span>
                 </div>

src/views/SetupKeys.tsx

@@ -330,7 +330,7 @@ export const SetupKeys = () => {
       return (
         <div key={i}>
           <Tag color="blue" style={{ marginRight: 3 }}>
-            <strong>{_g.name}</strong>
+            {_g.name}
           </Tag>
           <span style={{ fontSize: ".85em" }}>{peersCount}</span>
         </div>