github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-26 13:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'origin/ui/TRA-4204_user_managment' of github.com:up9inc/mizu into feature/ui/TRA-4192_workspace_management

Browse Source 
# Conflicts:
#	ui/src/components/Modals/AddUserModal/AddUserModal.tsx
#	ui/src/helpers/api.js
This commit is contained in:
Amit Fainholts
2022-01-31 18:11:01 +02:00
parent 0705f13295 1a7e4a90c9
commit 071ec955f5
6 changed files with 125 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/components/Modals/AddUserModal/AddUserModal.sass
View File

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

96
ui/src/components/Modals/AddUserModal/AddUserModal.tsx
View File

@@ -74,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")
@@ -98,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) => {
@@ -125,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 = () => {
@@ -134,39 +136,59 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
setDisable(!isValid)
}
const generateLink = () => {
try {
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"})
const mapTokenToLink = (token) => {
return`${window.location.origin}/${token}`
}
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 = <>
{(!invite.isSuceeded || !(invite.link && invite.sent)) && <Button
className={classes.button + " generate-link-button"} size={"small"} onClick={generateLink}
const addUsermodalCustomActions = <>
{showGenerateButton() && <Button
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'}
@@ -178,20 +200,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
{<span className='generate-link-button__icon'></span>}
</IconButton>
</InputAdornment>
}
label="Invite link"
/>
</FormControl>
<Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onClose}>
} label="Invite link"/>
</FormControl>}
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%'}} className={classes.button + " u-margin-left"} size={"small"} onClick={onClose}>
Done
</Button>
</div>}
</>;
</Button>}
</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'>

22
ui/src/components/Pages/SettingsPage/SettingsPage.sass
View File

@@ -1,14 +1,17 @@
@import "../../../variables.module"
@mixin tab-container
max-width: 513px
margin: 0 auto
.settings-page
max-width: 513px
background: #F7F9FC;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
/* justify-content: center; */
margin: 0 auto;
height: 100vh;
& .tabs-nav
padding-top: 0px;
@@ -16,8 +19,10 @@
.header-section
margin-bottom: 30px;
background: #F7F9FC;
&__container
@include tab-container
&__title
@@ -27,3 +32,8 @@
margin-bottom: 60px;
margin-top: 20px;
.tab-content
padding-top: 30px;
&__container
@include tab-container

29
ui/src/components/Pages/SettingsPage/SettingsPage.tsx
View File

@@ -13,19 +13,22 @@ const AdminSettings: React.FC<any> = ({color}) => {
const [currentTab, setCurrentTab] = useState(TABS[0].tab);
return (<>
<div className="settings-page">
<div className="header-section">
<div className="header-section__title">Settings</div>
<Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned classes={{root:"tabs-nav"}}/>
</div>
<div>
{currentTab === TABS[0].tab && <React.Fragment>
<UserSettings/>
</React.Fragment>}
{currentTab === TABS[1].tab && <React.Fragment>
<WorkspaceSettings/>
</React.Fragment>}
</div>
<div className="header-section">
<div className="header-section__container">
<div className="header-section__title">Settings</div>
<Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned classes={{root:"tabs-nav"}}/>
</div>
</div>
<div className="tab-content">
<div className="tab-content__container">
{currentTab === TABS[0].tab && <React.Fragment>
<UserSettings/>
</React.Fragment>}
{currentTab === TABS[1].tab && <React.Fragment>
<WorkspaceSettings/>
</React.Fragment>}
</div>
</div>
</div>
</>
)

26
ui/src/components/UserSettings/UserSettings.tsx
View File

@@ -13,6 +13,11 @@ interface Props {
const api = Api.getInstance();
enum InviteStatus{
active = "Active",
pending = "Pending"
}
export const UserSettings : React.FC<Props> = ({}) => {
const [usersRows, setUserRows] = useState([]);
@@ -20,7 +25,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);
@@ -28,9 +33,13 @@ export const UserSettings : React.FC<Props> = ({}) => {
const getUserList = (async () => {
try {
let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
{username:"aaaaaaa",role:"User",status:"Active",userId : "2"}]//await api.getUsers()
setUserRows(users)
// let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
// {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]
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);
}
@@ -41,6 +50,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()) ||
@@ -64,7 +77,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)
@@ -72,6 +85,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
} catch (error) {
toast.error("User want not deleted")
}
setConfirmModalOpen(false);
})()
}
@@ -85,7 +99,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}

8
ui/src/helpers/api.js
View File

@@ -68,7 +68,12 @@ 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;
}
@@ -224,6 +229,7 @@ export default class Api {
}
}
login = async (username, password) => {
const form = new FormData();
form.append('username', username);