change(ui): support modal
This commit is contained in:
Shekar Siri
parent
f57d2fd282
commit
6f09bdcffe
6 changed files with 136 additions and 47 deletions
|
|
@ -271,7 +271,6 @@ const Router: React.FC<RouterProps> = (props) => {
|
|||
</Switch>
|
||||
</Suspense>
|
||||
</Loader>
|
||||
{!isEnterprise && !isPlayer && <SupportCallout />}
|
||||
</Layout>
|
||||
</ModalProvider>
|
||||
) :
|
||||
|
|
|
|||
|
|
@ -39,8 +39,6 @@ function ProjectDropdown(props: Props) {
|
|||
const showCurrent = hasSiteId(location.pathname) || siteChangeAvailable(location.pathname);
|
||||
const { showModal, hideModal } = useModal();
|
||||
|
||||
console.log('activeSite', activeSite);
|
||||
|
||||
const handleSiteChange = (newSiteId: string) => {
|
||||
props.setSiteId(newSiteId); // Fixed: should set the new siteId, not the existing one
|
||||
props.fetchIntegrationVariables();
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function Logo(props: Props) {
|
|||
return (
|
||||
<NavLink to={withSiteId(SESSIONS_PATH, props.siteId)}>
|
||||
<Button type='link' className='p-0'>
|
||||
<AnimatedSVG name={ICONS.LOGO_FULL} size='150' />
|
||||
<AnimatedSVG name={ICONS.LOGO_FULL} size='120' />
|
||||
</Button>
|
||||
</NavLink>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Divider, Menu, Typography } from 'antd';
|
||||
import { Divider, Menu, Typography, Drawer, Button, Space } from 'antd';
|
||||
import SVG from 'UI/SVG';
|
||||
import * as routes from 'App/routes';
|
||||
import { client, CLIENT_DEFAULT_TAB, CLIENT_TABS, withSiteId } from 'App/routes';
|
||||
|
|
@ -8,8 +8,10 @@ import { categories as main_menu, MENU, preferences, PREFERENCES_MENU } from './
|
|||
import { connect } from 'react-redux';
|
||||
import { MODULES } from 'Components/Client/Modules';
|
||||
import cn from 'classnames';
|
||||
import { Icon as IconX } from 'UI';
|
||||
import Icon from '@ant-design/icons';
|
||||
import { Icon } from 'UI';
|
||||
import { ArrowRightOutlined } from '@ant-design/icons';
|
||||
import SupportModal from 'App/layout/SupportModal';
|
||||
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
|
|
@ -24,7 +26,7 @@ function SideMenu(props: RouteComponentProps<Props>) {
|
|||
// @ts-ignore
|
||||
const { siteId, modules } = props;
|
||||
const isPreferencesActive = props.location.pathname.includes('/client/');
|
||||
console.log('modules', modules);
|
||||
const [supportOpen, setSupportOpen] = React.useState(false);
|
||||
|
||||
let menu = isPreferencesActive ? preferences : main_menu;
|
||||
|
||||
|
|
@ -76,6 +78,10 @@ function SideMenu(props: RouteComponentProps<Props>) {
|
|||
};
|
||||
|
||||
const handleClick = (item: any) => {
|
||||
if (item.key === MENU.SUPPORT) {
|
||||
setSupportOpen(true);
|
||||
return;
|
||||
}
|
||||
const handler = menuRoutes[item.key];
|
||||
if (handler) {
|
||||
const route = handler();
|
||||
|
|
@ -100,44 +106,50 @@ function SideMenu(props: RouteComponentProps<Props>) {
|
|||
|
||||
|
||||
return (
|
||||
<Menu defaultSelectedKeys={['1']} mode='inline' onClick={handleClick}
|
||||
style={{ backgroundColor: '#f6f6f6', border: 'none', marginTop: '8px' }}>
|
||||
{isPreferencesActive &&
|
||||
<Menu.Item key='exit' style={{ color: '#333', height: '32px' }} icon={<SVG name='arrow-bar-left' />}>
|
||||
<Text className='ml-2'>Exit</Text>
|
||||
</Menu.Item>}
|
||||
{(isPreferencesActive ? preferences : main_menu).map((category, index) => (
|
||||
<React.Fragment key={category.key}>
|
||||
{index > 0 && <Divider style={{ margin: '6px 0' }} />}
|
||||
<Menu.ItemGroup key={category.key}
|
||||
title={<Text className='uppercase text-sm' type='secondary'>{category.title}</Text>}>
|
||||
{category.items.filter((item: any) => !item.hidden).map((item: any) => {
|
||||
const isActive = isMenuItemActive(item.key);
|
||||
return item.children ? (
|
||||
<Menu.SubMenu
|
||||
key={item.key}
|
||||
title={<Text className={cn('ml-5 !rounded')}>{item.label}</Text>}
|
||||
icon={<SVG name={item.icon} size={16} />}>
|
||||
{item.children.map((child: any) => <Menu.Item
|
||||
className={cn('ml-8', { 'ant-menu-item-selected !bg-active-dark-blue': isMenuItemActive(child.key) })}
|
||||
key={child.key}>{child.label}</Menu.Item>)}
|
||||
</Menu.SubMenu>
|
||||
) : (
|
||||
<Menu.Item
|
||||
key={item.key}
|
||||
icon={<IconX name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
|
||||
style={{ color: '#333', height: '32px' }}
|
||||
className={cn('!rounded', { 'ant-menu-item-selected !bg-active-dark-blue': isActive })}
|
||||
itemIcon={item.leading ?
|
||||
<IconX name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
|
||||
<Text className={cn('ml-2', { 'color-teal': isActive })}>{item.label}</Text>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu.ItemGroup>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Menu>
|
||||
<>
|
||||
<Menu defaultSelectedKeys={['1']} mode='inline' onClick={handleClick}
|
||||
style={{ backgroundColor: '#f6f6f6', border: 'none', marginTop: '8px' }}>
|
||||
{isPreferencesActive &&
|
||||
<Menu.Item key='exit' style={{ color: '#333', height: '32px' }} icon={<SVG name='arrow-bar-left' />}>
|
||||
<Text className='ml-2'>Exit</Text>
|
||||
</Menu.Item>}
|
||||
{(isPreferencesActive ? preferences : main_menu).map((category, index) => (
|
||||
<React.Fragment key={category.key}>
|
||||
{index > 0 && <Divider style={{ margin: '6px 0' }} />}
|
||||
<Menu.ItemGroup key={category.key}
|
||||
title={<Text className='uppercase text-sm' type='secondary'>{category.title}</Text>}>
|
||||
{category.items.filter((item: any) => !item.hidden).map((item: any) => {
|
||||
const isActive = isMenuItemActive(item.key);
|
||||
return item.children ? (
|
||||
<Menu.SubMenu
|
||||
key={item.key}
|
||||
title={<Text className={cn('ml-5 !rounded')}>{item.label}</Text>}
|
||||
icon={<SVG name={item.icon} size={16} />}>
|
||||
{item.children.map((child: any) => <Menu.Item
|
||||
className={cn('ml-8', { 'ant-menu-item-selected !bg-active-dark-blue': isMenuItemActive(child.key) })}
|
||||
key={child.key}>{child.label}</Menu.Item>)}
|
||||
</Menu.SubMenu>
|
||||
) : (
|
||||
<Menu.Item
|
||||
key={item.key}
|
||||
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
|
||||
style={{ color: '#333', height: '32px' }}
|
||||
className={cn('!rounded', { 'ant-menu-item-selected !bg-active-dark-blue': isActive })}
|
||||
itemIcon={item.leading ?
|
||||
<Icon name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
|
||||
<Text className={cn('ml-2', { 'color-teal': isActive })}>{item.label}</Text>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu.ItemGroup>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Menu>
|
||||
<SupportModal
|
||||
onClose={() => {
|
||||
setSupportOpen(false);
|
||||
}} open={supportOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
80
frontend/app/layout/SupportModal.tsx
Normal file
80
frontend/app/layout/SupportModal.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import React from 'react';
|
||||
import { Icon } from 'UI';
|
||||
import { Button, Drawer, Space, Typography } from 'antd';
|
||||
import { ArrowRightOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
function SupportModal(props: Props) {
|
||||
const { onClose, open } = props;
|
||||
const WEBSITE_ID = window.env.CRISP_KEY;
|
||||
return (
|
||||
<Drawer title='Open Replay Support' placement='right' open={open} width={400} onClose={onClose}
|
||||
closable={false}>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className='border p-3 bg-white flex rounded'>
|
||||
<div className='shrink-0 w-10 mt-2'>
|
||||
<Icon name='bookmark' size={18} />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<Text className='font-medium'>Documentation</Text>
|
||||
<Text type='secondary' className='text-sm'>
|
||||
Deploy, manage and customize OpenReplay through quick starts, tutorials, samples, and guides.
|
||||
</Text>
|
||||
<div className='my-1' />
|
||||
<Button type='link' style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
|
||||
onClick={() => {
|
||||
window.open('https://docs.openreplay.com');
|
||||
}}>
|
||||
<Space>
|
||||
<div>Browse Docs</div>
|
||||
<ArrowRightOutlined />
|
||||
</Space>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='my-2' />
|
||||
|
||||
<div className='border p-3 bg-white flex rounded'>
|
||||
<div className='shrink-0 w-10 mt-2'>
|
||||
<Icon name='slack' size={18} />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<Text className='font-medium'>Slack Community</Text>
|
||||
<Text type='secondary' className='text-sm'>
|
||||
Ask OpenReplay community and get quick resolution to your questions from 1000+ members.
|
||||
</Text>
|
||||
<div className='my-1' />
|
||||
<Button type='link'
|
||||
style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
|
||||
onClick={() => {
|
||||
window.open('https://slack.openreplay.com', '_blank');
|
||||
}}>
|
||||
<Space>
|
||||
<div>Ask Community</div>
|
||||
<ArrowRightOutlined />
|
||||
</Space>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='my-2' />
|
||||
|
||||
{!!WEBSITE_ID && (
|
||||
<div className='flex rounded border w-full'>
|
||||
<iframe src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
|
||||
style={{ height: '415px', margin: '0', padding: '0', width: '100%' }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default SupportModal;
|
||||
|
|
@ -77,7 +77,7 @@ export const categories: Category[] = [
|
|||
key: 'analytics',
|
||||
items: [
|
||||
{ label: 'Dashboards', key: MENU.DASHBOARDS, icon: 'columns-gap' },
|
||||
{ label: 'Card', key: MENU.CARDS, icon: 'bar-chart-line' },
|
||||
{ label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line' },
|
||||
// {
|
||||
// label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line', children: [
|
||||
// { label: 'All', key: MENU.CARDS },
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue