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

fix(ui) - review

Browse source
This commit is contained in:
Shekar Siri 2021-12-05 01:00:14 +05:30
parent 36159a0519
commit 2ce98a6586
9 changed files with 46 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Client/ManageUsers/ManageUsers.js
View file

@ -50,7 +50,7 @@ class ManageUsers extends React.PureComponent {
}
adminLabel = (user) => {
if (user.superAdmin) return 'Owner';
if (user.superAdmin) return null;
return user.admin ? 'Admin' : '';
};
@ -207,8 +207,8 @@ class ManageUsers extends React.PureComponent {
<div className={ styles.wrapper }>
<div className={ cn(styles.tabHeader, 'flex items-center') }>
<div className="flex items-center mr-auto">
{ !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + 'Users' }</h3> }
{ hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Team Size ${members.size}` }</h3>}
{ !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + `Users (${members.size})` }</h3> }
{ hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Users (${members.size})` }</h3>}
<Popup
trigger={
<div>

1
frontend/app/components/Client/ManageUsers/UserItem.js
View file

@ -6,6 +6,7 @@ const UserItem = ({ user, adminLabel, deleteHandler, editHandler, generateInvite
<div className={ styles.wrapper } id="user-row">
<Icon name="user-alt" size="16" marginRight="10" />
<div id="user-name">{ user.name || user.email }</div>
<div className="px-2"/>
{ adminLabel && <div className={ styles.adminLabel }>{ adminLabel }</div>}
{ user.roleName && <div className={ styles.adminLabel }>{ user.roleName }</div>}
<div className={ styles.actions }>

4
frontend/app/components/Client/ManageUsers/userItem.css
View file

@ -16,11 +16,11 @@
}
& .adminLabel {
margin-left: 10px;
margin-left: 5px;
padding: 0 10px;
border-radius: 3px;
background-color: $gray-lightest;
font-size: 12px;
font-size: 10px;
border: solid thin $gray-light;
}
}

4
frontend/app/components/Client/ProfileSettings/Licenses.js
View file

@ -6,8 +6,8 @@ function Licenses({ account }) {
<div>
<div>{account.license}</div>
{account.expirationDate && (
<div className="font-medium text-sm">
Expires At: {account.expirationDate.toFormat('LLL dd, yyyy')}
<div className="">
(Expires on {account.expirationDate.toFormat('LLL dd, yyyy')})
</div>
)}
</div>

1
frontend/app/components/Client/ProfileSettings/ProfileSettings.js
View file

@ -76,6 +76,7 @@ export default class ProfileSettings extends React.PureComponent {
<div className="flex items-center">
<div className={ styles.left }>
<h4 className="text-lg mb-4">{ 'License' }</h4>
<div className={ styles.info }>{ 'License key and expiration date.' }</div>
</div>
<div><Licenses /></div>
</div>

18
frontend/app/components/Client/Roles/Roles.tsx
View file

@ -7,6 +7,7 @@ import RoleForm from './components/RoleForm'
import { init, edit, fetchList, remove as deleteRole } from 'Duck/roles';
import RoleItem from './components/RoleItem'
import { confirm } from 'UI/Confirmation';
import { toast } from 'react-toastify';
interface Props {
loading: boolean
@ -14,14 +15,15 @@ interface Props {
edit: (role: any) => void,
instance: any,
roles: any[],
deleteRole: (id: any) => void,
deleteRole: (id: any) => Promise<void>,
fetchList: () => Promise<void>,
account: any,
permissionsMap: any
permissionsMap: any,
removeErrors: any
}
function Roles(props: Props) {
const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap } = props
const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, removeErrors } = props
const [showModal, setShowmModal] = useState(false)
const isAdmin = account.admin || account.superAdmin;
@ -46,7 +48,13 @@ function Roles(props: Props) {
header: 'Roles',
confirmation: `Are you sure you want to remove this role?`
})) {
deleteRole(role.roleId)
deleteRole(role.roleId).then(() => {
if (removeErrors && removeErrors.size > 0) {
removeErrors.forEach(e => {
toast.error(e)
})
}
})
}
}
@ -96,6 +104,7 @@ function Roles(props: Props) {
{roles.map(role => (
<RoleItem
role={role}
isAdmin={isAdmin}
permissions={permissionsMap}
editHandler={editHandler}
deleteHandler={deleteHandler}
@ -119,6 +128,7 @@ export default connect(state => {
instance: state.getIn(['roles', 'instance']) || null,
permissionsMap: permissionsMap,
roles: state.getIn(['roles', 'list']),
removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
loading: state.getIn(['roles', 'fetchRequest', 'loading']),
account: state.getIn([ 'user', 'account' ])
}

35
frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
View file

@ -13,34 +13,37 @@ interface Props {
role: any,
deleteHandler?: (role: any) => void,
editHandler?: (role: any) => void,
permissions: any
permissions: any,
isAdmin: boolean
}
function RoleItem({ role, deleteHandler, editHandler, permissions }: Props) {
function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions }: Props) {
return (
<div className={cn(stl.wrapper)}>
<Icon name="user-alt" size="16" marginRight="10" />
<div className="flex items-center">
<span>{ role.name }</span>
<div className="grid grid-flow-col auto-cols-max gap-2">
<div className="mr-4">{ role.name }</div>
<div className="grid grid-flow-col auto-cols-max">
{role.permissions.map((permission: any) => (
<PermisionLabel permission={permissions[permission]} key={permission.id} />
// <span key={permission.id} className={cn(stl.permission)}>{ permissions[permission].name }</span>
))}
</div>
</div>
{ isAdmin && (
<div className={ stl.actions }>
{ !!deleteHandler &&
<div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => deleteHandler(role) } id="trash">
<Icon name="trash" size="16" color="teal"/>
</div>
}
{ !!editHandler &&
<div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
<Icon name="edit" size="16" color="teal"/>
</div>
}
</div>
)}
<div className={ stl.actions }>
{ !!deleteHandler &&
<div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => deleteHandler(role) } id="trash">
<Icon name="trash" size="16" color="teal"/>
</div>
}
{ !!editHandler &&
<div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
<Icon name="edit" size="16" color="teal"/>
</div>
}
</div>
</div>
);
}

4
frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
View file

@ -38,10 +38,10 @@
.label {
margin-left: 10px;
padding: 0 10px;
padding: 0 5px;
border-radius: 3px;
background-color: $gray-lightest;
font-size: 12px;
font-size: 10px;
border: solid thin $gray-light;
width: fit-content;
}

4
frontend/app/duck/roles.js
View file

@ -13,8 +13,8 @@ const initialState = Map({
{ name: 'Developer Tools', value: 'DEV_TOOLS' },
{ name: 'Errors', value: 'ERRORS' },
{ name: 'Metrics', value: 'METRICS' },
{ name: 'Assist Live', value: 'ASSIST_LIVE' },
{ name: 'Assist Call', value: 'ASSIST_CALL' },
{ name: 'Assist (Live)', value: 'ASSIST_LIVE' },
{ name: 'Assist (Call)', value: 'ASSIST_CALL' },
])
});