From 4baec11a821cd45fd918857465cf454cd51688fa Mon Sep 17 00:00:00 2001
From: Leon <>
Date: Thu, 27 Jan 2022 11:59:11 +0200
Subject: [PATCH 1/2] field name change

---
 ui/src/components/UserSettings/UserSettings.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx
index bc0b19a35..5760b8e8d 100644
--- a/ui/src/components/UserSettings/UserSettings.tsx
+++ b/ui/src/components/UserSettings/UserSettings.tsx
@@ -22,7 +22,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
 
     const [usersRows, setUserRows] = useState([]);
     const [userData,SetUsetData] = useState({} as UserData)
-    const cols : ColsType[] = [{field : "userName",header:"User"},
+    const cols : ColsType[] = [{field : "username",header:"User"},
                                {field : "role",header:"Role"},
                                {field : "status",header:"Status",getCellClassName : (field, val) =>{
                                    return val === "Active" ? "status--active" : "status--pending"
@@ -34,7 +34,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
     useEffect(() => {
         (async () => {
             try {
-                const users = [{userName:"asd",role:"Admin",status:"Active"}]//await api.getUsers() 
+                const users = [{username:"asd",role:"Admin",status:"Active"}]//await api.getUsers() 
                 setUserRows(users)                                
             } catch (e) {
                 console.error(e);
@@ -44,21 +44,21 @@ export const UserSettings : React.FC<Props> = ({}) => {
 
     const filterFuncFactory = (searchQuery: string) => {
         return (row) => {
-            return row.userName.toLowerCase().includes(searchQuery.toLowerCase())
+            return row.username.toLowerCase().includes(searchQuery.toLowerCase())
         }
     }
 
     const searchConfig = { searchPlaceholder: "Search User",filterRows: filterFuncFactory}
     
     const onRowDelete = (row) => {
-        const filterFunc = filterFuncFactory(row.userName)
+        const filterFunc = filterFuncFactory(row.username)
         const newUserList = usersRows.filter(filterFunc)
         setUserRows(newUserList)
     }
 
     const onRowEdit = (row) => {
-        SetUsetData(row)
-        setIsOpen(true)
+        //SetUsetData(row)
+        //setIsOpen(true)
     }
 
 

From 0633df4c63c15ff22ac42fe3ef659a442087281c Mon Sep 17 00:00:00 2001
From: Leon <>
Date: Thu, 27 Jan 2022 14:57:38 +0200
Subject: [PATCH 2/2] delete user

---
 .../Modals/AddUserModal/AddUserModal.tsx      | 38 ++++++++++++-----
 .../components/UserSettings/UserSettings.tsx  | 42 +++++++++++++------
 ui/src/helpers/api.js                         | 15 +++++++
 3 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
index afa688db9..c8620f1b9 100644
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
@@ -3,14 +3,17 @@ import { FC, useEffect, useState } from 'react';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
+import {toast} from "react-toastify";
 import SelectList from '../../UI/SelectList';
 import './AddUserModal.sass';
 import spinner from "../../assets/spinner.svg";
+import { values } from 'mobx';
 
 export type UserData = {
   role:string;
   username : string;
   workspace : string;
+  userId: string;
 }
 
 interface AddUserModalProps {
@@ -53,26 +56,37 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                   "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
                   "name": "test"
               }
-          ]//{"default":true} //await api.getWorkspaces() 
-            setWorkspaces(workspacesList)    
+          ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
+          //await api.getWorkspaces() 
+          setWorkspaces(workspacesList)    
                           
         } catch (e) {
-            console.error(e);
+            toast.error("Error finding workspaces")
         }
     })();
 },[])
 
   useEffect(()=> {
-    setUserData(userData as UserData)
+    (async () => {
+      try { 
+         //if edit
+        //  const userDetails = await api.getUserDetails(userData)
+        //  setUserData(userDetails)
+        setUserData(userData as UserData)
+      } catch (e) {
+          toast.error("Error getting user details")
+      }
+  })();
   },[userData])
 
   // const onClose = () => {
   //   setIsOpen(false)
   // }
 
-  const onConfirm = () => {
-    setUserData({} as UserData)
+  const onClose = () => {
     onCloseModal()
+    setUserData({} as UserData)
+    
   }
 
   const workspaceChange = (newVal) => {
@@ -105,18 +119,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
   const setGenarateDisabledState = () => {
     const isValid = isFormValid()
     setDisable(!isValid)
-    
   }
 
   const generateLink =  () => {
     try {
       //const res = await api.genareteInviteLink(userDataModel) 
       //setInvite({...invite,isSuceeded:true,sent:true,link:res})
+      //toast.success("User has been added") 
 
+      //if edit
+      api.updateUser(userDataModel)
       setInvite({...invite,isSuceeded:true,sent:true,link:"asdasdasdasdasdasdasdasdads"})
-      setShowAlert({open:true,sevirity:"error"})             
+      toast.success("User has been modified")     
   } catch (e) {
-    setShowAlert({open:true,sevirity:"error"}) 
+    toast.error("Error accrued generating link") 
   }
     
   }
@@ -148,7 +164,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
             label="Invite link"
           />
         </FormControl>
-            <Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onConfirm}>
+            <Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onClose}>
                         Done
             </Button>
       </div>}
@@ -156,7 +172,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
 
   return (<>
 
-    <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User' customActions={modalCustomActions}>
+    <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onClose} title='Add User' customActions={modalCustomActions}>
 
       <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
       <div className='comfirmation-modal__sub-section'>
diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx
index ba9f7db87..097c93b5b 100644
--- a/ui/src/components/UserSettings/UserSettings.tsx
+++ b/ui/src/components/UserSettings/UserSettings.tsx
@@ -3,6 +3,8 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 // import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
 import { UserData,AddUserModal } from "../Modals/AddUserModal/AddUserModal";
+import Api from '../../helpers/api';
+
 import {Snackbar} from "@material-ui/core";
 import MuiAlert from "@material-ui/lab/Alert";
 import { Select } from "../UI/Select";
@@ -10,17 +12,19 @@ import { MenuItem } from "@material-ui/core";
 import { settings } from "cluster";
 import { SettingsModal } from "../SettingsModal/SettingModal";
 import OasModal from "../Modals/OasModal/OasModal";
+import { apiDefineProperty } from "mobx/dist/internal";
+import { toast } from "react-toastify";
 
 interface Props {
 
 }
 
-// const api = Api.getInstance();
+const api = Api.getInstance();
 
 export const UserSettings : React.FC<Props> = ({}) => {
 
     const [usersRows, setUserRows] = useState([]);
-    const [userData,SetUsetData] = useState({} as UserData)
+    const [userData,userUserData] = useState({} as UserData)
     const cols : ColsType[] = [{field : "username",header:"User"},
                                {field : "role",header:"Role"},
                                {field : "status",header:"Status",getCellClassName : (field, val) =>{
@@ -33,7 +37,8 @@ export const UserSettings : React.FC<Props> = ({}) => {
     useEffect(() => {
         (async () => {
             try {
-                const users = [{username:"asd",role:"Admin",status:"Active"}]//await api.getUsers() 
+                const users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
+                               {username:"aaaaaaa",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
                 setUserRows(users)                                
             } catch (e) {
                 console.error(e);
@@ -43,21 +48,32 @@ export const UserSettings : React.FC<Props> = ({}) => {
 
     const filterFuncFactory = (searchQuery: string) => {
         return (row) => {
-            return row.username.toLowerCase().includes(searchQuery.toLowerCase())
+            return row.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                   row.userId.toLowerCase().includes(searchQuery.toLowerCase())
         }
     }
 
     const searchConfig = { searchPlaceholder: "Search User",filterRows: filterFuncFactory}
     
-    const onRowDelete = (row) => {
-        const filterFunc = filterFuncFactory(row.username)
-        const newUserList = usersRows.filter(filterFunc)
-        setUserRows(newUserList)
+    const onRowDelete = (user) => {
+        const findFunc = filterFuncFactory(user.userId);
+        const userToDelete = usersRows.find(findFunc);
+        (async() => {
+            try {
+                //await api.deleteUser(user)
+                const usersLeft = usersRows.filter(e => !findFunc(e))
+                setUserRows(usersLeft)
+                toast.success("User Deleted succesesfully")
+            } catch (error) {
+                toast.error("User want not deleted")
+            }
+        })()
+        
     }
 
     const onRowEdit = (row) => {
-        //SetUsetData(row)
-        //setIsOpen(true)
+        userUserData(row)
+        setIsOpen(true)
     }
 
 
@@ -68,14 +84,14 @@ export const UserSettings : React.FC<Props> = ({}) => {
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={usersRows} cols={cols}>
         </FilterableTableAction>
-        <AddUserModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false); } } userData={userData} setShowAlert={setAlert}>
+        <AddUserModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false);userUserData({} as UserData) } } userData={userData} setShowAlert={setAlert}>
         </AddUserModal>
-        <Snackbar open={alert.open} classes={{root: "alert--right"}}>
+        {/* <Snackbar open={alert.open} classes={{root: "alert--right"}}>
         <MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"
                   onClose={() => setAlert({...alert,open:false})} severity={"success"}>
                     User has been added
         </MuiAlert>
-    </Snackbar>
+    </Snackbar> */}
         {/* <SettingsModal isOpen={false} onClose={function (): void {
             throw new Error("Function not implemented.");
         } } isFirstLogin={false}></SettingsModal> */}
diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js
index 5177d01cd..611264854 100644
--- a/ui/src/helpers/api.js
+++ b/ui/src/helpers/api.js
@@ -53,6 +53,21 @@ export default class Api {
         return response.data;
     }
 
+    getUserDetails = async(user) => {
+        const response = await this.client.get(`/user/${user.userId}`);
+        return response.data;
+    }
+
+    updateUser = async(user) => {
+        const response = await this.client.put(`/user/${user.userId}`,user);
+        return response.data;
+    }
+
+    deleteUser = async(user) => {
+        const response = await this.client.delete(`/user/${user.userId}`);
+        return response.data;
+    }
+
     genareteInviteLink = async(userData)  =>{
         const response = await this.client.post(`/user/createUserAndInvite`,userData);
         return response.data;