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

change(ui) - admin badge

Browse source
This commit is contained in:
Shekar Siri 2022-09-13 17:40:47 +05:30
parent 41d390151f
commit c44e44eb42
3 changed files with 118 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

220
frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
View file

@ -7,112 +7,126 @@ import { CLIENT_TABS, client as clientRoute } from 'App/routes';
import { withRouter } from 'react-router-dom';
function PreferencesMenu({ account, activeTab, history, isEnterprise }) {
const isAdmin = account.admin || account.superAdmin;
const setTab = (tab) => {
history.push(clientRoute(tab));
};
const isAdmin = account.admin || account.superAdmin;
const setTab = (tab) => {
history.push(clientRoute(tab));
};
return (
<div className={cn(stl.wrapper, 'h-full overflow-y-auto pb-24')}>
<div className={cn(stl.header, 'flex items-end')}>
<div className={stl.label}>
<span>Preferences</span>
</div>
</div>
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.PROFILE}
title="Account"
iconName="user-circle"
onClick={() => setTab(CLIENT_TABS.PROFILE)}
/>
</div>
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.INTEGRATIONS}
title="Integrations"
iconName="puzzle-piece"
onClick={() => setTab(CLIENT_TABS.INTEGRATIONS)}
/>
</div>
<div className="mb-2">
<SideMenuitem
iconName="tags"
active={activeTab === CLIENT_TABS.CUSTOM_FIELDS}
onClick={() => setTab(CLIENT_TABS.CUSTOM_FIELDS)}
title="Metadata"
/>
</div>
{
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.WEBHOOKS}
title="Webhooks"
iconName="anchor"
onClick={() => setTab(CLIENT_TABS.WEBHOOKS)}
/>
</div>
}
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.SITES}
title="Projects"
iconName="window-restore"
onClick={() => setTab(CLIENT_TABS.SITES)}
/>
</div>
{isEnterprise && isAdmin && (
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.MANAGE_ROLES}
title="Roles & Access"
iconName="diagram-3"
onClick={() => setTab(CLIENT_TABS.MANAGE_ROLES)}
/>
</div>
)}
{isEnterprise && isAdmin && (
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.AUDIT}
title="Audit"
iconName="list-ul"
onClick={() => setTab(CLIENT_TABS.AUDIT)}
/>
</div>
)}
{isAdmin && (
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.MANAGE_USERS}
title="Team"
iconName="users"
onClick={() => setTab(CLIENT_TABS.MANAGE_USERS)}
/>
</div>
)}
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.NOTIFICATIONS}
title="Notifications"
iconName="bell"
onClick={() => setTab(CLIENT_TABS.NOTIFICATIONS)}
/>
</div>
return (
<div className={cn(stl.wrapper, 'h-full overflow-y-auto pb-24')}>
<div className={cn(stl.header, 'flex items-end')}>
<div className={stl.label}>
<span>Preferences</span>
</div>
);
</div>
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.PROFILE}
title="Account"
iconName="user-circle"
onClick={() => setTab(CLIENT_TABS.PROFILE)}
/>
</div>
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.INTEGRATIONS}
title="Integrations"
iconName="puzzle-piece"
onClick={() => setTab(CLIENT_TABS.INTEGRATIONS)}
/>
</div>
<div className="mb-2">
<SideMenuitem
iconName="tags"
active={activeTab === CLIENT_TABS.CUSTOM_FIELDS}
onClick={() => setTab(CLIENT_TABS.CUSTOM_FIELDS)}
title="Metadata"
/>
</div>
{
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.WEBHOOKS}
title="Webhooks"
iconName="anchor"
onClick={() => setTab(CLIENT_TABS.WEBHOOKS)}
/>
</div>
}
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.SITES}
title="Projects"
iconName="window-restore"
onClick={() => setTab(CLIENT_TABS.SITES)}
/>
</div>
{isEnterprise && isAdmin && (
<div className="mb-2 relative">
<SideMenuitem
active={activeTab === CLIENT_TABS.MANAGE_ROLES}
title="Roles & Access"
iconName="diagram-3"
onClick={() => setTab(CLIENT_TABS.MANAGE_ROLES)}
/>
<AdminOnlyBadge />
</div>
)}
{isEnterprise && isAdmin && (
<div className="mb-2 relative">
<SideMenuitem
active={activeTab === CLIENT_TABS.AUDIT}
title="Audit"
iconName="list-ul"
onClick={() => setTab(CLIENT_TABS.AUDIT)}
/>
<AdminOnlyBadge />
</div>
)}
{isAdmin && (
<div className="mb-2 relative">
<SideMenuitem
active={activeTab === CLIENT_TABS.MANAGE_USERS}
title="Team"
iconName="users"
onClick={() => setTab(CLIENT_TABS.MANAGE_USERS)}
/>
<AdminOnlyBadge />
</div>
)}
<div className="mb-2">
<SideMenuitem
active={activeTab === CLIENT_TABS.NOTIFICATIONS}
title="Notifications"
iconName="bell"
onClick={() => setTab(CLIENT_TABS.NOTIFICATIONS)}
/>
</div>
</div>
);
}
export default connect((state) => ({
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
account: state.getIn(['user', 'account']),
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
account: state.getIn(['user', 'account']),
}))(withRouter(PreferencesMenu));
function AdminOnlyBadge() {
return (
<div
className="absolute right-0 top-0 bottom-0 m-auto rounded-full bg-gray-light text-xs flex items-center px-2 color-gray-medium"
style={{ marginTop: '8px', height: '24px' }}
>
Admin Only
</div>
);
}

1
frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
View file

@ -141,7 +141,6 @@ export default connect(
stackEventList: state.stackList,
performanceChartData: state.performanceChartData,
endTime: state.endTime,
// endTime: 30000000,
}))(OverviewPanel)
);

2
frontend/app/components/ui/SideMenuitem/SideMenuitem.js
View file

@ -29,7 +29,7 @@ function SideMenuitem({
className={ cn(
className,
stl.menuItem,
"flex items-center py-2 justify-between",
"flex items-center py-2 justify-between shrink-0",
{ [stl.active] : active }
)}
onClick={disabled ? null : onClick}