267 lines
8.5 KiB
TypeScript
267 lines
8.5 KiB
TypeScript
import { useStore } from 'App/mstore';
|
|
import SummaryBlock from "Components/Session/Player/ReplayPlayer/SummaryBlock";
|
|
import React, { useMemo } from 'react';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import QueueControls from 'App/components/Session_/QueueControls';
|
|
import Bookmark from 'Shared/Bookmark';
|
|
import SharePopup from 'Shared/SharePopup/SharePopup';
|
|
import Issues from 'App/components/Session_/Issues/Issues';
|
|
import NotePopup from 'App/components/Session_/components/NotePopup';
|
|
import ItemMenu from 'App/components/Session_/components/HeaderMenu';
|
|
import { useModal } from 'App/components/Modal';
|
|
import BugReportModal from 'App/components/Session_/BugReport/BugReportModal';
|
|
import { PlayerContext } from 'App/components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
import AutoplayToggle from 'Shared/AutoplayToggle';
|
|
import { connect } from 'react-redux';
|
|
import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs';
|
|
import { IFRAME } from 'App/constants/storageKeys';
|
|
import cn from 'classnames';
|
|
import { Switch } from 'antd';
|
|
|
|
const localhostWarn = (project: string): string => project + '_localhost_warn';
|
|
const disableDevtools = 'or_devtools_uxt_toggle';
|
|
|
|
function SubHeader(props: any) {
|
|
const localhostWarnKey = localhostWarn(props.siteId);
|
|
const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1';
|
|
const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn);
|
|
const { player, store } = React.useContext(PlayerContext);
|
|
const { width, height, endTime, location: currentLocation = 'loading...' } = store.get();
|
|
const hasIframe = localStorage.getItem(IFRAME) === 'true';
|
|
const { uxtestingStore } = useStore();
|
|
|
|
const enabledIntegration = useMemo(() => {
|
|
const { integrations } = props;
|
|
if (!integrations || !integrations.size) {
|
|
return false;
|
|
}
|
|
|
|
return integrations.some((i: Record<string, any>) => i.token);
|
|
}, [props.integrations]);
|
|
|
|
const { showModal, hideModal } = useModal();
|
|
|
|
const location =
|
|
currentLocation && currentLocation.length > 70
|
|
? `${currentLocation.slice(0, 25)}...${currentLocation.slice(-40)}`
|
|
: currentLocation;
|
|
|
|
const showReportModal = () => {
|
|
const { tabStates, currentTab } = store.get();
|
|
const resourceList = tabStates[currentTab]?.resourceList || [];
|
|
const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
|
|
const eventsList = tabStates[currentTab]?.eventList || [];
|
|
const graphqlList = tabStates[currentTab]?.graphqlList || [];
|
|
const fetchList = tabStates[currentTab]?.fetchList || [];
|
|
|
|
const mappedResourceList = resourceList
|
|
.filter((r) => r.isRed || r.isYellow)
|
|
// @ts-ignore
|
|
.concat(fetchList.filter((i) => parseInt(i.status) >= 400))
|
|
// @ts-ignore
|
|
.concat(graphqlList.filter((i) => parseInt(i.status) >= 400));
|
|
|
|
player.pause();
|
|
const xrayProps = {
|
|
currentLocation: currentLocation,
|
|
resourceList: mappedResourceList,
|
|
exceptionsList: exceptionsList,
|
|
eventsList: eventsList,
|
|
endTime: endTime,
|
|
};
|
|
showModal(
|
|
// @ts-ignore
|
|
<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />,
|
|
{ right: true, width: 620 }
|
|
);
|
|
};
|
|
|
|
const showSummary = () => {
|
|
player.pause();
|
|
showModal(<SummaryBlock sessionId={props.sessionId} />, { right: true, width: 330 })
|
|
}
|
|
|
|
const showWarning =
|
|
location && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(location) && showWarningModal;
|
|
const closeWarning = () => {
|
|
localStorage.setItem(localhostWarnKey, '1');
|
|
setWarning(false);
|
|
};
|
|
|
|
const toggleDevtools = (enabled: boolean): void => {
|
|
localStorage.setItem(disableDevtools, enabled ? '0' : '1');
|
|
uxtestingStore.setHideDevtools(!enabled);
|
|
};
|
|
|
|
const additionalMenu = [
|
|
{
|
|
key: 1,
|
|
component: <AutoplayToggle />,
|
|
},
|
|
{
|
|
key: 2,
|
|
component: <Bookmark noMargin sessionId={props.sessionId} />,
|
|
},
|
|
{
|
|
key: 3,
|
|
component: (
|
|
<div onClick={showReportModal} className={'flex items-center gap-2 p-3 text-black'}>
|
|
<Icon name={'file-pdf'} size={16} />
|
|
<div>Create Bug Report</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 4,
|
|
autoclose: true,
|
|
component: (
|
|
<SharePopup
|
|
entity="sessions"
|
|
id={props.sessionId}
|
|
showCopyLink={true}
|
|
trigger={
|
|
<div className={'flex items-center gap-2 p-3 text-black'}>
|
|
<Icon name={'share-alt'} size={16} />
|
|
<div>Share</div>
|
|
</div>
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
if (enabledIntegration) {
|
|
additionalMenu.push({
|
|
key: 5,
|
|
component: <Issues isInline={true} sessionId={props.sessionId} />,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="w-full px-4 flex items-center border-b relative"
|
|
style={{
|
|
background: uxtestingStore.isUxt() ? (props.live ? '#F6FFED' : '#EBF4F5') : undefined,
|
|
}}
|
|
>
|
|
{showWarning ? (
|
|
<div
|
|
className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
|
|
style={{
|
|
zIndex: 999,
|
|
position: 'absolute',
|
|
left: '50%',
|
|
bottom: '-24px',
|
|
transform: 'translate(-50%, 0)',
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
Some assets may load incorrectly on localhost.
|
|
<a
|
|
href="https://docs.openreplay.com/en/troubleshooting/session-recordings/#testing-in-localhost"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="link ml-1"
|
|
>
|
|
Learn More
|
|
</a>
|
|
<div className="py-1 ml-3 cursor-pointer" onClick={closeWarning}>
|
|
<Icon name="close" size={16} color="black" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<SessionTabs />
|
|
<div
|
|
className={cn(
|
|
'ml-auto text-sm flex items-center color-gray-medium gap-2',
|
|
hasIframe ? 'opacity-50 pointer-events-none' : ''
|
|
)}
|
|
style={{ width: 'max-content' }}
|
|
>
|
|
<SummaryButton onClick={showSummary} />
|
|
<NotePopup />
|
|
<ItemMenu items={additionalMenu} />
|
|
{uxtestingStore.isUxt() ? (
|
|
<Switch
|
|
checkedChildren={'DevTools'}
|
|
unCheckedChildren={'DevTools'}
|
|
onChange={toggleDevtools}
|
|
defaultChecked={!uxtestingStore.hideDevtools}
|
|
/>
|
|
) : (
|
|
<div>
|
|
{/* @ts-ignore */}
|
|
<QueueControls />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{location && (
|
|
<div className={'w-full bg-white border-b border-gray-light'}>
|
|
<div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
|
|
<Icon size="20" name="event/link" className="mr-1" />
|
|
<Tooltip title="Open in new tab" delay={0}>
|
|
<a href={currentLocation} target="_blank">
|
|
{location}
|
|
</a>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function SummaryButton({ onClick }: { onClick?: () => void }) {
|
|
const [isHovered, setHovered] = React.useState(false);
|
|
|
|
return (
|
|
<div
|
|
style={gradientButton}
|
|
onClick={onClick}
|
|
>
|
|
<div style={isHovered ? onHoverFillStyle : fillStyle} onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}>
|
|
<Icon name={'sparkles'} size={16} />
|
|
<div className={'font-semibold text-main'}>AI Summary</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const gradientButton = {
|
|
border: 'double 1px transparent',
|
|
borderRadius: '60px',
|
|
background:
|
|
'linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(to right, #394EFF 0%, #3EAAAF 100%)',
|
|
backgroundOrigin: 'border-box',
|
|
backgroundClip: 'content-box, border-box',
|
|
cursor: 'pointer',
|
|
};
|
|
const onHoverFillStyle = {
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
borderRadius: '60px',
|
|
gap: 2,
|
|
alignItems: 'center',
|
|
padding: '4px 8px',
|
|
background:
|
|
'linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)',
|
|
};
|
|
const fillStyle = {
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
borderRadius: '60px',
|
|
gap: 2,
|
|
alignItems: 'center',
|
|
padding: '4px 8px',
|
|
}
|
|
|
|
export default connect((state: Record<string, any>) => ({
|
|
siteId: state.getIn(['site', 'siteId']),
|
|
integrations: state.getIn(['issues', 'list']),
|
|
modules: state.getIn(['user', 'account', 'modules']) || [],
|
|
}))(observer(SubHeader));
|