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/UI/SelectList.tsx
This commit is contained in:
Amit Fainholts
2022-01-30 11:40:34 +02:00
parent f4d651812f 4a69526829
commit 16a4708aec
7 changed files with 133 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,11 +45,14 @@
& .user__email
width : 40%
width : 300px
height: 30px;
box-sizing: border-box;
& .user__role
width : 40%
width : 186px
.search-workspace
width: 186px

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

@@ -1,4 +1,5 @@
import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core';
import { FC, useEffect, useState } from 'react';
import Api from '../../../helpers/api';
import { useCommonStyles } from '../../../helpers/commonStyle';
@@ -18,21 +19,23 @@ export type UserData = {
interface AddUserModalProps {
isOpen : boolean,
onCloseModal : () => void
userData : UserData;
setShowAlert : ({open:boolean,sevirity: Color}) => void;
onCloseModal : () => void,
userData : UserData,
isEditMode : boolean,
onUserChange: (UserData) => void,
}
const api = Api.getInstance();
export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}, setShowAlert}) => {
export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData, isEditMode,onUserChange}) => {
//const [editUserData, setEditUserData] = useState(userData)
const [searchValue, setSearchValue] = useState("");
const [workspaces, setWorkspaces] = useState([])
//const { control, handleSubmit,register } = useForm<UserData>();
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 classes = useCommonStyles()
@@ -69,15 +72,22 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
useEffect(()=> {
(async () => {
try {
//if edit
setEditMode(isEditMode)
if (isEditMode) {
//const userDetails = await api.getUserDetails(userData)
// setUserData(userDetails)
//const data = {...userData,...userDetails}
}
else{
}
setUserData(userData as UserData)
} catch (e) {
toast.error("Error getting user details")
}
})();
},[userData])
},[isEditMode, userData])
// const onClose = () => {
// setIsOpen(false)
@@ -86,12 +96,13 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const onClose = () => {
onCloseModal()
setUserData({} as UserData)
setInvite({sent:false,isSuceeded:false,link:""})
}
const workspaceChange = (newVal) => {
const workspaceChange = (workspaces) => {
//setWorkspaces(newVal);
const data = {...userDataModel, workspace : newVal}
const selectedWorksapce = workspaces.find(x=> x.isChecked)
const data = {...userDataModel, workspace : selectedWorksapce.key}
setUserData(data)
setGenarateDisabledState()
}
@@ -113,7 +124,8 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
};
const isFormValid = () : boolean => {
return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null)
return true;
//return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null)
}
const setGenarateDisabledState = () => {
@@ -123,14 +135,19 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
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)
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)
} catch (e) {
toast.error("Error accrued generating link")
}
@@ -172,13 +189,14 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
return (<>
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onClose} title='Add User' customActions={modalCustomActions}>
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onClose}
title={`${editMode ? "Edit" : "Add"} User`} customActions={modalCustomActions}>
<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"}
placeholder={"User Email"} onChange={userNameChange}>
placeholder={"User Email"} onChange={userNameChange} disabled={editMode}>
</input>
{/* <Controller name="role" control={control} rules={{ required: true }}
@@ -187,7 +205,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
<FormControl size='small' variant="outlined" className='user__role'>
<InputLabel>User Role</InputLabel>
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} >
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ root : 'my-class-name' }} >
<MenuItem value="0">
<em>None</em>
</MenuItem>
@@ -203,7 +221,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
<h3 className='comfirmation-modal__sub-section-header'>WORKSPACE ACCESS </h3>
<div className="namespacesSettingsContainer">
<div style={{margin: "10px 0"}}>
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
<input className={classes.textField + " search-workspace"} placeholder="Search" value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}/>
</div>
<SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}

29
ui/src/components/Pages/SettingsPage/SettingsPage.sass Normal file
View File

@@ -0,0 +1,29 @@
@import "../../../variables.module"
.settings-page
max-width: 513px
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
margin: 0 auto;
& .tabs-nav
padding-top: 0px;
.header-section
margin-bottom: 30px;
background: #F7F9FC;
&__title
font-size: 28px
color: $blue-gray
font-weight: 600
margin-bottom: 60px;
margin-top: 20px;

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

@@ -3,6 +3,7 @@ import { useState } from "react";
import Tabs from "../../UI/Tabs"
import { UserSettings } from "../../UserSettings/UserSettings";
import { WorkspaceSettings } from "../../WorkspaceSettings/WorkspaceSettings";
import "./SettingsPage.sass"
const AdminSettings: React.FC<any> = ({color}) => {
var TABS = [
@@ -10,9 +11,14 @@ const AdminSettings: React.FC<any> = ({color}) => {
];
const [currentTab, setCurrentTab] = useState(TABS[0].tab);
return (
<div style={{padding:" 0 24px"}}>
<Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
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>}
@@ -20,6 +26,8 @@ const AdminSettings: React.FC<any> = ({color}) => {
<WorkspaceSettings/>
</React.Fragment>}
</div>
</div>
</>
)
}

2
ui/src/components/UI/Modals/ConfirmationModal.tsx
View File

@@ -30,7 +30,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
confirmButtonColor, titleColor, img, isLoading,children,
className, customActions}) => {
const classes = useCommonStyles();
const confirmStyle = {width: 100, marginLeft: 20}
const confirmStyle = {minWidth: 100, marginLeft: 20}
const defualtActions = <><Button disabled={isLoading} style={{width: 100}} className={classes.outlinedButton} size={"small"}
variant='outlined' onClick={onClose}>{closeButtonText ?? "CANCEL"}

8
ui/src/components/UI/SelectList.tsx
View File

@@ -22,6 +22,10 @@ export type ValuesListInput = {
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
const filteredValues = useMemo(() => {
return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
},[valuesList, searchValue])
useEffect(() => {
const list = valuesList.map(obj => {
const isValueChecked = checkedValues.some(checkedValueKey => obj.key === checkedValueKey)
@@ -70,9 +74,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[
<th>{tableName}</th>
</tr>
const filteredValues = useMemo(() => {
return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
},[valuesList, searchValue])
return <div className={tabelClassName + " select-list-table"}>
<table cellPadding={5} style={{borderCollapse: "collapse"}}>

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

@@ -14,6 +14,7 @@ import { SettingsModal } from "../SettingsModal/SettingModal";
import OasModal from "../Modals/OasModal/OasModal";
import { apiDefineProperty } from "mobx/dist/internal";
import { toast } from "react-toastify";
import ConfirmationModal from "../UI/Modals/ConfirmationModal";
interface Props {
@@ -31,19 +32,22 @@ export const UserSettings : React.FC<Props> = ({}) => {
return val === "Active" ? "status--active" : "status--pending"
}}]
const [isOpenModal,setIsOpen] = useState(false)
const [alert,setAlert] = useState({open:false,sevirity:"success"})
const [editMode, setEditMode] = useState(false);
const [confirmModalOpen,setConfirmModalOpen] = useState(false)
useEffect(() => {
(async () => {
const getUserList = (async () => {
try {
const users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
let 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);
}
})();
})
useEffect(() => {
getUserList();
},[])
const filterFuncFactory = (searchQuery: string) => {
@@ -55,12 +59,22 @@ export const UserSettings : React.FC<Props> = ({}) => {
const searchConfig = { searchPlaceholder: "Search User",filterRows: filterFuncFactory}
const findUser = (userId) => {
const findFunc = filterFuncFactory(userId);
return usersRows.find(findFunc);
}
const onRowDelete = (user) => {
const findFunc = filterFuncFactory(user.userId);
const userToDelete = usersRows.find(findFunc);
setConfirmModalOpen(true);
const userForDel = findUser(user.userId);
userUserData(userForDel)
}
const onConfirmDelete = () => {
(async() => {
try {
//await api.deleteUser(user)
const findFunc = filterFuncFactory(userData.userId);
const usersLeft = usersRows.filter(e => !findFunc(e))
setUserRows(usersLeft)
toast.success("User Deleted succesesfully")
@@ -68,15 +82,17 @@ export const UserSettings : React.FC<Props> = ({}) => {
toast.error("User want not deleted")
}
})()
}
const onRowEdit = (row) => {
userUserData(row)
setEditMode(true)
setIsOpen(true)
}
const onUserChange = (user) =>{
getUserList()
}
const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"}
@@ -84,8 +100,15 @@ 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);userUserData({} as UserData) } } userData={userData} setShowAlert={setAlert}>
<AddUserModal isOpen={isOpenModal} onCloseModal={() => {
setIsOpen(false);userUserData({} as UserData) } }
userData={userData} isEditMode={editMode} onUserChange={onUserChange}>
</AddUserModal>
<ConfirmationModal isOpen={confirmModalOpen} onClose={() => setConfirmModalOpen(false)}
onConfirm={onConfirmDelete} confirmButtonText="Delete user" title="Delete User"
confirmButtonColor="#DB2156">
<p>Are you sure you want to delete this user?</p>
</ConfirmationModal>
{/* <Snackbar open={alert.open} classes={{root: "alert--right"}}>
<MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"
onClose={() => setAlert({...alert,open:false})} severity={"success"}>