openreplay/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
2023-02-03 13:11:58 +01:00

77 lines
2.7 KiB
TypeScript

import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import { CLIENT_TABS, client as clientRoute } from 'App/routes';
import { withRouter, RouteComponentProps } from 'react-router';
interface Props {
history: any;
className: string;
account: any;
}
function SettingsMenu(props: RouteComponentProps<Props>) {
const { history, account, className }: any = props;
const isAdmin = account.admin || account.superAdmin;
const isEnterprise = account.edition === 'ee';
const navigateTo = (path: any) => {
switch (path) {
case 'projects':
return history.push(clientRoute(CLIENT_TABS.SITES));
case 'team':
return history.push(clientRoute(CLIENT_TABS.MANAGE_USERS));
case 'metadata':
return history.push(clientRoute(CLIENT_TABS.CUSTOM_FIELDS));
case 'webhooks':
return history.push(clientRoute(CLIENT_TABS.WEBHOOKS));
case 'integrations':
return history.push(clientRoute(CLIENT_TABS.INTEGRATIONS));
case 'notifications':
return history.push(clientRoute(CLIENT_TABS.NOTIFICATIONS));
case 'roles':
return history.push(clientRoute(CLIENT_TABS.MANAGE_ROLES));
case 'audit':
return history.push(clientRoute(CLIENT_TABS.AUDIT));
}
};
return (
<div
style={{ width: '160px', marginTop: '35px' }}
className={cn(className, 'absolute right-0 top-0 bg-white border p-2 text-left')}
>
{isAdmin && (
<>
<MenuItem onClick={() => navigateTo('projects')} label="Projects" icon="folder2" />
<MenuItem onClick={() => navigateTo('team')} label="Team" icon="users" />
</>
)}
<MenuItem onClick={() => navigateTo('metadata')} label="Metadata" icon="tags" />
<MenuItem onClick={() => navigateTo('webhooks')} label="Webhooks" icon="link-45deg" />
<MenuItem onClick={() => navigateTo('integrations')} label="Integrations" icon="puzzle" />
{isEnterprise && isAdmin && (
<>
<MenuItem onClick={() => navigateTo('roles')} label="Roles & Access" icon="diagram-3" />
<MenuItem onClick={() => navigateTo('audit')} label="Audit" icon="list-ul" />
</>
)}
<MenuItem
onClick={() => navigateTo('notifications')}
label="Notifications"
icon="bell-slash"
/>
</div>
);
}
export default withRouter(SettingsMenu);
function MenuItem({ onClick, label, icon }: any) {
return (
<div
className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border hover-teal"
onClick={onClick}
>
<Icon name={icon} size="16" />
<button className="ml-2">{label}</button>
</div>
);
}