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

ui: fix warns types

Browse source
This commit is contained in:
nick-delirium 2025-05-13 12:13:33 +02:00 • committed by Delirium
parent cbb930379d
commit 58d1f7c145
1 changed files with 57 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
frontend/app/components/Session_/WarnBadge.tsx
View file

@ -40,6 +40,12 @@ interface WarnBadgeExtraProps {
trackerWarnClassName?: string;
}
type Warns = [
localhostWarn: boolean,
trackerWarn: boolean,
virtualElsFailWarn: boolean,
];
const WarnBadge = React.memo(
({
currentLocation,
@ -66,31 +72,35 @@ const WarnBadge = React.memo(
localStorage.getItem(localhostWarnSiteKey) !== '1';
const localhostWarnActive = Boolean(
currentLocation &&
defaultLocalhostWarn &&
/(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation)
)
defaultLocalhostWarn &&
/(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation),
);
const trackerVersion = window.env.TRACKER_VERSION ?? undefined;
const trackerVerDiff = compareVersions(version, trackerVersion);
const trackerWarnActive = trackerVerDiff !== VersionComparison.Same;
const [warnings, setWarnings] = React.useState<[localhostWarn: boolean, trackerWarn: boolean, virtualElsFailWarn: boolean]>([localhostWarnActive, trackerWarnActive, virtualElsFailed])
const [warnings, setWarnings] = React.useState<Warns>([
localhostWarnActive,
trackerWarnActive,
virtualElsFailed,
]);
React.useEffect(() => {
setWarnings([localhostWarnActive, trackerWarnActive, virtualElsFailed])
}, [localhostWarnActive, trackerWarnActive, virtualElsFailed])
setWarnings([localhostWarnActive, trackerWarnActive, virtualElsFailed]);
}, [localhostWarnActive, trackerWarnActive, virtualElsFailed]);
const closeWarning = (type: 0 | 1 | 2) => {
if (type === 1) {
localStorage.setItem(localhostWarnSiteKey, '1');
}
setWarnings((prev) => {
setWarnings((prev: Warns) => {
const newWarnings = [...prev];
newWarnings[type] = false;
return newWarnings;
return newWarnings as Warns;
});
};
if (!warnings.some(el => el === true)) return null;
if (!warnings.some((el) => el === true)) return null;
// Default container styles and classes
const defaultContainerStyle: React.CSSProperties = {
@ -101,11 +111,15 @@ const WarnBadge = React.memo(
transform: 'translate(-50%, 80%)',
fontWeight: 500,
};
const defaultContainerClass = "flex flex-col gap-2";
const defaultWarnClass = "px-3 py-.5 border border-gray-lighter shadow-sm rounded bg-active-blue flex items-center justify-between";
const defaultContainerClass = 'flex flex-col gap-2';
const defaultWarnClass =
'px-3 py-.5 border border-gray-lighter shadow-sm rounded bg-active-blue flex items-center justify-between';
// Merge defaults with any overrides
const mergedContainerStyle = { ...defaultContainerStyle, ...containerStyle };
const mergedContainerStyle = {
...defaultContainerStyle,
...containerStyle,
};
const mergedContainerClassName = containerClassName
? defaultContainerClass + ' ' + containerClassName
: defaultContainerClass;
@ -117,12 +131,12 @@ const WarnBadge = React.memo(
: defaultWarnClass;
return (
<div
className={mergedContainerClassName}
style={mergedContainerStyle}
>
<div className={mergedContainerClassName} style={mergedContainerStyle}>
{warnings[0] ? (
<div className={mergedLocalhostWarnClassName} style={localhostWarnStyle}>
<div
className={mergedLocalhostWarnClassName}
style={localhostWarnStyle}
>
<div>
<span>{t('Some assets may load incorrectly on localhost.')}</span>
<a
@ -145,16 +159,19 @@ const WarnBadge = React.memo(
) : null}
{warnings[1] ? (
<div className={mergedTrackerWarnClassName} style={trackerWarnStyle}>
<div className='flex gap-x-2 flex-wrap'>
<div className='font-normal'>
{t('Tracker version')} <span className='mx-1 font-semibold'>{version}</span>
<div className="flex gap-x-2 flex-wrap">
<div className="font-normal">
{t('Tracker version')}{' '}
<span className="mx-1 font-semibold">{version}</span>
{t('for this recording is')}{' '}
{trackerVerDiff === VersionComparison.Lower
? 'lower '
: 'ahead of '}
{t('the current')}<span className='mx-1 font-semibold'>{trackerVersion}</span>{t('version')}.
{t('the current')}
<span className="mx-1 font-semibold">{trackerVersion}</span>
{t('version')}.
</div>
<div className='flex gap-1 items-center font-normal'>
<div className="flex gap-1 items-center font-normal">
<span>{t('Some recording might display incorrectly.')}</span>
<a
href="https://docs.openreplay.com/en/deployment/upgrade/#tracker-compatibility"
@ -178,30 +195,42 @@ const WarnBadge = React.memo(
{warnings[2] ? (
<div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
<div className="flex flex-col">
<div>{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}</div>
<div className='link' onClick={onVMode}>{t('Enable')}</div>
<div>
{t(
'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
)}
</div>
<div className="link" onClick={onVMode}>
{t('Enable')}
</div>
</div>
<div
className="py-1 ml-3 cursor-pointer"
onClick={() => closeWarning(1)}
>
<X size={18} strokeWidth={1.5} />
<X size={18} strokeWidth={1.5} />
</div>
</div>
) : null}
{warnings[2] ? (
<div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
<div className="flex flex-col">
<div>{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}</div>
<div className='link' onClick={onVMode}>{t('Enable')}</div>
<div>
{t(
'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
)}
</div>
<div className="link" onClick={onVMode}>
{t('Enable')}
</div>
</div>
<div
className="py-1 ml-3 cursor-pointer"
onClick={() => closeWarning(2)}
>
<X size={18} strokeWidth={1.5} />
<X size={18} strokeWidth={1.5} />
</div>
</div>
) : null}