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

remote dev pull and resolved conflicts

Browse source
This commit is contained in:
Shekar Siri 2022-09-27 13:35:32 +05:30
parent 17ef16406e
commit 959cf44cad
9 changed files with 123 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Alerts/Notifications/Notifications.tsx
View file

@ -34,7 +34,7 @@ function Notifications(props: Props) {
<div className={ stl.counter } data-hidden={ count === 0 }>
{ count }
</div>
<Icon name="bell" size="18" />
<Icon name="bell-fill" size="18" />
</div>
</Popup>
));

105
frontend/app/components/Header/Header.js
View file

@ -16,10 +16,11 @@ import { logout } from 'Duck/user';
import { Icon, Popup } from 'UI';
import SiteDropdown from './SiteDropdown';
import styles from './header.module.css';
import OnboardingExplore from './OnboardingExplore/OnboardingExplore'
import OnboardingExplore from './OnboardingExplore/OnboardingExplore';
import Announcements from '../Announcements';
import Notifications from '../Alerts/Notifications';
import { init as initSite } from 'Duck/site';
import { getInitials } from 'App/utils';
import ErrorGenPanel from 'App/dev/components';
import Alerts from '../Alerts/Alerts';
@ -27,6 +28,7 @@ import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
import { fetchListActive as fetchMetadata } from 'Duck/customField';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import UserMenu from './UserMenu';
const DASHBOARD_PATH = dashboard();
const ALERTS_PATH = alerts();
@ -37,20 +39,24 @@ const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
const Header = (props) => {
const {
sites, location, account,
onLogoutClick, siteId,
boardingCompletion = 100, showAlerts = false,
sites,
location,
account,
onLogoutClick,
siteId,
boardingCompletion = 100,
showAlerts = false,
} = props;
const name = account.get('name').split(" ")[0];
const [hideDiscover, setHideDiscover] = useState(false)
const name = account.get('name').split(' ')[0];
const [hideDiscover, setHideDiscover] = useState(false);
const { userStore, notificationStore } = useStore();
const initialDataFetched = useObserver(() => userStore.initialDataFetched);
let activeSite = null;
const onAccountClick = () => {
props.history.push(CLIENT_PATH);
}
};
useEffect(() => {
if (!account.id || initialDataFetched) return;
@ -67,36 +73,38 @@ const Header = (props) => {
}, [account]);
useEffect(() => {
activeSite = sites.find(s => s.id == siteId);
activeSite = sites.find((s) => s.id == siteId);
props.initSite(activeSite);
}, [siteId])
}, [siteId]);
return (
<div className={ cn(styles.header) } style={{ height: '50px'}}>
<NavLink to={ withSiteId(SESSIONS_PATH, siteId) }>
<div className={cn(styles.header)} style={{ height: '50px' }}>
<NavLink to={withSiteId(SESSIONS_PATH, siteId)}>
<div className="relative select-none">
<div className="px-4 py-2">
<AnimatedSVG name={ICONS.LOGO_SMALL} size="30" />
</div>
<div className="absolute bottom-0" style={{ fontSize: '7px', right: '5px' }}>v{window.env.VERSION}</div>
<div className="absolute bottom-0" style={{ fontSize: '7px', right: '5px' }}>
v{window.env.VERSION}
</div>
</div>
</NavLink>
<SiteDropdown />
<div className={ styles.divider } />
{/* <div className={ styles.divider } /> */}
<NavLink
to={ withSiteId(SESSIONS_PATH, siteId) }
className={ styles.nav }
activeClassName={ styles.active }
to={withSiteId(SESSIONS_PATH, siteId)}
className={styles.nav}
activeClassName={styles.active}
>
{ 'Sessions' }
{'Sessions'}
</NavLink>
<NavLink
to={ withSiteId(ASSIST_PATH, siteId) }
className={ styles.nav }
activeClassName={ styles.active }
to={withSiteId(ASSIST_PATH, siteId)}
className={styles.nav}
activeClassName={styles.active}
>
{ 'Assist' }
{'Assist'}
</NavLink>
<NavLink
to={ withSiteId(DASHBOARD_PATH, siteId) }
@ -108,51 +116,50 @@ const Header = (props) => {
|| location.pathname.includes(ALERTS_PATH)
}}
>
<span>{ 'Dashboards' }</span>
<span>{'Dashboards'}</span>
</NavLink>
<div className={ styles.right }>
<Announcements />
<div className={ styles.divider } />
<div className={styles.right}>
{/* <Announcements /> */}
{/* <div className={ styles.divider } /> */}
{ (boardingCompletion < 100 && !hideDiscover) && (
{boardingCompletion < 100 && !hideDiscover && (
<React.Fragment>
<OnboardingExplore onComplete={() => setHideDiscover(true)} />
<div className={ styles.divider } />
</React.Fragment>
)}
<Notifications />
<div className={ styles.divider } />
<Popup content={ `Preferences` } >
<NavLink to={ CLIENT_PATH } className={ styles.headerIcon }><Icon name="cog" size="20" /></NavLink>
<Popup content={`Preferences`}>
<NavLink to={CLIENT_PATH} className={styles.headerIcon}>
<Icon name="gear-fill" size="20" />
</NavLink>
</Popup>
<div className={ styles.divider } />
<div className={ styles.userDetails }>
<div className={cn(styles.userDetails, 'group cursor-pointer')}>
<div className="flex items-center">
<div className="mr-5">{ name }</div>
<Icon color="gray-medium" name="ellipsis-v" size="24" />
<div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center color-white">
{getInitials(name)}
</div>
</div>
<ul>
<li><button onClick={ onAccountClick }>{ 'Account' }</button></li>
<li><button onClick={ onLogoutClick }>{ 'Logout' }</button></li>
</ul>
<UserMenu className="invisible group-hover:visible" />
</div>
</div>
{ <ErrorGenPanel/> }
{<ErrorGenPanel />}
{showAlerts && <Alerts />}
</div>
);
};
export default withRouter(connect(
state => ({
account: state.getIn([ 'user', 'account' ]),
siteId: state.getIn([ 'site', 'siteId' ]),
sites: state.getIn([ 'site', 'list' ]),
showAlerts: state.getIn([ 'dashboard', 'showAlerts' ]),
boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ])
}),
{ onLogoutClick: logout, initSite, fetchMetadata },
)(Header));
export default withRouter(
connect(
(state) => ({
account: state.getIn(['user', 'account']),
siteId: state.getIn(['site', 'siteId']),
sites: state.getIn(['site', 'list']),
showAlerts: state.getIn(['dashboard', 'showAlerts']),
boardingCompletion: state.getIn(['dashboard', 'boardingCompletion']),
}),
{ onLogoutClick: logout, initSite, fetchMetadata }
)(Header)
);

53
frontend/app/components/Header/UserMenu/UserMenu.tsx Normal file
View file

@ -0,0 +1,53 @@
import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from 'Duck/user';
import { client, CLIENT_DEFAULT_TAB } from 'App/routes';
import cn from 'classnames';
const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
interface Props {
history: any;
onLogoutClick: any;
className: string;
}
function UserMenu(props: Props) {
const onAccountClick = () => {
props.history.push(CLIENT_PATH);
};
return (
<div style={{ width: '250px' }} className={cn(props.className, "absolute right-0 top-0 bg-white border mt-14 shadow")}>
<div className="flex items-center p-3">
<div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center mr-2 color-white">
SS
</div>
<div>
<div className="color-teal font-medium leading-none">User Name</div>
<div className="color-gray-medium">Admin - admin@gmail.com</div>
</div>
</div>
<div className="border-t">
<button onClick={onAccountClick}>{'Account'}</button>
</div>
<div className="border-t">
<button onClick={props.onLogoutClick}>{'Logout'}</button>
</div>
</div>
);
}
export default withRouter(
connect(
(state: any) => ({
// account: state.getIn([ 'user', 'account' ]),
// siteId: state.getIn([ 'site', 'siteId' ]),
// sites: state.getIn([ 'site', 'list' ]),
// showAlerts: state.getIn([ 'dashboard', 'showAlerts' ]),
// boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ])
}),
{ onLogoutClick: logout }
)(UserMenu)
);
// export default UserMenu;

1
frontend/app/components/Header/UserMenu/index.ts Normal file
View file

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

5
frontend/app/components/Header/header.module.css
View file

@ -72,11 +72,10 @@ $height: 50px;
.userDetails {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: center;
position: relative;
padding: 0 5px 0 15px;
padding: 0 10px;
transition: all 0.2s;
min-width: 100px;
&:hover {
background-color: $gray-lightest;

2
frontend/app/components/Header/siteDropdown.module.css
View file

@ -1,7 +1,7 @@
.wrapper {
display: flex;
align-items: center;
border-left: solid thin $gray-light !important;
/* border-left: solid thin $gray-light !important; */
padding: 10px 10px;
min-width: 180px;
justify-content: flex-start;

4
frontend/app/components/ui/SVG.tsx
View file

File diff suppressed because one or more lines are too long

3
frontend/app/svg/icons/bell-fill.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 282 B

3
frontend/app/svg/icons/gear-fill.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 796 B