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

change(ui): sessions listing menu name

Browse source
This commit is contained in:
Shekar Siri 2023-11-03 10:47:43 +01:00
parent e8dea47e17
commit 0c5e3f54bd
4 changed files with 1 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
frontend/app/components/Client/PreferencesMenu/PreferencesMenu.tsx
View file

@ -1,100 +0,0 @@
import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import cn from 'classnames';
import { SideMenuitem } from 'UI';
import stl from './preferencesMenu.module.css';
import { CLIENT_TABS, client as clientRoute } from 'App/routes';
const mapStateToProps = (state: any) => ({
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
account: state.getIn(['user', 'account'])
});
const connector = connect(mapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
type Props = PropsFromRedux & RouteComponentProps & {
activeTab: string;
};
function PreferencesMenu({ account, activeTab, history, isEnterprise }: Props) {
const isAdmin = account.admin || account.superAdmin;
const setTab = (tab: string) => {
history.push(clientRoute(tab));
};
const AdminOnlyBadge = () => (
<div
className='ml-1 rounded-full bg-gray-light text-xs flex items-center px-2 color-gray-medium'
style={{ marginTop: '', height: '20px', whiteSpace: 'nowrap' }}
>
Admin Only
</div>
);
const menuItems = React.useMemo(() => {
return [
{ title: 'Account', iconName: 'user-circle', tab: CLIENT_TABS.PROFILE },
{ title: 'Sessions Listing', iconName: 'play', tab: CLIENT_TABS.SESSIONS_LISTING },
{ title: 'Integrations', iconName: 'puzzle-piece', tab: CLIENT_TABS.INTEGRATIONS },
{ title: 'Metadata', iconName: 'tags', tab: CLIENT_TABS.CUSTOM_FIELDS },
{ title: 'Webhooks', iconName: 'anchor', tab: CLIENT_TABS.WEBHOOKS },
{ title: 'Projects', iconName: 'window-restore', tab: CLIENT_TABS.SITES },
{
title: 'Roles & Access',
iconName: 'diagram-3',
tab: CLIENT_TABS.MANAGE_ROLES,
isAdminOnly: true,
isEnterpriseOnly: true
},
{
title: 'Audit',
iconName: 'list-ul',
tab: CLIENT_TABS.AUDIT,
isAdminOnly: true,
isEnterpriseOnly: true
},
{ title: 'Team', iconName: 'users', tab: CLIENT_TABS.MANAGE_USERS, isAdminOnly: true },
{ title: 'Notifications', iconName: 'bell', tab: CLIENT_TABS.NOTIFICATIONS }
].reduce((acc, item) => {
if (item.isAdminOnly && !isAdmin) {
return acc;
}
if (item.isEnterpriseOnly && !isEnterprise) {
return acc;
}
return [...acc, item];
}, []);
}, [isAdmin, isEnterprise]);
// @ts-ignore
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>
{menuItems.map((menuItem) => (
<div className='mb-2' key={menuItem.title}>
<SideMenuitem
active={activeTab === menuItem.tab}
title={menuItem.title}
// @ts-ignore
iconName={menuItem.iconName}
onClick={() => setTab(menuItem.tab)}
leading={menuItem.isAdminOnly ? <AdminOnlyBadge /> : undefined}
/>
</div>
))}
</div>
);
}
export default connector(withRouter(PreferencesMenu));

1
frontend/app/components/Client/PreferencesMenu/index.js
View file

@ -1 +0,0 @@
export { default } from './PreferencesMenu';

35
frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
View file

@ -1,35 +0,0 @@
.wrapper {
position: fixed;
top: 81px;
width: 210px;
}
.header {
margin-bottom: 15px;
& .label {
text-transform: uppercase;
color: gray;
letter-spacing: 0.2em;
}
& .manageButton {
margin-left: 5px;
font-size: 12px;
color: $teal;
cursor: pointer;
padding: 2px 5px;
border: solid thin transparent;
border-radius: 3px;
margin-bottom: -3px;
&:hover {
background-color: $gray-light;
color: $gray-darkest;
}
}
}
.divider {
height: 1px;
width: 100%;
background-color: $gray-light;
}

2
frontend/app/layout/data.ts
View file

@ -119,7 +119,7 @@ export const preferences: Category[] = [
key: 'preferences',
items: [
{ label: 'Account', key: PREFERENCES_MENU.ACCOUNT, icon: 'person' },
{ label: 'Session Listing', key: PREFERENCES_MENU.SESSION_LISTING, icon: 'card-list' },
{ label: 'Sessions Listing', key: PREFERENCES_MENU.SESSION_LISTING, icon: 'card-list' },
{ label: 'Integrations', key: PREFERENCES_MENU.INTEGRATIONS, icon: 'plug' },
{ label: 'Metadata', key: PREFERENCES_MENU.METADATA, icon: 'tags' },
{ label: 'Webhooks', key: PREFERENCES_MENU.WEBHOOKS, icon: 'link-45deg' },