Fix isAdmin check to not depend on oidc (#207)

* remove admin check depending on oidc user on autogroups field

* fix admin check on peers view

src/assets/forward_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#D9D9D9"/>
+</svg>

src/assets/in_bound.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_blue.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3807 3.68889C38.5174 3.55221 38.5174 3.3306 38.3807 3.19392L36.1533 0.966532C36.0166 0.829849 35.795 0.829849 35.6583 0.966532C35.5216 1.10322 35.5216 1.32482 35.6583 1.46151L37.6382 3.44141L35.6583 5.42131C35.5216 5.55799 35.5216 5.7796 35.6583 5.91628C35.795 6.05296 36.0166 6.05296 36.1533 5.91628L38.3807 3.68889ZM0.699219 3.79141L38.1332 3.79141V3.09141L0.699219 3.09141V3.79141Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#03543F"/>
+</svg>

src/assets/reverse_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#D9D9D9"/>
+</svg>

src/assets/reverse_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#03543F"/>
+</svg>

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 []
@@ -291,11 +258,6 @@ const UserEdit = () => {
         }
     }, [form, user, currentGroups])
 
-
-    const isUserAdmin = (userId: string): boolean => {
-        return users.find(u => u.id === userId)?.role === "admin"
-    }
-
     return (
       <>
         <div style={{ paddingTop: "13px" }}>
@@ -397,14 +359,14 @@ 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)}
+                          disabled={!isAdmin}
                         >
                           {tagGroups.map((m) => (
                             <Option key={m}>{optionRender(m)}</Option>

src/components/popups/AddPATPopup.tsx

@@ -98,22 +98,6 @@ const AddPATPopup = () => {
         }
     }, [savedPersonalAccessToken])
 
-    useEffect(() => {
-        const keyDownHandler = (event: any) => {
-            console.log('User pressed: ', event.key);
-
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                handleFormSubmit();
-            }
-        };
-
-        document.addEventListener('keydown', keyDownHandler);
-
-        return () => {
-            document.removeEventListener('keydown', keyDownHandler);
-        };
-    }, []);
 
     return (
         <>

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

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');
 @import 'antd/dist/reset.css';
 
 body {
@@ -180,4 +181,42 @@ td.non-highlighted-table-column {
   min-height: auto;
   padding-bottom: 15px;
   cursor: pointer;
+}
+
+.ant-modal-content {
+  border-radius: 0px !important;
+}
+
+.ant-form-item-explain-error {
+  font-weight: 500;
+}
+
+.menlo-font,
+.menlo-font * {
+  font-family: 'Menlo', monospace !important;
+}
+
+.tag-box .ant-select-selector {
+  padding: 0 5px!important;
+}
+
+.tag-box .ant-select-selection-item {
+  width: 100%;
+  line-height: 20px;
+  justify-content: center;
+  list-style: none;
+  display: flex;
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  opacity: 1;
+  transition: all 0.2s;
+  text-align: start;
+  max-width: 40px;
+  height: 25px;
+  padding: 0 4px !important;
+  align-items: center;
+  margin-top: 3px;
+  text-align: center;
 }

src/store/policy/actions.ts

@@ -27,7 +27,8 @@ const actions = {
     removePolicy: createAction('REMOVE_POLICY')<string>(),
 
     setPolicy: createAction('SET_POLICY')<Policy>(),
-    setSetupNewPolicyVisible: createAction('SET_SETUP_NEW_POLICY_VISIBLE')<boolean>()
+    setSetupNewPolicyVisible: createAction('SET_SETUP_NEW_POLICY_VISIBLE')<boolean>(),
+    setSetupEditPolicyVisible: createAction('SET_SETUP_EDIT_POLICY_VISIBLE')<boolean>()
 };
 
 export type ActionTypes = ActionType<typeof actions>;

src/store/policy/reducer.ts

@@ -5,37 +5,39 @@ import actions, { ActionTypes } from './actions';
 import { ApiError, DeleteResponse, CreateResponse } from "../../services/api-client/types";
 
 type StateType = Readonly<{
-    data: Policy[] | null;
-    policy: Policy | null;
-    loading: boolean;
-    failed: ApiError | null;
-    saving: boolean;
-    deletePolicy: DeleteResponse<string | null>;
-    savedPolicy: CreateResponse<Policy | null>;
-    setupNewPolicyVisible: boolean
+  data: Policy[] | null;
+  policy: Policy | null;
+  loading: boolean;
+  failed: ApiError | null;
+  saving: boolean;
+  deletePolicy: DeleteResponse<string | null>;
+  savedPolicy: CreateResponse<Policy | null>;
+  setupNewPolicyVisible: boolean;
+  setupEditPolicyVisible: boolean;
 }>;
 
 const initialState: StateType = {
-    data: [],
-    policy: null,
+  data: [],
+  policy: null,
+  loading: false,
+  failed: null,
+  saving: false,
+  deletePolicy: <DeleteResponse<string | null>>{
     loading: false,
-    failed: null,
-    saving: false,
-    deletePolicy: <DeleteResponse<string | null>>{
-        loading: false,
-        success: false,
-        failure: false,
-        error: null,
-        data: null
-    },
-    savedPolicy: <CreateResponse<Policy | null>>{
-        loading: false,
-        success: false,
-        failure: false,
-        error: null,
-        data: null
-    },
-    setupNewPolicyVisible: false
+    success: false,
+    failure: false,
+    error: null,
+    data: null,
+  },
+  savedPolicy: <CreateResponse<Policy | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data: null,
+  },
+  setupNewPolicyVisible: false,
+  setupEditPolicyVisible: false,
 };
 
 const data = createReducer<Policy[], ActionTypes>(initialState.data as Policy[])
@@ -77,13 +79,17 @@ const savedPolicy = createReducer<CreateResponse<Policy | null>, ActionTypes>(in
 const setupNewPolicyVisible = createReducer<boolean, ActionTypes>(initialState.setupNewPolicyVisible)
     .handleAction(actions.setSetupNewPolicyVisible, (store, action) => action.payload)
 
+const setupEditPolicyVisible = createReducer<boolean, ActionTypes>(initialState.setupEditPolicyVisible)
+    .handleAction(actions.setSetupEditPolicyVisible, (store, action) => action.payload)
+
 export default combineReducers({
-    data,
-    policy,
-    loading,
-    failed,
-    saving,
-    deletedPolicy,
-    savedPolicy,
-    setupNewPolicyVisible
+  data,
+  policy,
+  loading,
+  failed,
+  saving,
+  deletedPolicy,
+  savedPolicy,
+  setupNewPolicyVisible,
+  setupEditPolicyVisible,
 });

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,