changes

ui/src/components/Modals/AddUserModal/AddUserModal.sass

@@ -55,4 +55,7 @@
 .search-workspace
     width: 186px
 
+.u-margin-left
+    margin-left : 20px
+
 

ui/src/components/Modals/AddUserModal/AddUserModal.tsx

@@ -60,6 +60,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                   "name": "test"
               }
           ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
+          
           //await api.getWorkspaces() 
           setWorkspaces(workspacesList)    
                           
@@ -73,15 +74,6 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
     (async () => {
       try { 
           setEditMode(isEditMode)
-          if (isEditMode) {
-            
-            //const userDetails = await api.getUserDetails(userData)
-            //const data = {...userData,...userDetails}
-            
-          }
-          else{
-            
-          }
           setUserData(userData as UserData)
       } catch (e) {
           toast.error("Error getting user details")
@@ -97,6 +89,18 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
     onCloseModal()
     setUserData({} as UserData)
     setInvite({sent:false,isSuceeded:false,link:""})
+    setEditMode(false)
+    setDisable(true)
+  }
+
+  const updateUser = async() =>{
+      try {
+        const res = await api.updateUser(userDataModel)
+        onClose()
+        toast.success("User has been modified")  
+      } catch (error) {
+        toast.error("Error accured modifing user")  
+      }
   }
 
   const workspaceChange = (workspaces) => {
@@ -124,8 +128,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
   };
 
   const isFormValid = () : boolean => {
-    return true;
+    return (Object.values(userDataModel).length >= 3) && Object.values(userDataModel).every(val => val !== null)
-    //return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null)
   }
 
   const setGenarateDisabledState = () => {
@@ -133,39 +136,59 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
     setDisable(!isValid)
   }
 
-  const generateLink =  () => {
+  const mapTokenToLink = (token) => {
-    try {
+    return`${window.location.origin}/${token}`
-      if (editMode) {
+  }
-        //await api.updateUser(userDataModel)
-        setInvite({...invite,isSuceeded:true,sent:true,link:"asdasdasdasdasdasdasdasdads"})
-        toast.success("User has been modified")  
-      }
-      else{
-        //const res = await api.genareteInviteLink(userDataModel) 
-        setInvite({...invite,isSuceeded:true,sent:true, link:"asdasdasdasdasdasdasdasdads"})
-        toast.success("User has been added") 
-      }
 
-      onUserChange(userDataModel)
+  const generateLink =  async() => {
-   
+      try {
+        const res = await api.genareteInviteLink(userDataModel) 
+        setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)})
+        toast.success("User has been added") 
+        onUserChange(userDataModel)   
+    } catch (e) {
+      toast.error("Error accrued generating link") 
+    }
+  }
+
+  const inviteExistingUser = async() => {
+    try {
+      const res = await api.inviteExistingUser(userDataModel.userId) 
+      setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)})
+      toast.success("Invite link created") 
+      onUserChange(userDataModel)   
   } catch (e) {
     toast.error("Error accrued generating link") 
   }
-    
+  }
+
+  const isShowInviteLink = () => {
+    return ((invite.isSuceeded && invite.link));
+  }
+
+  const showGenerateButton = () => {
+    return (!invite.isSuceeded || !(invite.link && invite.sent)) 
   }
 
   const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)}
 
-  const modalCustomActions = <>
+  const addUsermodalCustomActions = <>
-            {(!invite.isSuceeded || !(invite.link && invite.sent)) && <Button 
+            {showGenerateButton() && <Button 
-                                            className={classes.button + " generate-link-button"} size={"small"} onClick={generateLink}
+                                            className={classes.button + " generate-link-button"} size={"small"} 
+                                            onClick={!isEditMode ? generateLink : inviteExistingUser}
                                             disabled={disable}  
                                             endIcon={isLoading && <img src={spinner} alt="spinner"/>}>
                                               <span className='generate-link-button__icon'></span>
                                               {"Generate Invite Link"}
                               </Button>}
-                              {invite.isSuceeded && invite.link && <div className="invite-link-row">
+                              {
-        <FormControl variant="outlined" size={"small"} className='invite-link-field'>
+              isEditMode && <Button style={{height: '100%'}} disabled={disable} className={classes.button + " u-margin-left"} size={"small"} onClick={updateUser}>
+              Save
+            </Button>
+          }
+      
+      <div className="invite-link-row">
+      {isShowInviteLink() && <FormControl variant="outlined" size={"small"} className='invite-link-field'>
           <InputLabel htmlFor="outlined-adornment-password">Invite link</InputLabel>
           <OutlinedInput 
             type={'text'}
@@ -177,20 +200,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                   {<span className='generate-link-button__icon'></span>}
                 </IconButton>
               </InputAdornment>
-            }
+            } label="Invite link"/>
-            label="Invite link"
+        </FormControl>}
-          />
+           {!isEditMode &&  isShowInviteLink() &&  <Button style={{height: '100%'}} className={classes.button + " u-margin-left"} size={"small"} onClick={onClose}>
-        </FormControl>
-            <Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onClose}>
                         Done
-            </Button>
+            </Button>}
-      </div>}
+
-                            </>;
+      </div>
+
+   </>;
 
   return (<>
 
     <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onClose} 
-                       title={`${editMode ? "Edit" : "Add"} User`} customActions={modalCustomActions}>
+                       title={`${editMode ? "Edit" : "Add"} User`} customActions={addUsermodalCustomActions}>
 
       <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
       <div className='comfirmation-modal__sub-section'>
@@ -225,7 +248,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                     onChange={(event) => setSearchValue(event.target.value)}/>
         </div>
         <SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue} 
-                    setValues= {workspaceChange} tabelClassName={''} >
+                    setValues= {workspaceChange} tabelClassName={''}>
         </SelectList>
       </div>
 

ui/src/components/UserSettings/UserSettings.tsx

@@ -22,6 +22,11 @@ interface Props {
 
 const api = Api.getInstance();
 
+enum InviteStatus{
+    active = "Active",
+    pending = "Pending"
+}
+
 export const UserSettings : React.FC<Props> = ({}) => {
 
     const [usersRows, setUserRows] = useState([]);
@@ -29,7 +34,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
     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"
+                                   return val === InviteStatus.active ? "status--active" : "status--pending"
                                }}]
     const [isOpenModal,setIsOpen] = useState(false)
     const [editMode, setEditMode] = useState(false);
@@ -37,9 +42,13 @@ export const UserSettings : React.FC<Props> = ({}) => {
 
     const getUserList =         (async () => {
         try {
-            let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
+            // let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
-                           {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
+            //                {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]
-            setUserRows(users)                                
+            let users  = await api.getUsers()
+            const mappedUsers = users.map((user) => {
+                return {...user,status: capitalizeFirstLetter(user.status), role: capitalizeFirstLetter(user.role)}
+            })
+            setUserRows(mappedUsers)                                
         } catch (e) {
             console.error(e);
         }
@@ -50,6 +59,10 @@ export const UserSettings : React.FC<Props> = ({}) => {
         getUserList();
     },[])
 
+    function capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      }
+
     const filterFuncFactory = (searchQuery: string) => {
         return (row) => {
             return row.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -73,7 +86,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
     const onConfirmDelete = () => {
         (async() => {
             try {
-                //await api.deleteUser(user)
+                await api.deleteUser(userData)
                 const findFunc = filterFuncFactory(userData.userId);
                 const usersLeft = usersRows.filter(e => !findFunc(e))
                 setUserRows(usersLeft)
@@ -81,6 +94,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
             } catch (error) {
                 toast.error("User want not deleted")
             }
+            setConfirmModalOpen(false);
         })()   
     }
 
@@ -94,7 +108,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
         getUserList()
     }
 
-    const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"}
+    const buttonConfig = {onClick: () => {setIsOpen(true);setEditMode(false);}, text:"Add User"}
 
     return (<>
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 

ui/src/helpers/api.js

@@ -68,13 +68,18 @@ export default class Api {
         return response.data;
     }
 
-    genareteInviteLink = async(userData)  =>{
+    inviteExistingUser = async(userId)  =>{
+        const response = await this.client.post(`/user/${userId}/invite`);
+        return response.data;
+    }
+
+     genareteInviteLink = async(userData)  =>{
         const response = await this.client.post(`/user/createUserAndInvite`,userData);
         return response.data;
     }
 
     getWorkspaces = async() =>{
-        const response = await this.client.get(``);
+        const response = await this.client.get(`/workspace`);
         return response.data;
     }
 
@@ -167,26 +172,27 @@ export default class Api {
     }
 
     register = async (username, password) => {
-        const form = new FormData();
-        form.append('username', username);
-        form.append('password', password);
 
-        try {
+            const form = new FormData();
-            const response = await this.client.post(`/user/register`, form);
+            form.append('password', password);
-            this.persistToken(response.data.token);
+    
-            return response;
+            try {
-        } catch (e) {
+                const response = await this.client.post(`/install/admin`, form);
-            if (e.response.status === 400) {
+                this.persistToken(response.data.token);
-                const error = {
+                return response;
-                    'type': FormValidationErrorType,
+            } catch (e) {
-                    'messages': e.response.data
+                if (e.response.status === 400) {
-                };
+                    const error = {
-                throw error;
+                        'type': FormValidationErrorType,
-            } else {
+                        'messages': e.response.data
-                throw e;
+                    };
+                    throw error;
+                } else {
+                    throw e;
+                }
             }
         }
-    }
+    
 
     login = async (username, password) => {
         const form = new FormData();