Feature/access control

src/App.tsx

@@ -9,6 +9,8 @@ import Loading from "./components/Loading";
 import SetupKeys from "./views/SetupKeys";
 import AddPeer from "./views/AddPeer";
 import Users from './views/Users';
+import AccessControl from './views/AccessControl';
+// import Activity from './views/Activity';
 import Banner from "./components/Banner";
 import {store} from "./store";
 
@@ -111,8 +113,8 @@ function App() {
                             <Route path='/peers' exact component={Peers}/>
                             <Route path="/add-peer" component={AddPeer}/>
                             <Route path="/setup-keys" component={SetupKeys}/>
-                            {/*<Route path="/acls" component={AccessControl}/>
-                            <Route path="/activity" component={Activity}/>*/}
+                            <Route path="/acls" component={AccessControl}/>
+                            {/*<Route path="/activity" component={Activity}/>*/}
                             <Route path="/users" component={Users}/>
                         </Switch>
                     </Content>

src/components/AccessControlModalGroups.tsx

@@ -27,9 +27,9 @@ const AccessControlModalGroups:React.FC<Props> = ({data, title, visible, onCance
                     renderItem={(item:Group) => (
                         <List.Item>
                             <List.Item.Meta
-                                avatar={<Avatar>{item.Name.slice(0,1).toUpperCase()}</Avatar>}
-                                title={item.Name}
-                                description={`${item.PeersCount} peers`}
+                                avatar={<Avatar>{item.name.slice(0,1).toUpperCase()}</Avatar>}
+                                title={item.name}
+                                description={`${item.peers_count} peers`}
                             />
                         </List.Item>
                     )}

src/components/Navbar.tsx

@@ -5,8 +5,8 @@ import {useAuth0} from "@auth0/auth0-react";
 import {useLocation} from 'react-router-dom';
 import {Menu, Row, Col, Grid, Dropdown, Avatar, Button, Typography, Space} from 'antd'
 import {ItemType} from "antd/lib/menu/hooks/useItems";
-import {UserOutlined} from "@ant-design/icons";
 import {AvatarSize} from "antd/es/avatar/SizeContext";
+import { UserOutlined } from '@ant-design/icons';
 
 const { Text } = Typography
 const { useBreakpoint } = Grid;
@@ -30,8 +30,8 @@ const Navbar = () => {
         { 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="/activity">Activity</Link>), key: '/activity' },*/
+        { label: (<Link  to="/acls">Access Control</Link>), key: '/acls' },
+        // { label: (<Link  to="/activity">Activity</Link>), key: '/activity' },
         { label: (<Link  to="/users">Users</Link>), key: '/users' }
     ] as ItemType[])
 
@@ -80,7 +80,7 @@ const Navbar = () => {
 
     const createAvatar = (size:AvatarSize) => {
         return user?.picture ? (
-            <Avatar size={size} src={user?.picture}/>
+            <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />
         ) : (
             <Avatar size={size}>{(user?.name || '').slice(0, 1).toUpperCase()}</Avatar>
         )

src/components/PeerGroupsUpdate.tsx

@@ -0,0 +1,193 @@
+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 {
+    Col,
+    Row,
+    Typography,
+    Space,
+    Button, Drawer, Form, Select, Tag, Divider
+} from "antd";
+import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
+import {useAuth0} from "@auth0/auth0-react";
+import {PeerGroupsToSave} from "../store/peer/types";
+import {Group, GroupPeer} from "../store/group/types";
+
+const { Paragraph } = Typography;
+const { Option } = Select;
+
+const PeerGroupsUpdate = () => {
+    const { getAccessTokenSilently } = useAuth0()
+    const dispatch = useDispatch()
+    const groups =  useSelector((state: RootState) => state.group.data)
+    const peer =   useSelector((state: RootState) => state.peer.peer)
+    const updateGroupsVisible = useSelector((state: RootState) => state.peer.updateGroupsVisible)
+    const savedGroups = useSelector((state: RootState) => state.peer.savedGroups)
+
+    const [tagGroups, setTagGroups] = useState([] as string[])
+    const [selectedTagGroups, setSelectedTagGroups] = useState([] as string[])
+    const [peerGroups, setPeerGroups] = useState([] as GroupPeer[])
+    const [peerGroupsToSave, setPeerGroupsToSave] = useState({
+        ID: '',
+        groupsNoId: [],
+        groupsToSave: [],
+        groupsToRemove: [],
+        groupsToAdd: []
+    } as PeerGroupsToSave)
+
+    const [form] = Form.useForm()
+
+    useEffect(() => {
+        if (!peer) return
+        const gs = peer?.groups?.map(g => ({id: g?.id || '', name: g.name} as GroupPeer)) as GroupPeer[]
+        const gs_name = gs?.map(g => g.name) as string[]
+        setPeerGroups(gs)
+        setSelectedTagGroups(gs_name)
+        form.setFieldsValue({
+            groups: gs_name
+        })
+    }, [peer])
+
+    useEffect(() => {
+        setTagGroups(groups?.map(g => g.name) || [])
+    }, [groups])
+
+    useEffect(() => {
+        const groupsToRemove = peerGroups.filter(pg => !selectedTagGroups.includes(pg.name)).map(g => g.id)
+        const groupsToAdd = (groups as Group[]).filter(g => selectedTagGroups.includes(g.name) && !groupsToRemove.includes(g.id || '') && !peerGroups.find(pg => pg.id === g.id)).map(g => g.id) as string[]
+        const groupsNoId = selectedTagGroups.filter(stg => !groups.find(g => g.name === stg))
+        setPeerGroupsToSave({
+            ...peerGroupsToSave,
+            ID: peer?.id || '',
+            groupsToRemove,
+            groupsToAdd,
+            groupsNoId
+        })
+    }, [selectedTagGroups])
+
+    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 setUpdateGroupsVisible = (status:boolean) => {
+        dispatch(peerActions.setUpdateGroupsVisible(status));
+    }
+
+    const onCancel = () => {
+        dispatch(peerActions.setPeer(null))
+        setUpdateGroupsVisible(false)
+    }
+
+    const onChange = (data:any) => {
+        //setFormRule({...formRule, ...data})
+    }
+
+    const handleChangeTags = (value: string[]) => {
+        setSelectedTagGroups(value)
+    };
+
+    const handleFormSubmit = () => {
+        form.validateFields()
+            .then((values) => {
+                dispatch(peerActions.saveGroups.request({getAccessTokenSilently, payload: peerGroupsToSave}))
+            })
+            .catch((errorInfo) => {
+                console.log('errorInfo', errorInfo)
+            });
+    }
+
+    return (
+        <>
+            {peer &&
+                <Drawer
+                    title={`${peer.name}`}
+                    forceRender={true}
+                    visible={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 || (!peerGroupsToSave.groupsToRemove.length && !peerGroupsToSave.groupsToAdd.length && !peerGroupsToSave.groupsNoId.length)} onClick={handleFormSubmit}>Save</Button>
+                        </Space>
+                    }
+                >
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                        <Row gutter={16}>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="groups"
+                                    label="Groups"
+                                    rules={[{required: true, message: 'Please enter ate least one group'}]}
+                                    style={{display: 'flex'}}
+                                >
+                                    <Select mode="tags"  style={{ width: '100%' }} placeholder="Select groups..." tagRender={tagRender} dropdownRender={dropDownRender} onChange={handleChangeTags}>
+                                        {
+                                            tagGroups.map(m =>
+                                                <Option key={m}>{optionRender(m)}</Option>
+                                            )
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form>
+                </Drawer>
+            }
+        </>
+    )
+}
+
+export default PeerGroupsUpdate

src/components/SetupKeyNew.tsx

@@ -48,8 +48,8 @@ const SetupKeyNew = () => {
     const onCancel = () => {
         if (createdSetupKey.loading) return
         dispatch(setupKeyActions.setSetupKey({
-            Name: '',
-            Type: 'reusable'
+            name: '',
+            type: 'reusable'
         } as SetupKey))
         setVisibleNewSetupKey(false)
     }

src/components/Spin.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {SpinProps} from "antd";
+
+const TableSpin = (loading: boolean): SpinProps => {
+    return {
+        spinning: loading,
+        delay: 1,
+        size: "large"
+    }
+}
+
+export default TableSpin;

src/index.css

@@ -122,7 +122,17 @@ body {
   color: rgba(0, 0, 0, .85) !important;
 }
 
-.access-control.ant-drawer-title:hover {
+.access-control-table .tooltip-label:hover {
   text-decoration: underline;
   cursor: pointer;
+}
+
+.access-control.input-text:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.access-control.ant-drawer-subtitle {
+  line-height: 22px;
+  margin: 24px 0;
 }

src/index.tsx

@@ -25,19 +25,6 @@ const providerConfig = {
     onRedirectCallback,
 };
 
-/*
-ReactDOM.render(
-    <Auth0Provider {...providerConfig}>
-        <React.StrictMode>
-            <BrowserRouter>
-                <App/>
-            </BrowserRouter>
-        </React.StrictMode>
-    </Auth0Provider>,
-    document.getElementById('root')
-);
-*/
-
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );

src/store/group/sagas.ts

@@ -39,7 +39,7 @@ export function* saveGroup(action: ReturnType<typeof actions.saveGroup.request>)
     } as CreateResponse<Group | null>))
 
     let effect
-    if (action.payload.payload.ID) {
+    if (action.payload.payload.id) {
       effect = yield call(service.editGroup, action.payload);
     } else {
       effect = yield call(service.createGroup, action.payload);
@@ -94,7 +94,7 @@ export function* deleteGroup(action: ReturnType<typeof actions.deleteGroup.reque
     } as DeleteResponse<string | null>));
 
     const rules = (yield select(state => state.rule.data)) as Group[]
-    yield put(actions.getGroups.success(rules.filter((p:Group) => p.ID !== action.payload.payload)))
+    yield put(actions.getGroups.success(rules.filter((p:Group) => p.id !== action.payload.payload)))
   } catch (err) {
     yield put(actions.deleteGroup.failure({
       loading: false,

src/store/group/service.ts

@@ -29,8 +29,10 @@ export default {
     );
   },
   async editGroup(payload:RequestPayload<Group>): Promise<ApiResponse<Group>> {
+    const id = payload.payload.id
+    delete payload.payload.id
     return apiClient.put<Group>(
-        `${baseUrl}`,
+        `${baseUrl}/${id}`,
         payload
     );
   },

src/store/group/types.ts

@@ -1,6 +1,11 @@
 export interface Group {
-    ID?: string;
-    Name: string;
-    Peers?: any[];
-    PeersCount?: string;
+    id?: string;
+    name: string;
+    peers?: GroupPeer[] | string[];
+    peers_count?: string;
+}
+
+export interface GroupPeer {
+    id: string,
+    name: string
 }