jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - user delete

Browse source
This commit is contained in:
Shekar Siri 2022-05-05 10:09:16 +02:00
parent 330992736d
commit 918f7e9d86
5 changed files with 44 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/Client/Sites/Sites.js
View file

@ -168,10 +168,13 @@ class Sites extends React.PureComponent {
</div>
<div className={ stl.list }>
<div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3">
<div>Name</div>
</div>
{
sites.map(_site => (
// <div key={ _site.key } data-inactive={ _site.status === RED }>
<div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b py-3">
<div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3">
<div className="col-span-4">
<div className="flex items-center">
<Popup
@ -195,22 +198,22 @@ class Sites extends React.PureComponent {
<div className={ stl.label}>{_site.projectKey}</div>
</div> */}
<div className="col-span-4 justify-self-end flex items-center invisible group-hover:visible">
<button
className={cn({'hidden' : !canDeleteSites})}
<div className="mr-4"><Button size="small" primary onClick={ () => this.showTrackingCode(_site) }>{ 'Installation' }</Button></div>
{/* <button
className={cn('mx-3', {'hidden' : !canDeleteSites})}
disabled={ !canDeleteSites }
onClick={ () => canDeleteSites && this.remove(_site) }
>
<Icon name="trash" size="16" color="teal" />
</button>
</button> */}
<button
className={cn({'hidden' : !isAdmin})}
className={cn('mx-3', {'hidden' : !isAdmin})}
disabled={ !isAdmin }
onClick={ () => isAdmin && this.edit(_site) }
data-clickable
>
<Icon name="edit" size="16" color="teal"/>
</button>
<div><Button size="small" outline primary onClick={ () => this.showTrackingCode(_site) }>{ 'Tracking Code' }</Button></div>
{/* <button disabled={ !isAdmin } onClick={ () => this.showGDPRForm(_site) } ><Icon name="cog" size="16" color="teal" /></button> */}
</div>
</div>

39
frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
View file

@ -1,11 +1,11 @@
import React from 'react';
import { Input, CopyButton, Button } from 'UI'
import { Input, CopyButton, Button, Icon } from 'UI'
import cn from 'classnames';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import { useModal } from 'App/components/Modal';
import Select from 'Shared/Select';
import { confirm } from 'UI/Confirmation';
interface Props {
isSmtp?: boolean;
isEnterprise?: boolean;
@ -31,6 +31,18 @@ function UserForm(props: Props) {
const write = ({ target: { name, value } }) => {
user.updateKey(name, value);
}
const deleteHandler = async () => {
if (await confirm({
header: 'Confirm',
confirmButton: 'Yes, delete',
confirmation: `Are you sure you want to permanently delete this user?`
})) {
userStore.deleteUser(user.userId).then(() => {
hideModal();
});
}
}
return useObserver(() => (
<div className="bg-white h-screen p-6" style={{ width: '400px'}}>
@ -118,14 +130,23 @@ function UserForm(props: Props) {
{ 'Cancel' }
</Button>
</div>
{ !user.isJoined && user.invitationLink &&
<CopyButton
content={user.invitationLink}
className="link"
btnText="Copy invite link"
/>
}
<div>
<Button
data-hidden={ !user.exists() }
onClick={ deleteHandler }
>
<Icon name="trash" size="16" />
</Button>
</div>
</div>
{ !user.isJoined && user.invitationLink &&
<CopyButton
content={user.invitationLink}
className="link"
btnText="Copy invite link"
/>
}
</div>
));
}

1
frontend/app/components/Client/Users/components/UserList/UserList.tsx
View file

@ -27,7 +27,6 @@ function UserList(props) {
useEffect(() => {
userStore.fetchUsers();
editHandler(null);
}, []);
const editHandler = (user) => {

8
frontend/app/mstore/userStore.ts
View file

@ -104,17 +104,17 @@ export default class UserStore {
}
deleteUser(userId: string): Promise<any> {
this.loading = true;
this.saving = true;
return new Promise((resolve, reject) => {
userService.delete(userId)
.then(response => {
this.instance = null;
this.list = this.list.filter(user => user.userId !== userId);
resolve(response);
}).catch(error => {
this.loading = false;
this.saving = false;
reject(error);
}).finally(() => {
this.loading = false;
this.saving = false;
});
});
}

2
frontend/app/services/UserService.ts
View file

@ -38,7 +38,7 @@ export default class UserService {
}
delete(userId: string) {
return this.client.delete('/users/' + userId)
return this.client.delete('/client/members/' + userId)
.then(response => response.json())
.then(response => response.data || {});
}