openreplay/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js

import React from 'react';
import { connect } from 'react-redux';
import cn from 'classnames';
import { SideMenuitem } from 'UI';
import stl from './preferencesMenu.module.css';
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));
    };

    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>
        </div>
    );
}

export default connect((state) => ({
    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
    account: state.getIn(['user', 'account']),
}))(withRouter(PreferencesMenu));