110 lines
3.1 KiB
TypeScript
110 lines
3.1 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';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface Props {
|
|
history: any;
|
|
className: string;
|
|
account: any;
|
|
}
|
|
|
|
function SettingsMenu(props: RouteComponentProps<Props>) {
|
|
const { t } = useTranslation();
|
|
const { history, account, className }: any = props;
|
|
const isAdmin = account.admin || account.superAdmin;
|
|
const isEnterprise = account.edition === 'ee';
|
|
const navigateTo = (path: any) => {
|
|
switch (path) {
|
|
case 'sessions-listing':
|
|
return history.push(clientRoute(CLIENT_TABS.SESSIONS_LISTING));
|
|
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>
|
|
<MenuItem
|
|
onClick={() => navigateTo('sessions-listing')}
|
|
label={t('Sessions Listing')}
|
|
icon="folder2"
|
|
/>
|
|
<MenuItem
|
|
onClick={() => navigateTo('integrations')}
|
|
label={t('Integrations')}
|
|
icon="puzzle"
|
|
/>
|
|
<MenuItem
|
|
onClick={() => navigateTo('metadata')}
|
|
label={t('Metadata')}
|
|
icon="tags"
|
|
/>
|
|
<MenuItem
|
|
onClick={() => navigateTo('webhooks')}
|
|
label={t('Webhooks')}
|
|
icon="link-45deg"
|
|
/>
|
|
<MenuItem
|
|
onClick={() => navigateTo('projects')}
|
|
label={t('Projects')}
|
|
icon="folder2"
|
|
/>
|
|
{isAdmin && (
|
|
<MenuItem
|
|
onClick={() => navigateTo('team')}
|
|
label={t('Team')}
|
|
icon="users"
|
|
/>
|
|
)}
|
|
{isEnterprise && isAdmin && (
|
|
<>
|
|
<MenuItem
|
|
onClick={() => navigateTo('roles')}
|
|
label={t('Roles & Access')}
|
|
icon="diagram-3"
|
|
/>
|
|
<MenuItem
|
|
onClick={() => navigateTo('audit')}
|
|
label={t('Audit')}
|
|
icon="list-ul"
|
|
/>
|
|
</>
|
|
)}
|
|
<MenuItem
|
|
onClick={() => navigateTo('notifications')}
|
|
label={t('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>
|
|
);
|
|
}
|