Add peer's last seem time on popover (#122)

Users can add distribution groups to network routes

Groups can be added to individual network routes or to all routes in the group

Adding a new group in the modal is restricted to individual network route operations

.github/workflows/build_and_push.yml

@@ -11,10 +11,10 @@ jobs:
   build_n_push:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: setup-node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
           cache: 'npm'
@@ -27,26 +27,26 @@ jobs:
         run: CI=false npm run build
       - 
         name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
       - 
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       -
         name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: wiretrustee/dashboard
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USER }}
           password: ${{ secrets.DOCKER_TOKEN }}
       -
         name: Docker build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
           context: .
           file: docker/Dockerfile

docker/init_react_envs.sh

@@ -44,11 +44,14 @@ fi
 export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
 export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
 export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
+export AUTH_REDIRECT_URI=${AUTH_REDIRECT_URI}
+export AUTH_SILENT_REDIRECT_URI=${AUTH_SILENT_REDIRECT_URI}
 export USE_AUTH0=${USE_AUTH0:-true}
 export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api offline_access email_verified}
 
 export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
 export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 
 REPO="https://github.com/netbirdio/netbird/"
 # this command will fetch the latest release e.g. v0.6.3
@@ -56,7 +59,8 @@ export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_ur
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION \$\$NETBIRD_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI"
+
 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 cp "$MAIN_JS" "$MAIN_JS".copy

package.json

@@ -29,9 +29,11 @@
     "lodash": "^4.17.21",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
+    "punycode": "^2.1.1",
     "rc-overflow": "^1.2.8",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
+    "react-hotjar": "^5.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
@@ -42,6 +44,7 @@
     "redux-saga": "^1.1.3",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.0.23",
+    "ts-md5": "^1.3.1",
     "typesafe-actions": "^5.1.0",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -1,23 +1,39 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Provider} from "react-redux";
-import {Redirect, Route, Switch} from 'react-router-dom';
-import Navbar from './components/Navbar';
-import Peers from './views/Peers';
-import FooterComponent from './components/FooterComponent';
-import SetupKeys from "./views/SetupKeys";
-import AddPeer from "./views/AddPeer";
-import Users from './views/Users';
-import AccessControl from './views/AccessControl';
-import Routes from './views/Routes';
+import {apiClient, store} from "./store";
+import {hotjar} from 'react-hotjar';
+import {getConfig} from "./config";
 import Banner from "./components/Banner";
-import {store} from "./store";
-import { Col, Layout, Row} from 'antd';
+import {Col, Layout, Row} from "antd";
 import {Container} from "./components/Container";
-import {withOidcSecure} from '@axa-fr/react-oidc';
+import Navbar from "./components/Navbar";
+import {Redirect, Route, Switch} from "react-router-dom";
+import {withOidcSecure} from "@axa-fr/react-oidc";
+import Peers from "./views/Peers";
+import Routes from "./views/Routes";
+import AddPeer from "./views/AddPeer";
+import SetupKeys from "./views/SetupKeys";
+import AccessControl from "./views/AccessControl";
+import Users from "./views/Users";
+import FooterComponent from "./components/FooterComponent";
+import {useGetAccessTokenSilently} from "./utils/token";
+import {User} from "./store/user/types";
+import {SecureLoading} from "./components/Loading";
+import DNS from "./views/DNS";
+
+
 
 const {Header, Content} = Layout;
 
 function App() {
+    const run = useRef(false)
+    const [show, setShow] = useState(false)
+    const {getAccessTokenSilently} = useGetAccessTokenSilently();
+    const {hotjarTrackID} = getConfig();
+    // @ts-ignore
+    if (hotjarTrackID && window._DATADOG_SYNTHETICS_BROWSER === undefined) {
+        hotjar.initialize(hotjarTrackID, 6);
+    }
 
     const [isOpen, setIsOpen] = useState(false);
 
@@ -25,7 +41,6 @@ function App() {
         const hideMenu = () => {
             if (window.innerWidth > 768 && isOpen) {
                 setIsOpen(false);
-                console.log('i resized');
             }
         };
 
@@ -34,10 +49,28 @@ function App() {
         return () => {
             window.removeEventListener('resize', hideMenu);
         };
-    });
+    }, []);
+
+    useEffect(() => {
+        if (!run.current) {
+            run.current = true
+            apiClient.request<User[]>('GET', `/api/users`, {getAccessTokenSilently: getAccessTokenSilently})
+                .then(() => {
+                  setShow(true)
+                })
+                .catch(e => {
+                    setShow(true)
+                    console.log(e)
+                })
+        }
+
+    }, [getAccessTokenSilently])
 
     return (
-        <Provider store={store}>
+        <>
+            <Provider store={store}>
+                {!show && <SecureLoading padding="3em" width={50} height={50}/>}
+                {show &&
                 <Layout>
                     <Banner/>
                     <Header className="header" style={{
@@ -54,7 +87,7 @@ function App() {
                             </Col>
                         </Row>
                     </Header>
-                    <Content style={{ minHeight: "100vh"}}>
+                    <Content style={{minHeight: "100vh"}}>
                         <Switch>
                             <Route
                                 exact
@@ -71,12 +104,15 @@ function App() {
                             <Route path="/acls" component={withOidcSecure(AccessControl)}/>
                             <Route path="/routes" component={withOidcSecure(Routes)}/>
                             <Route path="/users" component={withOidcSecure(Users)}/>
+                            <Route path="/dns" component={withOidcSecure(DNS)}/>
                         </Switch>
                     </Content>
                     <FooterComponent/>
                 </Layout>
-        </Provider>
-    );
+                }
+            </Provider>
+        </>
+    )
 }
 
 export default App;

src/components/AccessControlNew.tsx

@@ -1,26 +1,32 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import { actions as ruleActions } from '../store/rule';
+import {actions as ruleActions} from '../store/rule';
 import {
+    Button,
     Col,
-    Row,
-    Typography,
+    Divider,
+    Drawer,
+    Form,
     Input,
+    Radio,
+    RadioChangeEvent,
+    Row,
+    Select,
     Space,
-    Switch,
-    Button, Drawer, Form, Divider, Select, Tag, Radio, RadioChangeEvent
+    Tag,
+    Typography
 } from "antd";
-import {ArrowRightOutlined, CheckOutlined, CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
-import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
+import {CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
+import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
 import {Rule, RuleToSave} from "../store/rule/types";
-import { uniq } from "lodash"
+import {uniq} from "lodash"
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
+import {useGetAccessTokenSilently} from "../utils/token";
 
-const { Paragraph } = Typography;
-const { Option } = Select;
+const {Paragraph} = Typography;
+const {Option} = Select;
 
 interface FormRule extends Rule {
     tagSourceGroups: string[]
@@ -28,11 +34,11 @@ interface FormRule extends Rule {
 }
 
 const AccessControlNew = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible)
-    const groups =  useSelector((state: RootState) => state.group.data)
-    const rule =  useSelector((state: RootState) => state.rule.rule)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const rule = useSelector((state: RootState) => state.rule.rule)
     const savedRule = useSelector((state: RootState) => state.rule.savedRule)
 
     const [editName, setEditName] = useState(false)
@@ -72,7 +78,7 @@ const AccessControlNew = () => {
         setTagGroups(groups?.map(g => g.name) || [])
     }, [groups])
 
-    const createRuleToSave = ():RuleToSave => {
+    const createRuleToSave = (): RuleToSave => {
         const sources = groups?.filter(g => formRule.tagSourceGroups.includes(g.name)).map(g => g.id || '') || []
         const destinations = groups?.filter(g => formRule.tagDestinationGroups.includes(g.name)).map(g => g.id || '') || []
         const sourcesNoId = formRule.tagSourceGroups.filter(s => !tagGroups.includes(s))
@@ -96,14 +102,17 @@ const AccessControlNew = () => {
         form.validateFields()
             .then((values) => {
                 const ruleToSave = createRuleToSave()
-                dispatch(ruleActions.saveRule.request({getAccessTokenSilently:accessToken, payload: ruleToSave}))
+                dispatch(ruleActions.saveRule.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: ruleToSave
+                }))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)
             });
     };
 
-    const setVisibleNewRule = (status:boolean) => {
+    const setVisibleNewRule = (status: boolean) => {
         dispatch(ruleActions.setSetupNewRuleVisible(status));
     }
 
@@ -121,7 +130,7 @@ const AccessControlNew = () => {
         setVisibleNewRule(false)
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormRule({...formRule, ...data})
     }
 
@@ -139,7 +148,7 @@ const AccessControlNew = () => {
         })
     };
 
-    const handleChangeDisabled = ({ target: { value } }: RadioChangeEvent) => {
+    const handleChangeDisabled = ({target: {value}}: RadioChangeEvent) => {
         setFormRule({
             ...formRule,
             disabled: value
@@ -147,7 +156,7 @@ const AccessControlNew = () => {
     };
 
     const tagRender = (props: CustomTagProps) => {
-        const { label, value, closable, onClose } = props;
+        const {label, value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
             event.stopPropagation();
@@ -159,7 +168,7 @@ const AccessControlNew = () => {
                 onMouseDown={onPreventMouseDown}
                 closable={closable}
                 onClose={onClose}
-                style={{ marginRight: 3 }}
+                style={{marginRight: 3}}
             >
                 <strong>{value}</strong>
             </Tag>
@@ -169,12 +178,12 @@ const AccessControlNew = () => {
     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'} `
+        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
         return (
             <>
                 <Tag
                     color="blue"
-                    style={{ marginRight: 3 }}
+                    style={{marginRight: 3}}
                 >
                     <strong>{label}</strong>
                 </Tag>
@@ -186,25 +195,27 @@ const AccessControlNew = () => {
     const dropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
-            <Divider style={{ margin: '8px 0' }} />
+            <Divider style={{margin: '8px 0'}}/>
             <Row style={{padding: '0 8px 4px'}}>
                 <Col flex="auto">
                     <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
                 </Col>
                 <Col flex="none">
                     <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z" fill="#9CA3AF"/>
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
                     </svg>
                 </Col>
             </Row>
         </>
     )
 
-    const toggleEditName = (status:boolean) => {
+    const toggleEditName = (status: boolean) => {
         setEditName(status);
     }
 
-    const toggleEditDescription = (status:boolean) => {
+    const toggleEditDescription = (status: boolean) => {
         setEditDescription(status);
     }
 
@@ -217,10 +228,10 @@ const AccessControlNew = () => {
     const selectValidator = (_: RuleObject, value: string[]) => {
         let hasSpaceNamed = []
         if (!value.length) {
-            return Promise.reject(new Error("Please enter ate least one group"))
+            return Promise.reject(new Error("Please enter at least one group"))
         }
 
-        value.forEach(function(v: string) {
+        value.forEach(function (v: string) {
             if (!v.trim().length) {
                 hasSpaceNamed.push(v)
             }
@@ -248,7 +259,8 @@ const AccessControlNew = () => {
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedRule.loading}>Cancel</Button>
-                            <Button type="primary" disabled={savedRule.loading} onClick={handleFormSubmit}>{`${formRule.id ? 'Save' : 'Create'}`}</Button>
+                            <Button type="primary" disabled={savedRule.loading}
+                                    onClick={handleFormSubmit}>{`${formRule.id ? 'Save' : 'Create'}`}</Button>
                         </Space>
                     }
                 >
@@ -258,37 +270,51 @@ const AccessControlNew = () => {
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
                                     <Row align="top">
                                         <Col flex="none" style={{display: "flex"}}>
-                                            {!editName && !editDescription && formRule.id  &&
+                                            {!editName && !editDescription && formRule.id &&
                                                 <button type="button" aria-label="Close" className="ant-drawer-close"
                                                         style={{paddingTop: 3}}
                                                         onClick={onCancel}>
-                                                    <span role="img" aria-label="close" className="anticon anticon-close">
+                                                    <span role="img" aria-label="close"
+                                                          className="anticon anticon-close">
                                                         <CloseOutlined size={16}/>
                                                     </span>
                                                 </button>
                                             }
                                         </Col>
                                         <Col flex="auto">
-                                            { !editName && formRule.id ? (
-                                                <div className={"access-control input-text ant-drawer-title"} onClick={() => toggleEditName(true)}>{formRule.id ? formRule.name : 'New Rule'}</div>
+                                            {!editName && formRule.id ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formRule.id ? formRule.name : 'New Rule'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="name"
                                                     label="Name"
-                                                    rules={[{required: true, message: 'Please add a name for this access rule', whitespace: true}]}
+                                                    rules={[{
+                                                        required: true,
+                                                        message: 'Please add a name for this access rule',
+                                                        whitespace: true
+                                                    }]}
                                                 >
-                                                    <Input placeholder="Add rule name..." ref={inputNameRef} onPressEnter={() => toggleEditName(false)} onBlur={() => toggleEditName(false)} autoComplete="off"/>
+                                                    <Input placeholder="Add rule name..." ref={inputNameRef}
+                                                           onPressEnter={() => toggleEditName(false)}
+                                                           onBlur={() => toggleEditName(false)} autoComplete="off"/>
                                                 </Form.Item>
                                             )}
-                                            { !editDescription ? (
-                                                <div className={"access-control input-text ant-drawer-subtitle"} onClick={() => toggleEditDescription(true)}>{formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}</div>
+                                            {!editDescription ? (
+                                                <div className={"access-control input-text ant-drawer-subtitle"}
+                                                     onClick={() => toggleEditDescription(true)}>
+                                                    {formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}
+                                                </div>
                                             ) : (
                                                 <Form.Item
                                                     name="description"
                                                     label="Description"
                                                     style={{marginTop: 24}}
                                                 >
-                                                    <Input placeholder="Add description..." ref={inputDescriptionRef} onPressEnter={() => toggleEditDescription(false)} onBlur={() => toggleEditDescription(false)} autoComplete="off"/>
+                                                    <Input placeholder="Add description..." ref={inputDescriptionRef}
+                                                           onPressEnter={() => toggleEditDescription(false)}
+                                                           onBlur={() => toggleEditDescription(false)}
+                                                           autoComplete="off"/>
                                                 </Form.Item>
                                             )}
                                         </Col>
@@ -322,10 +348,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagSourceGroups"
                                     label="Source groups"
-                                    rules={[{ validator: selectValidator }]}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select mode="tags"
-                                            style={{ width: '100%' }}
+                                            style={{width: '100%'}}
                                             placeholder="Tags Mode"
                                             tagRender={tagRender}
                                             onChange={handleChangeSource}
@@ -343,10 +369,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagDestinationGroups"
                                     label="Destination groups"
-                                    rules={[{ validator: selectValidator }]}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select
-                                        mode="tags" style={{ width: '100%' }}
+                                        mode="tags" style={{width: '100%'}}
                                         placeholder="Tags Mode"
                                         tagRender={tagRender}
                                         onChange={handleChangeDestination}
@@ -367,10 +393,14 @@ const AccessControlNew = () => {
                                     </Col>
                                     <Col flex="auto">
                                         <Paragraph>
-                                            At the moment access rules are bi-directional by default, this means both source and destination can talk to each-other in both directions. However destination peers will not be able to communicate with each other, nor will the source peers.
+                                            At the moment access rules are bi-directional by default, this means both
+                                            source and destination can talk to each-other in both directions. However
+                                            destination peers will not be able to communicate with each other, nor will
+                                            the source peers.
                                         </Paragraph>
                                         <Paragraph>
-                                            If you want to enable all peers of the same group to talk to each other - you can add that group both as a receiver and as a destination.
+                                            If you want to enable all peers of the same group to talk to each other -
+                                            you can add that group both as a receiver and as a destination.
                                         </Paragraph>
                                     </Col>
                                 </Row>
@@ -378,7 +408,8 @@ const AccessControlNew = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://docs.netbird.io/docs/overview/acls" style={{color: 'rgb(07, 114, 128)'}}>Learn
+                                        href="https://docs.netbird.io/docs/overview/acls"
+                                        style={{color: 'rgb(07, 114, 128)'}}>Learn
                                     more about access controls</Button>
                             </Col>
                         </Row>

src/components/Banner.tsx

@@ -1,20 +1,28 @@
-import { useState } from "react";
+import {useEffect, useState} from "react";
 import {Button, Col, Row, Space, Typography} from "antd";
 import { CloseOutlined } from '@ant-design/icons';
+import {Md5} from "ts-md5";
 
 const { Text } = Typography
 
 const Banner = () => {
-	const [show, setShow] = useState(true);
+	const [show, setShow] = useState(false);
+	const banner_md5_key = 'banner_md5'
+	const banner_closed_key = 'banner_closed'
 
 	const dismiss = () => {
 		setShow(false);
+		localStorage.setItem(banner_closed_key,'true');
 	};
 
+	const announcement = "New Release! Manage DNS with NetBird."
+
+	const announcement_md5 = Md5.hashStr(announcement)
+
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://netbird.io/docs/how-to-guides/network-routes"
+				href="https://netbird.io/docs/how-to-guides/nameservers"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"
@@ -22,12 +30,24 @@ const Banner = () => {
 		)
 	}
 
+	useEffect(()=>{
+		let store_banner_md5 = localStorage.getItem(banner_md5_key);
+		let stored_banner_closed = localStorage.getItem(banner_closed_key);
+
+		if((!stored_banner_closed || stored_banner_closed !== 'true') ||
+			(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
+			setShow(true);
+			localStorage.setItem(banner_md5_key,announcement_md5);
+			localStorage.setItem(banner_closed_key,'false');
+		}
+	},[])
+
 	return show ? (
 		<div className="relative bg-indigo-600 white" color="white" style={{position: "relative", padding: "0.3rem"}} >
 			<Row>
 				<Col xs={24} sm={0} lg={0}>
 					<Text className="ant-col-md-0" style={{color: "#ffffff"}}>
-						New Release! Access private networks with the Network Routes feature.
+						{announcement}
 					</Text>
 				</Col>
 				<Col xs={24} sm={0} lg={0}>
@@ -38,7 +58,7 @@ const Banner = () => {
 				<Col xs={0} sm={24}>
 					<Space align="center" style={{display: "flex", justifyContent: "center"}}>
 						<Text style={{color: "#ffffff"}}>
-							New Release! Access private networks with the Network Routes feature.
+							{announcement}
 						</Text>
 						<span>
 							{linkLearnMore()}

src/components/ButtonCopyMessage.tsx

@@ -1,24 +1,36 @@
 import {copyToClipboard} from "../utils/common";
-import {Button, message} from "antd";
-import {StepCommand} from "./addpeer/types";
-import React from "react";
+import {Button, message, Typography} from "antd";
+import React, {ReactNode} from "react";
+
+const {Text} = Typography;
 
 type Props = {
     keyMessage: string;
-    text: string;
+    toCopy: string;
+    body: ReactNode;
     messageText: string;
     styleNotification?: any;
     style?: any;
-    className?:any;
+    className?: any;
 };
 
-const ButtonCopyMessage:React.FC<Props> = ({ keyMessage, text, messageText, styleNotification, style, className}) => {
+const ButtonCopyMessage: React.FC<Props> = ({
+                                                keyMessage,
+                                                toCopy,
+                                                body,
+                                                messageText,
+                                                styleNotification,
+                                                style,
+                                                className
+                                            }) => {
     const copyTextMessage = () => {
-        copyToClipboard(text)
-        message.success({ content: `${messageText}`, key: keyMessage, duration: 1, style: (styleNotification || {}) });
+        copyToClipboard(toCopy)
+        message.success({content: `${messageText}`, key: keyMessage, duration: 1, style: (styleNotification || {})});
     }
     return (
-        <Button type="text" onClick={copyTextMessage} style={style || {}} className={className}>{text}</Button>
+        <Button type="text" onClick={copyTextMessage} style={style || {}} className={className}>
+            {body}
+        </Button>
     )
 }
 

src/components/Loading.tsx

@@ -1,17 +1,32 @@
 import React from "react";
 import loading from "../assets/bars.svg";
 import {Space} from "antd";
+import {OidcSecure} from "@axa-fr/react-oidc";
 
-type Props = {
+type LoadingProps = {
     padding?: string;
-    width?: string;
-    height?: string;
+    width?: number;
+    height?: number;
 };
 
-const Loading:React.FC<Props> = ({padding, width, height}) => (
-    <Space direction="vertical" align="center" style={{display: 'flex', padding: `${padding || `.25em`}`}}>
-        <img src={loading} alt="Loading" style={{width: `${width || '25px'}`, height: `${height || '25px'}`}}/>
+const Loading: React.FC<LoadingProps> = ({padding, width, height}) => (
+    <Space direction="vertical" align="center" style={{
+        marginTop: `-${height ? (height / 2) + "px" : '-25px'}`,
+        marginLeft: `-${width ? (width / 2) + "px" : '-25px'}`,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        display: 'flex'
+    }}>
+        <img src={loading} alt="Loading"
+             style={{width: `${width ? width + "px" : '25px'}`, height: `${height ? height + "px" : '25px'}`}}/>
     </Space>
 );
 
 export default Loading;
+// Wrapper of Loading to handle cases when it is shown within the authenticated layout and has to trigger authentication when token expires.
+export const SecureLoading = (props: LoadingProps) => (
+    <OidcSecure>
+        <Loading {...props} />
+    </OidcSecure>
+);

src/components/LoginError.tsx

@@ -1,35 +1,57 @@
-import {OidcUserStatus, useOidc, useOidcUser} from "@axa-fr/react-oidc";
-import {Button, Result} from "antd";
+import {useOidc, useOidcUser} from "@axa-fr/react-oidc";
+import {Anchor, Button, Col, Result, Row, Space} from "antd";
 import React from "react";
 import {getConfig} from "../config";
+import {ResultStatusType} from "antd/lib/result";
+
+const {Link} = Anchor;
 
 function LoginError() {
-    const { logout } = useOidc();
+    const {logout} = useOidc();
     const config = getConfig();
-    const { oidcUserLoadingState } = useOidcUser();
+    const {oidcUserLoadingState} = useOidcUser();
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
 
     if (urlParams.get("error") === "access_denied") {
+
+        let title = urlParams.get("error_description")
+        let status: ResultStatusType = "warning"
+        // this comes from the auth0 rule that links accounts
+        if (title === "account linked successfully") {
+            status = "success"
+            title = "Your account has been linked successfully. Please log in again to complete the setup."
+        }
+
         return <Result
-            status="warning"
-            title={urlParams.get("error_description")}
+            status={status}
+            title={title}
             extra={<>
-                <a href={window.location.origin}>
-                    <Button type="primary">
-                        Try again
-                    </Button>
-                </a>
-                <Button type="primary" onClick={function () {
-                    logout("",{client_id:config.clientId})
+                <Space style={{
+                    display: "flex-inline",
+                    flexDirection: "column",
+                    justifyContent: "space-around",
+                    alignContent: "center"
                 }}>
-                    Log out
+                    <h4>Already verified your email address?</h4>
+                    <a href={window.location.origin}>
+                        <Button type="primary">
+                            Continue
+                        </Button>
+                    </a>
+
+                <Button type="link" onClick={function () {
+                    logout("", {client_id: config.clientId})
+                }}>
+                    Trouble logging in? Try again.
                 </Button>
+                </Space>
+
             </>
             }
         />
     }
-    return <div>{"Login Error: User state: "+oidcUserLoadingState}</div>
+    return <div>{"Login Error: User state: " + oidcUserLoadingState}</div>
 }
 
 export default LoginError;

src/components/NameServerGroupUpdate.tsx

@@ -0,0 +1,664 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import {actions as nsGroupActions} from '../store/nameservers';
+import {
+    Button,
+    Col,
+    Divider,
+    Drawer,
+    Form,
+    FormListFieldData,
+    Input,
+    InputNumber,
+    message,
+    Radio,
+    Row,
+    Select,
+    Space,
+    Tooltip,
+    Typography
+} from "antd";
+import {
+    CloseOutlined,
+    FlagFilled,
+    MinusCircleOutlined,
+    PlusOutlined,
+    QuestionCircleFilled,
+    QuestionCircleOutlined
+} from "@ant-design/icons";
+import {Header} from "antd/es/layout/layout";
+import {RuleObject} from "antd/lib/form";
+import cidrRegex from 'cidr-regex';
+import {NameServer, NameServerGroup, NameServerGroupToSave} from "../store/nameservers/types";
+import {useGetGroupTagHelpers} from "../utils/groups"
+import {useGetAccessTokenSilently} from "../utils/token";
+
+const {Paragraph} = Typography;
+
+interface formNSGroup extends NameServerGroup {
+}
+
+const NameServerGroupUpdate = () => {
+    const {
+        tagRender,
+        handleChangeTags,
+        dropDownRender,
+        optionRender,
+        tagGroups,
+        getExistingAndToCreateGroupsLists,
+        getGroupNamesFromIDs,
+        selectValidator
+    } = useGetGroupTagHelpers()
+    const dispatch = useDispatch()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const {Option} = Select;
+    const nsGroup = useSelector((state: RootState) => state.nameserverGroup.nameserverGroup)
+    const setupNewNameServerGroupVisible = useSelector((state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible)
+    const savedNSGroup = useSelector((state: RootState) => state.nameserverGroup.savedNameServerGroup)
+    const nsGroupData = useSelector((state: RootState) => state.nameserverGroup.data);
+
+    const [formNSGroup, setFormNSGroup] = useState({} as formNSGroup)
+    const [form] = Form.useForm()
+    const [editName, setEditName] = useState(false)
+    const [isPrimary, setIsPrimary] = useState(false)
+    const [editDescription, setEditDescription] = useState(false)
+    const inputNameRef = useRef<any>(null)
+    const inputDescriptionRef = useRef<any>(null)
+    const [selectCustom, setSelectCustom] = useState(false)
+
+    const optionsDisabledEnabled = [{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]
+    const optionsPrimary = [{label: 'Yes', value: true}, {label: 'No', value: false}]
+
+    useEffect(() => {
+        if (editName) inputNameRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editName]);
+
+    useEffect(() => {
+        if (editDescription) inputDescriptionRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editDescription]);
+
+    useEffect(() => {
+        if (!nsGroup) return
+
+        let newFormGroup = {
+            ...nsGroup,
+            groups: getGroupNamesFromIDs(nsGroup.groups),
+        } as formNSGroup
+        setFormNSGroup(newFormGroup)
+        form.setFieldsValue(newFormGroup)
+        if (nsGroup.id) {
+            setSelectCustom(true)
+        }
+        if (nsGroup.primary !== undefined) {
+            setIsPrimary(nsGroup.primary)
+        }
+    }, [nsGroup])
+
+    const onCancel = () => {
+        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(false));
+        dispatch(nsGroupActions.setNameServerGroup(
+            {
+                id: '',
+                name: '',
+                description: '',
+                primary: false,
+                domains: [],
+                nameservers: [] as NameServer[],
+                groups: [],
+                enabled: false,
+            } as NameServerGroup
+        ))
+        setEditName(false)
+        setSelectCustom(false)
+        setIsPrimary(false)
+    }
+
+    const onChange = (changedValues: any) => {
+        if (changedValues.primary !== undefined) {
+            setIsPrimary(changedValues.primary)
+        }
+        setFormNSGroup({...formNSGroup, ...changedValues})
+    }
+
+    let googleChoice = 'Google DNS'
+    let cloudflareChoice = 'Cloudflare DNS'
+    let quad9Choice = 'Quad9 DNS'
+    let customChoice = 'Add custom nameserver'
+
+    let defaultDNSOptions: NameServerGroup[] = [
+        {
+            name: googleChoice,
+            description: 'Google DNS servers',
+            domains: [],
+            primary: true,
+            nameservers: [
+                {
+                    ip: "8.8.8.8",
+                    ns_type: "udp",
+                    port: 53,
+                },
+                {
+                    ip: "8.8.4.4",
+                    ns_type: "udp",
+                    port: 53,
+                },
+            ],
+            groups: [],
+            enabled: true,
+        },
+        {
+            name: cloudflareChoice,
+            description: 'Cloudflare DNS servers',
+            domains: [],
+            primary: true,
+            nameservers: [
+                {
+                    ip: "1.1.1.1",
+                    ns_type: "udp",
+                    port: 53,
+                },
+                {
+                    ip: "1.0.0.1",
+                    ns_type: "udp",
+                    port: 53,
+                },
+            ],
+            groups: [],
+            enabled: true,
+        },
+        {
+            name: quad9Choice,
+            description: 'Quad9 DNS servers',
+            domains: [],
+            primary: true,
+            nameservers: [
+                {
+                    ip: "9.9.9.9",
+                    ns_type: "udp",
+                    port: 53,
+                },
+                {
+                    ip: "149.112.112.112",
+                    ns_type: "udp",
+                    port: 53,
+                },
+            ],
+            groups: [],
+            enabled: true,
+        },
+    ]
+
+    const handleSelectChange = (value: string) => {
+        console.log(`selected ${value}`);
+        let nsGroupLocal = {} as NameServerGroup
+        if (value === customChoice) {
+            nsGroupLocal = nsGroup
+        } else {
+            defaultDNSOptions.forEach((nsg) => {
+                if (value === nsg.name) {
+                    nsGroupLocal = nsg
+                }
+            })
+        }
+        let newFormGroup = {
+            ...nsGroupLocal,
+            groups: getGroupNamesFromIDs(nsGroupLocal.groups),
+        } as formNSGroup
+        setFormNSGroup(newFormGroup)
+        form.setFieldsValue(newFormGroup)
+        setSelectCustom(true)
+    };
+
+    const handleFormSubmit = () => {
+
+        form.validateFields()
+            .then((values) => {
+                const nsGroupToSave = createNSGroupToSave(values as NameServerGroup)
+                dispatch(nsGroupActions.saveNameServerGroup.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: nsGroupToSave
+                }))
+
+            })
+            .then(() => onCancel())
+            .catch((errorInfo) => {
+                let msg = "please check the fields and try again"
+                if (errorInfo.errorFields) {
+                    msg = errorInfo.errorFields[0].errors[0]
+                }
+                message.error({
+                    content: msg,
+                    duration: 1,
+                });
+            });
+    }
+
+    const createNSGroupToSave = (values: NameServerGroup): NameServerGroupToSave => {
+        let [existingGroups, newGroups] = getExistingAndToCreateGroupsLists(values.groups)
+        return {
+            id: formNSGroup.id || null,
+            name: values.name ? values.name : formNSGroup.name,
+            description: values.description ? values.description : formNSGroup.description,
+            primary: values.primary,
+            domains: values.primary ? [] : values.domains,
+            nameservers: values.nameservers,
+            groups: existingGroups,
+            groupsToCreate: newGroups,
+            enabled: values.enabled,
+        } as NameServerGroupToSave
+    }
+
+    const toggleEditName = (status: boolean) => {
+        setEditName(status)
+    }
+
+    const toggleEditDescription = (status: boolean) => {
+        setEditDescription(status)
+    }
+
+    const domainRegex = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;
+
+    const domainValidator = (_: RuleObject, domain: string) => {
+        if (domainRegex.test(domain)) {
+            return Promise.resolve()
+        }
+        setIsPrimary(false)
+        return Promise.reject(new Error("Please enter a valid domain, e.g. example.com or intra.example.com"))
+    }
+
+    const nameValidator = (_: RuleObject, value: string) => {
+        const found = nsGroupData.find(u => u.name == value && u.id !== formNSGroup.id)
+        if (found) {
+            return Promise.reject(new Error("Please enter a unique name for your nameserver configuration"))
+        }
+
+        return Promise.resolve()
+    }
+
+    const ipValidator = (_: RuleObject, value: string) => {
+        if (!cidrRegex().test(value + "/32")) {
+            return Promise.reject(new Error("Please enter a valid IP, e.g. 192.168.1.1 or 8.8.8.8"))
+        }
+
+        return Promise.resolve()
+    }
+
+    // @ts-ignore
+    const formListValidator = (_: RuleObject, names) => {
+        if (names.length >= 3) {
+            return Promise.reject(new Error("Exceeded maximum number of Nameservers. (Max is 2)"));
+        }
+        if (names.length < 1) {
+            return Promise.reject(new Error("You should add at least 1 Nameserver"));
+        }
+        return Promise.resolve()
+    }
+
+    const primaryValidator = (_: RuleObject, primary: boolean) => {
+        if (!primary && form.getFieldValue("domains").length === 0) {
+            return Promise.reject(new Error("You should select between Resolve all domains or add one Match domain"));
+        }
+
+        if (primary && form.getFieldValue("domains").length > 0) {
+            return Promise.reject(new Error("You should remove all match domains before setting this to yes"));
+        }
+
+        return Promise.resolve()
+    }
+
+    // @ts-ignore
+    const renderNSList = (fields: FormListFieldData[], {add, remove}, {errors}) => (
+        <>
+            <Row>Nameservers</Row>
+            {!!fields.length && (
+
+                <Row align='middle'>
+                    <Col span={6} style={{textAlign: 'center'}}>
+                        <Typography.Text>Protocol</Typography.Text>
+                    </Col>
+                    <Col span={10} style={{textAlign: 'center'}}>
+                        <Typography.Text>Nameserver IP</Typography.Text>
+                    </Col>
+                    <Col span={4} style={{textAlign: 'center'}}>
+                        <Typography.Text>Port</Typography.Text>
+                    </Col>
+                    <Col span={2}/>
+                </Row>
+            )}
+            {fields.map((field, index) => {
+                return (
+                    <Row key={index}>
+                        <Col span={6} style={{textAlign: 'center'}}>
+                            <Form.Item style={{margin: '3px'}}
+                                       name={[field.name, 'ns_type']}
+                                       rules={[{required: true, message: 'Missing first protocol'}]}
+                                       initialValue={"udp"}
+                            >
+                                <Select disabled style={{width: '100%'}}>
+                                    <Option value="udp">UDP</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={10} style={{margin: '1px'}}>
+                            <Form.Item style={{margin: '1px'}}
+                                       name={[field.name, 'ip']}
+                                       rules={[{validator: ipValidator}]}
+                            >
+                                <Input placeholder="e.g. X.X.X.X" style={{width: '100%'}}
+                                       autoComplete="off"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={4} style={{textAlign: 'center'}}>
+                            <Form.Item style={{margin: '1px'}}
+                                       name={[field.name, 'port']}
+                                       rules={[{required: true, message: 'Missing port'}]}
+                                       initialValue={53}
+                            >
+                                <InputNumber placeholder="Port" style={{width: '100%'}}/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={2} style={{textAlign: 'center'}}>
+                            <MinusCircleOutlined onClick={() => remove(field.name)}/>
+                        </Col>
+                    </Row>
+                )
+            })}
+
+            <Form.Item>
+                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined/>}>
+                    Add nameserver
+                </Button>
+            </Form.Item>
+            <Form.ErrorList errors={errors}/>
+        </>
+    )
+
+    // @ts-ignore
+    const renderDomains = (fields: FormListFieldData[], {add, remove}, {errors}) => (
+        <>
+            <Row>
+                <Space>
+                    <Col>
+                        Match domains
+                    </Col>
+                    <Col>
+                        <Tooltip title="Only queries to domains specified here will be resolved by these nameservers."
+                                 className={"ant-form-item-tooltip"}>
+                            <QuestionCircleOutlined style={{color: "rgba(0, 0, 0, 0.45)", cursor: "help"}}/>
+                        </Tooltip>
+                    </Col>
+                </Space>
+            </Row>
+            {fields.map((field, index) => {
+                return (
+                    <Row key={index}>
+                        <Col span={20} style={{margin: '1px'}}>
+                            <Form.Item hidden={isPrimary} style={{margin: '1px'}}
+                                       {...field}
+                                       rules={[{validator: domainValidator}]}
+                            >
+                                <Input placeholder="e.g. example.com" style={{width: '100%'}}
+                                       autoComplete="off"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={2} style={{textAlign: 'center'}}>
+                            <MinusCircleOutlined hidden={isPrimary} className="dynamic-delete-button"
+                                                 onClick={() => remove(field.name)}/>
+                        </Col>
+                    </Row>
+                )
+            })}
+
+            <Form.Item>
+                <Button type="dashed" disabled={isPrimary} onClick={() => add()} block icon={<PlusOutlined/>}>
+                    Add domain
+                </Button>
+            </Form.Item>
+            <Form.ErrorList errors={errors}/>
+        </>
+    )
+
+    return (
+        <>
+            {nsGroup &&
+                <Drawer
+                    headerStyle={{display: "none"}}
+                    forceRender={true}
+                    open={setupNewNameServerGroupVisible}
+                    bodyStyle={{paddingBottom: 80}}
+                    onClose={onCancel}
+                    autoFocus={true}
+                    footer={
+                        <Space style={{display: 'flex', justifyContent: 'end'}}>
+                            <Button onClick={onCancel} disabled={savedNSGroup.loading}>Cancel</Button>
+                            <Button type="primary" onClick={handleFormSubmit} disabled={savedNSGroup.loading}
+                            >{`${formNSGroup.id ? 'Save' : 'Create'}`}</Button>
+                        </Space>
+                    }
+                >
+                    {selectCustom ?
+                        (<Form layout="vertical" requiredMark={false} form={form}
+                               onValuesChange={onChange}
+                        >
+                            <Row gutter={16}>
+                                <Col span={24}>
+                                    <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
+                                        <Row align="top">
+                                            <Col flex="none" style={{display: "flex"}}>
+                                                {!editName && !editDescription && formNSGroup.id &&
+                                                    <button type="button" aria-label="Close"
+                                                            className="ant-drawer-close"
+                                                            style={{paddingTop: 3}}
+                                                            onClick={onCancel}>
+                                                    <span role="img" aria-label="close"
+                                                          className="anticon anticon-close">
+                                                        <CloseOutlined size={16}/>
+                                                    </span>
+                                                    </button>
+                                                }
+                                            </Col>
+                                            <Col flex="auto">
+                                                {!editName && formNSGroup.id ? (
+                                                    <div className={"access-control input-text ant-drawer-title"}
+                                                         onClick={() => toggleEditName(true)}>{formNSGroup.id ? formNSGroup.name : 'New nameserver group'}</div>
+                                                ) : (
+                                                    <Form.Item
+                                                        name="name"
+                                                        label="Name"
+                                                        tooltip="Add a nameserver group name"
+                                                        rules={[
+                                                            {
+                                                                required: true,
+                                                                message: 'Please add an identifier for this nameserver group',
+                                                                whitespace: true
+                                                            },
+                                                            {
+                                                                validator: nameValidator
+                                                            }
+                                                        ]}
+                                                    >
+                                                        <Input placeholder="e.g. Public DNS" ref={inputNameRef}
+                                                               onPressEnter={() => toggleEditName(false)}
+                                                               onBlur={() => toggleEditName(false)} autoComplete="off"
+                                                               maxLength={40}/>
+                                                    </Form.Item>
+                                                )}
+                                                {!editDescription ? (
+                                                    <div className={"access-control input-text ant-drawer-subtitle"}
+                                                         onClick={() => toggleEditDescription(true)}>
+                                                        {formNSGroup.description && formNSGroup.description.trim() !== "" ? formNSGroup.description : 'Add description...'}
+                                                    </div>
+                                                ) : (
+                                                    <Form.Item
+                                                        name="description"
+                                                        label="Description"
+                                                        style={{marginTop: 24}}
+                                                    >
+                                                        <Input placeholder="Add description..."
+                                                               ref={inputDescriptionRef}
+                                                               onPressEnter={() => toggleEditDescription(false)}
+                                                               onBlur={() => toggleEditDescription(false)}
+                                                               autoComplete="off"/>
+                                                    </Form.Item>
+                                                )}
+                                            </Col>
+                                        </Row>
+                                        <Row align="top">
+                                            <Col flex="auto">
+
+                                            </Col>
+                                        </Row>
+
+                                    </Header>
+                                </Col>
+                                <Col span={24}>
+
+                                </Col>
+
+                                <Col span={24}>
+                                    <Form.Item
+                                        name="enabled"
+                                        label="Status"
+                                    >
+                                        <Radio.Group
+                                            options={optionsDisabledEnabled}
+                                            optionType="button"
+                                            buttonStyle="solid"
+                                        />
+                                    </Form.Item>
+                                </Col>
+                                <Col span={24} flex="auto">
+                                    <Form.List
+                                        name="nameservers"
+                                        rules={[{validator: formListValidator}]}
+                                    >
+                                        {renderNSList}
+                                    </Form.List>
+                                </Col>
+                                <Col span={24}>
+                                    <Form.Item
+                                        name="primary"
+                                        label="Resolve all domains"
+                                        rules={[{validator: primaryValidator}]}
+                                        dependencies={['domains']} // trigger primaryValidation if domains is updated
+                                        tooltip="Defines if the nameservers are resolvers for all domains"
+                                    >
+                                        <Radio.Group
+                                            options={optionsPrimary}
+                                            optionType="button"
+                                            buttonStyle="solid"
+                                        />
+                                    </Form.Item>
+                                </Col>
+                                <Col span={24} flex="auto">
+                                    <Form.List
+                                        name="domains"
+                                    >
+                                        {renderDomains}
+                                    </Form.List>
+                                </Col>
+                                <Col span={24}>
+                                    <Form.Item
+                                        name="groups"
+                                        label="Distribution groups"
+                                        tooltip="Distribution groups define to which group of peers these settings will be distributed to"
+                                        rules={[{validator: selectValidator}]}
+                                    >
+                                        <Select mode="tags"
+                                                style={{width: '100%'}}
+                                                placeholder="Associate groups with the NS group"
+                                                tagRender={tagRender}
+                                                onChange={handleChangeTags}
+                                                dropdownRender={dropDownRender}
+                                        >
+                                            {
+                                                tagGroups.map(m =>
+                                                    <Option key={m}>{optionRender(m)}</Option>
+                                                )
+                                            }
+                                        </Select>
+                                    </Form.Item>
+                                </Col>
+
+
+                                <Col span={24}>
+                                    <Row wrap={false} gutter={12}>
+                                        <Col flex="none">
+                                            <FlagFilled/>
+                                        </Col>
+                                        <Col flex="auto">
+                                            <Paragraph>
+                                                Nameservers let you define resolvers for your DNS queries.
+                                                Because not all operating systems support match-only domain resolution,
+                                                you should define at least one set of nameservers to resolve all domains
+                                                per distribution group.
+                                            </Paragraph>
+                                        </Col>
+                                    </Row>
+                                </Col>
+                                <Col span={24}>
+                                    <Divider></Divider>
+                                    <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
+                                            href="https://netbird.io/docs/how-to-guides/nameservers"
+                                            style={{color: 'rgb(07, 114, 128)'}}>Learn
+                                        more about nameservers</Button>
+                                </Col>
+                            </Row>
+                        </Form>) :
+                        (
+                            <Space direction={"vertical"} style={{width: '100%'}}>
+                                <Row align='middle'>
+                                    <Col span={24} style={{textAlign: 'left'}}>
+                                        <span className="ant-form-item">Select a predefined nameserver</span>
+                                    </Col>
+                                </Row>
+                                <Row align='middle'>
+                                    <Col span={24} style={{textAlign: 'center'}}>
+                                        <Select
+                                            style={{width: '100%'}}
+                                            onChange={handleSelectChange}
+                                            options={[
+                                                {
+                                                    value: googleChoice,
+                                                    label: googleChoice,
+                                                },
+                                                {
+                                                    value: cloudflareChoice,
+                                                    label: cloudflareChoice,
+                                                },
+                                                {
+                                                    value: quad9Choice,
+                                                    label: quad9Choice,
+                                                },
+                                                {
+                                                    value: customChoice,
+                                                    label: customChoice,
+                                                },
+                                            ]}
+                                        />
+                                    </Col>
+                                </Row>
+                                <Row align='middle'>
+                                    <Col span={24} style={{textAlign: 'left'}}>
+                                        <Col span={24} style={{textAlign: 'left'}}>
+                                            <span className="ant-form-item"><Typography.Link
+                                                onClick={() => handleSelectChange(customChoice)}>Or add custom</Typography.Link></span>
+                                        </Col>
+                                    </Col>
+                                </Row>
+                            </Space>
+                        )
+                    }
+
+                </Drawer>
+            }
+        </>
+    )
+}
+
+export default NameServerGroupUpdate

src/components/Navbar.tsx

@@ -1,49 +1,60 @@
 import React, {useEffect, useState} from 'react';
-import {Link} from 'react-router-dom';
+import {Link, useLocation} from 'react-router-dom';
 import logo from "../assets/logo.png";
-import {useLocation} from 'react-router-dom';
-import {Menu, Row, Col, Grid, Dropdown, Avatar, Button, Typography, Space} from 'antd'
+import {Avatar, Button, Col, Dropdown, Grid, Menu, Row} from 'antd'
 import {ItemType} from "antd/lib/menu/hooks/useItems";
 import {AvatarSize} from "antd/es/avatar/SizeContext";
-import { UserOutlined } from '@ant-design/icons';
-import { useOidc,useOidcUser } from '@axa-fr/react-oidc';
+import {UserOutlined} from '@ant-design/icons';
+import {useOidc, useOidcUser} from '@axa-fr/react-oidc';
 import {getConfig} from "../config";
-const { Text } = Typography
-const { useBreakpoint } = Grid;
+import {User} from "../store/user/types";
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import {actions as userActions} from "../store/user";
+import {useGetAccessTokenSilently} from "../utils/token";
+
+const {useBreakpoint} = Grid;
 
 const Navbar = () => {
     let location = useLocation();
     const config = getConfig();
-    const {
-        isAuthenticated,
-        logout,
-    } = useOidc();
+    const { logout } = useOidc();
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
 
-    const { oidcUser } = useOidcUser();
+    const {oidcUser} = useOidcUser();
     const user = oidcUser;
+    const [currentUser, setCurrentUser] = useState({} as User)
 
     const screens = useBreakpoint();
 
     const [hideMenuUser, setHideMenuUser] = useState(false)
+    const users = useSelector((state: RootState) => state.user.data)
+    const [isRefreshingUserState, setIsRefreshingUserState] = useState(false)
+
+    const items = [
+        {label: (<Link to="/peers">Peers</Link>), key: '/peers'},
+        {label: (<Link to="/add-peer">Add Peer</Link>), key: '/add-peer'},
+        {label: (<Link to="/setup-keys">Setup Keys</Link>), key: '/setup-keys'},
+        {label: (<Link to="/acls">Access Control</Link>), key: '/acls'},
+        {label: (<Link to="/routes">Network Routes</Link>), key: '/routes'},
+        { label: (<Link  to="/dns">DNS</Link>), key: '/dns' },
+        {label: (<Link to="/users">Users</Link>), key: '/users'}
+    ] as ItemType[]
 
     const userEmailKey = 'user-email'
     const userLogoutKey = 'user-logout'
     const userDividerKey = 'user-divider'
-    const [menuItems, setMenuItems] = useState([
-        { label: (<Link  to="/peers">Peers</Link>), key: '/peers' },
-        { label: (<Link  to="/add-peer">Add Peer</Link>), key: '/add-peer' },
-        { label: (<Link  to="/setup-keys">Setup Keys</Link>), key: '/setup-keys' },
-        { label: (<Link  to="/acls">Access Control</Link>), key: '/acls' },
-        { label: (<Link  to="/routes">Network Routes</Link>), key: '/routes' },
-        { label: (<Link  to="/users">Users</Link>), key: '/users' }
-    ] as ItemType[])
+    const adminOnlyTabs = ["/setup-keys", "/acls", "/routes", "/dns"]
+    const [menuItems, setMenuItems] = useState(items)
     const logoutWithRedirect = () =>
-        logout("/",{client_id:config.clientId});
+        logout("/", {client_id: config.clientId});
+
     useEffect(() => {
-        const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
+        const fs = items.filter(m => showTab(m?.key?.toString(), currentUser) && m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
         if (screens.xs === true) {
             setHideMenuUser(false)
-            fs.push({ type: 'divider', key: userDividerKey })
+            fs.push({type: 'divider', key: userDividerKey})
             fs.push({
                 label: (
                     <Link to="#">{user?.name}</Link>
@@ -51,13 +62,47 @@ const Navbar = () => {
                 icon: createAvatar("small"),
                 key: userEmailKey
             })
-            fs.push({ label: (<Button type="link" block onClick={logoutWithRedirect}>Logout</Button>), key: userLogoutKey })
+            fs.push({
+                label: (<Button type="link" block onClick={logoutWithRedirect}>Logout</Button>),
+                key: userLogoutKey
+            })
             setMenuItems([...fs])
             return
         }
         setMenuItems([...fs])
         setHideMenuUser(true)
-    }, [screens])
+    }, [screens, currentUser])
+
+    useEffect(() => {
+        if (users.length === 0 && !isRefreshingUserState &&
+        window.location.pathname !== '/peers' &&
+        window.location.pathname !==  '/users') {
+            setIsRefreshingUserState(true)
+            dispatch(userActions.getUsers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}))
+            return
+        }
+        if (users.length === 0 && isRefreshingUserState) {
+            return
+        }
+        setIsRefreshingUserState(false)
+        if (oidcUser && oidcUser.sub) {
+            const found = users.find(u => u.id == oidcUser.sub)
+            if (found) {
+                setCurrentUser(found)
+            }
+        }
+    }, [users, oidcUser])
+
+    const showTab = (key: string | undefined, user: User | undefined) => {
+        if (!user) {
+            return false
+        }
+
+        if (user.role?.toLowerCase() === "admin") {
+            return true
+        }
+        return !adminOnlyTabs.find(t => t === key)
+    }
 
     const menuUser = (
         <Menu
@@ -67,16 +112,16 @@ const Navbar = () => {
                     key: '0',
                 },
                 {
-                    label: (<Link  to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
+                    label: (<Link to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
                     key: '1',
                 }
             ]}
         />
     );
 
-    const createAvatar = (size:AvatarSize) => {
+    const createAvatar = (size: AvatarSize) => {
         return user?.picture ? (
-            <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />
+            <Avatar size={size} src={user?.picture} icon={<UserOutlined/>}/>
         ) : (
             <Avatar size={size}>{(user?.name || '').slice(0, 1).toUpperCase()}</Avatar>
         )
@@ -96,7 +141,8 @@ const Navbar = () => {
                 </Col>
                 <Col flex="1 1 auto">
                     <div>
-                        <Menu mode="horizontal" selectable={true} selectedKeys={[location.pathname]} defaultSelectedKeys={[location.pathname]} items={menuItems}/>
+                        <Menu mode="horizontal" selectable={true} selectedKeys={[location.pathname]}
+                              defaultSelectedKeys={[location.pathname]} items={menuItems}/>
                     </div>
                 </Col>
                 {hideMenuUser &&

src/components/PeerUpdate.tsx

@@ -2,23 +2,28 @@ import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {actions as peerActions} from '../store/peer';
-import {Button, Col, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
+import {Button, Col, Collapse, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
 import {Header} from "antd/es/layout/layout";
 import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
-import {Peer, PeerGroupsToSave} from "../store/peer/types";
+import {FormPeer, Peer, PeerGroupsToSave} from "../store/peer/types";
 import {Group, GroupPeer} from "../store/group/types";
-import {CloseOutlined, EditOutlined, FlagFilled} from "@ant-design/icons";
+import {CloseOutlined, EditOutlined} from "@ant-design/icons";
 import {RuleObject} from 'antd/lib/form';
-import { useOidcAccessToken } from '@axa-fr/react-oidc';
-const { Paragraph } = Typography;
-const { Option } = Select;
+import {useGetAccessTokenSilently} from "../utils/token";
+import {timeAgo} from "../utils/common";
+
+const {Paragraph} = Typography;
+const {Option} = Select;
+const {Panel} = Collapse;
+const punycode = require('punycode/')
 
 const PeerUpdate = () => {
-    const { accessToken } = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
-    const groups =  useSelector((state: RootState) => state.group.data)
-    const peer =   useSelector((state: RootState) => state.peer.peer)
-    const [formPeer, setFormPeer] = useState({} as Peer)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const users = useSelector((state: RootState) => state.user.data)
+    const peer: Peer = useSelector((state: RootState) => state.peer.peer)
+    const [formPeer, setFormPeer] = useState({} as FormPeer)
     const updateGroupsVisible = useSelector((state: RootState) => state.peer.updateGroupsVisible)
     const savedGroups = useSelector((state: RootState) => state.peer.savedGroups)
     const updatedPeers = useSelector((state: RootState) => state.peer.updatedPeer)
@@ -28,6 +33,7 @@ const PeerUpdate = () => {
     const [peerGroups, setPeerGroups] = useState([] as GroupPeer[])
     const inputNameRef = useRef<any>(null)
     const [editName, setEditName] = useState(false)
+    const [estimatedName, setEstimatedName] = useState("")
     const [callingPeerAPI, setCallingPeerAPI] = useState(false)
     const [callingGroupAPI, setCallingGroupAPI] = useState(false)
     const [isSubmitRunning, setSubmitRunning] = useState(false)
@@ -46,21 +52,21 @@ const PeerUpdate = () => {
         if (callingPeerAPI && updatedPeers.success) {
             setCallingPeerAPI(false)
         }
-    },[updatedPeers])
+    }, [updatedPeers])
 
     // wait save groups to succeed
     useEffect(() => {
         if (callingGroupAPI && savedGroups.success) {
             setCallingGroupAPI(false)
         }
-    },[savedGroups])
+    }, [savedGroups])
 
     // clean temp state and close
     useEffect(() => {
         if (isSubmitRunning && !callingGroupAPI && !callingPeerAPI) {
             onCancel()
         }
-    },[callingGroupAPI,callingPeerAPI])
+    }, [callingGroupAPI, callingPeerAPI])
 
     useEffect(() => {
         if (editName) inputNameRef.current!.focus({
@@ -74,18 +80,26 @@ const PeerUpdate = () => {
         const gs_name = gs?.map(g => g.name) as string[]
         setPeerGroups(gs)
         setSelectedTagGroups(gs_name)
-        setFormPeer(peer)
-        form.setFieldsValue({
-            name: formPeer.name ? formPeer.name: peer.name,
-            groups: gs_name
-        })
+        const fPeer = {
+            ...peer,
+            name: formPeer.name ? formPeer.name : peer.name,
+            groupsNames: gs_name,
+            userEmail: users?.find(u => u.id === peer.user_id)?.email,
+            last_seen: peer.connected ? "just now" : String(timeAgo(peer.last_seen)),
+            ui_version: peer.ui_version ? peer.ui_version.replace("netbird-desktop-ui/", "") : ""
+        } as FormPeer
+        setFormPeer(fPeer)
+        form.setFieldsValue(fPeer)
     }, [peer])
 
     useEffect(() => {
         setTagGroups(groups?.map(g => g.name) || [])
     }, [groups])
 
-    const toggleEditName = (status:boolean) => {
+    useEffect(() => {
+    }, [users])
+
+    const toggleEditName = (status: boolean) => {
         setEditName(status)
     }
 
@@ -103,7 +117,7 @@ const PeerUpdate = () => {
     }, [selectedTagGroups])
 
     const tagRender = (props: CustomTagProps) => {
-        const { label, value, closable, onClose } = props;
+        const {label, value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
             event.stopPropagation();
@@ -120,7 +134,7 @@ const PeerUpdate = () => {
                 onMouseDown={onPreventMouseDown}
                 closable={tagClosable}
                 onClose={onClose}
-                style={{ marginRight: 3 }}
+                style={{marginRight: 3}}
             >
                 <strong>{value}</strong>
             </Tag>
@@ -130,12 +144,12 @@ const PeerUpdate = () => {
     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'} `
+        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
         return (
             <>
                 <Tag
                     color="blue"
-                    style={{ marginRight: 3 }}
+                    style={{marginRight: 3}}
                 >
                     <strong>{label}</strong>
                 </Tag>
@@ -147,21 +161,23 @@ const PeerUpdate = () => {
     const dropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
-            <Divider style={{ margin: '8px 0' }} />
+            <Divider style={{margin: '8px 0'}}/>
             <Row style={{padding: '0 8px 4px'}}>
                 <Col flex="auto">
                     <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
                 </Col>
                 <Col flex="none">
                     <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z" fill="#9CA3AF"/>
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
                     </svg>
                 </Col>
             </Row>
         </>
     )
 
-    const setUpdateGroupsVisible = (status:boolean) => {
+    const setUpdateGroupsVisible = (status: boolean) => {
         dispatch(peerActions.setUpdateGroupsVisible(status));
     }
 
@@ -170,27 +186,27 @@ const PeerUpdate = () => {
         setUpdateGroupsVisible(false)
         setEditName(false)
         // setSaveBtnDisabled(true)
-        setFormPeer({} as Peer)
+        setFormPeer({} as FormPeer)
         setCallingPeerAPI(false)
         setCallingPeerAPI(false)
         setSubmitRunning(false)
     }
 
-    const noUpdateToGroups = ():Boolean => {
+    const noUpdateToGroups = (): Boolean => {
         return !peerGroupsToSave.groupsToRemove.length && !peerGroupsToSave.groupsToAdd.length && !peerGroupsToSave.groupsNoId.length
     }
 
-    const noUpdateToName = ():Boolean => {
+    const noUpdateToName = (): Boolean => {
         return !formPeer.name || formPeer.name === peer.name
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormPeer({...formPeer, ...data})
     }
 
     const handleChangeTags = (value: string[]) => {
         let validatedValues: string[] = []
-        value.forEach(function(v) {
+        value.forEach(function (v) {
             if (v.trim().length) {
                 validatedValues.push(v)
             }
@@ -198,7 +214,21 @@ const PeerUpdate = () => {
         setSelectedTagGroups(validatedValues)
     };
 
-    const createPeerToSave = ():Peer => {
+    const nameValidator = (_: RuleObject, value: string) => {
+        let punyName = punycode.toASCII(value.toLowerCase())
+        let domain = ""
+        if (formPeer.dns_label) {
+            let labelList = formPeer.dns_label.split(".")
+            if (labelList.length > 1) {
+                labelList.splice(0,1)
+                domain = "." + labelList.join(".")
+            }
+        }
+        setEstimatedName(punyName+domain)
+        return Promise.resolve()
+    }
+
+    const createPeerToSave = (): Peer => {
         return {
             id: formPeer.id,
             ssh_enabled: formPeer.ssh_enabled,
@@ -213,11 +243,17 @@ const PeerUpdate = () => {
                 if (!noUpdateToName()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
-                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently:accessToken, payload: peerUpdate}))
+                    dispatch(peerActions.updatePeer.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: peerUpdate
+                    }))
                 }
                 if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
                     setCallingGroupAPI(true)
-                    dispatch(peerActions.saveGroups.request({getAccessTokenSilently:accessToken, payload: peerGroupsToSave}))
+                    dispatch(peerActions.saveGroups.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: peerGroupsToSave
+                    }))
                 }
             })
             .catch((errorInfo) => {
@@ -233,7 +269,7 @@ const PeerUpdate = () => {
             return Promise.reject(new Error("Please enter ate least one group"))
         }
 
-        value.forEach(function(v: string) {
+        value.forEach(function (v: string) {
             if (!v.trim().length) {
                 hasSpaceNamed.push(v)
             }
@@ -259,25 +295,28 @@ const PeerUpdate = () => {
                 <Drawer
                     forceRender={true}
                     headerStyle={{display: "none"}}
-                    visible={true}
+                    open={true}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     autoFocus={true}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedGroups.loading}>Cancel</Button>
-                            <Button type="primary" disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName())} onClick={handleFormSubmit}>Save</Button>
+                            <Button type="primary"
+                                    disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName())}
+                                    onClick={handleFormSubmit}>Save</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" requiredMark={false} form={form} onValuesChange={onChange}>
                         <Row gutter={16}>
                             <Col span={24}>
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
                                     <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"
@@ -293,46 +332,121 @@ const PeerUpdate = () => {
                                                      onClick={() => toggleEditName(true)}>{formPeer.name ? formPeer.name : peer.name}
                                                     <EditOutlined/></div>
                                             ) : (
-                                                <Form.Item
-                                                    name="name"
-                                                    label="Name"
-                                                    rules={[{
-                                                        required: true,
-                                                        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>)}
+                                                <Row>
+                                                    <Space direction={"vertical"} size="small">
+                                                        <Form.Item
+                                                            name="name"
+                                                            label="Name"
+                                                            style={{margin: '1px'}}
+                                                            rules={[{
+                                                                required: true,
+                                                                message: 'Please add a new name for this peer',
+                                                                whitespace: true
+                                                            },{validator:nameValidator}]}
+                                                        >
+                                                            <Input
+                                                                placeholder={peer.name}
+                                                                ref={inputNameRef}
+                                                                onPressEnter={() => toggleEditName(false)}
+                                                                onBlur={() => toggleEditName(false)}
+                                                                autoComplete="off"
+                                                                max={59}/>
+                                                        </Form.Item>
+                                                    <Form.Item
+                                                        label="New peer domain name preview"
+                                                        tooltip="If the domain name already exists, we add an increment number suffix to it"
+                                                        style={{margin: '1px'}}
+                                                    >
+                                                        <Paragraph>
+                                                            <Tag>
+                                                                {estimatedName}
+                                                            </Tag>
+                                                        </Paragraph>
+                                                        </Form.Item>
+                                                    </Space>
+
+
+                                                </Row>
+                                            )}
                                         </Col>
                                     </Row>
 
                                 </Header>
                             </Col>
                         </Row>
-                            <Row gutter={16}>
-
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <Form.Item
+                                    name="ip"
+                                    label={<>
+                                            <span style={{
+                                                marginRight: "5px",
+                                            }}>NetBird IP</span>
+                                        <Tag
+                                            color={formPeer.connected ? "green" : "red"}>{formPeer.connected ? "online" : "offline"}</Tag>
+                                    </>}
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.ip}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item
+                                    name="last_seen"
+                                    label="Last seen"
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.last_seen}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
                             <Col span={24}>
                                 <Form.Item
-                                    name="groups"
-                                    label="Select groups to associate with this peer"
-                                    rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
+                                    name="dns_label"
+                                    label="Domain name"
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.userEmail}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
+                            {formPeer.user_id && (
+                                <Col span={24}>
+                                    <Form.Item
+                                        name="userEmail"
+                                        label="User"
+                                    >
+                                        <Input
+                                            disabled={true}
+                                            value={formPeer.userEmail}
+                                            style={{color: "#5a5c5a"}}
+                                            autoComplete="off"/>
+                                    </Form.Item>
+                                </Col>
+                            )}
+                            <Col span={24}>
+                                <Form.Item
+                                    name="groupsNames"
+                                    label="Select peer groups"
+                                    rules={[{validator: selectValidator}]}
+
                                 >
                                     <Select
                                         mode="tags"
-                                        style={{ width: '100%' }}
+                                        style={{width: '100%'}}
                                         placeholder="Select groups..."
                                         tagRender={tagRender}
-                                        // onDropdownVisibleChange={evaluateSubmit}
-                                        // onSelect={evaluateSubmit}
 
                                         dropdownRender={dropDownRender}
                                         onChange={handleChangeTags}>
@@ -344,7 +458,7 @@ const PeerUpdate = () => {
                                     </Select>
                                 </Form.Item>
                             </Col>
-                            <Col span={24}>
+                            {/*<Col span={24}>
                                 <Row wrap={false} gutter={12}>
                                     <Col flex="none">
                                         <FlagFilled/>
@@ -355,6 +469,69 @@ const PeerUpdate = () => {
                                         </Paragraph>
                                     </Col>
                                 </Row>
+                            </Col>*/}
+                            {/*<Col span={24}>
+                                <Divider orientation="left" plain style={{color: "#5a5c5a"}}>
+                                    System Info
+                                </Divider>
+                            </Col>*/}
+                            <Col span={24}>
+                                <Collapse onChange={onChange} bordered={false} ghost={true}
+                                          style={{color: "#5a5c5a"}}>
+                                    <Panel key="0" header="System Info">
+                                        <Row gutter={16}>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="hostname"
+                                                    label="Hostname"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.hostname}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="os"
+                                                    label="Operating system"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.os}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="version"
+                                                    label="Agent version"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.os}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            {formPeer.ui_version && (
+                                                <Col span={12}>
+                                                <Form.Item
+                                                    name="ui_version"
+                                                    label="UI version"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.ui_version}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>)}
+                                        </Row>
+                                    </Panel>
+                                </Collapse>
                             </Col>
                         </Row>
                     </Form>

src/components/RouteUpdate.tsx

@@ -1,46 +1,63 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import { actions as routeActions } from '../store/route';
+import {actions as routeActions} from '../store/route';
 import {
+    Button,
     Col,
-    Row,
+    Divider,
+    Drawer,
+    Form,
     Input,
     InputNumber,
+    Radio,
+    Row,
+    Select,
+    SelectProps,
     Space,
     Switch,
-    SelectProps,
-    Button, Drawer, Form, Divider, Select, Radio, Typography
+    Typography
 } from "antd";
 import {CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
-import {Route} from "../store/route/types";
+import {Route, RouteToSave} from "../store/route/types";
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
 import cidrRegex from 'cidr-regex';
 import {
+    initPeerMaps,
     masqueradeDisabledMSG,
     peerToPeerIP,
-    initPeerMaps,
     routePeerSeparator,
     transformGroupedDataTable
 } from '../utils/routes'
+import {useGetAccessTokenSilently} from "../utils/token";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
-const { Paragraph } = Typography;
+const {Paragraph} = Typography;
 
 interface FormRoute extends Route {
 }
 
 const RouteUpdate = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {
+        tagRender,
+        handleChangeTags,
+        dropDownRender,
+        optionRender,
+        tagGroups,
+        getExistingAndToCreateGroupsLists,
+        getGroupNamesFromIDs,
+        selectValidator
+    } = useGetGroupTagHelpers()
+    const {Option} = Select;
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewRouteVisible = useSelector((state: RootState) => state.route.setupNewRouteVisible)
     const setupNewRouteHA = useSelector((state: RootState) => state.route.setupNewRouteHA)
-    const peers =  useSelector((state: RootState) => state.peer.data)
-    const route =  useSelector((state: RootState) => state.route.route)
-    const routes =  useSelector((state: RootState) => state.route.data)
+    const peers = useSelector((state: RootState) => state.peer.data)
+    const route = useSelector((state: RootState) => state.route.route)
+    const routes = useSelector((state: RootState) => state.route.data)
     const savedRoute = useSelector((state: RootState) => state.route.savedRoute)
-    // const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
     const [previousRouteKey, setPreviousRouteKey] = useState("")
     const [editName, setEditName] = useState(false)
     const [editDescription, setEditDescription] = useState(false)
@@ -57,11 +74,12 @@ const RouteUpdate = () => {
     const defaultStatusMSG = "Status"
     const [statusMSG, setStatusMSG] = useState(defaultStatusMSG)
     const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
+    const [newRoute, setNewRoute] = useState(false)
 
     const optionsDisabledEnabled = [{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]
 
     useEffect(() => {
-        if (setupNewRouteHA) {
+        if (!newRoute ) {
             setRoutingPeerMSG("Add additional routing peer")
             setMasqueradeMSG("Update Masquerade")
             setStatusMSG("Update Status")
@@ -71,7 +89,7 @@ const RouteUpdate = () => {
             setStatusMSG(defaultStatusMSG)
             setPreviousRouteKey("")
         }
-    }, [setupNewRouteHA])
+    }, [newRoute])
 
     useEffect(() => {
         if (editName) inputNameRef.current!.focus({
@@ -90,33 +108,41 @@ const RouteUpdate = () => {
 
         const fRoute = {
             ...route,
+            groups: getGroupNamesFromIDs(route.groups)
         } as FormRoute
         setFormRoute(fRoute)
-        setPreviousRouteKey(fRoute.network_id+fRoute.network)
+        setPreviousRouteKey(fRoute.network_id + fRoute.network)
+        if (!route.network_id) {
+            setNewRoute(true)
+        } else {
+            setNewRoute(false)
+        }
         form.setFieldsValue(fRoute)
     }, [route])
 
     peers.forEach((p) => {
-        let os:string
+        let os: string
         os = p.os
         if (!os.toLowerCase().startsWith("darwin") && !os.toLowerCase().startsWith("windows")) {
             options?.push({
-                label: peerToPeerIP(p.name,p.ip),
-                value: peerToPeerIP(p.name,p.ip),
+                label: peerToPeerIP(p.name, p.ip),
+                value: peerToPeerIP(p.name, p.ip),
                 disabled: false
             })
         }
     })
 
-    const createRouteToSave = (inputRoute:FormRoute):Route => {
+    const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
         let peerIDList = inputRoute.peer.split(routePeerSeparator)
-        let peerID:string
+        let peerID: string
         if (peerIDList[1]) {
             peerID = peerIDList[1]
         } else {
             peerID = peerNameToIP[inputRoute.peer]
         }
 
+        let [ existingGroups, groupsToCreate ] = getExistingAndToCreateGroupsLists(inputRoute.groups)
+
         return {
             id: inputRoute.id,
             network: inputRoute.network,
@@ -125,8 +151,10 @@ const RouteUpdate = () => {
             peer: peerID,
             enabled: inputRoute.enabled,
             masquerade: inputRoute.masquerade,
-            metric: inputRoute.metric
-        } as Route
+            metric: inputRoute.metric,
+            groups: existingGroups,
+            groupsToCreate: groupsToCreate,
+        } as RouteToSave
     }
 
     const handleFormSubmit = () => {
@@ -134,13 +162,16 @@ const RouteUpdate = () => {
             .then(() => {
                 if (!setupNewRouteHA || formRoute.peer != '') {
                     const routeToSave = createRouteToSave(formRoute)
-                    dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                    dispatch(routeActions.saveRoute.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: routeToSave
+                    }))
                 } else {
-                    let groupedDataTable = transformGroupedDataTable(routes,peerIPToName)
+                    let groupedDataTable = transformGroupedDataTable(routes, peerIPToName)
                     groupedDataTable.forEach((group) => {
                         if (group.key == previousRouteKey) {
                             group.groupedRoutes.forEach((route) => {
-                                let updateRoute:FormRoute = {
+                                let updateRoute: FormRoute = {
                                     ...formRoute,
                                     id: route.id,
                                     peer: route.peer,
@@ -148,7 +179,10 @@ const RouteUpdate = () => {
                                     enabled: (formRoute.enabled != group.enabled) ? formRoute.enabled : route.enabled
                                 }
                                 const routeToSave = createRouteToSave(updateRoute)
-                                dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                                dispatch(routeActions.saveRoute.request({
+                                    getAccessTokenSilently: getAccessTokenSilently,
+                                    payload: routeToSave
+                                }))
                             })
                         }
                     })
@@ -160,11 +194,11 @@ const RouteUpdate = () => {
             });
     };
 
-    const setVisibleNewRoute = (status:boolean) => {
+    const setVisibleNewRoute = (status: boolean) => {
         dispatch(routeActions.setSetupNewRouteVisible(status));
     }
 
-    const setSetupNewRouteHA = (status:boolean) => {
+    const setSetupNewRouteHA = (status: boolean) => {
         dispatch(routeActions.setSetupNewRouteHA(status));
     }
 
@@ -183,23 +217,24 @@ const RouteUpdate = () => {
         setVisibleNewRoute(false)
         setSetupNewRouteHA(false)
         setPreviousRouteKey("")
+        setNewRoute(false)
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormRoute({...formRoute, ...data})
     }
 
-    const dropDownRender = (menu: React.ReactElement) => (
+    const peerDropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
         </>
     )
 
-    const toggleEditName = (status:boolean) => {
+    const toggleEditName = (status: boolean) => {
         setEditName(status);
     }
 
-    const toggleEditDescription = (status:boolean) => {
+    const toggleEditDescription = (status: boolean) => {
         setEditDescription(status);
     }
 
@@ -215,61 +250,96 @@ const RouteUpdate = () => {
         return Promise.resolve()
     }
 
+    const peerValidator = (_: RuleObject, value: string) => {
+
+        if (value == "" && newRoute) {
+            return Promise.reject(new Error("Please select routing one peer"))
+        }
+
+        return Promise.resolve()
+    }
+
+    const selectPreValidator = (obj: RuleObject, value: string[]) => {
+       if (setupNewRouteHA && formRoute.peer == '') {
+           let [, newGroups ] = getExistingAndToCreateGroupsLists(value)
+           if (newGroups.length > 0) {
+               return Promise.reject(new Error("You can't add new Groups from the group update view, please remove:\"" + newGroups +"\""))
+           }
+       }
+       return selectValidator(obj, value)
+    }
+
     return (
         <>
             {route &&
                 <Drawer
                     headerStyle={{display: "none"}}
                     forceRender={true}
-                    visible={setupNewRouteVisible}
+                    open={setupNewRouteVisible}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     autoFocus={true}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedRoute.loading}>Cancel</Button>
-                            <Button type="primary" disabled={savedRoute.loading} onClick={handleFormSubmit}>{`${formRoute.network_id ? 'Save' : 'Create'}`}</Button>
+                            <Button type="primary" disabled={savedRoute.loading}
+                                    onClick={handleFormSubmit}>{`${newRoute ? 'Create' : 'Save'}`}</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" form={form} requiredMark={false} onValuesChange={onChange}>
                         <Row gutter={16}>
                             <Col span={24}>
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
                                     <Row align="top">
                                         <Col flex="none" style={{display: "flex"}}>
-                                            {!editName && !editDescription && formRoute.id  &&
+                                            {!editName && !editDescription && formRoute.id &&
                                                 <button type="button" aria-label="Close" className="ant-drawer-close"
                                                         style={{paddingTop: 3}}
                                                         onClick={onCancel}>
-                                                    <span role="img" aria-label="close" className="anticon anticon-close">
+                                                    <span role="img" aria-label="close"
+                                                          className="anticon anticon-close">
                                                         <CloseOutlined size={16}/>
                                                     </span>
                                                 </button>
                                             }
                                         </Col>
                                         <Col flex="auto">
-                                            { !editName && formRoute.id ? (
-                                                <div className={"access-control input-text ant-drawer-title"} onClick={() => toggleEditName(true)}>{formRoute.id ? formRoute.network_id : 'New Route'}</div>
+                                            {!editName && formRoute.id ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formRoute.id ? formRoute.network_id : 'New Route'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="network_id"
                                                     label="Network Identifier"
                                                     tooltip="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes"
-                                                    rules={[{required: true, message: 'Please add an identifier for this access route', whitespace: true}]}
+                                                    rules={[{
+                                                        required: true,
+                                                        message: 'Please add an identifier for this access route',
+                                                        whitespace: true
+                                                    }]}
                                                 >
-                                                    <Input placeholder="e.g. aws-eu-central-1-vpc" ref={inputNameRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditName(false)} onBlur={() => toggleEditName(false)} autoComplete="off" maxLength={40}/>
+                                                    <Input placeholder="e.g. aws-eu-central-1-vpc" ref={inputNameRef}
+                                                           disabled={!setupNewRouteHA && !newRoute}
+                                                           onPressEnter={() => toggleEditName(false)}
+                                                           onBlur={() => toggleEditName(false)} autoComplete="off"
+                                                           maxLength={40}/>
                                                 </Form.Item>
                                             )}
-                                            { !editDescription ? (
-                                                <div className={"access-control input-text ant-drawer-subtitle"} onClick={() => toggleEditDescription(true)}>{formRoute.description && formRoute.description.trim() !== "" ? formRoute.description : 'Add description...'}</div>
+                                            {!editDescription ? (
+                                                <div className={"access-control input-text ant-drawer-subtitle"}
+                                                     onClick={() => toggleEditDescription(true)}>{formRoute.description && formRoute.description.trim() !== "" ? formRoute.description : 'Add description...'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="description"
                                                     label="Description"
                                                     style={{marginTop: 24}}
                                                 >
-                                                    <Input placeholder="Add description..." ref={inputDescriptionRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditDescription(false)} onBlur={() => toggleEditDescription(false)} autoComplete="off" maxLength={200}/>
+                                                    <Input placeholder="Add description..." ref={inputDescriptionRef}
+                                                           disabled={!setupNewRouteHA && !newRoute}
+                                                           onPressEnter={() => toggleEditDescription(false)}
+                                                           onBlur={() => toggleEditDescription(false)}
+                                                           autoComplete="off" maxLength={200}/>
                                                 </Form.Item>
                                             )}
 
@@ -293,7 +363,8 @@ const RouteUpdate = () => {
                                     tooltip="Use CIDR notation. e.g. 192.168.10.0/24 or 172.16.0.0/16"
                                     rules={[{validator: networkRangeValidator}]}
                                 >
-                                    <Input placeholder="e.g. 172.16.0.0/16" disabled={!setupNewRouteHA} autoComplete="off" minLength={9} maxLength={43}/>
+                                    <Input placeholder="e.g. 172.16.0.0/16" disabled={!setupNewRouteHA && !newRoute}
+                                           autoComplete="off" minLength={9} maxLength={43}/>
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
@@ -314,14 +385,15 @@ const RouteUpdate = () => {
                                     name="peer"
                                     label={routingPeerMSG}
                                     tooltip="Assign a peer as a routing peer for the Network CIDR"
+                                    rules={[{validator:peerValidator}]}
                                 >
                                     <Select
-                                            showSearch
-                                            style={{ width: '100%' }}
-                                            placeholder="Select Peer"
-                                            dropdownRender={dropDownRender}
-                                            options={options}
-                                            allowClear={true}
+                                        showSearch
+                                        style={{width: '100%'}}
+                                        placeholder="Select Peer"
+                                        dropdownRender={peerDropDownRender}
+                                        options={options}
+                                        allowClear={true}
                                     />
                                 </Form.Item>
                             </Col>
@@ -331,7 +403,7 @@ const RouteUpdate = () => {
                                     label={masqueradeMSG}
                                     tooltip={masqueradeDisabledMSG}
                                 >
-                                    <Switch size={"small"} disabled={!setupNewRouteHA} checked={formRoute.masquerade}/>
+                                    <Switch size={"small"} disabled={!setupNewRouteHA && !newRoute} checked={formRoute.masquerade}/>
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
@@ -343,6 +415,28 @@ const RouteUpdate = () => {
                                     <InputNumber min={1} max={9999} autoComplete="off"/>
                                 </Form.Item>
                             </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="groups"
+                                    label="Distribution groups"
+                                    tooltip="NetBird will advertise this route to peers that belong to the following groups"
+                                    rules={[{validator: selectPreValidator}]}
+                                >
+                                    <Select mode="tags"
+                                            style={{width: '100%'}}
+                                            placeholder="Associate groups with the network route"
+                                            tagRender={tagRender}
+                                            onChange={handleChangeTags}
+                                            dropdownRender={dropDownRender}
+                                    >
+                                        {
+                                            tagGroups.map(m =>
+                                                <Option key={m}>{optionRender(m)}</Option>
+                                            )
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </Col>
                             <Col span={24}>
                                 <Row wrap={false} gutter={12}>
                                     <Col flex="none">
@@ -350,7 +444,8 @@ const RouteUpdate = () => {
                                     </Col>
                                     <Col flex="auto">
                                         <Paragraph>
-                                            You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes.
+                                            You can enable high-availability by assigning the same network identifier
+                                            and network CIDR to multiple routes.
                                         </Paragraph>
                                     </Col>
                                 </Row>
@@ -358,7 +453,8 @@ const RouteUpdate = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://netbird.io/docs/how-to-guides/network-routes" style={{color: 'rgb(07, 114, 128)'}}>Learn
+                                        href="https://netbird.io/docs/how-to-guides/network-routes"
+                                        style={{color: 'rgb(07, 114, 128)'}}>Learn
                                     more about network routes</Button>
                             </Col>
                         </Row>

src/components/SetupKeyNew.tsx

@@ -10,6 +10,7 @@ import {
     Drawer,
     Form,
     Input,
+    InputNumber,
     List,
     Radio,
     Row,
@@ -20,18 +21,21 @@ import {
 } from "antd";
 import {RootState} from "typesafe-actions";
 import {CloseOutlined, EditOutlined, QuestionCircleFilled} from "@ant-design/icons";
-import {SetupKey, SetupKeyToSave} from "../store/setup-key/types";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
+import {FormSetupKey, SetupKey, SetupKeyToSave} from "../store/setup-key/types";
 import {Header} from "antd/es/layout/layout";
 import {formatDate, timeAgo} from "../utils/common";
 import {RuleObject} from "antd/lib/form";
 import {CustomTagProps} from "rc-select/lib/BaseSelect";
 import {Group} from "../store/group/types";
+import {useGetAccessTokenSilently} from "../utils/token";
+import ExpiresInInput, {ExpiresInValue} from "../views/ExpiresInInput";
 
 const {Option} = Select;
 
 const {Text} = Typography;
 
+const ExpiresInDefault: ExpiresInValue = {number: 30, interval: "Days"}
+
 const customExpiresFormat: DatePickerProps['format'] = value => {
     return formatDate(value)
 }
@@ -47,12 +51,8 @@ const customLastUsedFormat: DatePickerProps['format'] = value => {
     return ago
 }
 
-interface FormSetupKey extends SetupKey {
-    autoGroupNames: string[]
-}
-
 const SetupKeyNew = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
     const setupKey = useSelector((state: RootState) => state.setupKey.setupKey)
@@ -84,7 +84,7 @@ const SetupKeyNew = () => {
             allGroups.set(g.id!, g)
         })
 
-        let formKeyGroups :string[] = []
+        let formKeyGroups: string[] = []
 
         if (setupKey.auto_groups) {
             formKeyGroups = setupKey.auto_groups.filter(g => allGroups.get(g)).map(g => allGroups.get(g)!.name)
@@ -93,6 +93,7 @@ const SetupKeyNew = () => {
         const fSetupKey = {
             ...setupKey,
             autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
+            expiresInFormatted: ExpiresInDefault
         } as FormSetupKey
         setFormSetupKey(fSetupKey)
         form.setFieldsValue(fSetupKey)
@@ -101,23 +102,53 @@ const SetupKeyNew = () => {
     const createSetupKeyToSave = (): SetupKeyToSave => {
         const autoGroups = groups?.filter(g => formSetupKey.autoGroupNames.includes(g.name)).map(g => g.id || '') || []
         // find groups that do not yet exist (newly added by the user)
-        const allGroupsNames : string[] = groups?.map(g => g.name);
+        const allGroupsNames: string[] = groups?.map(g => g.name);
         const groupsToCreate = formSetupKey.autoGroupNames.filter(s => !allGroupsNames.includes(s))
+
+        let expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted)
         return {
             id: formSetupKey.id,
             name: formSetupKey.name,
             type: formSetupKey.type,
             auto_groups: autoGroups,
             revoked: formSetupKey.revoked,
-            groupsToCreate: groupsToCreate
+            groupsToCreate: groupsToCreate,
+            expires_in: expiresIn,
+            usage_limit: formSetupKey.usage_limit
         } as SetupKeyToSave
     }
+    const expiresInToSeconds = (expiresIn: ExpiresInValue): number => {
+        if (!expiresIn.number || !expiresIn.interval) {
+            return 0
+        }
+        let multiplier = 0
+        switch (expiresIn.interval.toLowerCase()) {
+            case "day":
+                multiplier = 24 * 3600
+                break
+            case "week":
+                multiplier = 7 * 24 * 3600
+                break
+            case "month":
+                multiplier = 30 * 24 * 3600
+                break
+            case "year":
+                multiplier = 365 * 24 * 3600
+                break
+            default:
+                multiplier = 0
+        }
+
+        return expiresIn.number * multiplier
+
+    }
+
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
                 let setupKeyToSave = createSetupKeyToSave()
                 dispatch(setupKeyActions.saveSetupKey.request({
-                    getAccessTokenSilently: accessToken,
+                    getAccessTokenSilently: getAccessTokenSilently,
                     payload: setupKeyToSave
                 }))
             })
@@ -134,12 +165,15 @@ const SetupKeyNew = () => {
         if (savedSetupKey.loading) return
         dispatch(setupKeyActions.setSetupKey({
             name: "",
-            type: "reusable",
+            type: "one-off",
             key: "",
             last_used: "",
             expires: "",
             state: "valid",
-            auto_groups: new Array()
+            auto_groups: new Array(),
+            usage_limit: 0,
+            used_times: 0,
+            expires_in: 0
         } as SetupKey))
         setFormSetupKey({} as FormSetupKey)
         setVisibleNewSetupKey(false)
@@ -242,24 +276,49 @@ const SetupKeyNew = () => {
         </>
     )
 
+    const changesDetected = (): boolean => {
+        return formSetupKey.name == null || formSetupKey.name !== setupKey.name || groupsChanged()
+            || formSetupKey.usage_limit !== setupKey.usage_limit
+    }
+
+    const groupsChanged = (): boolean => {
+        if (formSetupKey.autoGroupNames.length != setupKey.auto_groups.length) {
+            return true
+        }
+        const formGroupIds = groups?.filter(g => formSetupKey.autoGroupNames.includes(g.name)).map(g => g.id || '') || []
+
+        return setupKey.auto_groups?.filter(g => !formGroupIds.includes(g)).length > 0
+    }
+
+    const checkExpiresIn = (_: any, value: { number: number }) => {
+        if (value.number > 0) {
+            return Promise.resolve();
+        }
+        return Promise.reject(new Error("Expiration must be greater than zero"));
+    };
+
     return (
         <>
             {setupKey &&
                 <Drawer
                     forceRender={true}
                     headerStyle={{display: "none"}}
-                    visible={setupNewKeyVisible}
+                    open={setupNewKeyVisible}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button disabled={savedSetupKey.loading} onClick={onCancel}>Cancel</Button>
-                            <Button type="primary" disabled={savedSetupKey.loading}
+                            <Button type="primary" disabled={savedSetupKey.loading || !changesDetected()}
                                     onClick={handleFormSubmit}>{`${formSetupKey.id ? 'Save' : 'Create'}`}</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}
+                          initialValues={{
+                              expiresInFormatted: ExpiresInDefault,
+                          }}
+                    >
                         <Row gutter={16}>
                             <Col span={24}>
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
@@ -290,7 +349,6 @@ const SetupKeyNew = () => {
                                                         message: 'Please add a new name for this peer',
                                                         whitespace: true
                                                     }]}
-                                                    style={{display: 'flex'}}
                                                 >
                                                     <Input
                                                         placeholder={setupKey.name}
@@ -317,6 +375,7 @@ const SetupKeyNew = () => {
                                     >
                                         <Input
                                             disabled={true}
+                                            style={{color: "#5a5c5a"}}
                                             autoComplete="off"/>
                                     </Form.Item>
                                 </Col>
@@ -329,7 +388,8 @@ const SetupKeyNew = () => {
                                         label="Expires"
                                         tooltip="The expiration date of the key"
                                     >
-                                        <DatePicker disabled={true} style={{width: '100%'}}
+                                        <DatePicker disabled={true}
+                                                    style={{width: "100%", color: "#5a5c5a"}}
                                                     format={customExpiresFormat}/>
                                     </Form.Item>
                                 </Col>
@@ -341,7 +401,8 @@ const SetupKeyNew = () => {
                                         label="Last Used"
                                         tooltip="The last time the key was used"
                                     >
-                                        <DatePicker disabled={true} style={{width: '100%'}}
+                                        <DatePicker disabled={true}
+                                                    style={{width: "100%", color: "#5a5c5a"}}
                                                     format={customLastUsedFormat}/>
                                     </Form.Item>
                                 </Col>
@@ -351,7 +412,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}}>
@@ -359,6 +419,14 @@ const SetupKeyNew = () => {
                                                 size="large"
                                                 bordered
                                             >
+                                                <List.Item>
+                                                    <Radio value={"one-off"}>
+                                                        <Space direction="vertical" size="small">
+                                                            <Text strong>One-off</Text>
+                                                            <Text>This key can be used only once</Text>
+                                                        </Space>
+                                                    </Radio>
+                                                </List.Item>
                                                 <List.Item>
                                                     <Radio value={"reusable"}>
                                                         <Space direction="vertical" size="small">
@@ -368,14 +436,6 @@ const SetupKeyNew = () => {
                                                         </Space>
                                                     </Radio>
                                                 </List.Item>
-                                                <List.Item>
-                                                    <Radio value={"one-off"}>
-                                                        <Space direction="vertical" size="small">
-                                                            <Text strong>One-off</Text>
-                                                            <Text>This key can be used only once</Text>
-                                                        </Space>
-                                                    </Radio>
-                                                </List.Item>
                                             </List>
 
                                         </Space>
@@ -383,6 +443,32 @@ const SetupKeyNew = () => {
 
                                 </Form.Item>
                             </Col>
+                            {!setupKey.id &&
+                                <Col span={24}>
+                                    <Form.Item name="expiresInFormatted" label="Expires In"
+                                               rules={[{validator: checkExpiresIn}]}>
+                                        <ExpiresInInput/>
+                                    </Form.Item>
+                                </Col>}
+                            <Col span={12}>
+                                <Form.Item name="usage_limit"
+                                           label="Usage Limit"
+                                           tooltip="Limit the number of times this key can be used. Use 0 for unlimited use."
+                                >
+                                    <InputNumber min={0} defaultValue={0} disabled={setupKey.id || formSetupKey.type !== "reusable"}
+                                                 style={{width: "100%"}}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item name="used_times"
+                                           label="Used Times"
+                                >
+                                    <InputNumber min={0} defaultValue={0} disabled={true}
+                                                 style={{width: "100%"}}
+                                    />
+                                </Form.Item>
+                            </Col>
                             <Col span={24}>
                                 <Form.Item
                                     name="autoGroupNames"
@@ -396,7 +482,7 @@ const SetupKeyNew = () => {
                                             tagRender={tagRender}
                                             onChange={handleChangeTags}
                                             dropdownRender={dropDownRender}
-                                            // enabled only when we have a new key !setupkey.id or when the key is valid
+                                        // enabled only when we have a new key !setupkey.id or when the key is valid
                                             disabled={!(!setupKey.id || setupKey.valid)}
                                     >
                                         {

src/components/UserUpdate.tsx

@@ -0,0 +1,413 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {Alert, Button, Col, Divider, Drawer, Form, Input, Modal, Row, Select, Space, Tag, Typography} from "antd";
+import {RootState} from "typesafe-actions";
+import {CloseOutlined, EditOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
+import {Header} from "antd/es/layout/layout";
+import {Group} from "../store/group/types";
+import {FormUser, User, UserToSave} from "../store/user/types";
+import {RuleObject} from "antd/lib/form";
+import {CustomTagProps} from "rc-select/lib/BaseSelect";
+import {actions as userActions} from "../store/user";
+import {useGetAccessTokenSilently} from "../utils/token";
+import {useOidcUser} from "@axa-fr/react-oidc";
+
+const {Paragraph, Text} = Typography;
+
+const {confirm} = Modal;
+
+const {Option} = Select;
+
+const UserUpdate = () => {
+    const {oidcUser} = useOidcUser();
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
+    const user = useSelector((state: RootState) => state.user.user)
+    const savedUser = useSelector((state: RootState) => state.user.savedUser)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const users = useSelector((state: RootState) => state.user.data)
+    const updateUserDrawerVisible = useSelector((state: RootState) => state.user.updateUserDrawerVisible)
+    const [selectedTagGroups, setSelectedTagGroups] = useState([] as string[])
+    const [tagGroups, setTagGroups] = useState([] as string[])
+    const [editName, setEditName] = useState(false)
+    const inputNameRef = useRef<any>(null)
+
+    const [formUser, setFormUser] = useState({} as FormUser)
+    const [currentUser, setCurrentUser] = useState({} as User)
+    const [form] = Form.useForm()
+
+    useEffect(() => {
+        if (editName) inputNameRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editName]);
+
+    const toggleEditName = (status: boolean) => {
+        setEditName(status);
+    }
+
+    useEffect(() => {
+        setTagGroups(groups?.filter(g => g.name != "All").map(g => g.name) || [])
+    }, [groups])
+    useEffect(() => {
+        if (oidcUser && oidcUser.sub) {
+            const found = users.find(u => u.id == oidcUser.sub)
+            if (found) {
+                setCurrentUser(found)
+            }
+        } else {
+            setCurrentUser({} as User)
+        }
+
+    }, [oidcUser, users])
+
+    useEffect(() => {
+        if (!user) return
+
+        let allGroups = new Map<string, Group>();
+        groups.forEach(g => {
+            allGroups.set(g.id!, g)
+        })
+
+        if (!user.auto_groups) {
+            user.auto_groups = []
+        }
+        let formKeyGroups = user.auto_groups.filter(g => allGroups.get(g)).map(g => allGroups.get(g)!.name)
+
+        const fUser = {
+            ...user,
+            autoGroupsNames: user.auto_groups ? formKeyGroups : [],
+        } as FormUser
+        setFormUser(fUser)
+        form.setFieldsValue(fUser)
+    }, [user])
+
+    const selectValidator = (_: RuleObject, value: string[]) => {
+        let hasSpaceNamed = []
+
+        value.forEach(function (v: string) {
+            if (!v.trim().length) {
+                hasSpaceNamed.push(v)
+            }
+        })
+
+        if (hasSpaceNamed.length) {
+            return Promise.reject(new Error("Group names with just spaces are not allowed"))
+        }
+
+        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 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}
+            <Divider style={{margin: '8px 0'}}/>
+            <Row style={{padding: '0 8px 4px'}}>
+                <Col flex="auto">
+                    <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
+                </Col>
+                <Col flex="none">
+                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
+                    </svg>
+                </Col>
+            </Row>
+        </>
+    )
+
+    const handleChangeTags = (value: string[]) => {
+        let validatedValues: string[] = []
+        value.forEach(function (v) {
+            if (v.trim().length) {
+                validatedValues.push(v)
+            }
+        })
+        setSelectedTagGroups(validatedValues)
+    };
+
+    const createUserToSave = (): UserToSave => {
+        const autoGroups = groups?.filter(g => formUser.autoGroupsNames.includes(g.name)).map(g => g.id || '') || []
+        // find groups that do not yet exist (newly added by the user)
+        const allGroupsNames: string[] = groups?.map(g => g.name);
+        const groupsToCreate = formUser.autoGroupsNames.filter(s => !allGroupsNames.includes(s))
+        return {
+            id: formUser.id,
+            email: formUser.email,
+            role: formUser.role,
+            name: formUser.name,
+            groupsToCreate: groupsToCreate,
+            auto_groups: autoGroups,
+        } as UserToSave
+    }
+
+    const showConfirmChangeRole = (userToSave: UserToSave) => {
+        let content = <Paragraph>With this action, you will remove the administrative privileges of your user.
+            Your user will be limited to read-only operations in this account. Are you sure?</Paragraph>
+        let contentModule = <div>{content}</div>
+
+        let name = formUser ? formUser.email : ''
+        confirm({
+            icon: <ExclamationCircleOutlined/>,
+            title: "Update user \"" + name + "\"",
+            width: 600,
+            content: contentModule,
+            okType: 'danger',
+            onOk() {
+                dispatch(userActions.saveUser.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: userToSave
+                }))
+            },
+            onCancel() {
+            },
+        });
+    }
+
+    // check if currentUser (who is doing the modification) removes the administrative privileges from themselves
+    const isShowConfirmWarning = (userToSave: UserToSave): boolean => {
+        return currentUser.id == userToSave.id && currentUser.role === "admin" && userToSave.role !== "admin"
+    }
+
+    const handleFormSubmit = () => {
+        form.validateFields()
+            .then((values) => {
+                let userToSave = createUserToSave()
+                if (isShowConfirmWarning(userToSave)) {
+                    showConfirmChangeRole(userToSave)
+                } else {
+                    dispatch(userActions.saveUser.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: userToSave
+                    }))
+                }
+            })
+            .catch((errorInfo) => {
+                console.log('errorInfo', errorInfo)
+            });
+    };
+
+    const onCancel = () => {
+        if (savedUser.loading) return
+        dispatch(userActions.setUser({
+            id: "",
+            email: "",
+            role: "",
+            status: "",
+            auto_groups: [],
+            name: user.name
+        } as User));
+        setFormUser({} as FormUser)
+        toggleEditName(false)
+        dispatch(userActions.setUpdateUserDrawerVisible(false));
+    }
+
+    const onChange = (data: any) => {
+        setFormUser({...formUser, ...data})
+    }
+
+    const changesDetected = (): boolean => {
+        return emailChanged() || nameChanged() || groupsChanged() || roleChanged()
+    }
+
+    const emailChanged = (): boolean => {
+        return formUser.email !== user.email
+    }
+
+    const roleChanged = (): boolean => {
+        return formUser.role !== user.role
+    }
+
+    const nameChanged = (): boolean => {
+        return formUser.name !== user.name
+    }
+
+    const groupsChanged = (): boolean => {
+        if (!formUser.autoGroupsNames) {
+            return false
+        }
+        if (formUser.autoGroupsNames.length != user.auto_groups.length) {
+            return true
+        }
+        const formGroupIds = groups?.filter(g => formUser.autoGroupsNames.includes(g.name)).map(g => g.id || '') || []
+
+        return user.auto_groups?.filter(g => !formGroupIds.includes(g)).length > 0
+    }
+
+    return (
+        <>
+            {user &&
+                <Drawer
+                    forceRender={true}
+                    headerStyle={{display: "none"}}
+                    open={updateUserDrawerVisible}
+                    bodyStyle={{paddingBottom: 80}}
+                    onClose={onCancel}
+                    footer={
+                        <Space style={{display: 'flex', justifyContent: 'end'}}>
+                            <Button disabled={savedUser.loading} onClick={onCancel}>Cancel</Button>
+                            <Button type="primary" disabled={savedUser.loading || !changesDetected()}
+                                    onClick={handleFormSubmit}>{`${formUser.id ? 'Save' : 'Invite'}`}</Button>
+                        </Space>
+                    }
+                >
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}
+                          initialValues={{
+                              ["role"]: formUser.role
+                          }}
+                    >
+                        <Row gutter={16}>
+                            <Col span={24}>
+                                <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
+                                    <Row align="top">
+                                        {/*Close Icon*/}
+                                        <Col flex="none" style={{display: "flex"}}>
+                                            {!editName && user.id &&
+                                                <button type="button" aria-label="Close" className="ant-drawer-close"
+                                                        style={{paddingTop: 3}}
+                                                        onClick={onCancel}>
+                                                    <span role="img" aria-label="close"
+                                                          className="anticon anticon-close">
+                                                        <CloseOutlined size={16}/>
+                                                    </span>
+                                                </button>
+                                            }
+                                        </Col>
+                                        {/* Name Label*/}
+                                        <Col flex="auto">
+                                            {!editName && user.id && formUser.name !== "" ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formUser.name ? formUser.name : formUser.name}
+                                                    <EditOutlined/></div>
+                                            ) : (
+                                                <Form.Item
+                                                    name="name"
+                                                    label="Name"
+                                                    rules={[{
+                                                        required: false,
+                                                        message: 'Please add a new name for this user',
+                                                        whitespace: true
+                                                    }]}
+                                                >
+                                                    <Input
+                                                        placeholder={formUser.name}
+                                                        ref={inputNameRef}
+                                                        onPressEnter={() => toggleEditName(false)}
+                                                        onBlur={() => toggleEditName(false)}
+                                                        autoComplete="off"/>
+                                                </Form.Item>)}
+                                        </Col>
+                                    </Row>
+                                </Header>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="email"
+                                    label="Email"
+                                >
+                                    <Input
+                                        disabled={user.id}
+                                        value={formUser.email}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="role"
+                                    label="Role"
+                                >
+                                    <Select
+                                        style={{width: '100%'}}
+                                        disabled={currentUser.role != null && currentUser.role !== "admin"}>
+                                        <Option value="admin">admin</Option>
+                                        <Option value="user">user</Option>
+                                    </Select>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="autoGroupsNames"
+                                    label="Auto-assigned groups"
+                                    tooltip="Every peer enrolled with this user will be automatically added to these groups"
+                                    rules={[{validator: selectValidator}]}
+                                >
+                                    <Select mode="tags"
+                                            style={{width: '100%'}}
+                                            placeholder="Associate groups with the user"
+                                            tagRender={tagRender}
+                                            onChange={handleChangeTags}
+                                            disabled={currentUser.role != null && currentUser.role !== "admin"}
+                                            dropdownRender={dropDownRender}
+                                    >
+                                        {
+                                            tagGroups.map(m =>
+                                                <Option key={m}>{optionRender(m)}</Option>
+                                            )
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Divider></Divider>
+                            </Col>
+                            {currentUser && currentUser.role !== "admin" && (
+                                <div>
+                                    <Col span={24}>
+                                        <Alert
+                                            message={<div style={{color: "#5a5c5a"}}>
+                                                You are not an administrator, therefore you can't update users.</div>}
+                                            showIcon={false}
+                                            type="warning"/>
+                                    </Col>
+                                    <br></br>
+                                </div>
+                            )}
+                        </Row>
+                    </Form>
+
+                </Drawer>
+            }
+        </>
+    )
+}
+
+export default UserUpdate

src/components/addpeer/MacTab.tsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import { Button } from "antd";
 import TabSteps from "./TabSteps";
 import { StepCommand } from "./types"
+import { formatNetBirdUP } from "./common"
 
 export const LinuxTab = () => {
 
@@ -30,9 +31,7 @@ export const LinuxTab = () => {
         {
             key: 3,
             title: 'Run NetBird and log in the browser:',
-            commands: [
-                `sudo netbird up`
-            ].join('\n'),
+            commands: formatNetBirdUP(),
             copied: false,
             showCopyButton: true
         } as StepCommand,

src/components/addpeer/UbuntuTab.tsx

@@ -5,28 +5,19 @@ import TabSteps from "./TabSteps";
 import { StepCommand } from "./types"
 import { getConfig } from "../../config";
 import Paragraph from 'antd/lib/skeleton/Paragraph';
-const { grpcApiOrigin } = getConfig();
+import { formatNetBirdUP } from "./common"
+
 
 
 export const UbuntuTab = () => {
 
-    const formatNetBirdUP = () => {
-        let cmd = "sudo netbird up"
-        if (grpcApiOrigin) {
-            cmd = "sudo netbird up --management-url " + grpcApiOrigin
-        }
-        return [
-            cmd
-        ].join('\n')
-    }
-
     const [steps, setSteps] = useState([
         {
             key: 1,
             title: 'Add repository:',
             commands: [
                 `sudo apt install ca-certificates curl gnupg -y`,
-                `curl -L https://pkgs.wiretrustee.com/debian/public.key | sudo apt-key add -`,
+                `curl -L https://pkgs.wiretrustee.com/debian/public.key | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/wiretrustee.gpg`,
                 `echo 'deb https://pkgs.wiretrustee.com/debian stable main' | sudo tee /etc/apt/sources.list.d/wiretrustee.list`
             ].join('\n'),
             copied: false,

src/components/addpeer/common.ts

@@ -0,0 +1,13 @@
+import {getConfig} from "../../config";
+const { grpcApiOrigin } = getConfig();
+
+
+export const formatNetBirdUP = () => {
+    let cmd = "sudo netbird up"
+    if (grpcApiOrigin) {
+        cmd = "sudo netbird up --management-url " + grpcApiOrigin
+    }
+    return [
+        cmd
+    ].join('\n')
+}

src/config.json

@@ -7,5 +7,8 @@
 
   "apiOrigin": "$NETBIRD_MGMT_API_ENDPOINT",
   "grpcApiOrigin": "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
-  "latestVersion": "$NETBIRD_LATEST_VERSION"
+  "latestVersion": "$NETBIRD_LATEST_VERSION",
+  "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
+  "redirectURI": "$AUTH_REDIRECT_URI",
+  "silentRedirectURI": "$AUTH_SILENT_REDIRECT_URI"
 }

src/config.ts

@@ -7,7 +7,19 @@ if (process.env.NODE_ENV !== 'production') {
   configJson = require("./config.json");
 }
 
+const defaultRedirectURI = '/#callback';
+const defaultSilentRedirectURI = '/#silent-callback'
+
 export function getConfig() {
+  let redirectURI = defaultRedirectURI
+  if (configJson.redirectURI) {
+    redirectURI = configJson.redirectURI
+  }
+
+  let silentRedirectURI = defaultSilentRedirectURI
+  if (configJson.silentRedirectURI) {
+    silentRedirectURI = configJson.silentRedirectURI
+  }
 
   return {
     auth0Auth: configJson.auth0Auth == "true", //due to substitution we can't use boolean in the config
@@ -18,5 +30,8 @@ export function getConfig() {
     grpcApiOrigin: configJson.grpcApiOrigin,
     latestVersion: configJson.latestVersion,
     audience: configJson.authAudience,
+    hotjarTrackID: configJson.hotjarTrackID,
+    redirectURI: redirectURI,
+    silentRedirectURI: silentRedirectURI,
   };
 }

src/index.tsx

@@ -26,9 +26,9 @@ const auth0AuthorityConfig: AuthorityConfiguration = {
 const providerConfig = {
     authority: config.authority,
     client_id: config.clientId,
-    redirect_uri: window.location.origin + '/#callback',
+    redirect_uri: window.location.origin + config.redirectURI,
     refresh_time_before_tokens_expiration_in_second: 30,
-    silent_redirect_uri: window.location.origin + '/#silent-callback',
+    silent_redirect_uri: window.location.origin + config.silentRedirectURI,
     scope: config.scopesSupported,
     // disabling service worker
     // service_worker_relative_url:'/OidcServiceWorker.js',
@@ -41,7 +41,7 @@ const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 
-const loadingComponent = () => <Loading padding="3em" width="50px" height="50px"/>
+const loadingComponent = () => <Loading padding="3em" width={50} height={50}/>
 
 root.render(
     <OidcProvider

src/services/api-client/api-request.ts

@@ -1,6 +1,6 @@
-import axios, {AxiosError} from 'axios';
+import axios from 'axios';
 
-import {ApiRequestParams, ApiResponse, ApiError} from './types';
+import {ApiError, ApiRequestParams, ApiResponse} from './types';
 import {headersFactory, RequestHeader} from './header-factory';
 
 /*axios.interceptors.response.use(undefined, err => {
@@ -16,10 +16,10 @@ async function apiRequest<T>(params: ApiRequestParams): Promise<ApiResponse<T>>
   const extraHeaders = params.extraHeaders || {};
   const headers = await headersFactory((params.data as any).getAccessTokenSilently);
 
-  const builtHeader: RequestHeader = { ...headers, ...extraHeaders };
+  const builtHeader: RequestHeader = {...headers, ...extraHeaders};
 
   let response;
-  let error:ApiError = {
+  let error: ApiError = {
     code: '-1',
     message: '',
     data: null,
@@ -27,7 +27,7 @@ async function apiRequest<T>(params: ApiRequestParams): Promise<ApiResponse<T>>
   };
 
   try {
-    response = await axios.request({ url, data, method: params.method, headers: builtHeader as any });
+    response = await axios.request({url, data, method: params.method, headers: builtHeader as any});
   } catch (err: any) {
     error = <ApiError>{
       code: err ? err.code : '-1',
@@ -39,12 +39,15 @@ async function apiRequest<T>(params: ApiRequestParams): Promise<ApiResponse<T>>
       let old = error.message
       error.message = old + ". Please refresh the page if the issue continues."
       error.code = 'ERR_UNAUTHORIZED'
+    } else if (error.statusCode === 403) {
+      error.code = 'ERR_FORBIDDEN'
+      console.log(error)
     }
     console.log(error)
     throw error;
   }
 
-  return { statusCode: response ? response.status : error.statusCode, body: response ? response.data : error };
+  return {statusCode: response ? response.status : error.statusCode, body: response ? response.data : error};
 }
 
-export { apiRequest };
+export {apiRequest};

src/services/api-client/header-factory.ts

@@ -9,11 +9,7 @@ const headersFactory = async (getAccessTokenSilently:any): Promise<RequestHeader
     'Accept': 'application/json'
   };
 
-  //const token = await getLocalItem<string>(StorageKey.token);
-  //const token = ''
-  // const token = await getAccessTokenSilently()
-  const token = getAccessTokenSilently
-
+  const token = await getAccessTokenSilently() as string
   if (token) {
     headers.authorization = `Bearer ${token}`;
   }

src/store/index.ts

@@ -8,6 +8,7 @@ import { sagas as userSagas } from './user';
 import { sagas as ruleSagas } from './rule';
 import { sagas as groupSagas } from './group';
 import { sagas as routeSagas } from './route';
+import { sagas as nameserverGroupSagas } from './nameservers';
 
 import rootReducer from './root-reducer';
 import { apiClient } from '../services/api-client';
@@ -25,5 +26,6 @@ sagaMiddleware.run(userSagas);
 sagaMiddleware.run(ruleSagas);
 sagaMiddleware.run(groupSagas);
 sagaMiddleware.run(routeSagas);
+sagaMiddleware.run(nameserverGroupSagas);
 
 export { apiClient, rootReducer, store };

src/store/nameservers/actions.ts

@@ -0,0 +1,35 @@
+import { ActionType, createAction, createAsyncAction } from 'typesafe-actions';
+import {NameServerGroup, NameServerGroupToSave} from './types';
+import {ApiError, CreateResponse, DeleteResponse, RequestPayload} from '../../services/api-client/types';
+
+const actions = {
+  getNameServerGroups: createAsyncAction(
+      'GET_NameServerGroup_REQUEST',
+      'GET_NameServerGroup_SUCCESS',
+      'GET_NameServerGroup_FAILURE',
+  )<RequestPayload<null>, NameServerGroup[], ApiError>(),
+
+  saveNameServerGroup: createAsyncAction(
+      'SAVE_NameServerGroup_REQUEST',
+      'SAVE_NameServerGroup_SUCCESS',
+      'SAVE_NameServerGroup_FAILURE',
+  )<RequestPayload<NameServerGroupToSave>, CreateResponse<NameServerGroup | null>, CreateResponse<NameServerGroup | null>>(),
+  setSavedNameServerGroup: createAction('SET_CREATE_NameServerGroup')<CreateResponse<NameServerGroup | null>>(),
+  resetSavedNameServerGroup: createAction('RESET_CREATE_NameServerGroup')<null>(),
+  
+  deleteNameServerGroup: createAsyncAction(
+      'DELETE_NameServerGroup_REQUEST',
+      'DELETE_NameServerGroup_SUCCESS',
+      'DELETE_NameServerGroup_FAILURE'
+  )<RequestPayload<string>, DeleteResponse<string | null>, DeleteResponse<string | null>>(),
+  setDeletedNameServerGroup: createAction('SET_DELETED_NameServerGroup')<DeleteResponse<string | null>>(),
+  resetDeletedNameServerGroup: createAction('RESET_DELETED_NameServerGroup')<null>(),
+  removeNameServerGroup:  createAction('REMOVE_NameServerGroup')<string>(),
+
+  setNameServerGroup: createAction('SET_NameServerGroup')<NameServerGroup>(),
+  setSetupNewNameServerGroupVisible: createAction('SET_SETUP_NEW_NameServerGroup_VISIBLE')<boolean>(),
+  setSetupNewNameServerGroupHA: createAction('SET_SETUP_NEW_NameServerGroup_HA')<boolean>()
+};
+
+export type ActionTypes = ActionType<typeof actions>;
+export default actions;

src/store/nameservers/index.ts

@@ -0,0 +1,7 @@
+import actions, { ActionTypes as _actionTypes } from './actions';
+import reducer from './reducer';
+import sagas from './sagas';
+
+export type ActionTypes = _actionTypes;
+
+export { actions, reducer, sagas };

src/store/nameservers/reducer.ts

@@ -0,0 +1,95 @@
+import { createReducer } from 'typesafe-actions';
+import { combineReducers } from 'redux';
+import { NameServerGroup } from './types';
+import actions, { ActionTypes } from './actions';
+import {ApiError, DeleteResponse, CreateResponse} from "../../services/api-client/types";
+
+type StateType = Readonly<{
+  data: NameServerGroup[] | null;
+  nameserverGroup: NameServerGroup | null;
+  loading: boolean;
+  failed: ApiError | null;
+  saving: boolean;
+  deleteNameServerGroup: DeleteResponse<string | null>;
+  savedNameServerGroup: CreateResponse<NameServerGroup | null>;
+  setupNewNameServerGroupVisible: boolean;
+  setupNewNameServerGroupHA: boolean
+}>;
+
+const initialState: StateType = {
+  data: [],
+  nameserverGroup: null,
+  loading: false,
+  failed: null,
+  saving: false,
+  deleteNameServerGroup: <DeleteResponse<string | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data : null
+  },
+  savedNameServerGroup: <CreateResponse<NameServerGroup | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data : null
+  },
+  setupNewNameServerGroupVisible: false,
+  setupNewNameServerGroupHA: false
+};
+
+const data = createReducer<NameServerGroup[], ActionTypes>(initialState.data as NameServerGroup[])
+    .handleAction(actions.getNameServerGroups.success,(_, action) => action.payload)
+    .handleAction(actions.getNameServerGroups.failure, () => []);
+
+const nameserverGroup = createReducer<NameServerGroup, ActionTypes>(initialState.nameserverGroup as NameServerGroup)
+    .handleAction(actions.setNameServerGroup, (store, action) => action.payload);
+
+const loading = createReducer<boolean, ActionTypes>(initialState.loading)
+    .handleAction(actions.getNameServerGroups.request, () => true)
+    .handleAction(actions.getNameServerGroups.success, () => false)
+    .handleAction(actions.getNameServerGroups.failure, () => false);
+
+const failed = createReducer<ApiError | null, ActionTypes>(initialState.failed)
+    .handleAction(actions.getNameServerGroups.request, () => null)
+    .handleAction(actions.getNameServerGroups.success, () => null)
+    .handleAction(actions.getNameServerGroups.failure, (store, action) => action.payload);
+
+const saving = createReducer<boolean, ActionTypes>(initialState.saving)
+    .handleAction(actions.getNameServerGroups.request, () => true)
+    .handleAction(actions.getNameServerGroups.success, () => false)
+    .handleAction(actions.getNameServerGroups.failure, () => false);
+
+const deletedNameServerGroup = createReducer<DeleteResponse<string | null>, ActionTypes>(initialState.deleteNameServerGroup)
+    .handleAction(actions.deleteNameServerGroup.request, () => initialState.deleteNameServerGroup)
+    .handleAction(actions.deleteNameServerGroup.success, (store, action) => action.payload)
+    .handleAction(actions.deleteNameServerGroup.failure, (store, action) => action.payload)
+    .handleAction(actions.setDeletedNameServerGroup, (store, action) => action.payload)
+    .handleAction(actions.resetDeletedNameServerGroup, () => initialState.deleteNameServerGroup)
+
+const savedNameServerGroup = createReducer<CreateResponse<NameServerGroup | null>, ActionTypes>(initialState.savedNameServerGroup)
+    .handleAction(actions.saveNameServerGroup.request, () => initialState.savedNameServerGroup)
+    .handleAction(actions.saveNameServerGroup.success, (store, action) => action.payload)
+    .handleAction(actions.saveNameServerGroup.failure, (store, action) => action.payload)
+    .handleAction(actions.setSavedNameServerGroup, (store, action) => action.payload)
+    .handleAction(actions.resetSavedNameServerGroup, () => initialState.savedNameServerGroup)
+
+const setupNewNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupVisible)
+    .handleAction(actions.setSetupNewNameServerGroupVisible, (store, action) => action.payload)
+
+const setupNewNameServerGroupHA = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupHA)
+    .handleAction(actions.setSetupNewNameServerGroupHA, (store, action) => action.payload)
+
+export default combineReducers({
+  data,
+  nameserverGroup,
+  loading,
+  failed,
+  saving,
+  deletedNameServerGroup,
+  savedNameServerGroup,
+  setupNewNameServerGroupVisible,
+  setupNewNameServerGroupHA
+});

src/store/nameservers/sagas.ts

@@ -0,0 +1,160 @@
+import {all, call, put, select, takeLatest} from 'redux-saga/effects';
+import {ApiError, ApiResponse, CreateResponse, DeleteResponse} from '../../services/api-client/types';
+import {NameServerGroup} from './types'
+import service from './service';
+import actions from './actions';
+import serviceGroup from "../group/service";
+import {Group} from "../group/types";
+import {actions as groupActions} from "../group";
+
+export function* getNameServerGroups(action: ReturnType<typeof actions.getNameServerGroups.request>): Generator {
+  try {
+
+    yield put(actions.setDeletedNameServerGroup({
+      loading: false,
+      success: false,
+      failure: false,
+      error: null,
+      data: null
+    } as DeleteResponse<string | null>))
+
+    const effect = yield call(service.getNameServerGroups, action.payload);
+    const response = effect as ApiResponse<NameServerGroup[]>;
+
+    yield put(actions.getNameServerGroups.success(response.body));
+  } catch (err) {
+    yield put(actions.getNameServerGroups.failure(err as ApiError));
+  }
+}
+
+export function* setCreatedNameServerGroup(action: ReturnType<typeof  actions.setSavedNameServerGroup>): Generator {
+  yield put(actions.setSavedNameServerGroup(action.payload))
+}
+
+export function* saveNameServerGroup(action: ReturnType<typeof actions.saveNameServerGroup.request>): Generator {
+  try {
+    yield put(actions.setSavedNameServerGroup({
+      loading: true,
+      success: false,
+      failure: false,
+      error: null,
+      data: null
+    } as CreateResponse<NameServerGroup | null>))
+
+    const nameserverGroupToSave = action.payload.payload
+
+    let groupsToCreate = nameserverGroupToSave.groupsToCreate
+    if (!groupsToCreate) {
+      groupsToCreate = []
+    }
+
+    // first, create groups that were newly added by user
+    const responsesGroup = yield all(groupsToCreate.map(g => call(serviceGroup.createGroup, {
+          getAccessTokenSilently: action.payload.getAccessTokenSilently,
+          payload: {name: g}
+        })
+    ))
+
+    const resGroups = (responsesGroup as ApiResponse<Group>[]).filter(r => r.statusCode === 200).map(g => (g.body as Group)).map(g => g.id)
+    const newGroups = [...nameserverGroupToSave.groups, ...resGroups]
+
+    const payloadToSave = {
+      getAccessTokenSilently: action.payload.getAccessTokenSilently,
+      payload: {
+        id: nameserverGroupToSave.id,
+        name: nameserverGroupToSave.name,
+        description: nameserverGroupToSave.description,
+        primary: nameserverGroupToSave.primary,
+        domains: nameserverGroupToSave.domains,
+        nameservers: nameserverGroupToSave.nameservers,
+        groups: newGroups,
+        enabled: nameserverGroupToSave.enabled,
+      } as NameServerGroup
+    }
+
+    let effect
+    if (!nameserverGroupToSave.id) {
+       effect = yield call(service.createNameServerGroup, payloadToSave);
+    } else {
+      payloadToSave.payload.id = nameserverGroupToSave.id
+      effect = yield call(service.editNameServerGroup, payloadToSave);
+    }
+
+    const response = effect as ApiResponse<NameServerGroup>;
+
+    yield put(actions.saveNameServerGroup.success({
+      loading: false,
+      success: true,
+      failure: false,
+      error: null,
+      data: response.body
+    } as CreateResponse<NameServerGroup | null>));
+
+    yield put(groupActions.getGroups.request({
+      getAccessTokenSilently: action.payload.getAccessTokenSilently,
+      payload: null
+    }));
+
+    yield put(actions.getNameServerGroups.request({ getAccessTokenSilently: action.payload.getAccessTokenSilently, payload: null }));
+
+  } catch (err) {
+    yield put(groupActions.getGroups.request({
+      getAccessTokenSilently: action.payload.getAccessTokenSilently,
+      payload: null
+    }));
+    yield put(actions.saveNameServerGroup.failure({
+      loading: false,
+      success: false,
+      failure: true,
+      error: err as ApiError,
+      data: null
+    } as CreateResponse<NameServerGroup | null>));
+  }
+}
+
+export function* setDeleteNameServerGroup(action: ReturnType<typeof  actions.setDeletedNameServerGroup>): Generator {
+  yield put(actions.setDeletedNameServerGroup(action.payload))
+}
+
+export function* deleteNameServerGroup(action: ReturnType<typeof actions.deleteNameServerGroup.request>): Generator {
+  try {
+    yield call(actions.setDeletedNameServerGroup,{
+      loading: true,
+      success: false,
+      failure: false,
+      error: null,
+      data: null
+    } as DeleteResponse<string | null>)
+
+    const effect = yield call(service.deletedNameServerGroup, action.payload);
+    const response = effect as ApiResponse<any>;
+
+    yield put(actions.deleteNameServerGroup.success({
+      loading: false,
+      success: true,
+      failure: false,
+      error: null,
+      data: response.body
+    } as DeleteResponse<string | null>));
+
+    const nameserverGroup = (yield select(state => state.nameserverGroup.data)) as NameServerGroup[]
+    yield put(actions.getNameServerGroups.success(nameserverGroup.filter((p:NameServerGroup) => p.id !== action.payload.payload)))
+  } catch (err) {
+    yield put(actions.deleteNameServerGroup.failure({
+      loading: false,
+      success: false,
+      failure: false,
+      error: err as ApiError,
+      data: null
+    } as DeleteResponse<string | null>));
+  }
+}
+
+export default function* sagas(): Generator {
+  yield all([
+    takeLatest(actions.getNameServerGroups.request, getNameServerGroups),
+    takeLatest(actions.saveNameServerGroup.request, saveNameServerGroup),
+    takeLatest(actions.deleteNameServerGroup.request, deleteNameServerGroup)
+  ]);
+}
+

src/store/nameservers/service.ts

@@ -0,0 +1,32 @@
+import {ApiResponse, RequestPayload} from '../../services/api-client/types';
+import { apiClient } from '../../services/api-client';
+import { NameServerGroup } from './types';
+
+export default {
+  async getNameServerGroups(payload:RequestPayload<null>): Promise<ApiResponse<NameServerGroup[]>> {
+    return apiClient.get<NameServerGroup[]>(
+      `/api/dns/nameservers`,
+        payload
+    );
+  },
+  async deletedNameServerGroup(payload:RequestPayload<string>): Promise<ApiResponse<any>> {
+    return apiClient.delete<any>(
+        `/api/dns/nameservers/` + payload.payload,
+        payload
+    );
+  },
+  async createNameServerGroup(payload:RequestPayload<NameServerGroup>): Promise<ApiResponse<NameServerGroup>> {
+    return apiClient.post<NameServerGroup>(
+        `/api/dns/nameservers`,
+        payload
+    );
+  },
+  async editNameServerGroup(payload:RequestPayload<NameServerGroup>): Promise<ApiResponse<NameServerGroup>> {
+    const id = payload.payload.id
+    delete payload.payload.id
+    return apiClient.put<NameServerGroup>(
+        `/api/dns/nameservers/${id}`,
+        payload
+    );
+  },
+};

src/store/nameservers/types.ts

@@ -0,0 +1,21 @@
+export interface NameServerGroup {
+    id?: string
+    name: string
+    description: string
+    primary: boolean
+    domains: string[]
+    nameservers: NameServer[]
+    groups: string[]
+    enabled: boolean
+}
+
+export interface NameServer {
+    ip: string
+    ns_type: string
+    port: number
+}
+
+export interface NameServerGroupToSave extends NameServerGroup
+{
+    groupsToCreate: string[]
+}

src/store/peer/types.ts

@@ -10,6 +10,15 @@ export interface Peer {
   version: string,
   groups?: Group[]
   ssh_enabled: boolean,
+  hostname: string,
+  user_id?: string,
+  ui_version?: string,
+  dns_label: string,
+}
+
+export interface FormPeer extends Peer {
+  groupsNames: string[],
+  userEmail?: string
 }
 
 export interface PeerToSave extends Peer {
@@ -30,3 +39,9 @@ export interface PeerNameToIP {
 export interface PeerIPToName {
   [key: string]: string;
 }
+
+export interface PeerDataTable extends Peer {
+  key: string;
+  groups: Group[];
+  groupsCount: number;
+}

src/store/root-action.ts

@@ -4,6 +4,7 @@ import { actions as UserActions } from './user';
 import { actions as GroupActions } from './group';
 import { actions as RuleActions } from './rule';
 import { actions as RouteActions } from './route';
+import { actions as NameServerGroupActions } from './nameservers';
 
 export default {
   peer: PeerActions,
@@ -11,5 +12,6 @@ export default {
   user: UserActions,
   group: GroupActions,
   rule: RuleActions,
-  route: RouteActions
+  route: RouteActions,
+  nameserverGroup: NameServerGroupActions
 };

src/store/root-reducer.ts

@@ -6,6 +6,7 @@ import { reducer as user } from './user';
 import { reducer as group } from './group';
 import { reducer as rule } from './rule';
 import { reducer as route } from './route';
+import { reducer as nameserverGroup } from './nameservers';
 
 export default combineReducers({
   peer,
@@ -13,5 +14,6 @@ export default combineReducers({
   user,
   group,
   rule,
-  route
+  route,
+  nameserverGroup
 });

src/store/route/actions.ts

@@ -1,5 +1,5 @@
 import { ActionType, createAction, createAsyncAction } from 'typesafe-actions';
-import {Route} from './types';
+import {Route, RouteToSave} from './types';
 import {ApiError, CreateResponse, DeleteResponse, RequestPayload} from '../../services/api-client/types';
 
 const actions = {
@@ -13,7 +13,7 @@ const actions = {
       'SAVE_ROUTE_REQUEST',
       'SAVE_ROUTE_SUCCESS',
       'SAVE_ROUTE_FAILURE',
-  )<RequestPayload<Route>, CreateResponse<Route | null>, CreateResponse<Route | null>>(),
+  )<RequestPayload<RouteToSave>, CreateResponse<Route | null>, CreateResponse<Route | null>>(),
   setSavedRoute: createAction('SET_CREATE_ROUTE')<CreateResponse<Route | null>>(),
   resetSavedRoute: createAction('RESET_CREATE_ROUTE')<null>(),
   

src/store/route/sagas.ts

@@ -3,6 +3,9 @@ import {ApiError, ApiResponse, CreateResponse, DeleteResponse} from '../../servi
 import {Route} from './types'
 import service from './service';
 import actions from './actions';
+import serviceGroup from "../group/service";
+import {Group} from "../group/types";
+import {actions as groupActions} from "../group";
 
 export function* getRoutes(action: ReturnType<typeof actions.getRoutes.request>): Generator {
   try {
@@ -40,6 +43,21 @@ export function* saveRoute(action: ReturnType<typeof actions.saveRoute.request>)
 
     const routeToSave = action.payload.payload
 
+    let groupsToCreate = routeToSave.groupsToCreate
+    if (!groupsToCreate) {
+      groupsToCreate = []
+    }
+
+    // first, create groups that were newly added by user
+    const responsesGroup = yield all(groupsToCreate.map(g => call(serviceGroup.createGroup, {
+          getAccessTokenSilently: action.payload.getAccessTokenSilently,
+          payload: {name: g}
+        })
+    ))
+
+    const resGroups = (responsesGroup as ApiResponse<Group>[]).filter(r => r.statusCode === 200).map(g => (g.body as Group)).map(g => g.id)
+    const newGroups = [...routeToSave.groups, ...resGroups]
+
     const payloadToSave = {
       getAccessTokenSilently: action.payload.getAccessTokenSilently,
       payload: {
@@ -50,7 +68,8 @@ export function* saveRoute(action: ReturnType<typeof actions.saveRoute.request>)
         metric: routeToSave.metric,
         network: routeToSave.network,
         network_id: routeToSave.network_id,
-        peer: routeToSave.peer
+        peer: routeToSave.peer,
+        groups: newGroups
       } as Route
     }
 
@@ -72,8 +91,19 @@ export function* saveRoute(action: ReturnType<typeof actions.saveRoute.request>)
       data: response.body
     } as CreateResponse<Route | null>));
 
+    yield put(groupActions.getGroups.request({
+      getAccessTokenSilently: action.payload.getAccessTokenSilently,
+      payload: null
+    }));
+
     yield put(actions.getRoutes.request({ getAccessTokenSilently: action.payload.getAccessTokenSilently, payload: null }));
+
   } catch (err) {
+    yield put(groupActions.getGroups.request({
+      getAccessTokenSilently: action.payload.getAccessTokenSilently,
+      payload: null
+    }));
+
     yield put(actions.saveRoute.failure({
       loading: false,
       success: false,

src/store/route/types.ts

@@ -1,3 +1,4 @@
+
 export interface Route {
     id?: string
     description: string
@@ -8,4 +9,10 @@ export interface Route {
     network_type?: string
     metric?: number
     masquerade:	boolean
+    groups: string[]
+}
+
+export interface RouteToSave extends Route
+{
+    groupsToCreate: string[]
 }

src/store/setup-key/sagas.ts

@@ -61,7 +61,9 @@ export function* saveSetupKey(action: ReturnType<typeof actions.saveSetupKey.req
                 payload: {
                     name: keyToSave.name,
                     auto_groups: newGroups,
-                    type: keyToSave.type
+                    type: keyToSave.type,
+                    expires_in: keyToSave.expires_in,
+                    usage_limit: keyToSave.usage_limit
                 } as SetupKeyToSave
             });
         } else {
@@ -72,6 +74,7 @@ export function* saveSetupKey(action: ReturnType<typeof actions.saveSetupKey.req
                     name: keyToSave.name,
                     revoked: keyToSave.revoked,
                     auto_groups: newGroups,
+                    usage_limit: keyToSave.usage_limit
                 } as SetupKeyToSave
             });
         }

src/store/setup-key/types.ts

@@ -1,4 +1,4 @@
-import {Group} from "../group/types";
+import {ExpiresInValue} from "../../views/ExpiresInInput";
 
 export interface SetupKey {
   expires: string;
@@ -12,6 +12,13 @@ export interface SetupKey {
   used_times: number;
   valid: boolean;
   auto_groups: string[]
+  expires_in: number;
+  usage_limit: number;
+}
+
+export interface FormSetupKey extends SetupKey {
+  autoGroupNames: string[]
+  expiresInFormatted: ExpiresInValue
 }
 
 export interface SetupKeyToSave extends SetupKey

src/store/user/actions.ts

@@ -1,13 +1,26 @@
-import { ActionType, createAsyncAction } from 'typesafe-actions';
-import { User } from './types';
-import { ApiError, RequestPayload } from '../../services/api-client/types';
+import {ActionType, createAction, createAsyncAction} from 'typesafe-actions';
+import {User, UserToSave} from './types';
+import {ApiError, CreateResponse, RequestPayload} from '../../services/api-client/types';
 
 const actions = {
   getUsers: createAsyncAction(
       'GET_USERS_REQUEST',
       'GET_USERS_SUCCESS',
       'GET_USERS_FAILURE',
-  )<RequestPayload<null>, User[], ApiError>()
+  )<RequestPayload<null>, User[], ApiError>(),
+
+  // used to set a user object that was picked in the user table in the UserUpdate drawer (user update window on right-side).
+  setUser: createAction('SET_USER')<User>(),
+  // used to make the UserUpdate drawer visible in the UI.
+  setUpdateUserDrawerVisible: createAction('SET_UPDATE_USER_VISIBLE')<boolean>(),
+
+  saveUser: createAsyncAction(
+      'SAVE_USER_REQUEST',
+      'SAVE_USER_SUCCESS',
+      'SAVE_USER_FAILURE',
+  )<RequestPayload<UserToSave>, CreateResponse<User | null>, CreateResponse<User | null>>(),
+  setSavedUser: createAction('SET_SAVED_USER')<CreateResponse<User | null>>(),
+  resetSavedUser: createAction('RESET_SAVED_USER')<null>(),
 };
 
 export type ActionTypes = ActionType<typeof actions>;

src/store/user/reducer.ts

@@ -2,18 +2,31 @@ import { createReducer } from 'typesafe-actions';
 import { combineReducers } from 'redux';
 import { User } from './types';
 import actions, { ActionTypes } from './actions';
-import { ApiError } from "../../services/api-client/types";
+import {ApiError, CreateResponse} from "../../services/api-client/types";
 
 type StateType = Readonly<{
   data: User[] | null;
   loading: boolean;
   failed: ApiError | null;
+  user: User | null;
+  savedUser: CreateResponse<User | null>;
+  updateUserDrawerVisible: boolean
 }>;
 
 const initialState: StateType = {
   data: [],
   loading: false,
   failed: null,
+  user: null,
+  // right-sided user update drawer
+  updateUserDrawerVisible: false,
+  savedUser: <CreateResponse<User | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data : null
+  },
 };
 
 const data = createReducer<User[], ActionTypes>(initialState.data as User[])
@@ -30,9 +43,23 @@ const failed = createReducer<ApiError | null, ActionTypes>(initialState.failed)
     .handleAction(actions.getUsers.success, () => null)
     .handleAction(actions.getUsers.failure, (store, action) => action.payload);
 
+const user = createReducer<User, ActionTypes>(initialState.user as User)
+    .handleAction(actions.setUser, (store, action) => action.payload);
+const updateUserDrawerVisible = createReducer<boolean, ActionTypes>(initialState.updateUserDrawerVisible)
+    .handleAction(actions.setUpdateUserDrawerVisible, (store, action) => action.payload);
+
+const savedUser = createReducer<CreateResponse<User | null>, ActionTypes>(initialState.savedUser)
+    .handleAction(actions.saveUser.request, () => initialState.savedUser)
+    .handleAction(actions.saveUser.success, (store, action) => action.payload)
+    .handleAction(actions.saveUser.failure, (store, action) => action.payload)
+    .handleAction(actions.setSavedUser, (store, action) => action.payload)
+    .handleAction(actions.resetSavedUser, () => initialState.savedUser)
 
 export default combineReducers({
   data,
   loading,
-  failed
+  failed,
+  user,
+  savedUser,
+  updateUserDrawerVisible
 });

src/store/user/sagas.ts

@@ -1,23 +1,103 @@
 import {all, call, put, takeLatest} from 'redux-saga/effects';
-import {ApiError, ApiResponse} from '../../services/api-client/types';
-import { User } from './types'
+import {ApiError, ApiResponse, CreateResponse} from '../../services/api-client/types';
+import {User, UserToSave} from './types'
 import service from './service';
 import actions from './actions';
+import serviceGroup from "../group/service";
+import {Group} from "../group/types";
+import {actions as groupActions} from "../group";
 
-export function* getPeers(action: ReturnType<typeof actions.getUsers.request>): Generator {
-  try {
-    const effect = yield call(service.getUsers, action.payload);
-    const response = effect as ApiResponse<User[]>;
+export function* getUsers(action: ReturnType<typeof actions.getUsers.request>): Generator {
+    try {
+        const effect = yield call(service.getUsers, action.payload);
+        const response = effect as ApiResponse<User[]>;
 
-    yield put(actions.getUsers.success(response.body));
-  } catch (err) {
-    yield put(actions.getUsers.failure(err as ApiError));
-  }
+        yield put(actions.getUsers.success(response.body));
+    } catch (err) {
+        yield put(actions.getUsers.failure(err as ApiError));
+    }
+}
+
+export function* saveUser(action: ReturnType<typeof actions.saveUser.request>): Generator {
+    try {
+        yield put(actions.setSavedUser({
+            loading: true,
+            success: false,
+            failure: false,
+            error: null,
+            data: null
+        } as CreateResponse<User | null>))
+
+        const userToSave = action.payload.payload
+
+        let groupsToCreate = userToSave.groupsToCreate
+        if (!groupsToCreate) {
+            groupsToCreate = []
+        }
+
+        // first, create groups that were newly added by user
+        const responsesGroup = yield all(groupsToCreate.map(g => call(serviceGroup.createGroup, {
+                getAccessTokenSilently: action.payload.getAccessTokenSilently,
+                payload: {name: g}
+            })
+        ))
+
+        const resGroups = (responsesGroup as ApiResponse<Group>[]).filter(r => r.statusCode === 200).map(g => (g.body as Group)).map(g => g.id)
+        const newGroups = [...userToSave.auto_groups, ...resGroups]
+        let payload = {
+            name: userToSave.name,
+            email: userToSave.email,
+            role: userToSave.role,
+            auto_groups: newGroups,
+        } as UserToSave
+
+        let effect
+        if (!userToSave.id) {
+          console.log("creating user:" + payload)
+            effect = yield call(service.createUser, {
+                getAccessTokenSilently: action.payload.getAccessTokenSilently,
+                payload: payload
+            });
+        } else {
+            payload.id = userToSave.id
+                effect = yield call(service.editUser, {
+                    getAccessTokenSilently: action.payload.getAccessTokenSilently,
+                    payload: payload
+                });
+        }
+        const response = effect as ApiResponse<User>;
+
+        yield put(actions.saveUser.success({
+            loading: false,
+            success: true,
+            failure: false,
+            error: null,
+            data: response.body
+        } as CreateResponse<User | null>));
+
+        yield put(groupActions.getGroups.request({
+            getAccessTokenSilently: action.payload.getAccessTokenSilently,
+            payload: null
+        }));
+        yield put(actions.getUsers.request({
+            getAccessTokenSilently: action.payload.getAccessTokenSilently,
+            payload: null
+        }));
+    } catch (err) {
+        yield put(actions.saveUser.failure({
+            loading: false,
+            success: false,
+            failure: false,
+            error: err as ApiError,
+            data: null
+        } as CreateResponse<User | null>));
+    }
 }
 
 export default function* sagas(): Generator {
-  yield all([
-    takeLatest(actions.getUsers.request, getPeers)
-  ]);
+    yield all([
+        takeLatest(actions.getUsers.request, getUsers),
+        takeLatest(actions.saveUser.request, saveUser)
+    ]);
 }
 

src/store/user/service.ts

@@ -1,6 +1,6 @@
 import {ApiResponse, RequestPayload} from '../../services/api-client/types';
 import { apiClient } from '../../services/api-client';
-import { User } from './types';
+import {User, UserToSave} from './types';
 
 export default {
   async getUsers(payload:RequestPayload<null>): Promise<ApiResponse<User[]>> {
@@ -8,5 +8,21 @@ export default {
       `/api/users`,
         payload
     );
-  }
+  },
+  async editUser(payload:RequestPayload<UserToSave>): Promise<ApiResponse<User>> {
+    const id = payload.payload.id
+    // @ts-ignore
+    delete payload.payload.id
+    return apiClient.put<User>(
+        `/api/users/${id}`,
+        payload
+    );
+  },
+  async createUser(payload:RequestPayload<UserToSave>): Promise<ApiResponse<User>> {
+    // @ts-ignore
+    return apiClient.post<User>(
+        `/api/users`,
+        payload
+    );
+  },
 };

src/store/user/types.ts

@@ -3,4 +3,15 @@ export interface User {
     email?: string;
     name: string;
     role: string;
+    status: string
+    auto_groups: string[]
+}
+
+export interface FormUser extends User {
+    autoGroupsNames: string[]
+}
+
+export interface UserToSave extends User
+{
+    groupsToCreate: string[]
 }

src/utils/common.js

@@ -11,6 +11,9 @@ export const formatOS = (os) => {
 };
 
 export const formatDate = date => {
+    if (new Date(date).getTime() > new Date("2099-12-31").getTime()) {
+        return new Date(date).toLocaleDateString("en-GB", { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' });
+    }
     return new Date(date).toLocaleDateString("en-GB", { weekday: 'short', year: '2-digit', month: 'short', day: 'numeric' });
 }
 
@@ -87,4 +90,12 @@ export const timeAgo = (dateParam) => {
 
 export const copyToClipboard = (copyText) => {
     navigator.clipboard.writeText(copyText);
+}
+
+export const isNetBirdHosted = () => {
+    return window.location.hostname.endsWith(".netbird.io") || window.location.hostname.endsWith(".wiretrustee.com")
+}
+
+export const isLocalDev = () => {
+    return window.location.hostname.includes("localhost")
 }

src/utils/groups.tsx

@@ -0,0 +1,136 @@
+import {CustomTagProps} from "rc-select/lib/BaseSelect";
+import React, {useEffect, useState} from "react";
+import {Col, Divider, Row, Tag} from "antd";
+import {useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import {RuleObject} from "antd/lib/form";
+
+export const useGetGroupTagHelpers = () => {
+    const groups = useSelector((state: RootState) => state.group.data)
+
+    const [tagGroups, setTagGroups] = useState([] as string[])
+    const [groupTagFilterAll, setGroupTagFilterAll] = useState(false)
+    const [selectedTagGroups, setSelectedTagGroups] = useState([] as string[])
+
+    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 handleChangeTags = (value: string[]) => {
+        let validatedValues: string[] = []
+        value.forEach(function (v) {
+            if (v.trim().length) {
+                validatedValues.push(v)
+            }
+        })
+        setSelectedTagGroups(validatedValues)
+    };
+
+    const dropDownRender = (menu: React.ReactElement) => (
+        <>
+            {menu}
+            <Divider style={{margin: '8px 0'}}/>
+            <Row style={{padding: '0 8px 4px'}}>
+                <Col flex="auto">
+                    <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
+                </Col>
+                <Col flex="none">
+                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
+                    </svg>
+                </Col>
+            </Row>
+        </>
+    )
+
+    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 getExistingAndToCreateGroupsLists = (groupNameList: string[]): [string[], string[]] => {
+        const groupIDList = groups?.filter(g => groupNameList.includes(g.name)).map(g => g.id || '') || []
+        // find groups that do not yet exist (newly added by the user)
+        const existingGroupsNames: string[] = groups?.map(g => g.name);
+        const groupNameListToCreate = groupNameList.filter(s => !existingGroupsNames.includes(s))
+        return [groupIDList, groupNameListToCreate]
+    }
+
+    const getGroupNamesFromIDs = (groupIDList: string[]): string[] => {
+        if (!groupIDList) {
+            return []
+        }
+
+        return groups?.filter(g => groupIDList.includes(g.id!)).map(g => g.name || '') || []
+    }
+
+    const selectValidator = (_: RuleObject, value: string[]) => {
+        let hasSpaceNamed = []
+        if (!value.length) {
+            return Promise.reject(new Error("Please enter at least one group"))
+        }
+
+        value.forEach(function (v: string) {
+            if (!v.trim().length) {
+                hasSpaceNamed.push(v)
+            }
+        })
+
+        if (hasSpaceNamed.length) {
+            return Promise.reject(new Error("Group names with just spaces are not allowed"))
+        }
+
+        return Promise.resolve()
+    }
+
+    useEffect(() => {
+        if (groupTagFilterAll) {
+            setTagGroups(groups?.filter(g => g.name != "All").map(g => g.name) || [])
+        } else {
+            setTagGroups(groups?.map(g => g.name) || [])
+        }
+    }, [groups])
+
+    return {
+        tagRender,
+        handleChangeTags,
+        dropDownRender,
+        optionRender,
+        tagGroups,
+        selectedTagGroups,
+        setGroupTagFilterAll,
+        getExistingAndToCreateGroupsLists,
+        getGroupNamesFromIDs,
+        selectValidator
+    }
+}

src/utils/routes.ts

@@ -34,6 +34,7 @@ export interface GroupedDataTable {
     description: string
     routesCount: number
     groupedRoutes: RouteDataTable[]
+    routesGroups: string[]
 }
 
 export const transformDataTable = (d:Route[],peerIPToName:PeerIPToName):RouteDataTable[] => {
@@ -52,10 +53,12 @@ export const transformGroupedDataTable = (routes:Route[],peerIPToName:PeerIPToNa
     }))
 
     let groupedRoutes:GroupedDataTable[] = []
+
     keySet.forEach((p) => {
         let hasEnabled = false
         let lastRoute:Route
         let listedRoutes:Route[] = []
+        let groupList:string[] = []
         routes.forEach((r) => {
             if ( p === r.network_id + r.network ) {
                 lastRoute = r
@@ -63,8 +66,10 @@ export const transformGroupedDataTable = (routes:Route[],peerIPToName:PeerIPToNa
                     hasEnabled = true
                 }
                 listedRoutes.push(r)
+                groupList = groupList.concat(r.groups)
             }
         })
+        groupList = groupList.filter((value,index,arrary) => arrary.indexOf(value) === index)
         let groupDataTableRoutes = transformDataTable(listedRoutes,peerIPToName)
         groupedRoutes.push({
             key: p.toString(),
@@ -75,6 +80,7 @@ export const transformGroupedDataTable = (routes:Route[],peerIPToName:PeerIPToNa
             enabled: hasEnabled,
             routesCount: groupDataTableRoutes.length,
             groupedRoutes: groupDataTableRoutes,
+            routesGroups: groupList,
         })
     })
     return groupedRoutes

src/utils/token.ts

@@ -0,0 +1,53 @@
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
+import {useEffect} from "react";
+
+function sleep(ms : number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function b64DecodeUnicode(str: string): string {
+    // See https://www.rfc-editor.org/rfc/rfc7515.txt, Appendix C
+    str = str.replace('-', '+');
+    str = str.replace('_', '/');
+    switch (str.length % 4) {
+        case 0: break;
+        case 2: str += '=='; break;
+        case 3: str += '='; break;
+    }
+    return decodeURIComponent(Array.prototype.map.call(atob(str), (c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+}
+
+function parseJwt(token:string) {
+    return JSON.parse(b64DecodeUnicode(token.split('.')[1].replace('-', '+').replace('_', '/')))
+}
+
+function isTokenValid(token:string) {
+    let tokenPayload = parseJwt(token)
+    return tokenPayload && (tokenPayload.exp * 1000) > (Date.now() - 5000)
+}
+
+// latestToken as global allows for use of the latest state value across calls
+let latestToken:string
+
+
+// hook that returns a getAccessTokenSilently function that returns an access token promise,
+// waiting for renewal if it was expired
+export const useGetAccessTokenSilently = () => {
+    const {accessToken} = useOidcAccessToken()
+    latestToken = accessToken
+    const getAccessTokenSilently = async (): Promise<string> => {
+        let attempt = 0
+        while (!isTokenValid(latestToken) && attempt < 15){
+            attempt++
+            await sleep(500)
+        }
+
+        return latestToken
+    };
+
+    useEffect(() => {
+        latestToken = accessToken
+    }, [accessToken])
+
+    return {getAccessTokenSilently}
+}

src/views/AccessControl.tsx

@@ -1,9 +1,23 @@
 import React, {useEffect, useState} from 'react';
 import {
     Alert,
-    Button, Card,
-    Col, Dropdown, Input, Menu, message, Modal, Popover, Radio, RadioChangeEvent,
-    Row, Select, Space, Table, Tag, Tooltip,
+    Button,
+    Card,
+    Col,
+    Dropdown,
+    Input,
+    Menu,
+    message,
+    Modal,
+    Popover,
+    Radio,
+    RadioChangeEvent,
+    Row,
+    Select,
+    Space,
+    Table,
+    Tag,
+    Tooltip,
     Typography
 } from "antd";
 import {Container} from "../components/Container";
@@ -21,10 +35,11 @@ import AccessControlNew from "../components/AccessControlNew";
 import {Group} from "../store/group/types";
 import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
-import {useOidcAccessToken} from '@axa-fr/react-oidc';
-const { Title, Paragraph } = Typography;
-const { Column } = Table;
-const { confirm } = Modal;
+import {useGetAccessTokenSilently} from "../utils/token";
+
+const {Title, Paragraph, Text} = Typography;
+const {Column} = Table;
+const {confirm} = Modal;
 
 interface RuleDataTable extends Rule {
     key: string;
@@ -41,7 +56,7 @@ interface GroupsToShow {
 }
 
 export const AccessControl = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
 
     const rules = useSelector((state: RootState) => state.rule.data);
@@ -58,6 +73,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"},
@@ -65,7 +82,7 @@ export const AccessControl = () => {
         {label: "15", value: "15"}
     ]
 
-    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'},{label: 'All', value: 'all'}]
+    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
 
     const itemsMenuAction = [
         {
@@ -81,17 +98,17 @@ export const AccessControl = () => {
             label: (<Button type="text" block onClick={() => showConfirmDelete()}>Delete</Button>)
         }
     ]
-    const actionsMenu = (<Menu items={itemsMenuAction} ></Menu>)
+    const actionsMenu = (<Menu items={itemsMenuAction}></Menu>)
 
-    const getSourceDestinationLabel = (data:Group[]):string => {
+    const getSourceDestinationLabel = (data: Group[]): string => {
         return (!data) ? "No group" : (data.length > 1) ? `${data.length} Groups` : (data.length === 1) ? data[0].name : "No group"
     }
 
-    const isShowTutorial = (rules:Rule[]):boolean => {
+    const isShowTutorial = (rules: Rule[]): boolean => {
         return (!rules.length || (rules.length === 1 && rules[0].name === "Default"))
     }
 
-    const transformDataTable = (d:Rule[]):RuleDataTable[] => {
+    const transformDataTable = (d: Rule[]): RuleDataTable[] => {
         return d.map(p => {
             const sourceLabel = getSourceDestinationLabel(p.sources as Group[])
             const destinationLabel = getSourceDestinationLabel(p.destinations as Group[])
@@ -106,47 +123,66 @@ export const AccessControl = () => {
     }
 
     useEffect(() => {
-        dispatch(ruleActions.getRules.request({getAccessTokenSilently:accessToken, payload: null}));
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
+        dispatch(ruleActions.getRules.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [])
 
     useEffect(() => {
-        setShowTutorial(isShowTutorial(rules))
-        setDataTable(sortBy(transformDataTable(filterDataTable()), "name"))
+        if (failed) {
+            setShowTutorial(false)
+        } else {
+            setShowTutorial(isShowTutorial(rules))
+            setDataTable(sortBy(transformDataTable(filterDataTable()), "name"))
+        }
     }, [rules])
 
     useEffect(() => {
         setDataTable(transformDataTable(filterDataTable()))
     }, [textToSearch, optionAllEnable])
 
-    const styleNotification = { marginTop: 85 }
+    const styleNotification = {marginTop: 85}
 
     const saveKey = 'saving';
     useEffect(() => {
         if (savedRule.loading) {
-            message.loading({ content: 'Saving...', key: saveKey, duration: 0, style: styleNotification })
+            message.loading({content: 'Saving...', key: saveKey, duration: 0, style: styleNotification})
         } else if (savedRule.success) {
-            message.success({ content: 'Rule has been successfully saved.', key: saveKey, duration: 2, style: styleNotification });
+            message.success({
+                content: 'Rule has been successfully saved.',
+                key: saveKey,
+                duration: 2,
+                style: styleNotification
+            });
             dispatch(ruleActions.setSetupNewRuleVisible(false))
-            dispatch(ruleActions.setSavedRule({ ...savedRule, success: false }))
+            dispatch(ruleActions.setSavedRule({...savedRule, success: false}))
             dispatch(ruleActions.resetSavedRule(null))
         } else if (savedRule.error) {
-            message.error({ content: 'Failed to update rule. You might not have enough permissions.', key: saveKey, duration: 2, style: styleNotification  });
-            dispatch(ruleActions.setSavedRule({ ...savedRule, error: null }))
+            message.error({
+                content: 'Failed to update rule. You might not have enough permissions.',
+                key: saveKey,
+                duration: 2,
+                style: styleNotification
+            });
+            dispatch(ruleActions.setSavedRule({...savedRule, error: null}))
             dispatch(ruleActions.resetSavedRule(null))
         }
     }, [savedRule])
 
     const deleteKey = 'deleting';
     useEffect(() => {
-        const style = { marginTop: 85 }
+        const style = {marginTop: 85}
         if (deletedRule.loading) {
-            message.loading({ content: 'Deleting...', key: deleteKey, style })
+            message.loading({content: 'Deleting...', key: deleteKey, style})
         } else if (deletedRule.success) {
-            message.success({ content: 'Rule has been successfully disabled.', key: deleteKey, duration: 2, style })
+            message.success({content: 'Rule has been successfully disabled.', key: deleteKey, duration: 2, style})
             dispatch(ruleActions.resetDeletedRule(null))
         } else if (deletedRule.error) {
-            message.error({ content: 'Failed to remove rule. You might not have enough permissions.', key: deleteKey, duration: 2, style  })
+            message.error({
+                content: 'Failed to remove rule. You might not have enough permissions.',
+                key: deleteKey,
+                duration: 2,
+                style
+            })
             dispatch(ruleActions.resetDeletedRule(null))
         }
     }, [deletedRule])
@@ -160,7 +196,7 @@ export const AccessControl = () => {
         setDataTable(transformDataTable(data))
     }
 
-    const onChangeAllEnabled = ({ target: { value } }: RadioChangeEvent) => {
+    const onChangeAllEnabled = ({target: {value}}: RadioChangeEvent) => {
         setOptionAllEnable(value)
     }
 
@@ -170,19 +206,22 @@ export const AccessControl = () => {
 
     const showConfirmDelete = () => {
         confirm({
-            icon: <ExclamationCircleOutlined />,
+            icon: <ExclamationCircleOutlined/>,
             width: 600,
             content: <Space direction="vertical" size="small">
                 {ruleToAction &&
                     <>
                         <Title level={5}>Delete rule "{ruleToAction ? ruleToAction.name : ''}"</Title>
-                        <Paragraph>Are you sure you want to delete peer from your account?</Paragraph>
+                        <Paragraph>Are you sure you want to delete this rule from your account?</Paragraph>
                     </>
                 }
             </Space>,
             okType: 'danger',
             onOk() {
-                dispatch(ruleActions.deleteRule.request({getAccessTokenSilently:accessToken, payload: ruleToAction?.id || ''}));
+                dispatch(ruleActions.deleteRule.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: ruleToAction?.id || ''
+                }));
             },
             onCancel() {
                 setRuleToAction(null);
@@ -192,7 +231,7 @@ export const AccessControl = () => {
 
     const showConfirmDeactivate = () => {
         confirm({
-            icon: <ExclamationCircleOutlined />,
+            icon: <ExclamationCircleOutlined/>,
             width: 600,
             content: <Space direction="vertical" size="small">
                 {ruleToAction &&
@@ -212,13 +251,13 @@ export const AccessControl = () => {
         });
     }
 
-    const filterDataTable = ():Rule[] => {
+    const filterDataTable = (): Rule[] => {
         const t = textToSearch.toLowerCase().trim()
-        let f:Rule[] = filter(rules, (f:Rule) =>
+        let f: Rule[] = filter(rules, (f: Rule) =>
             (f.name.toLowerCase().includes(t) || f.description.toLowerCase().includes(t) || t === "")
         ) as Rule[]
         if (optionAllEnable !== "all") {
-             f = filter(f, (f:Rule) => !f.disabled)
+            f = filter(f, (f: Rule) => !f.disabled)
         }
         return f
     }
@@ -261,7 +300,7 @@ export const AccessControl = () => {
         } as Rule))
     }
 
-    const toggleModalGroups = (title:string, groups:Group[] | string[] | null, modalVisible:boolean) => {
+    const toggleModalGroups = (title: string, groups: Group[] | string[] | null, modalVisible: boolean) => {
         setGroupsToShow({
             title,
             groups,
@@ -269,40 +308,61 @@ export const AccessControl = () => {
         })
     }
 
-    const renderPopoverGroups = (label: string, groups:Group[] | string[] | null, rule: RuleDataTable) => {
+    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
+                onOpenChange={onPopoverVisibleChange}
+                open={groupPopupVisible}
+                content={content}
+                title={null}>
                 <Button type="link" onClick={() => setRuleAndView(rule)}>{label}</Button>
             </Popover>
         )
     }
 
-    return(
+    return (
         <>
             <Container className="container-main">
                 <Row>
                     <Col span={24}>
                         <Title level={4}>Access Control</Title>
                         <Paragraph>Access rules help you manage access permissions in your organisation.</Paragraph>
-                        <Space direction="vertical" size="large" style={{ display: 'flex' }}>
+                        <Space direction="vertical" size="large" style={{display: 'flex'}}>
                             <Row gutter={[16, 24]}>
                                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
-                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable} placeholder="Search..." onChange={onChangeTextToSearch} />
+                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
+                                           placeholder="Search..." onChange={onChangeTextToSearch}/>
                                 </Col>
                                 <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
                                     <Space size="middle">
@@ -313,7 +373,8 @@ export const AccessControl = () => {
                                             optionType="button"
                                             buttonStyle="solid"
                                         />
-                                        <Select value={pageSize.toString()} options={pageSizeOptions} onChange={onChangePageSize} className="select-rows-per-page-en"/>
+                                        <Select value={pageSize.toString()} options={pageSizeOptions}
+                                                onChange={onChangePageSize} className="select-rows-per-page-en"/>
                                     </Space>
                                 </Col>
                                 <Col xs={24}
@@ -324,13 +385,15 @@ export const AccessControl = () => {
                                      xxl={5} span={5}>
                                     <Row justify="end">
                                         <Col>
-                                            <Button type="primary" disabled={savedRule.loading} onClick={onClickAddNewRule}>Add Rule</Button>
+                                            <Button type="primary" disabled={savedRule.loading}
+                                                    onClick={onClickAddNewRule}>Add Rule</Button>
                                         </Col>
                                     </Row>
                                 </Col>
                             </Row>
                             {failed &&
-                                <Alert message={failed.code} description={failed.message} type="error" showIcon closable/>
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "} type="error" showIcon
+                                       closable/>
                             }
                             <Card bodyStyle={{padding: 0}}>
                                 <Table
@@ -353,24 +416,27 @@ export const AccessControl = () => {
                                             defaultSortOrder='ascend'
                                             render={(text, record, index) => {
                                                 const desc = (record as RuleDataTable).description.trim()
-                                                return <Tooltip title={desc !== "" ?  desc : "no description"} arrowPointAtCenter>
-                                                    <span onClick={() => setRuleAndView(record as RuleDataTable)} className="tooltip-label">{text}</span>
+                                                return <Tooltip title={desc !== "" ? desc : "no description"}
+                                                                arrowPointAtCenter>
+                                                    <span onClick={() => setRuleAndView(record as RuleDataTable)}
+                                                          className="tooltip-label"><Text strong>{text}</Text></span>
                                                 </Tooltip>
                                             }}
                                     />
                                     <Column title="Status" dataIndex="disabled"
-                                            render={(text:Boolean, record:RuleDataTable, index) => {
-                                                return text ? <Tag color="red">disabled</Tag> : <Tag color="green">enabled</Tag>
+                                            render={(text: Boolean, record: RuleDataTable, index) => {
+                                                return text ? <Tag color="red">disabled</Tag> :
+                                                    <Tag color="green">enabled</Tag>
                                             }}
                                     />
                                     <Column title="Sources" dataIndex="sourceLabel"
-                                            render={(text, record:RuleDataTable, index) => {
+                                            render={(text, record: RuleDataTable, index) => {
                                                 //return <Button type="link" onClick={() => toggleModalGroups(`${record.Name} - Sources`, record.Source, true)}>{text}</Button>
-                                                return renderPopoverGroups(text, record.sources,record as RuleDataTable)
+                                                return renderPopoverGroups(text, record.sources, record as RuleDataTable)
                                             }}
                                     />
                                     <Column title="Direction" dataIndex="flow"
-                                            render={(text, record:RuleDataTable, index) => {
+                                            render={(text, record: RuleDataTable, index) => {
                                                 const s = {minWidth: 50, textAlign: "center"} as React.CSSProperties
                                                 if (text === "bidirect")
                                                     return <Tag color="processing" style={s}><img src={bidirect}/></Tag>
@@ -379,22 +445,23 @@ export const AccessControl = () => {
                                                 } else if (text === "destToSrc") {
                                                     return <Tag color="green" style={s}><img src={inbound}/></Tag>
                                                 }
-                                                return <Tag color="red" style={s}><CloseOutlined /></Tag>
+                                                return <Tag color="red" style={s}><CloseOutlined/></Tag>
                                             }}
                                     />
                                     <Column title="Destinations" dataIndex="destinationLabel"
-                                            render={(text, record:RuleDataTable, index) => {
+                                            render={(text, record: RuleDataTable, index) => {
                                                 //return <Button type="link" onClick={() => toggleModalGroups(`${record.name} - Destinations`, record.destinations, true)}>{text}</Button>
-                                                return renderPopoverGroups(text, record.destinations,record as RuleDataTable)
+                                                return renderPopoverGroups(text, record.destinations, record as RuleDataTable)
                                             }}
                                     />
                                     <Column title="" align="center"
                                             render={(text, record, index) => {
                                                 if (deletedRule.loading || savedRule.loading) return <></>
-                                                return <Dropdown.Button type="text" overlay={actionsMenu} trigger={["click"]}
-                                                                     onVisibleChange={visible => {
-                                                                         if (visible) setRuleToAction(record as RuleDataTable)
-                                                                     }}></Dropdown.Button>
+                                                return <Dropdown.Button type="text" overlay={actionsMenu}
+                                                                        trigger={["click"]}
+                                                                        onVisibleChange={visible => {
+                                                                            if (visible) setRuleToAction(record as RuleDataTable)
+                                                                        }}></Dropdown.Button>
                                             }}
                                     />
                                 </Table>
@@ -409,7 +476,9 @@ export const AccessControl = () => {
                     </Col>
                 </Row>
             </Container>
-            <AccessControlModalGroups data={groupsToShow.groups} title={groupsToShow.title} visible={groupsToShow.modalVisible} onCancel={() => toggleModalGroups("", [], false)}/>
+            <AccessControlModalGroups data={groupsToShow.groups} title={groupsToShow.title}
+                                      visible={groupsToShow.modalVisible}
+                                      onCancel={() => toggleModalGroups("", [], false)}/>
             <AccessControlNew/>
         </>
     )

src/views/DNS.tsx

@@ -0,0 +1,484 @@
+import React, {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import {actions as nsGroupActions} from '../store/nameservers';
+import {Container} from "../components/Container";
+import {
+    Alert,
+    Button,
+    Card,
+    Col,
+    Dropdown,
+    Input,
+    Menu,
+    message,
+    Modal,
+    Popover,
+    Radio,
+    RadioChangeEvent,
+    Row,
+    Select,
+    Space,
+    Table,
+    Tag,
+    Typography,
+} from "antd";
+import {filter} from "lodash";
+import tableSpin from "../components/Spin";
+import {useGetAccessTokenSilently} from "../utils/token";
+import {actions as groupActions} from "../store/group";
+import {Group} from "../store/group/types";
+import {TooltipPlacement} from "antd/es/tooltip";
+import {NameServer, NameServerGroup} from "../store/nameservers/types";
+import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {useGetGroupTagHelpers} from "../utils/groups";
+
+const {Title, Paragraph} = Typography;
+const {Column} = Table;
+const {confirm} = Modal;
+
+interface NameserverGroupDataTable extends NameServerGroup {
+    key: string
+}
+
+const styleNotification = {marginTop: 85}
+
+export const DNS = () => {
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
+
+    const {
+        getGroupNamesFromIDs,
+    } = useGetGroupTagHelpers()
+
+    const groups = useSelector((state: RootState) => state.group.data)
+    const nsGroup = useSelector((state: RootState) => state.nameserverGroup.data);
+    const failed = useSelector((state: RootState) => state.nameserverGroup.failed);
+    const loading = useSelector((state: RootState) => state.nameserverGroup.loading);
+    const updateNameServerGroupVisible = useSelector((state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible)
+    const savedNSGroup = useSelector((state: RootState) => state.nameserverGroup.savedNameServerGroup)
+
+    const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
+    const [nsGroupToAction, setNsGroupToAction] = useState(null as NameserverGroupDataTable | null);
+    const [textToSearch, setTextToSearch] = useState('');
+    const [optionAllEnable, setOptionAllEnable] = useState('enabled');
+    const [pageSize, setPageSize] = useState(10);
+    const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]);
+    const [showTutorial, setShowTutorial] = useState(false)
+    const pageSizeOptions = [
+        {label: "5", value: "5"},
+        {label: "10", value: "10"},
+        {label: "15", value: "15"}
+    ]
+
+    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
+
+    // setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object
+    const setUserAndView = (nsGroup: NameServerGroup) => {
+        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+        dispatch(nsGroupActions.setNameServerGroup({
+            id: nsGroup.id,
+            name: nsGroup.name,
+            primary: nsGroup.primary,
+            domains: nsGroup.domains,
+            description: nsGroup.description,
+            nameservers: nsGroup.nameservers,
+            groups: nsGroup.groups,
+            enabled: nsGroup.enabled,
+        } as NameServerGroup));
+    }
+
+    const transformDataTable = (d: NameServerGroup[]): NameserverGroupDataTable[] => {
+        return d.map(p => ({key: p.id, ...p} as NameserverGroupDataTable))
+    }
+
+    useEffect(() => {
+        dispatch(nsGroupActions.getNameServerGroups.request({
+            getAccessTokenSilently: getAccessTokenSilently,
+            payload: null
+        }));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+    }, [])
+
+    useEffect(() => {
+        if (nsGroup.length > 0) {
+            setShowTutorial(false)
+        } else {
+            setShowTutorial(true)
+        }
+        setDataTable(transformDataTable(filterDataTable()))
+    }, [nsGroup])
+
+    useEffect(() => {
+        setDataTable(transformDataTable(filterDataTable()))
+    }, [textToSearch, optionAllEnable])
+
+    const filterDataTable = (): NameServerGroup[] => {
+        const t = textToSearch.toLowerCase().trim()
+        let f = filter(nsGroup, (f: NameServerGroup) =>
+            ((f.name).toLowerCase().includes(t) ||
+                f.name.includes(t) || t === "" ||
+                getGroupNamesFromIDs(f.groups).find(u => u.toLowerCase().trim().includes(t)) ||
+                f.domains.find(d => d.toLowerCase().trim().includes(t)) ||
+                f.nameservers.find(n => n.ip.includes(t)))
+        ) as NameServerGroup[]
+        if (optionAllEnable !== "all") {
+            f = filter(f, (f) => f.enabled)
+        }
+        return f
+    }
+
+    const onChangeAllEnabled = ({target: {value}}: RadioChangeEvent) => {
+        setOptionAllEnable(value)
+    }
+
+    const onChangeTextToSearch = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setTextToSearch(e.target.value)
+    };
+
+    const searchDataTable = () => {
+        setDataTable(transformDataTable(filterDataTable()))
+    }
+
+    const onChangePageSize = (value: string) => {
+        setPageSize(parseInt(value.toString()))
+    }
+
+    const onClickEdit = () => {
+        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+        dispatch(nsGroupActions.setNameServerGroup({
+            id: nsGroupToAction?.id,
+            name: nsGroupToAction?.name,
+            primary: nsGroupToAction?.primary,
+            domains: nsGroupToAction?.domains,
+            description: nsGroupToAction?.description,
+            groups: nsGroupToAction?.groups,
+            enabled: nsGroupToAction?.enabled,
+            nameservers: nsGroupToAction?.nameservers,
+        } as NameServerGroup));
+    }
+
+    const showConfirmDelete = () => {
+        confirm({
+            icon: <ExclamationCircleOutlined/>,
+            width: 600,
+            content: <Space direction="vertical" size="small">
+                {nsGroupToAction &&
+                    <>
+                        <Title level={5}>Delete Nameserver group "{nsGroupToAction ? nsGroupToAction.name : ''}"</Title>
+                        <Paragraph>Are you sure you want to delete this nameserver group from your account?</Paragraph>
+                    </>
+                }
+            </Space>,
+            okType: 'danger',
+            onOk() {
+                dispatch(nsGroupActions.deleteNameServerGroup.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: nsGroupToAction?.id || ''
+                }));
+            },
+            onCancel() {
+                setNsGroupToAction(null);
+            },
+        });
+    }
+
+    const renderPopoverGroups = (label: string, rowGroups: string[] | null, userToAction: NameserverGroupDataTable) => {
+
+        let groupsMap = new Map<string, Group>();
+        groups.forEach(g => {
+            groupsMap.set(g.id!, g)
+        })
+
+        let displayGroups: Group[] = []
+        if (rowGroups) {
+            displayGroups = rowGroups.filter(g => groupsMap.get(g)).map(g => groupsMap.get(g)!)
+        }
+
+        let btn = <Button type="link" onClick={() => setUserAndView(userToAction)}>{displayGroups.length}</Button>
+        if (!displayGroups || displayGroups!.length < 1) {
+            return btn
+        }
+
+        const content = displayGroups?.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>
+            )
+        })
+        const mainContent = (<Space direction="vertical">{content}</Space>)
+        let popoverPlacement = "top"
+        if (content && content.length > 5) {
+            popoverPlacement = "rightTop"
+        }
+
+        return (
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={userToAction.id}
+                     onOpenChange={onPopoverVisibleChange}
+                     open={groupPopupVisible}
+                     content={mainContent}
+                     title={null}>
+                {btn}
+            </Popover>
+        )
+    }
+
+    const renderPopoverDomains = (_: string, inputDomains: string[] | null, userToAction: NameserverGroupDataTable) => {
+        var domains = [] as string[]
+        if (inputDomains?.length) {
+            domains = inputDomains
+        }
+
+        let btn = <Button type="link"
+                          onClick={() => setUserAndView(userToAction)}>{domains.length ? domains.length : 0}</Button>
+        if (!domains || domains!.length < 1) {
+            return btn
+        }
+
+        const content = domains?.map((d, i) => {
+            return (
+                <div key={i}>
+                    <Tag
+                        color="blue"
+                        style={{marginRight: 3}}
+                    >
+                        <strong>{d}</strong>
+                    </Tag>
+                </div>
+            )
+        })
+
+        const mainContent = (<Space direction="vertical">{content}</Space>)
+        let popoverPlacement = "top"
+        if (content && content.length > 5) {
+            popoverPlacement = "rightTop"
+        }
+
+        return (
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={userToAction.id}
+                     onOpenChange={onPopoverVisibleChange}
+                     open={groupPopupVisible}
+                     content={mainContent}
+                     title={null}>
+                {btn}
+            </Popover>
+        )
+    }
+
+    useEffect(() => {
+        if (updateNameServerGroupVisible) {
+            setGroupPopupVisible(false)
+        }
+    }, [updateNameServerGroupVisible])
+
+    const createKey = 'saving';
+    useEffect(() => {
+        if (savedNSGroup.loading) {
+            message.loading({content: 'Saving...', key: createKey, duration: 0, style: styleNotification});
+        } else if (savedNSGroup.success) {
+            message.success({
+                content: 'User has been successfully saved.',
+                key: createKey,
+                duration: 2,
+                style: styleNotification
+            });
+            dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(false));
+            dispatch(nsGroupActions.setSavedNameServerGroup({...savedNSGroup, success: false}));
+            dispatch(nsGroupActions.resetSavedNameServerGroup(null))
+        } else if (savedNSGroup.error) {
+            let errorMsg = "Failed to update nameserver group"
+            switch (savedNSGroup.error.statusCode) {
+                case 403:
+                    errorMsg = "Failed to update nameserver group. You might not have enough permissions."
+                    break
+                default:
+                    errorMsg = savedNSGroup.error.data.message ? savedNSGroup.error.data.message : errorMsg
+                    break
+            }
+            message.error({
+                content: errorMsg,
+                key: createKey,
+                duration: 5,
+                style: styleNotification
+            });
+            dispatch(nsGroupActions.setSavedNameServerGroup({...savedNSGroup, error: null}));
+            dispatch(nsGroupActions.resetSavedNameServerGroup(null))
+        }
+    }, [savedNSGroup])
+
+    const onPopoverVisibleChange = () => {
+        if (updateNameServerGroupVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
+    const itemsMenuAction = [
+        {
+            key: "edit",
+            label: (<Button type="text" onClick={() => onClickEdit()}>View</Button>)
+        },
+        {
+            key: "delete",
+            label: (<Button type="text" onClick={() => showConfirmDelete()}>Delete</Button>)
+        },
+    ]
+
+    const actionsMenu = (<Menu items={itemsMenuAction}></Menu>)
+
+    const onClickAddNewNSGroup = () => {
+        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+        dispatch(nsGroupActions.setNameServerGroup({
+            enabled: true,
+            primary: true,
+        } as NameServerGroup))
+    }
+
+    return (
+        <>
+            <Container style={{paddingTop: "40px"}}>
+                <Row>
+                    <Col span={24}>
+                        <Title level={4}>Nameservers</Title>
+                        <Paragraph>Add nameservers for domain name resolution in your NetBird network</Paragraph>
+                        <Space direction="vertical" size="large" style={{display: 'flex'}}>
+                            <Row gutter={[16, 24]}>
+                                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
+                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
+                                           placeholder="Search..." onChange={onChangeTextToSearch}/>
+                                </Col>
+                                <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
+                                    <Space size="middle">
+                                        <Radio.Group
+                                            options={optionsAllEnabled}
+                                            onChange={onChangeAllEnabled}
+                                            value={optionAllEnable}
+                                            optionType="button"
+                                            buttonStyle="solid"
+                                        />
+                                        <Select value={pageSize.toString()} options={pageSizeOptions}
+                                                onChange={onChangePageSize} className="select-rows-per-page-en"/>
+                                    </Space>
+                                </Col>
+                                <Col xs={24}
+                                     sm={24}
+                                     md={5}
+                                     lg={5}
+                                     xl={5}
+                                     xxl={5} span={5}>
+                                    <Row justify="end">
+                                        <Col>
+                                            {!showTutorial &&
+                                                <Button type="primary" onClick={onClickAddNewNSGroup}>Add
+                                                    Nameserver</Button>}
+                                        </Col>
+                                    </Row>
+                                </Col>
+                            </Row>
+                            {failed &&
+                                <Alert message={failed.code} description={failed.message} type="error" showIcon
+                                       closable/>
+                            }
+                            <Card bodyStyle={{padding: 0}}>
+                                <Table
+                                    pagination={{
+                                        pageSize,
+                                        showSizeChanger: false,
+                                        showTotal: ((total, range) => `Showing ${range[0]} to ${range[1]} of ${total} users`)
+                                    }}
+                                    // className="card-table"
+                                    className={`access-control-table ${showTutorial ? "card-table card-table-no-placeholder" : "card-table"}`}
+                                    showSorterTooltip={false}
+                                    scroll={{x: true}}
+                                    loading={tableSpin(loading)}
+                                    dataSource={dataTable}>
+                                    <Column title="Name" dataIndex="name" align="center"
+                                            onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
+                                            sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))}
+                                            defaultSortOrder='ascend'
+                                            render={(text, record) => {
+                                                return <Button type="text"
+                                                               onClick={() => setUserAndView(record as NameserverGroupDataTable)}
+                                                               className="tooltip-label">{(text && text.trim() !== "") ? text : (record as NameServerGroup).id}</Button>
+                                            }}
+                                    />
+                                    <Column title="Status" dataIndex="enabled" align="center"
+                                            render={(text: Boolean) => {
+                                                return text ? <Tag color="green">enabled</Tag> :
+                                                    <Tag color="red">disabled</Tag>
+                                            }}
+                                    />
+                                    <Column title="Nameservers" dataIndex="nameservers" align="center"
+                                            render={(nameservers: NameServer[]) => (
+                                                <>
+                                                    {nameservers.map(nameserver => (
+                                                        <Tag key={nameserver.ip}>
+                                                            {nameserver.ip}
+                                                        </Tag>
+                                                    ))}
+                                                </>
+                                            )}
+                                    />
+                                    <Column title="All domains" dataIndex="primary" align="center"
+                                            render={(text: Boolean) => {
+                                                return text ? <Tag color="blue">yes</Tag> :
+                                                    <Tag>no</Tag>
+                                            }}
+                                    />
+                                    <Column title="Match domains" dataIndex="domains" align="center"
+                                            render={(text, record: NameserverGroupDataTable) => {
+                                                return renderPopoverDomains(text, record.domains, record)
+                                            }}
+                                    />
+                                    <Column title="Groups" dataIndex="groupsCount" align="center"
+                                            render={(text, record: NameserverGroupDataTable) => {
+                                                return renderPopoverGroups(text, record.groups, record)
+                                            }}
+                                    />
+                                    <Column title="" align="center" width="30px"
+                                            render={(text, record) => {
+                                                return (
+                                                    <Dropdown.Button type="text" overlay={actionsMenu}
+                                                                     trigger={["click"]}
+                                                                     onOpenChange={visible => {
+                                                                         if (visible) setNsGroupToAction(record as NameserverGroupDataTable)
+                                                                     }}></Dropdown.Button>)
+                                            }}
+                                    />
+                                </Table>
+                                {showTutorial &&
+                                    <Space direction="vertical" size="small" align="center"
+                                           style={{display: 'flex', padding: '45px 15px', justifyContent: 'center'}}>
+                                        <Paragraph type="secondary"
+                                                   style={{textAlign: "center", whiteSpace: "pre-line"}}>
+                                            It looks like you don't have any nameservers. {"\n"}
+                                            Get started by adding one to your network!
+                                        </Paragraph>
+                                        <Button type="primary" onClick={onClickAddNewNSGroup}>Add
+                                            Nameserver</Button>
+                                    </Space>
+                                }
+                            </Card>
+                        </Space>
+                    </Col>
+                </Row>
+            </Container>
+            <NameServerGroupUpdate/>
+        </>
+    )
+}
+
+export default DNS;

src/views/ExpiresInInput.tsx

@@ -0,0 +1,54 @@
+import {Input, Select, Space} from 'antd';
+import React, {useState} from 'react';
+
+const {Option} = Select;
+
+export interface ExpiresInValue {
+    number?: number;
+    interval?: string;
+}
+
+interface ExpiresInInputProps {
+    value?: ExpiresInValue;
+    onChange?: (value: ExpiresInValue) => void;
+}
+
+const ExpiresInInput: React.FC<ExpiresInInputProps> = ({value = {}, onChange}) => {
+    const [number, setNumber] = useState(60);
+    const [interval, setInterval] = useState("Days");
+
+    const triggerChange = (changedValue: { number?: number; interval?: string }) => {
+        onChange?.({number, interval, ...value, ...changedValue});
+    };
+
+    const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newNumber = parseInt(e.target.value || '0', 10);
+        setNumber(newNumber);
+        triggerChange({number: newNumber});
+    };
+
+    const onIntervalChange = (newInterval: string) => {
+        setInterval(newInterval);
+        triggerChange({interval: newInterval});
+    };
+
+    return (
+        <Space>
+            <Input
+                type="number"
+                value={value.number || number}
+                onChange={onNumberChange}
+            />
+             <Select style={{width: "100%"}}
+                     value={value?.interval || interval}
+                     onChange={onIntervalChange}>
+                <Option value="day">Days</Option>
+                <Option value="week">Weeks</Option>
+                <Option value="month">Months</Option>
+                <Option value="year">Years</Option>
+            </Select>
+    </Space>
+    );
+};
+
+export default ExpiresInInput;

src/views/Peers.tsx

@@ -6,7 +6,6 @@ import {actions as peerActions} from '../store/peer';
 import {actions as groupActions} from '../store/group';
 import {actions as routeActions} from '../store/route';
 import {Container} from "../components/Container";
-import {useOidcAccessToken} from '@axa-fr/react-oidc';
 import {
     Alert,
     Button,
@@ -30,29 +29,26 @@ import {
     Tooltip,
     Typography
 } from "antd";
-import {Peer} from "../store/peer/types";
+import {Peer, PeerDataTable} from "../store/peer/types";
 import {filter} from "lodash"
 import {formatOS, timeAgo} from "../utils/common";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
-import ButtonCopyMessage from "../components/ButtonCopyMessage";
 import {Group, GroupPeer} from "../store/group/types";
 import PeerUpdate from "../components/PeerUpdate";
 import tableSpin from "../components/Spin";
 import {TooltipPlacement} from "antd/es/tooltip";
+import {useGetAccessTokenSilently} from "../utils/token";
+import {actions as userActions} from "../store/user";
+import ButtonCopyMessage from "../components/ButtonCopyMessage";
 
 const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
 const {confirm} = Modal;
 
-interface PeerDataTable extends Peer {
-    key: string;
-    groups: Group[];
-    groupsCount: number;
-}
-
 export const Peers = () => {
 
-    const {accessToken} = useOidcAccessToken()
+    //const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
 
     const peers = useSelector((state: RootState) => state.peer.data);
@@ -64,12 +60,16 @@ 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 users = useSelector((state: RootState) => state.user.data);
 
     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 [showTutorial, setShowTutorial] = useState(false)
 
     const pageSizeOptions = [
         {label: "5", value: "5"},
@@ -107,12 +107,18 @@ export const Peers = () => {
     }
 
     useEffect(() => {
-        dispatch(peerActions.getPeers.request({getAccessTokenSilently: accessToken, payload: null}));
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
-        dispatch(routeActions.getRoutes.request({getAccessTokenSilently: accessToken, payload: null}));
+        dispatch(userActions.getUsers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(peerActions.getPeers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(routeActions.getRoutes.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [])
 
     useEffect(() => {
+        if (peers.length) {
+            setShowTutorial(false)
+        } else {
+            setShowTutorial(true)
+        }
         setDataTable(transformDataTable(peers))
     }, [peers, groups])
 
@@ -187,8 +193,14 @@ export const Peers = () => {
 
     const filterDataTable = (): Peer[] => {
         const t = textToSearch.toLowerCase().trim()
-        let f: Peer[] = filter(peers, (f: Peer) =>
-            (f.name.toLowerCase().includes(t) || f.ip.includes(t) || f.os.includes(t) || t === "")
+        let f: Peer[] = filter(peers, (f: Peer) => {
+                let userEmail: string | null
+                const u = users?.find(u => u.id === f.user_id)?.email
+                userEmail = u ? u : ""
+                return (f.name.toLowerCase().includes(t) || f.ip.includes(t) || f.os.includes(t) || t === "" ||
+                    f.groups?.find(u => u.name.toLowerCase().trim().includes(t)) ||
+                    (userEmail && userEmail.toLowerCase().includes(t)))
+            }
         ) as Peer[]
         if (optionOnOff === "on") {
             f = filter(peers, (f: Peer) => f.connected)
@@ -196,6 +208,14 @@ export const Peers = () => {
         return f
     }
 
+    const getGroupNamesFromIDs = (groupIDList: string[] | undefined): string[] => {
+        if (!groupIDList) {
+            return []
+        }
+
+        return groups?.filter(g => groupIDList.includes(g.id!)).map(g => g.name || '') || []
+    }
+
     const onChangeTextToSearch = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         setTextToSearch(e.target.value)
     };
@@ -240,7 +260,9 @@ export const Peers = () => {
                     <Alert
                         message={
                             <div>
-                                <>This peer is part of one or more network routes. Removing this peer will disable the following routes:</>
+                                <>This peer is part of one or more network routes. Removing this peer will disable the
+                                    following routes:
+                                </>
                                 <List
                                     dataSource={peerRoutes}
                                     renderItem={item => <List.Item><Text strong>- {item}</Text></List.Item>}
@@ -265,7 +287,7 @@ export const Peers = () => {
             okType: 'danger',
             onOk() {
                 dispatch(peerActions.deletedPeer.request({
-                    getAccessTokenSilently: accessToken,
+                    getAccessTokenSilently: getAccessTokenSilently,
                     payload: peerToAction ? peerToAction.ip : ''
                 }));
             },
@@ -296,7 +318,7 @@ export const Peers = () => {
             ssh_enabled: checked,
             name: record.name
         } as Peer
-        dispatch(peerActions.updatePeer.request({getAccessTokenSilently: accessToken, payload: peer}));
+        dispatch(peerActions.updatePeer.request({getAccessTokenSilently: getAccessTokenSilently, payload: peer}));
 
     }
 
@@ -305,6 +327,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}))
@@ -339,12 +375,62 @@ export const Peers = () => {
 
         return (
             <Popover placement={popoverPlacement as TooltipPlacement} key={peerToAction.key} content={mainContent}
+                     onOpenChange={onPopoverVisibleChange} open={groupPopupVisible}
                      title={null}>
                 <Button type="link" onClick={() => setUpdateGroupsVisible(peerToAction, true)}>{label}</Button>
             </Popover>
         )
     }
 
+    const renderAddress = (peer: PeerDataTable) => {
+        if (!peer.dns_label) {
+            return <ButtonCopyMessage keyMessage={peer.key}
+                                      toCopy={peer.ip}
+                                      body={peer.ip}
+                                      messageText={'IP copied'}
+                                      styleNotification={{}}/>
+        }
+
+        const body = <span style={{height: "auto", whiteSpace: "normal", textAlign: "left"}}>
+            <Row>
+               <ButtonCopyMessage keyMessage={peer.dns_label}
+                                  toCopy={peer.dns_label}
+                                  body={peer.dns_label}
+                                  messageText={'Peer domain copied'}
+                                  styleNotification={{}}/>
+            </Row>
+
+        <Row>
+            <ButtonCopyMessage keyMessage={peer.ip}
+                               toCopy={peer.ip}
+                               body={<Text type="secondary">{peer.ip}</Text>}
+                               messageText={'Peer IP copied'}
+                               style={{marginTop:'-10px'}}
+                               styleNotification={{}}/>
+  </Row>
+        </span>
+
+
+        return body
+    }
+
+    const renderName = (peer: PeerDataTable) => {
+        const userEmail = users?.find(u => u.id === peer.user_id)?.email
+        if (!userEmail) {
+            return <Button type="text" onClick={() => setUpdateGroupsVisible(peer, true)}>
+                <Text strong>{peer.name}</Text>
+            </Button>
+        }
+        return <div>
+            <Button type="text" style={{height: "auto", whiteSpace: "normal", textAlign: "left"}}
+                    onClick={() => setUpdateGroupsVisible(peer, true)}>
+                <Text strong>{peer.name}</Text>
+                <br/>
+                <Text type="secondary">{userEmail}</Text>
+            </Button>
+        </div>
+    }
+
     return (
         <>
             <Container style={{paddingTop: "40px"}}>
@@ -356,7 +442,6 @@ export const Peers = () => {
                         <Space direction="vertical" size="large" style={{display: 'flex'}}>
                             <Row gutter={[16, 24]}>
                                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
-                                    {/*<Input.Search allowClear value={textToSearch} onPressEnter={searchDataTable} onSearch={searchDataTable} placeholder="Search..." onChange={onChangeTextToSearch} />*/}
                                     <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
                                            placeholder="Search..." onChange={onChangeTextToSearch}/>
                                 </Col>
@@ -381,17 +466,18 @@ export const Peers = () => {
                                      xxl={5} span={5}>
                                     <Row justify="end">
                                         <Col>
-                                            <Link to="/add-peer" className="ant-btn ant-btn-primary ant-btn-block">Add
-                                                Peer</Link>
+                                            {!showTutorial &&
+                                                <Link to="/add-peer" className="ant-btn ant-btn-primary ant-btn-block">Add
+                                                    Peer</Link>}
                                         </Col>
                                     </Row>
                                 </Col>
                             </Row>
                             {failed &&
-                                <Alert message={failed.code} description={failed.message} type="error" showIcon
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "}
+                                       type="error" showIcon
                                        closable/>
                             }
-                            {/*{loading && <Loading/>}*/}
                             <Card bodyStyle={{padding: 0}}>
                                 <Table
                                     pagination={{
@@ -399,7 +485,7 @@ export const Peers = () => {
                                         showSizeChanger: false,
                                         showTotal: ((total, range) => `Showing ${range[0]} to ${range[1]} of ${total} peers`)
                                     }}
-                                    className="card-table"
+                                    className={`access-control-table ${showTutorial ? "card-table card-table-no-placeholder" : "card-table"}`}
                                     showSorterTooltip={false}
                                     scroll={{x: true}}
                                     loading={tableSpin(loading)}
@@ -407,13 +493,13 @@ export const Peers = () => {
                                     <Column title="Name" dataIndex="name"
                                             onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
                                             defaultSortOrder='ascend'
+                                            align="left"
                                             sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))}
                                             render={(text: string, record: PeerDataTable,) => {
-                                                return <Button type="text"
-                                                               onClick={() => setUpdateGroupsVisible(record, true)}>{text}</Button>
+                                                return renderName(record)
                                             }}
                                     />
-                                    <Column title="IP" dataIndex="ip"
+                                    <Column title="Address" dataIndex="ip"
                                             sorter={(a, b) => {
                                                 const _a = (a as any).ip.split('.')
                                                 const _b = (b as any).ip.split('.')
@@ -421,10 +507,8 @@ export const Peers = () => {
                                                 const b_s = _b.map((i: any) => i.padStart(3, '0')).join()
                                                 return a_s.localeCompare(b_s)
                                             }}
-                                            render={(text, record, index) => {
-                                                return <ButtonCopyMessage keyMessage={(record as PeerDataTable).key}
-                                                                          text={text} messageText={'IP copied!'}
-                                                                          styleNotification={{}}/>
+                                            render={(text: string, record: PeerDataTable, index: number) => {
+                                                return renderAddress(record)
                                             }}
                                     />
                                     <Column title="Status" dataIndex="connected" align="center"
@@ -467,7 +551,11 @@ export const Peers = () => {
 
                                     <Column title="LastSeen" dataIndex="last_seen"
                                             render={(text, record, index) => {
-                                                return (record as PeerDataTable).connected ? 'just now' : timeAgo(text)
+                                                console.log(text)
+                                                let dt = new Date(text)
+                                                return <Popover content={dt.toLocaleString()}>
+                                                           {(record as PeerDataTable).connected ? 'just now' : timeAgo(text)}
+                                                       </Popover>
                                             }}
                                     />
                                     <Column title="OS" dataIndex="os"
@@ -480,12 +568,24 @@ export const Peers = () => {
                                             render={(text, record, index) => {
                                                 return <Dropdown.Button type="text" overlay={actionsMenu}
                                                                         trigger={["click"]}
-                                                                        onVisibleChange={visible => {
+                                                                        onOpenChange={visible => {
                                                                             if (visible) setPeerToAction(record as PeerDataTable)
                                                                         }}></Dropdown.Button>
                                             }}
                                     />
                                 </Table>
+                                {showTutorial &&
+                                    <Space direction="vertical" size="small" align="center"
+                                           style={{display: 'flex', padding: '45px 15px', justifyContent: 'center'}}>
+                                        <Paragraph type="secondary"
+                                                   style={{textAlign: "center", whiteSpace: "pre-line"}}>
+                                            It looks like you don't have any connected machines. {"\n"}
+                                            Get started by adding one to your network!
+                                        </Paragraph>
+                                        <Link to="/add-peer" className="ant-btn ant-btn-primary ant-btn-block">Add
+                                            Peer</Link>
+                                    </Space>
+                                }
                             </Card>
                         </Space>
                     </Col>

src/views/Routes.tsx

@@ -1,43 +1,72 @@
 import React, {useEffect, useState} from 'react';
 import {
     Alert,
-    Button, Card,
-    Col, Dropdown, Input, Menu, message, Modal, Radio, RadioChangeEvent,
-    Row, Select, Space, Switch, Table, Tag, Tooltip, Typography, Divider
+    Button,
+    Card,
+    Col,
+    Divider,
+    Dropdown,
+    Input,
+    Menu,
+    message,
+    Modal, Popover,
+    Radio,
+    RadioChangeEvent,
+    Row,
+    Select,
+    Space,
+    Switch,
+    Table,
+    Tag,
+    Tooltip,
+    Typography
 } from "antd";
 import {Container} from "../components/Container";
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import {Route} from "../store/route/types";
+import {Route, RouteToSave} from "../store/route/types";
 import {actions as routeActions} from "../store/route";
 import {actions as peerActions} from "../store/peer";
 import {filter, sortBy} from "lodash";
-import { ExclamationCircleOutlined,QuestionCircleOutlined} from "@ant-design/icons";
+import {ExclamationCircleOutlined, QuestionCircleOutlined} from "@ant-design/icons";
 import RouteUpdate from "../components/RouteUpdate";
 import tableSpin from "../components/Spin";
-import {useOidcAccessToken} from '@axa-fr/react-oidc';
 import {
-    masqueradeDisabledMSG,masqueradeEnabledMSG,
-    peerToPeerIP,initPeerMaps,
-    RouteDataTable,GroupedDataTable,
-    transformGroupedDataTable,transformDataTable
+    GroupedDataTable,
+    initPeerMaps,
+    masqueradeDisabledMSG,
+    masqueradeEnabledMSG,
+    peerToPeerIP,
+    RouteDataTable,
+    transformDataTable,
+    transformGroupedDataTable
 } from '../utils/routes'
+import {useGetAccessTokenSilently} from "../utils/token";
+import {Group} from "../store/group/types";
+import {TooltipPlacement} from "antd/es/tooltip";
+import {actions as groupActions} from "../store/group";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
-const { Title, Paragraph } = Typography;
-const { Column } = Table;
-const { confirm } = Modal;
+const {Title, Paragraph, Text} = Typography;
+const {Column} = Table;
+const {confirm} = Modal;
 
 export const Routes = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
+    const {
+        getGroupNamesFromIDs,
+    } = useGetGroupTagHelpers()
 
+    const groups = useSelector((state: RootState) => state.group.data)
     const routes = useSelector((state: RootState) => state.route.data);
     const failed = useSelector((state: RootState) => state.route.failed);
     const loading = useSelector((state: RootState) => state.route.loading);
     const deletedRoute = useSelector((state: RootState) => state.route.deletedRoute);
     const savedRoute = useSelector((state: RootState) => state.route.savedRoute);
-    const peers =  useSelector((state: RootState) => state.peer.data)
+    const peers = useSelector((state: RootState) => state.peer.data)
     const loadingPeer = useSelector((state: RootState) => state.peer.loading);
+    const setupNewRouteVisible = useSelector((state: RootState) => state.route.setupNewRouteVisible)
     const [showTutorial, setShowTutorial] = useState(true)
     const [textToSearch, setTextToSearch] = useState('');
     const [optionAllEnable, setOptionAllEnable] = useState('enabled');
@@ -46,7 +75,8 @@ export const Routes = () => {
     const [dataTable, setDataTable] = useState([] as RouteDataTable[]);
     const [routeToAction, setRouteToAction] = useState(null as RouteDataTable | null);
     const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
-    const [expandRowsOnClick,setExpandRowsOnClick] = useState(true)
+    const [expandRowsOnClick, setExpandRowsOnClick] = useState(true)
+    const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
 
     const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
 
@@ -56,40 +86,39 @@ export const Routes = () => {
         {label: "15", value: "15"}
     ]
 
-    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'},{label: 'All', value: 'all'}]
+    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
 
     const itemsMenuAction = [
         {
             key: "view",
             label: (<Button type="text" block onClick={() => onClickViewRoute()}>View</Button>)
         },
-        // {
-        //     key: "delete",
-        //     label: (<Button type="text" block onClick={() => showConfirmDeactivate()}>Deactivate</Button>)
-        // },
         {
             key: "delete",
             label: (<Button type="text" block onClick={() => showConfirmDelete()}>Delete</Button>)
         }
     ]
-    const actionsMenu = (<Menu items={itemsMenuAction} ></Menu>)
+    const actionsMenu = (<Menu items={itemsMenuAction}></Menu>)
 
-    const isShowTutorial = (routes:Route[]):boolean => {
+    const isShowTutorial = (routes: Route[]): boolean => {
         return (!routes.length || (routes.length === 1 && routes[0].network === "Default"))
     }
 
     useEffect(() => {
-        dispatch(routeActions.getRoutes.request({getAccessTokenSilently:accessToken, payload: null}));
+        dispatch(routeActions.getRoutes.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [peers])
 
     useEffect(() => {
-        dispatch(peerActions.getPeers.request({getAccessTokenSilently:accessToken, payload: null}));
+        dispatch(peerActions.getPeers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [])
 
-    const filterGroupedDataTable = (routes:GroupedDataTable[]):GroupedDataTable[] => {
+    const filterGroupedDataTable = (routes: GroupedDataTable[]): GroupedDataTable[] => {
         const t = textToSearch.toLowerCase().trim()
-        let f:GroupedDataTable[] = filter(routes, (f) =>
-            (f.network_id.toLowerCase().includes(t) ||f.network.toLowerCase().includes(t) || f.description.toLowerCase().includes(t) || t === "")
+        let f: GroupedDataTable[] = filter(routes, (f) =>
+            (f.network_id.toLowerCase().includes(t) || f.network.toLowerCase().includes(t) ||
+                f.description.toLowerCase().includes(t) || t === "" ||
+                getGroupNamesFromIDs(f.routesGroups).find(u => u.toLowerCase().trim().includes(t)) )
         ) as GroupedDataTable[]
         if (optionAllEnable !== "all") {
             f = filter(f, (f) => f.enabled)
@@ -97,47 +126,75 @@ export const Routes = () => {
         return f
     }
 
-    useEffect(() =>{
-        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes,peerIPToName)))
-    },[dataTable])
+    useEffect(() => {
+        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes, peerIPToName)))
+    }, [dataTable])
 
     useEffect(() => {
-        setShowTutorial(isShowTutorial(routes))
-        setDataTable(sortBy(transformDataTable(routes,peerIPToName), "network_id"))
+        if (failed) {
+            setShowTutorial(false)
+        } else {
+            setShowTutorial(isShowTutorial(routes))
+            setDataTable(sortBy(transformDataTable(routes, peerIPToName), "network_id"))
+        }
     }, [routes])
 
     useEffect(() => {
-        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes,peerIPToName)))
+        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes, peerIPToName)))
     }, [textToSearch, optionAllEnable])
 
-    const styleNotification = { marginTop: 85 }
+    const styleNotification = {marginTop: 85}
 
     const saveKey = 'saving';
     useEffect(() => {
         if (savedRoute.loading) {
-            message.loading({ content: 'Saving...', key: saveKey, duration: 0, style: styleNotification })
+            message.loading({content: 'Saving...', key: saveKey, duration: 0, style: styleNotification})
         } else if (savedRoute.success) {
-            message.success({ content: 'Route has been successfully updated.', key: saveKey, duration: 2, style: styleNotification });
+            message.success({
+                content: 'Route has been successfully updated.',
+                key: saveKey,
+                duration: 2,
+                style: styleNotification
+            });
             dispatch(routeActions.setSetupNewRouteVisible(false))
-            dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }))
+            dispatch(routeActions.setSavedRoute({...savedRoute, success: false}))
             dispatch(routeActions.resetSavedRoute(null))
         } else if (savedRoute.error) {
-            message.error({ content: savedRoute.error.data? savedRoute.error.data : savedRoute.error.message, key: saveKey, duration: 2, style: styleNotification  });
-            dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }))
+            let errorMsg = "Failed to update network route"
+            switch (savedRoute.error.statusCode) {
+                case 403:
+                    errorMsg = "Failed to update network route. You might not have enough permissions."
+                    break
+                default:
+                    errorMsg = savedRoute.error.data.message ? savedRoute.error.data.message : errorMsg
+                    break
+            }
+            message.error({
+                content: errorMsg,
+                key: saveKey,
+                duration: 5,
+                style: styleNotification
+            });
+            dispatch(routeActions.setSavedRoute({...savedRoute, error: null}))
             dispatch(routeActions.resetSavedRoute(null))
         }
     }, [savedRoute])
 
     const deleteKey = 'deleting';
     useEffect(() => {
-        const style = { marginTop: 85 }
+        const style = {marginTop: 85}
         if (deletedRoute.loading) {
-            message.loading({ content: 'Deleting...', key: deleteKey, style })
+            message.loading({content: 'Deleting...', key: deleteKey, style})
         } else if (deletedRoute.success) {
-            message.success({ content: 'Route has been successfully disabled.', key: deleteKey, duration: 2, style })
+            message.success({content: 'Route has been successfully disabled.', key: deleteKey, duration: 2, style})
             dispatch(routeActions.resetDeletedRoute(null))
         } else if (deletedRoute.error) {
-            message.error({ content: 'Failed to remove route. You might not have enough permissions.', key: deleteKey, duration: 2, style  })
+            message.error({
+                content: 'Failed to remove route. You might not have enough permissions.',
+                key: deleteKey,
+                duration: 2,
+                style
+            })
             dispatch(routeActions.resetDeletedRoute(null))
         }
     }, [deletedRoute])
@@ -147,10 +204,10 @@ export const Routes = () => {
     };
 
     const searchDataTable = () => {
-        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes,peerIPToName)))
+        setGroupedDataTable(filterGroupedDataTable(transformGroupedDataTable(routes, peerIPToName)))
     }
 
-    const onChangeAllEnabled = ({ target: { value } }: RadioChangeEvent) => {
+    const onChangeAllEnabled = ({target: {value}}: RadioChangeEvent) => {
         setOptionAllEnable(value)
     }
 
@@ -160,7 +217,7 @@ export const Routes = () => {
 
     const showConfirmDelete = () => {
         confirm({
-            icon: <ExclamationCircleOutlined />,
+            icon: <ExclamationCircleOutlined/>,
             width: 600,
             content: <Space direction="vertical" size="small">
                 {routeToAction &&
@@ -172,7 +229,10 @@ export const Routes = () => {
             </Space>,
             okType: 'danger',
             onOk() {
-                dispatch(routeActions.deleteRoute.request({getAccessTokenSilently:accessToken, payload: routeToAction?.id || ''}));
+                dispatch(routeActions.deleteRoute.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: routeToAction?.id || ''
+                }));
             },
             onCancel() {
                 setRouteToAction(null);
@@ -181,9 +241,7 @@ export const Routes = () => {
     }
 
 
-
     const onClickAddNewRoute = () => {
-        dispatch(routeActions.setSetupNewRouteHA(true));
         dispatch(routeActions.setSetupNewRouteVisible(true));
         dispatch(routeActions.setRoute({
             network: '',
@@ -204,7 +262,7 @@ export const Routes = () => {
             network: routeToAction?.network,
             network_id: routeToAction?.network_id,
             description: routeToAction?.description,
-            peer: peerToPeerIP(routeToAction!.peer,peerNameToIP[routeToAction!.peer]),
+            peer: peerToPeerIP(routeToAction!.peer, peerNameToIP[routeToAction!.peer]),
             metric: routeToAction?.metric,
             masquerade: routeToAction?.masquerade,
             enabled: routeToAction?.enabled
@@ -220,10 +278,11 @@ export const Routes = () => {
             network: route.network,
             network_id: route.network_id,
             description: route.description,
-            peer: route.peer? peerToPeerIP(route.peer,peerNameToIP[route.peer]) : '',
-            metric: route.metric? route.metric : 9999,
+            peer: route.peer ? peerToPeerIP(route.peer, peerNameToIP[route.peer]) : '',
+            metric: route.metric ? route.metric : 9999,
             masquerade: route.masquerade,
-            enabled: route.enabled
+            enabled: route.enabled,
+            groups: route.groups
         } as Route))
         dispatch(routeActions.setSetupNewRouteVisible(true));
     }
@@ -239,7 +298,7 @@ export const Routes = () => {
         }
 
         confirm({
-            icon: <ExclamationCircleOutlined />,
+            icon: <ExclamationCircleOutlined/>,
             title: tittle,
             width: 600,
             content: content,
@@ -252,17 +311,77 @@ export const Routes = () => {
         });
     }
 
+    const onPopoverVisibleChange = () => {
+        if (setupNewRouteVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
     function handleSwitchMasquerade(routeGroup: GroupedDataTable, checked: boolean) {
         routeGroup.groupedRoutes.forEach((record) => {
             const route = {
                 ...record,
                 peer: peerNameToIP[record.peer],
                 masquerade: checked,
-            } as Route
-            dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: route}));
+                groupsToCreate: []
+            } as RouteToSave
+            dispatch(routeActions.saveRoute.request({getAccessTokenSilently: getAccessTokenSilently, payload: route}));
         })
     }
 
+    const renderPopoverGroups = (label: string, rowGroups: string[] | null, userToAction: RouteDataTable) => {
+
+        let groupsMap = new Map<string, Group>();
+        groups.forEach(g => {
+            groupsMap.set(g.id!, g)
+        })
+
+        let displayGroups: Group[] = []
+        if (rowGroups) {
+            displayGroups = rowGroups.filter(g => groupsMap.get(g)).map(g => groupsMap.get(g)!)
+        }
+
+        let btn = <Button type="link" onClick={() => setRouteAndView(userToAction)}>{displayGroups.length}</Button>
+
+        if (!displayGroups || displayGroups!.length < 1) {
+            return btn
+        }
+
+        const content = displayGroups?.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>
+            )
+        })
+        const mainContent = (<Space direction="vertical">{content}</Space>)
+        let popoverPlacement = "top"
+        if (content && content.length > 5) {
+            popoverPlacement = "rightTop"
+        }
+
+        return (
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={userToAction.id}
+                     onOpenChange={onPopoverVisibleChange}
+                     open={groupPopupVisible}
+                     content={mainContent}
+                     title={null}>
+                {btn}
+            </Popover>
+        )
+    }
+
     const expandedRowRender = (record: GroupedDataTable) => {
 
         return <Table
@@ -278,15 +397,21 @@ export const Routes = () => {
                     onFilter={(value: string | number | boolean, record) => (record as any).peer.includes(value)}
                     sorter={(a, b) => ((a as any).peer.localeCompare((b as any).peer))}
                     render={(text, record) => {
-                        return <span onClick={() => setRouteAndView(record as RouteDataTable)} className="tooltip-label">{text}</span>
+                        return <span onClick={() => setRouteAndView(record as RouteDataTable)}
+                                     className="tooltip-label">{text}</span>
                     }}
             />
             <Column title="Metric" dataIndex="metric" align="center"
                     onFilter={(value: string | number | boolean, record) => (record as any).metric.includes(value)}
                     sorter={(a, b) => ((a as any).metric - ((b as any).metric))}
             />
-            <Column title="Status" dataIndex="enabled" align="center"
-                    render={(text:Boolean) => {
+            <Column title="Groups" dataIndex="groupsCount" align="center"
+                    render={(text, record: RouteDataTable) => {
+                        return renderPopoverGroups(text, record.groups, record)
+                    }}
+            />
+            <Column title="Routing peer status" dataIndex="enabled" align="center"
+                    render={(text: Boolean) => {
                         return text ? <Tag color="green">enabled</Tag> : <Tag color="red">disabled</Tag>
                     }}
             />
@@ -294,7 +419,7 @@ export const Routes = () => {
                     render={(text, record) => {
                         if (deletedRoute.loading || savedRoute.loading) return <></>
                         return <Dropdown.Button type="text" overlay={actionsMenu} trigger={["click"]}
-                                                onVisibleChange={visible => {
+                                                onOpenChange={visible => {
                                                     if (visible) setRouteToAction(record as RouteDataTable)
                                                 }}></Dropdown.Button>
                     }}
@@ -302,17 +427,19 @@ export const Routes = () => {
         </Table>
     };
 
-    return(
+    return (
         <>
             <Container className="container-main">
                 <Row>
                     <Col span={24}>
                         <Title level={4}>Network Routes</Title>
-                        <Paragraph>Network routes allow you to create routes to access other networks without installing NetBird on every resource.</Paragraph>
-                        <Space direction="vertical" size="large" style={{ display: 'flex' }}>
+                        <Paragraph>Network routes allow you to create routes to access other networks without installing
+                            NetBird on every resource.</Paragraph>
+                        <Space direction="vertical" size="large" style={{display: 'flex'}}>
                             <Row gutter={[16, 24]}>
                                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
-                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable} placeholder="Search..." onChange={onChangeTextToSearch} />
+                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
+                                           placeholder="Search..." onChange={onChangeTextToSearch}/>
                                 </Col>
                                 <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
                                     <Space size="middle">
@@ -323,7 +450,8 @@ export const Routes = () => {
                                             optionType="button"
                                             buttonStyle="solid"
                                         />
-                                        <Select value={pageSize.toString()} options={pageSizeOptions} onChange={onChangePageSize} className="select-rows-per-page-en"/>
+                                        <Select value={pageSize.toString()} options={pageSizeOptions}
+                                                onChange={onChangePageSize} className="select-rows-per-page-en"/>
                                     </Space>
                                 </Col>
                                 <Col xs={24}
@@ -334,13 +462,15 @@ export const Routes = () => {
                                      xxl={5} span={5}>
                                     <Row justify="end">
                                         <Col>
-                                            <Button type="primary" disabled={savedRoute.loading} onClick={onClickAddNewRoute}>Add Route</Button>
+                                            <Button type="primary" disabled={savedRoute.loading}
+                                                    onClick={onClickAddNewRoute}>Add Route</Button>
                                         </Col>
                                     </Row>
                                 </Col>
                             </Row>
                             {failed &&
-                                <Alert message={failed.code} description={failed.message} type="error" showIcon closable/>
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "} type="error" showIcon
+                                       closable/>
                             }
                             <Card bodyStyle={{padding: 0}}>
                                 <Table
@@ -360,14 +490,17 @@ export const Routes = () => {
                                     expandable={{
                                         expandedRowRender,
                                         expandRowByClick: expandRowsOnClick,
-                                        onExpandedRowsChange: (r) => {setExpandRowsOnClick((!r.length))},
+                                        onExpandedRowsChange: (r) => {
+                                            setExpandRowsOnClick((!r.length))
+                                        },
                                     }}
                                 >
                                     <Column title={() =>
                                         <span>
                                             Network Identifier
-                                            <Tooltip title="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes">
-                                                <QuestionCircleOutlined style={{ marginLeft: '0.25em', color: "gray" }}/>
+                                            <Tooltip
+                                                title="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes">
+                                                <QuestionCircleOutlined style={{marginLeft: '0.25em', color: "gray"}}/>
                                             </Tooltip>
                                         </span>
                                     }
@@ -377,17 +510,21 @@ export const Routes = () => {
                                             sorter={(a, b) => ((a as any).network_id.localeCompare((b as any).network_id))}
                                             render={(text, record) => {
                                                 const desc = (record as RouteDataTable).description.trim()
-                                                return <Tooltip title={desc !== "" ?  desc : "no description"} arrowPointAtCenter>{text}</Tooltip>
+                                                return <Tooltip title={desc !== "" ? desc : "no description"}
+                                                                arrowPointAtCenter>
+                                                    <Text strong>{text}</Text>
+                                                </Tooltip>
                                             }}
                                     />
                                     <Column title="Network Range" dataIndex="network" align="center"
                                             onFilter={(value: string | number | boolean, record) => (record as any).network.includes(value)}
                                             sorter={(a, b) => ((a as any).network.localeCompare((b as any).network))}
-                                            // defaultSortOrder='ascend'
+                                        // defaultSortOrder='ascend'
                                     />
-                                    <Column title="Status" dataIndex="enabled" align="center"
-                                            render={(text:Boolean) => {
-                                                return text ? <Tag color="green">enabled</Tag> : <Tag color="red">disabled</Tag>
+                                    <Column title="Route status" dataIndex="enabled" align="center"
+                                            render={(text: Boolean) => {
+                                                return text ? <Tag color="green">enabled</Tag> :
+                                                    <Tag color="red">disabled</Tag>
                                             }}
                                     />
                                     <Column title="Masquerade Traffic" dataIndex="masquerade" align="center"
@@ -409,7 +546,9 @@ export const Routes = () => {
                                                 if (count > 1) {
                                                     tag = <Tag color="green">on</Tag>
                                                 }
-                                                return <div>{tag}<Divider type="vertical" /><Button type="link" onClick={() => setRouteAndView(record)}>Configure</Button></div>
+                                                return <div>{tag}<Divider type="vertical"/>
+                                                    <Button type="link" onClick={() => setRouteAndView(record)}>Configure</Button>
+                                                </div>
                                             }}
                                     />
                                 </Table>

src/views/SetupKeys.tsx

@@ -3,7 +3,6 @@ import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {actions as setupKeyActions} from '../store/setup-key';
 import {Container} from "../components/Container";
-import {useOidcAccessToken} from '@axa-fr/react-oidc';
 import {
     Alert,
     Button,
@@ -13,7 +12,8 @@ import {
     Input,
     Menu,
     message,
-    Modal, Popover,
+    Modal,
+    Popover,
     Radio,
     RadioChangeEvent,
     Row,
@@ -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 {useGetAccessTokenSilently} from "../utils/token";
 
 const {Title, Text, Paragraph} = Typography;
 const {Column} = Table;
@@ -44,7 +45,8 @@ interface SetupKeyDataTable extends SetupKey {
 }
 
 export const SetupKeys = () => {
-    const {accessToken} = useOidcAccessToken()
+    //const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
 
     const setupKeys = useSelector((state: RootState) => state.setupKey.data);
@@ -59,6 +61,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}
 
@@ -88,8 +92,8 @@ export const SetupKeys = () => {
     }
 
     useEffect(() => {
-        dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently: accessToken, payload: null}));
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
+        dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [])
 
     useEffect(() => {
@@ -180,31 +184,6 @@ export const SetupKeys = () => {
         setPageSize(parseInt(value.toString()))
     }
 
-    const showConfirmDelete = () => {
-        confirm({
-            icon: <ExclamationCircleOutlined/>,
-            width: 600,
-            content: <Space direction="vertical" size="small">
-                {setupKeyToAction &&
-                    <>
-                        <Title level={5}>Delete setupKey "{setupKeyToAction ? setupKeyToAction.name : ''}"</Title>
-                        <Paragraph>Are you sure you want to delete key?</Paragraph>
-                    </>
-                }
-            </Space>,
-            okType: 'danger',
-            onOk() {
-                dispatch(setupKeyActions.deleteSetupKey.request({
-                    getAccessTokenSilently: accessToken,
-                    payload: setupKeyToAction ? setupKeyToAction.id : ''
-                }));
-            },
-            onCancel() {
-                setSetupKeyToAction(null);
-            },
-        });
-    }
-
     const showConfirmRevoke = () => {
         confirm({
             icon: <ExclamationCircleOutlined/>,
@@ -220,7 +199,7 @@ export const SetupKeys = () => {
             okType: 'danger',
             onOk() {
                 dispatch(setupKeyActions.saveSetupKey.request({
-                    getAccessTokenSilently: accessToken,
+                    getAccessTokenSilently: getAccessTokenSilently,
                     payload: {
                         id: setupKeyToAction ? setupKeyToAction.id : null,
                         revoked: true,
@@ -240,7 +219,7 @@ export const SetupKeys = () => {
         dispatch(setupKeyActions.setSetupNewKeyVisible(true));
         dispatch(setupKeyActions.setSetupKey({
             name: "",
-            type: "reusable",
+            type: "one-off",
             auto_groups: autoGroups
         } as SetupKey))
     }
@@ -259,6 +238,7 @@ export const SetupKeys = () => {
             valid: key?.valid,
             auto_groups: key?.auto_groups,
             last_used: key?.last_used,
+            usage_limit: key?.usage_limit
         } as SetupKey))
     }
 
@@ -276,9 +256,24 @@ export const SetupKeys = () => {
             valid: setupKeyToAction?.valid,
             auto_groups: setupKeyToAction?.auto_groups,
             last_used: setupKeyToAction?.last_used,
+            usage_limit: setupKeyToAction?.usage_limit
         } 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 +313,11 @@ export const SetupKeys = () => {
         }
 
         return (
-            <Popover placement={popoverPlacement as TooltipPlacement} key={setupKeyToAction.key} content={mainContent}
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={setupKeyToAction.key}
+                     onOpenChange={onPopoverVisibleChange}
+                     open={groupPopupVisible}
+                     content={mainContent}
                      title={null}>
                 {btn}
             </Popover>
@@ -334,7 +333,7 @@ export const SetupKeys = () => {
         const autoGroups : string[] = []
         dispatch(setupKeyActions.setSetupKey({
             name: "",
-            type: "reusable",
+            type: "one-off",
             auto_groups: autoGroups
         } as SetupKey))
         dispatch(setupKeyActions.setSetupNewKeyVisible(false))
@@ -382,7 +381,7 @@ export const SetupKeys = () => {
                                 </Col>
                             </Row>
                             {failed &&
-                                <Alert message={failed.code} description={failed.message} type="error" showIcon
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "} type="error" showIcon
                                        closable/>
                             }
                             <Card bodyStyle={{padding: 0}}>
@@ -403,7 +402,8 @@ export const SetupKeys = () => {
                                             render={(text, record, index) => {
                                                 return <Button type="text"
                                                                onClick={() => setKeyAndView(record as SetupKeyDataTable)}
-                                                               className="tooltip-label">{text}</Button>
+                                                               className="tooltip-label">  <Text strong>{text}</Text>
+                                                </Button>
                                             }}
                                             defaultSortOrder='ascend'
                                     />
@@ -429,8 +429,10 @@ export const SetupKeys = () => {
                                             onFilter={(value: string | number | boolean, record) => (record as any).key.includes(value)}
                                             sorter={(a, b) => ((a as any).key.localeCompare((b as any).key))}
                                             render={(text, record, index) => {
+                                                const body = <Text>{text}</Text>
                                                 return <ButtonCopyMessage keyMessage={(record as SetupKeyDataTable).key}
-                                                                          text={text} messageText={`Key copied!`}
+                                                                          toCopy={text}
+                                                                          body={body} messageText={"Key copied"}
                                                                           styleNotification={{}}/>
                                             }}
                                     />
@@ -456,7 +458,7 @@ export const SetupKeys = () => {
                                                 return !(record as SetupKeyDataTable).revoked ? (
                                                     <Dropdown.Button type="text" overlay={actionsMenu}
                                                                      trigger={["click"]}
-                                                                     onVisibleChange={visible => {
+                                                                     onOpenChange={visible => {
                                                                          if (visible) setSetupKeyToAction(record as SetupKeyDataTable)
                                                                      }}></Dropdown.Button>) : <></>
                                             }}

src/views/Users.tsx

@@ -1,51 +1,91 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
-import { RootState } from "typesafe-actions";
-import { actions as userActions } from '../store/user';
+import {RootState} from "typesafe-actions";
+import {actions as userActions} from '../store/user';
 import {Container} from "../components/Container";
-import {useOidcAccessToken} from '@axa-fr/react-oidc';
 import {
-    Col,
-    Row,
-    Typography,
-    Table,
+    Alert,
+    Button,
     Card,
-    Space, Input, Select, Alert,
+    Col,
+    Dropdown,
+    Input,
+    Menu,
+    message,
+    Popover,
+    Row,
+    Select,
+    Space,
+    Table,
+    Tag,
+    Typography,
 } from "antd";
-import { User } from "../store/user/types";
+import {User} from "../store/user/types";
 import {filter} from "lodash";
 import tableSpin from "../components/Spin";
+import {useGetAccessTokenSilently} from "../utils/token";
+import UserUpdate from "../components/UserUpdate";
+import {actions as groupActions} from "../store/group";
+import {Group} from "../store/group/types";
+import {TooltipPlacement} from "antd/es/tooltip";
+import {useOidcUser} from "@axa-fr/react-oidc";
+import {Link} from "react-router-dom";
+import {actions as setupKeyActions} from "../store/setup-key";
+import {SetupKey} from "../store/setup-key/types";
+import {isLocalDev, isNetBirdHosted} from "../utils/common";
 
-const { Title, Paragraph } = Typography;
-const { Column } = Table;
+const {Title, Paragraph, Text} = Typography;
+const {Column} = Table;
 
 interface UserDataTable extends User {
     key: string
 }
 
+const styleNotification = {marginTop: 85}
+
 export const Users = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const {oidcUser} = useOidcUser();
     const dispatch = useDispatch()
 
+    const groups = useSelector((state: RootState) => state.group.data)
     const users = useSelector((state: RootState) => state.user.data);
     const failed = useSelector((state: RootState) => state.user.failed);
     const loading = useSelector((state: RootState) => state.user.loading);
+    const updateUserDrawerVisible = useSelector((state: RootState) => state.user.updateUserDrawerVisible)
+    const savedUser = useSelector((state: RootState) => state.user.savedUser)
 
+    const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
+    const [userToAction, setUserToAction] = useState(null as UserDataTable | null);
     const [textToSearch, setTextToSearch] = useState('');
-    const [pageSize, setPageSize] = useState(5);
+    const [pageSize, setPageSize] = useState(10);
     const [dataTable, setDataTable] = useState([] as UserDataTable[]);
+    const [currentUser, setCurrentUser] = useState({} as User)
     const pageSizeOptions = [
         {label: "5", value: "5"},
         {label: "10", value: "10"},
         {label: "15", value: "15"}
     ]
 
-    const transformDataTable = (d:User[]):UserDataTable[] => {
-        return d.map(p => ({ key: p.id, ...p } as UserDataTable))
+    // setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object
+    const setUserAndView = (user: User) => {
+        dispatch(userActions.setUpdateUserDrawerVisible(true));
+        dispatch(userActions.setUser({
+            id: user.id,
+            email: user.email,
+            role: user.role,
+            auto_groups: user.auto_groups ? user.auto_groups : [],
+            name: user.name
+        } as User));
+    }
+
+    const transformDataTable = (d: User[]): UserDataTable[] => {
+        return d.map(p => ({key: p.id, ...p} as UserDataTable))
     }
 
     useEffect(() => {
-        dispatch(userActions.getUsers.request({getAccessTokenSilently:accessToken,payload: null}));
+        dispatch(userActions.getUsers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}));
     }, [])
     useEffect(() => {
         setDataTable(transformDataTable(users))
@@ -55,9 +95,21 @@ export const Users = () => {
         setDataTable(transformDataTable(filterDataTable()))
     }, [textToSearch])
 
-    const filterDataTable = ():User[] => {
+    useEffect(() => {
+        if (oidcUser && oidcUser.sub) {
+            const found = users.find(u => u.id == oidcUser.sub)
+            if (found) {
+                setCurrentUser(found)
+            }
+        } else {
+            setCurrentUser({} as User)
+        }
+
+    }, [oidcUser, users])
+
+    const filterDataTable = (): User[] => {
         const t = textToSearch.toLowerCase().trim()
-        let f:User[] = filter(users, (f:User) =>
+        let f: User[] = filter(users, (f: User) =>
             ((f.email || f.id).toLowerCase().includes(t) || f.name.includes(t) || f.role.includes(t) || t === "")
         ) as User[]
         return f
@@ -76,54 +128,247 @@ export const Users = () => {
         setPageSize(parseInt(value.toString()))
     }
 
-    return(
-        <Container style={{paddingTop: "40px"}}>
-            <Row>
-                <Col span={24}>
-                    <Title level={4}>Users</Title>
-                    <Paragraph>A list of all Users</Paragraph>
-                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
-                        <Row gutter={[16, 24]}>
-                            <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
-                                <Input allowClear value={textToSearch} onPressEnter={searchDataTable} placeholder="Search..." onChange={onChangeTextToSearch} />
-                            </Col>
-                            <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
-                                <Space size="middle">
-                                    <Select value={pageSize.toString()} options={pageSizeOptions} onChange={onChangePageSize} className="select-rows-per-page-en"/>
-                                </Space>
-                            </Col>
-                        </Row>
-                        {failed &&
-                            <Alert message={failed.code} description={failed.message} type="error" showIcon closable/>
-                        }
-                        <Card bodyStyle={{padding: 0}}>
-                            <Table
-                                pagination={{pageSize, showSizeChanger: false, showTotal: ((total, range) => `Showing ${range[0]} to ${range[1]} of ${total} users`)}}
-                                className="card-table"
-                                showSorterTooltip={false}
-                                scroll={{x: true}}
-                                loading={tableSpin(loading)}
-                                dataSource={dataTable}>
-                                <Column title="Email" dataIndex="email"
-                                        onFilter={(value: string | number | boolean, record) => (record as any).email.includes(value)}
-                                        sorter={(a, b) => ((a as any).email.localeCompare((b as any).email))}
-                                        defaultSortOrder='ascend'
-                                        render={(text:string | null, record, index) => {
-                                            return (text && text.trim() !== "") ? text : (record as User).id
-                                        }}
-                                />
-                                <Column title="Name" dataIndex="name"
-                                        onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
-                                        sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))} />
-                                <Column title="Role" dataIndex="role"
-                                        onFilter={(value: string | number | boolean, record) => (record as any).role.includes(value)}
-                                        sorter={(a, b) => ((a as any).role.localeCompare((b as any).role))} />
-                            </Table>
-                        </Card>
-                    </Space>
-                </Col>
-            </Row>
-        </Container>
+    const onClickEdit = () => {
+        dispatch(userActions.setUpdateUserDrawerVisible(true));
+        dispatch(userActions.setUser({
+            id: userToAction?.id,
+            email: userToAction?.email,
+            auto_groups: userToAction?.auto_groups ? userToAction?.auto_groups : [],
+            name: userToAction?.name,
+            role: userToAction?.role,
+        } as User));
+    }
+
+    const onClickInviteUser = () => {
+        const autoGroups : string[] = []
+        dispatch(userActions.setUpdateUserDrawerVisible(true));
+        dispatch(userActions.setUser({
+            id: "",
+            email: "",
+            auto_groups: autoGroups,
+            name: "",
+            role: "user",
+        } as User));
+    }
+
+    const renderPopoverGroups = (label: string, rowGroups: string[] | string[] | null, userToAction: UserDataTable) => {
+
+        let groupsMap = new Map<string, Group>();
+        groups.forEach(g => {
+            groupsMap.set(g.id!, g)
+        })
+
+        let displayGroups: Group[] = []
+        if (rowGroups) {
+            displayGroups = rowGroups.filter(g => groupsMap.get(g)).map(g => groupsMap.get(g)!)
+        }
+
+        let btn = <Button type="link" onClick={() => setUserAndView(userToAction)}>{displayGroups.length}</Button>
+        if (!displayGroups || displayGroups!.length < 1) {
+            return btn
+        }
+
+        const content = displayGroups?.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>
+            )
+        })
+        const mainContent = (<Space direction="vertical">{content}</Space>)
+        let popoverPlacement = "top"
+        if (content && content.length > 5) {
+            popoverPlacement = "rightTop"
+        }
+
+        return (
+            <Popover placement={popoverPlacement as TooltipPlacement}
+                     key={userToAction.id}
+                     onOpenChange={onPopoverVisibleChange}
+                     open={groupPopupVisible}
+                     content={mainContent}
+                     title={null}>
+                {btn}
+            </Popover>
+        )
+    }
+
+    useEffect(() => {
+        if (updateUserDrawerVisible) {
+            setGroupPopupVisible(false)
+        }
+    }, [updateUserDrawerVisible])
+
+    const createKey = 'saving';
+    useEffect(() => {
+        if (savedUser.loading) {
+            message.loading({content: 'Saving...', key: createKey, duration: 0, style: styleNotification});
+        } else if (savedUser.success) {
+            message.success({
+                content: 'User has been successfully saved.',
+                key: createKey,
+                duration: 2,
+                style: styleNotification
+            });
+            dispatch(userActions.setUpdateUserDrawerVisible(false));
+            dispatch(userActions.setSavedUser({...savedUser, success: false}));
+            dispatch(userActions.resetSavedUser(null))
+        } else if (savedUser.error) {
+            let errorMsg = "Failed to update user"
+            switch (savedUser.error.statusCode) {
+                case 412:
+                    errorMsg = savedUser.error.data
+                    break
+                case 403:
+                    errorMsg = "Failed to update user. You might not have enough permissions."
+                    break
+            }
+            message.error({
+                content: errorMsg,
+                key: createKey,
+                duration: 5,
+                style: styleNotification
+            });
+            dispatch(userActions.setSavedUser({...savedUser, error: null}));
+            dispatch(userActions.resetSavedUser(null))
+        }
+    }, [savedUser])
+
+    const onPopoverVisibleChange = (b: boolean) => {
+        if (updateUserDrawerVisible) {
+            setGroupPopupVisible(false)
+        } else {
+            setGroupPopupVisible(undefined)
+        }
+    }
+
+    const itemsMenuAction = [
+        {
+            key: "edit",
+            label: (<Button type="text" onClick={() => onClickEdit()}>View</Button>)
+        },
+
+    ]
+    const actionsMenu = (<Menu items={itemsMenuAction}></Menu>)
+
+    return (
+        <>
+            <Container style={{paddingTop: "40px"}}>
+                <Row>
+                    <Col span={24}>
+                        <Title level={4}>Users</Title>
+                        <Paragraph>A list of all users{(window.location.hostname == "app.netbird.io") ? ". Users with an email from the same private organization domain will automatically join when they sign in for the first time." : ""}</Paragraph>
+                        <Space direction="vertical" size="large" style={{display: 'flex'}}>
+                            <Row gutter={[16, 24]}>
+                                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
+                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
+                                           placeholder="Search..." onChange={onChangeTextToSearch}/>
+                                </Col>
+                                <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
+                                    <Space size="middle">
+                                        <Select value={pageSize.toString()} options={pageSizeOptions}
+                                                onChange={onChangePageSize} className="select-rows-per-page-en"/>
+                                    </Space>
+                                </Col>
+                                <Col xs={24}
+                                     sm={24}
+                                     md={5}
+                                     lg={5}
+                                     xl={5}
+                                     xxl={5} span={5}>
+                                    {(isNetBirdHosted() || isLocalDev()) &&
+                                    <Row justify="end">
+                                        <Col>
+                                            <Button type="primary" onClick={onClickInviteUser}>Invite User</Button>
+                                        </Col>
+                                    </Row>}
+                                </Col>
+                            </Row>
+                            {failed &&
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "} type="error" showIcon
+                                       closable/>
+                            }
+                            <Card bodyStyle={{padding: 0}}>
+                                <Table
+                                    pagination={{
+                                        pageSize,
+                                        showSizeChanger: false,
+                                        showTotal: ((total, range) => `Showing ${range[0]} to ${range[1]} of ${total} users`)
+                                    }}
+                                    className="card-table"
+                                    showSorterTooltip={false}
+                                    scroll={{x: true}}
+                                    loading={tableSpin(loading)}
+                                    dataSource={dataTable}>
+                                    <Column title="Email" dataIndex="email"
+                                            onFilter={(value: string | number | boolean, record) => (record as any).email.includes(value)}
+                                            sorter={(a, b) => ((a as any).email.localeCompare((b as any).email))}
+                                            defaultSortOrder='ascend'
+                                            render={(text, record, index) => {
+                                                const btn = <Button type="text"
+                                                                           onClick={() => setUserAndView(record as UserDataTable)}
+                                                                           className="tooltip-label">
+                                                    <Text strong>{(text && text.trim() !== "") ? text : (record as User).id}</Text>
+                                                </Button>
+                                                if ((record as User).id !== currentUser.id) {
+                                                    return btn
+                                                }
+
+                                                return <div>{btn}
+                                                    <Tag color="blue">me</Tag>
+                                                </div>
+                                            }}
+                                    />
+                                    <Column title="Name" dataIndex="name"
+                                            onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
+                                            sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))}/>
+                                    <Column title="Status" dataIndex="status"
+                                            align="center"
+                                            onFilter={(value: string | number | boolean, record) => (record as any).status.includes(value)}
+                                            sorter={(a, b) => ((a as any).status.localeCompare((b as any).status))}
+                                            render={(text, record, index) => {
+                                                if (text == "active") {
+                                                    return <Tag color="green">{text}</Tag>
+                                                } else if (text === "invited"){
+                                                    return <Tag color="gold">{text}</Tag>
+                                                }
+                                                return <Tag color="red">{text}</Tag>
+                                            }}
+                                    />
+                                    <Column title="Groups" dataIndex="groupsCount" align="center"
+                                            render={(text, record: UserDataTable, index) => {
+                                                return renderPopoverGroups(text, record.auto_groups, record)
+                                            }}
+                                    />
+                                    <Column title="Role" dataIndex="role"
+                                            onFilter={(value: string | number | boolean, record) => (record as any).role.includes(value)}
+                                            sorter={(a, b) => ((a as any).role.localeCompare((b as any).role))}/>
+                                    <Column title="" align="center" width="30px"
+                                            render={(text, record, index) => {
+                                                return (
+                                                    <Dropdown.Button type="text" overlay={actionsMenu}
+                                                                     trigger={["click"]}
+                                                                     onVisibleChange={visible => {
+                                                                         if (visible) setUserToAction(record as UserDataTable)
+                                                                     }}></Dropdown.Button>)
+                                            }}
+                                    />
+                                </Table>
+                            </Card>
+                        </Space>
+                    </Col>
+                </Row>
+            </Container>
+            <UserUpdate/>
+        </>
     )
 }