mirror of
https://github.com/kubeshark/kubeshark.git
synced 2025-09-27 21:38:06 +00:00
merge with user mange
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
@import '../../../variables.module'
|
||||
|
||||
@mixin generate-icon
|
||||
display: block
|
||||
text-indent: -9999px
|
||||
width: 26px
|
||||
height: 26px
|
||||
background-repeat: no-repeat
|
||||
background-size: 26px
|
||||
margin-right: 10px
|
||||
display: block;
|
||||
text-indent: -9999px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 19px;
|
||||
background-size: cover;
|
||||
|
||||
.invite-link
|
||||
&-row
|
||||
@@ -24,8 +24,10 @@
|
||||
&-field
|
||||
width: 80%
|
||||
max-width: 435px
|
||||
|
||||
|
||||
.generate-link-button
|
||||
&.MuiButtonBase-root
|
||||
padding: 6.5px 13px
|
||||
&:disabled
|
||||
background: #BCC6DD;
|
||||
.generate-link-button__icon
|
||||
@@ -55,7 +57,22 @@
|
||||
.search-workspace
|
||||
width: 186px
|
||||
|
||||
.u-margin-left
|
||||
margin-left : 20px
|
||||
@mixin label-size
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
|
||||
.u-input-padding
|
||||
& .MuiInputLabel-outlined.MuiInputLabel-marginDense
|
||||
transform: translate(14px, 8px) scale(1)
|
||||
@include label-size
|
||||
& .MuiInputLabel-outlined.MuiInputLabel-shrink
|
||||
transform: translate(14px, -6px) scale(0.75);
|
||||
@include label-size
|
||||
|
||||
&.MuiOutlinedInput-input, &.MuiSelect-outlined,
|
||||
padding-top: 5.5px
|
||||
padding-bottom: 5.5px
|
||||
@include label-size
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core';
|
||||
import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput,Select } from '@material-ui/core';
|
||||
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import Api from '../../../helpers/api';
|
||||
@@ -8,12 +8,11 @@ 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;
|
||||
workspaceId : string;
|
||||
userId: string;
|
||||
}
|
||||
|
||||
@@ -38,7 +37,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
const [disable, setDisable] = useState(true);
|
||||
const [editMode, setEditMode] = useState(isEditMode);
|
||||
const [invite, setInvite] = useState({sent:false,isSuceeded:false,link : null});
|
||||
const roles = [{key:"1",value:"Admin"},{key:"2",value:"User"}]
|
||||
const roles = [{key:"1",value:"admin"},{key:"2",value:"user"}]
|
||||
const classes = useCommonStyles()
|
||||
|
||||
const [userDataModel, setUserData] = useState(userData as UserData)
|
||||
@@ -51,19 +50,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const workspacesList = [
|
||||
{
|
||||
"id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
|
||||
"name": "sock-shop"
|
||||
},
|
||||
{
|
||||
"id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
|
||||
"name": "test"
|
||||
}
|
||||
].map((obj) => {return {key:obj.id, value:obj.name}})
|
||||
//await api.getWorkspaces()
|
||||
setWorkspaces(workspacesList)
|
||||
|
||||
// const workspacesList = [
|
||||
// {
|
||||
// "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
|
||||
// "name": "sock-shop"
|
||||
// },
|
||||
// {
|
||||
// "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
|
||||
// "name": "test"
|
||||
// }
|
||||
// ]
|
||||
|
||||
const list = await api.getWorkspaces()
|
||||
const workspacesList = list.map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
|
||||
setWorkspaces(workspacesList)
|
||||
} catch (e) {
|
||||
toast.error("Error finding workspaces")
|
||||
}
|
||||
@@ -96,7 +96,6 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
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")
|
||||
@@ -106,7 +105,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
const workspaceChange = (workspaces) => {
|
||||
//setWorkspaces(newVal);
|
||||
const selectedWorksapce = workspaces.find(x=> x.isChecked)
|
||||
const data = {...userDataModel, workspace : selectedWorksapce.key}
|
||||
const data = {...userDataModel, workspaceId : selectedWorksapce.key}
|
||||
setUserData(data)
|
||||
setGenarateDisabledState()
|
||||
}
|
||||
@@ -173,27 +172,11 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)}
|
||||
|
||||
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>}
|
||||
{
|
||||
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'>
|
||||
<div className={isShowInviteLink() ? "invite-link-row" : ""}>
|
||||
{isShowInviteLink() && <FormControl variant="outlined" size={"small"} className='invite-link-field'>
|
||||
<InputLabel htmlFor="outlined-adornment-password">Invite link</InputLabel>
|
||||
<OutlinedInput
|
||||
type={'text'}
|
||||
value={invite.link}
|
||||
onChange={handleChange('password')}
|
||||
<OutlinedInput type={'text'} value={invite.link} onChange={handleChange('password')} classes={{input: "u-input-padding"}}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label="cpoy invite link" onClick={handleCopyinviteLink} edge="end">
|
||||
@@ -202,9 +185,22 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
</InputAdornment>
|
||||
} label="Invite link"/>
|
||||
</FormControl>}
|
||||
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%'}} className={classes.button + " u-margin-left"} size={"small"} onClick={onClose}>
|
||||
{showGenerateButton() && <Button
|
||||
className={classes.button + " generate-link-button"} size={"small"}
|
||||
onClick={!isEditMode ? generateLink : inviteExistingUser}
|
||||
disabled={disable}
|
||||
endIcon={isLoading && <img src={spinner} alt="spinner"/>}
|
||||
startIcon={<span className='generate-link-button__icon'></span>}>
|
||||
|
||||
{"Generate Invite Link"}
|
||||
</Button>}
|
||||
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%',marginLeft:'20px'}} className={classes.button} size={"small"} onClick={onClose}>
|
||||
Done
|
||||
</Button>}
|
||||
</Button>}
|
||||
{isEditMode && <Button style={{height: '100%', marginLeft:'20px'}} disabled={disable} className={classes.button} size={"small"} onClick={updateUser}>
|
||||
Save
|
||||
</Button>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -218,21 +214,35 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
<h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
|
||||
<div className='comfirmation-modal__sub-section'>
|
||||
<div className='user__details'>
|
||||
<input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
|
||||
{/* <input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
|
||||
placeholder={"User Email"} onChange={userNameChange} disabled={editMode}>
|
||||
</input>
|
||||
</input> */}
|
||||
{/* <div className="">
|
||||
<label htmlFor="input-user-name">User email</label>
|
||||
<input id="input-user-name" type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
|
||||
placeholder={"User Email"} onChange={userNameChange} disabled={editMode}/>
|
||||
</div> */}
|
||||
<FormControl variant="outlined" size={"small"} className={"user__email"}>
|
||||
<InputLabel htmlFor="">User Name</InputLabel>
|
||||
<OutlinedInput type={'text'} onChange={userNameChange} disabled={editMode} value={userDataModel?.username ?? ""} classes={{input: "u-input-padding"}}
|
||||
label="User Name"/>
|
||||
</FormControl>
|
||||
|
||||
{/* <Controller name="role" control={control} rules={{ required: true }}
|
||||
render={({ field }) => }
|
||||
/> */}
|
||||
|
||||
<FormControl size='small' variant="outlined" className='user__role'>
|
||||
<InputLabel>User Role</InputLabel>
|
||||
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ root : 'my-class-name' }} >
|
||||
<MenuItem value="0">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
{roles.map((role) => (
|
||||
|
||||
{/* className='user__role u-input-padding' */}
|
||||
{/* classes={{ select : 'u-input-padding' }} */}
|
||||
<FormControl variant="outlined" className='user__role'>
|
||||
<InputLabel id="user-role-outlined-label">User role</InputLabel>
|
||||
<Select
|
||||
labelId="user-role-outlined-label"
|
||||
id="demo-simple-select-outlined"
|
||||
value={userDataModel.role ?? ""} onChange={userRoleChange}
|
||||
label="User role">
|
||||
{roles.map((role) => (
|
||||
<MenuItem key={role.value} value={role.value}>
|
||||
{role.value}
|
||||
</MenuItem>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
@import "../../../variables.module"
|
||||
|
||||
@mixin tab-container
|
||||
max-width: 513px
|
||||
width: clamp(50%,513px,80%);
|
||||
margin: 0 auto
|
||||
|
||||
.settings-page
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
.header-section
|
||||
|
||||
background-color: $header-background-color
|
||||
|
||||
&__container
|
||||
@include tab-container
|
||||
@@ -34,6 +34,8 @@
|
||||
|
||||
.tab-content
|
||||
padding-top: 30px;
|
||||
background-color: $data-background-color
|
||||
height: 100vh;
|
||||
&__container
|
||||
@include tab-container
|
||||
|
@@ -7,7 +7,7 @@ export interface ColsType {
|
||||
field:string,
|
||||
cellClassName?: string,
|
||||
header:string,
|
||||
width?:number,
|
||||
width?:string,
|
||||
getCellClassName?:(field:string,value : any) => string
|
||||
};
|
||||
|
||||
@@ -43,7 +43,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
|
||||
<thead className="mui-table__thead">
|
||||
<tr style={{borderBottomWidth: "2px"}} className="mui-table__tr">
|
||||
{cols?.map((col)=> {
|
||||
return <th key={col.header} className="mui-table__th">{col.header}</th>
|
||||
return <th key={col.header} className="mui-table__th" style={{width: col.width}}>{col.header}</th>
|
||||
})}
|
||||
<th></th>
|
||||
</tr>
|
||||
@@ -61,7 +61,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
|
||||
tableRows?.map((rowData,index) => {
|
||||
return <tr key={rowData?.id ?? index} className="mui-table__tr">
|
||||
{cols.map((col,index) => {
|
||||
return <td key={`${rowData?.id} + ${index}`} className="mui-table__td">
|
||||
return <td key={`${rowData?.id} + ${index}`} className="mui-table__td" style={{width: col.width}}>
|
||||
<span key={Math.random().toString()} className={`${col.getCellClassName ? col.getCellClassName(col.field, rowData[col.field]) : ""}${col?.cellClassName ?? ""}`}>
|
||||
{rowData[col.field]}
|
||||
</span>
|
||||
|
@@ -9,6 +9,9 @@
|
||||
overflow-y: auto
|
||||
display: block
|
||||
|
||||
&__tbody &__tr:hover
|
||||
background: $header-background-color
|
||||
|
||||
&__th
|
||||
color: $blue-gray
|
||||
text-align: left
|
||||
@@ -41,9 +44,7 @@
|
||||
line-height: 15px;
|
||||
color: $light-gray;
|
||||
|
||||
&__tr:hover
|
||||
background: #F7F9FC
|
||||
|
||||
&__tr:hover
|
||||
& .mui-table__row-actions
|
||||
&--delete
|
||||
cursor: pointer;
|
||||
@@ -67,4 +68,5 @@
|
||||
@mixin row-actions
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
|
@@ -22,7 +22,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
|
||||
|
||||
const [usersRows, setUserRows] = useState([]);
|
||||
const [userData,userUserData] = useState({} as UserData)
|
||||
const cols : ColsType[] = [{field : "username",header:"User"},
|
||||
const cols : ColsType[] = [{field : "username",header:"User", width: '35%'},
|
||||
{field : "role",header:"Role"},
|
||||
{field : "status",header:"Status",getCellClassName : (field, val) =>{
|
||||
return val === InviteStatus.active ? "status--active" : "status--pending"
|
||||
|
@@ -1,17 +1,10 @@
|
||||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2252_4609)">
|
||||
<path d="M4.00005 3.22263V2.125C4.00005 1.82663 4.11857 1.54048 4.32955 1.3295C4.54053 1.11853 4.82668 1 5.12505 1H14.875C15.1734 1 15.4596 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4596 12.8815 15.1734 13 14.875 13H13.7564" fill="#BCCEFD"/>
|
||||
<path d="M4.00005 3.22263V2.125C4.00005 1.82663 4.11857 1.54048 4.32955 1.3295C4.54053 1.11853 4.82668 1 5.12505 1H14.875C15.1734 1 15.4596 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4596 12.8815 15.1734 13 14.875 13H13.7564" stroke="#BCCEFD"/>
|
||||
<path d="M3.00005 4.22263V3.125C3.00005 2.82663 3.11857 2.54048 3.32955 2.3295C3.54053 2.11853 3.82668 2 4.12505 2H13.875C14.1734 2 14.4596 2.11853 14.6705 2.3295C14.8815 2.54048 15 2.82663 15 3.125V12.875C15 13.1734 14.8815 13.4595 14.6705 13.6705C14.4596 13.8815 14.1734 14 13.875 14H12.7564" fill="white"/>
|
||||
<path d="M12.3958 4.0415H2.47917C1.89237 4.0415 1.41667 4.5172 1.41667 5.104V15.0207C1.41667 15.6075 1.89237 16.0832 2.47917 16.0832H12.3958C12.9826 16.0832 13.4583 15.6075 13.4583 15.0207V5.104C13.4583 4.5172 12.9826 4.0415 12.3958 4.0415Z" fill="#BCCEFD" stroke="#BCCEFD" stroke-linejoin="round"/>
|
||||
<path d="M6.53084 8.68467L8.40509 6.73322C8.91934 6.21932 9.76403 6.2303 10.2921 6.75872C10.8205 7.28643 10.8318 8.13147 10.3176 8.64572L9.64113 9.36219" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.76922 10.6812C4.58859 10.8618 4.21495 11.223 4.21495 11.223C3.7007 11.7366 3.68653 12.6532 4.21495 13.1816C4.74266 13.7093 5.5877 13.7206 6.10195 13.2064L7.93086 11.546" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.60982 10.5325C6.37468 10.2987 6.23246 9.98746 6.20961 9.65665C6.19597 9.47111 6.22237 9.28479 6.28702 9.11034C6.35167 8.93589 6.45306 8.77736 6.58431 8.64551" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.90572 9.65918C8.43343 10.1872 8.44511 11.0323 7.93086 11.5462" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2252_4609">
|
||||
<rect width="17" height="17" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 3.22263V2.125C4 1.82663 4.11853 1.54048 4.3295 1.3295C4.54048 1.11853 4.82663 1 5.125 1H14.875C15.1734 1 15.4595 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4595 12.8815 15.1734 13 14.875 13H13.7564" fill="#BCCEFD"/>
|
||||
<path d="M4 3.22263V2.125C4 1.82663 4.11853 1.54048 4.3295 1.3295C4.54048 1.11853 4.82663 1 5.125 1H14.875C15.1734 1 15.4595 1.11853 15.6705 1.3295C15.8815 1.54048 16 1.82663 16 2.125V11.875C16 12.1734 15.8815 12.4595 15.6705 12.6705C15.4595 12.8815 15.1734 13 14.875 13H13.7564" stroke="#BCCEFD"/>
|
||||
<path d="M3 4.22263V3.125C3 2.82663 3.11853 2.54048 3.3295 2.3295C3.54048 2.11853 3.82663 2 4.125 2H13.875C14.1734 2 14.4595 2.11853 14.6705 2.3295C14.8815 2.54048 15 2.82663 15 3.125V12.875C15 13.1734 14.8815 13.4595 14.6705 13.6705C14.4595 13.8815 14.1734 14 13.875 14H12.7564" fill="white"/>
|
||||
<path d="M12.3958 4.0415H2.47913C1.89232 4.0415 1.41663 4.5172 1.41663 5.104V15.0207C1.41663 15.6075 1.89232 16.0832 2.47913 16.0832H12.3958C12.9826 16.0832 13.4583 15.6075 13.4583 15.0207V5.104C13.4583 4.5172 12.9826 4.0415 12.3958 4.0415Z" fill="#BCCEFD" stroke="#BCCEFD" stroke-linejoin="round"/>
|
||||
<path d="M6.53076 8.68467L8.40501 6.73322C8.91926 6.21932 9.76395 6.2303 10.292 6.75872C10.8204 7.28643 10.8318 8.13147 10.3175 8.64572L9.64105 9.36219" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.76914 10.6812C4.58852 10.8618 4.21487 11.223 4.21487 11.223C3.70062 11.7366 3.68645 12.6532 4.21487 13.1816C4.74258 13.7093 5.58762 13.7206 6.10187 13.2064L7.93079 11.546" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.60975 10.5325C6.37462 10.2987 6.2324 9.98746 6.20955 9.65665C6.19591 9.47111 6.22231 9.28479 6.28696 9.11034C6.35161 8.93589 6.453 8.77736 6.58425 8.64551" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.90564 9.65918C8.43335 10.1872 8.44504 11.0323 7.93079 11.5462" stroke="#205CF5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
@@ -79,7 +79,7 @@ export default class Api {
|
||||
}
|
||||
|
||||
getWorkspaces = async() =>{
|
||||
const response = await this.client.get(`/workspace`);
|
||||
const response = await this.client.get(`/workspace/`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
@@ -13,6 +13,9 @@ export const useCommonStyles = makeStyles(() => ({
|
||||
"&:hover": {
|
||||
backgroundColor: "#205cf5",
|
||||
},
|
||||
"&:disabled":{
|
||||
backgroundColor: "rgba(0, 0, 0, 0.26)"
|
||||
}
|
||||
},
|
||||
outlinedButton: {
|
||||
backgroundColor: "transparent",
|
||||
|
Reference in New Issue
Block a user