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

change(ui) - tooltip replacement

Browse source
This commit is contained in:
Shekar Siri 2022-11-14 15:05:16 +01:00
parent 55edc0b592
commit 5effb0d1a6
30 changed files with 216 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import stl from './notifications.module.css';
import { connect } from 'react-redux';
import { Icon, Popup, Tooltip } from 'UI';
import { Icon, Tooltip } from 'UI';
import { fetchList, setViewed, clearAll } from 'Duck/notifications';
import { setLastRead } from 'Duck/announcements';
import { useModal } from 'App/components/Modal';
@ -29,7 +29,7 @@ function Notifications(props: Props) {
}, []);
return useObserver(() => (
<Tooltip tooltip={`Alerts`}>
<Tooltip title={`Alerts`}>
<div
className={stl.button}
onClick={() => showModal(<AlertTriggersModal />, { right: true })}

3
frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
View file

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Popup, Button } from 'UI';
import { Popup, Button, Tooltip } from 'UI';
import { connect } from 'react-redux';
import cn from 'classnames';
import { toggleChatWindow } from 'Duck/sessions';
@ -19,7 +19,6 @@ import {
} from 'Player/MessageDistributor/managers/AssistManager';
import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream';
import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
import { Tooltip } from 'react-tippy';
import { toast } from 'react-toastify';
import { confirm } from 'UI';
import stl from './AassistActions.module.css';

32
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { Button, PageTitle, Loader } from 'UI';
import { Button, PageTitle, Loader, Tooltip, Popover } from 'UI';
import { withSiteId } from 'App/routes';
import withModal from 'App/components/Modal/withModal';
import DashboardWidgetGrid from '../DashboardWidgetGrid';
@ -15,7 +15,6 @@ import withPageTitle from 'HOCs/withPageTitle';
import withReport from 'App/components/hocs/withReport';
import DashboardOptions from '../DashboardOptions';
import SelectDateRange from 'Shared/SelectDateRange';
import { Tooltip } from 'react-tippy';
import Breadcrumb from 'Shared/Breadcrumb';
import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@ -126,24 +125,25 @@ function DashboardView(props: Props) {
<PageTitle
title={
// @ts-ignore
<Tooltip delay={100} arrow title="Double click to rename">
<Tooltip title="Double click to rename">
{dashboard?.name}
</Tooltip>
}
onDoubleClick={() => onEdit(true)}
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
actionButton={
<OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
<Tooltip
open={showTooltip}
interactive
useContext
// <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
<Popover
// open={showTooltip}
// interactive
// useContext
// @ts-ignore
theme="nopadding"
hideDelay={0}
duration={0}
distance={20}
html={
// theme="nopadding"
// hideDelay={0}
// duration={0}
// distance={20}
placement="left"
render={() => showTooltip && (
<div style={{ padding: 0 }}>
<AddMetricContainer
onAction={() => setShowTooltip(false)}
@ -151,13 +151,13 @@ function DashboardView(props: Props) {
siteId={siteId}
/>
</div>
}
)}
>
<Button variant="primary" onClick={() => setShowTooltip(true)}>
Add Metric
</Button>
</Tooltip>
</OutsideClickDetectingDiv>
</Popover>
// </OutsideClickDetectingDiv>
}
/>
</div>

7
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import { Icon, Link } from 'UI';
import { Icon, Tooltip } from 'UI';
import { checkForRecent } from 'App/date';
import { Tooltip } from 'react-tippy'
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { withSiteId } from 'App/routes';
@ -24,9 +23,7 @@ function MetricTypeIcon({ type }: any) {
return (
<Tooltip
html={<div className="capitalize">{type}</div>}
position="top"
arrow
title={<div className="capitalize">{type}</div>}
>
<div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
<Icon name={getIcon()} size="16" color="tealx" />

5
frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
View file

@ -1,7 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import { Icon } from 'UI';
import { Icon, Tooltip } from 'UI';
import cn from 'classnames';
import { Tooltip } from 'react-tippy';
interface Props {
name: string;
@ -65,7 +64,7 @@ function WidgetName(props: Props) {
/>
) : (
// @ts-ignore
<Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
<Tooltip title="Double click to rename" disabled={!canEdit}>
<div
onDoubleClick={() => setEditing(true)}
className={

3
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import FunnelStepText from './FunnelStepText';
import { Icon, Popup } from 'UI';
import { Tooltip } from 'react-tippy';
import { Icon, Tooltip } from 'UI';
interface Props {
filter: any;

84
frontend/app/components/Session_/Autoplay/Autoplay.js
View file

@ -1,77 +1,83 @@
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { setAutoplayValues } from 'Duck/sessions'
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { setAutoplayValues } from 'Duck/sessions';
import { session as sessionRoute } from 'App/routes';
import { Link, Icon, Toggler } from 'UI';
import { Link, Icon, Toggler, Tooltip } from 'UI';
import { connectPlayer } from 'Player/store';
import { Controls as PlayerControls } from 'Player';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
function Autoplay(props) {
const { previousId, nextId, autoplay, disabled } = props
const { previousId, nextId, autoplay, disabled } = props;
useEffect(() => {
props.setAutoplayValues()
}, [])
props.setAutoplayValues();
}, []);
return (
<div className="flex items-center">
<div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
<Toggler
name="sessionsLive"
onChange={ props.toggleAutoplay }
checked={ autoplay }
/>
<div
onClick={props.toggleAutoplay}
className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
>
<Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
<span className="ml-2">Auto-Play</span>
</div>
<Tooltip
delay={0}
arrow
animation="fade"
position="bottom center"
title="Play Previous Session"
placement="bottom"
title={<div className="whitespace-nowrap">Play Previous Session</div>}
disabled={!previousId}
>
<Link to={sessionRoute(previousId)} disabled={!previousId}>
<div
className={cn(
"p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
'p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium',
previousId && 'cursor-pointer',
!disabled && nextId&& 'hover:bg-bg-blue'
!disabled && nextId && 'hover:bg-bg-blue'
)}
>
<Link to={ sessionRoute(previousId) } disabled={!previousId}>
<Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
</div>
</Link>
</Tooltip>
<Tooltip
delay={0}
arrow
animation="fade"
position="bottom center"
title="Play Next Session"
placement="bottom"
title={<div className="whitespace-nowrap">Play Next Session</div>}
disabled={!nextId}
>
<Link to={sessionRoute(nextId)} disabled={!nextId}>
<div
className={cn(
"p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
'p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium',
nextId && 'cursor-pointer',
!disabled && nextId && 'hover:bg-bg-blue',
!disabled && nextId && 'hover:bg-bg-blue'
)}
>
<Link to={ sessionRoute(nextId) } disabled={!nextId} >
<Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
</div>
</Link>
</Tooltip>
</div>
)
);
}
const connectAutoplay = connect(state => ({
previousId: state.getIn([ 'sessions', 'previousId' ]),
nextId: state.getIn([ 'sessions', 'nextId' ]),
}), { setAutoplayValues })
const connectAutoplay = connect(
(state) => ({
previousId: state.getIn(['sessions', 'previousId']),
nextId: state.getIn(['sessions', 'nextId']),
}),
{ setAutoplayValues }
);
export default connectAutoplay(connectPlayer(state => ({
export default connectAutoplay(
connectPlayer(
(state) => ({
autoplay: state.autoplay,
}), {
toggleAutoplay: PlayerControls.toggleAutoplay
})(Autoplay))
}),
{
toggleAutoplay: PlayerControls.toggleAutoplay,
}
)(Autoplay)
);

4
frontend/app/components/Session_/BugReport/components/ReportTitle.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import cn from 'classnames';
import { Tooltip } from 'react-tippy';
import { Tooltip } from 'UI';
function ReportTitle() {
const { bugReportStore } = useStore();
@ -45,7 +45,7 @@ function ReportTitle() {
/>
) : (
// @ts-ignore
<Tooltip delay={100} arrow title="Double click to rename">
<Tooltip title="Double click to rename">
<div
onDoubleClick={toggleEdit}
className={cn(

3
frontend/app/components/Session_/BugReport/components/Session.tsx
View file

@ -1,7 +1,6 @@
import React from 'react'
import SectionTitle from './SectionTitle';
import { Icon } from 'UI'
import { Tooltip } from 'react-tippy'
import { Icon, Tooltip } from 'UI'
export default function Session({ user, sessionUrl }: { user: string, sessionUrl: string }) {

5
frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Icon, ItemMenu } from 'UI';
import { Icon, ItemMenu, Tooltip } from 'UI';
import { observer } from 'mobx-react-lite';
import { Step as IStep } from '../../types';
const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'Visited' };
@ -7,7 +7,6 @@ import { useStore } from 'App/mstore';
import cn from 'classnames';
import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
import { durationFromMs } from 'App/date';
import { Tooltip } from 'react-tippy';
const SUBSTEP = {
network: NetworkComp,
@ -80,7 +79,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
/>
</Tooltip>
{/* @ts-ignore */}
<Tooltip title="Delete Step">
<Tooltip title="Delete Step" className="whitespace-nowrap">
<div onClick={() => bugReportStore.removeStep(step)}>
<Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
</div>

4
frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Tooltip } from 'react-tippy'
import { Tooltip } from 'UI'
interface Props {
pickRadius: number;
@ -11,7 +11,7 @@ function StepRadius({ pickRadius, setRadius }: Props) {
<div className="w-full flex items-center gap-4">
<div className="border-b border-dotted border-gray-medium cursor-help">
{/* @ts-ignore */}
<Tooltip html={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
<Tooltip title={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
<span>&plusmn; {pickRadius}</span>
</Tooltip>
</div>

20
frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
View file

@ -5,11 +5,10 @@ import { countries } from 'App/constants';
import { useStore } from 'App/mstore';
import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames';
import { formatTimeOrDate } from 'App/date';
import { Avatar, TextEllipsis, CountryFlag, Icon } from 'UI';
import { Avatar, TextEllipsis, CountryFlag, Icon, Tooltip } from 'UI';
import cn from 'classnames';
import { withRequest } from 'HOCs';
import SessionInfoItem from '../../SessionInfoItem';
import { Tooltip } from 'react-tippy';
import { useModal } from 'App/components/Modal';
import UserSessionsModal from 'Shared/UserSessionsModal';
@ -77,12 +76,13 @@ function UserCard({ className, request, session, width, height, similarSessions,
</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
<Tooltip
theme="light"
// theme="light"
delay={0}
hideOnClick="persistent"
arrow
interactive
html={
// hideOnClick="persistent"
// arrow
// interactive
className="!bg-white shadow border !color-gray-dark"
title={
<div className="text-left">
<SessionInfoItem
comp={<CountryFlag country={userCountry} />}
@ -100,9 +100,9 @@ function UserCard({ className, request, session, width, height, similarSessions,
{revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
</div>
}
position="bottom center"
hoverable
disabled={false}
position="bottom"
// hoverable
// disabled={false}
on="hover"
>
<span className="color-teal cursor-pointer">More</span>

31
frontend/app/components/Session_/Issues/Issues.js
View file

@ -1,11 +1,9 @@
import React from 'react';
import { connect } from 'react-redux';
import { Popup, Button, Icon } from 'UI';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import { Icon, Popover } from 'UI';
import IssuesModal from './IssuesModal';
import { fetchProjects, fetchMeta } from 'Duck/assignments';
import stl from './issues.module.css';
import { Tooltip } from 'react-tippy';
@connect(
(state) => ({
@ -71,32 +69,25 @@ class Issues extends React.Component {
return (
<div className="relative h-full w-full p-3">
<div className={stl.buttonWrapper}>
<OutsideClickDetectingDiv onClickOutside={this.closeModal}>
<Tooltip
open={this.state.showModal}
position="bottom"
interactive
trigger="click"
unmountHTMLWhenHide
useContext
theme="light"
arrow
html={
<Popover
render={({ close }) => (
<div>
<IssuesModal
provider={provider}
sessionId={sessionId}
closeHandler={this.closeModal}
closeHandler={close}
/>
</div>
}
)}
>
<div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
<Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
<div
className="flex items-center"
disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
>
<Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} size="16" />
<span className="ml-2">Create Issue</span>
</div>
</Tooltip>
</OutsideClickDetectingDiv>
</Popover>
</div>
</div>
);

7
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -10,7 +10,7 @@ import {
import LiveTag from 'Shared/LiveTag';
import { jumpToLive } from 'Player';
import { Icon } from 'UI';
import { Icon, Tooltip } from 'UI';
import { toggleInspectorMode } from 'Player';
import {
fullscreenOn,
@ -33,7 +33,6 @@ import ControlButton from './ControlButton';
import PlayerControls from './components/PlayerControls';
import styles from './controls.module.css';
import { Tooltip } from 'react-tippy';
import XRayButton from 'Shared/XRayButton';
const SKIP_INTERVALS = {
@ -227,11 +226,7 @@ export default class Controls extends React.Component {
return (
<Tooltip
delay={0}
position="top"
title={label}
interactive
hideOnClick="persistent"
className="mr-4"
>
<div

36
frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { Tooltip } from 'react-tippy';
import { Icon } from 'UI';
import { Icon, Tooltip, Popover } from 'UI';
import cn from 'classnames';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import { ReduxTime } from '../Time';
@ -49,7 +48,7 @@ function PlayerControls(props: Props) {
const speedRef = React.useRef(null);
const arrowBackRef = React.useRef(null);
const arrowForwardRef = React.useRef(null);
const skipRef = React.useRef<HTMLDivElement>()
const skipRef = React.useRef<HTMLDivElement>();
React.useEffect(() => {
const handleKeyboard = (e: KeyboardEvent) => {
@ -77,11 +76,12 @@ function PlayerControls(props: Props) {
setShowTooltip(!showTooltip);
};
const handleClickOutside = () => {
setShowTooltip(false)
}
setShowTooltip(false);
};
return (
<div className="flex items-center">
{playButton}
<div className="mx-1" />
{!live && (
<div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
{/* @ts-ignore */}
@ -94,7 +94,7 @@ function PlayerControls(props: Props) {
<div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
{/* @ts-ignore */}
<Tooltip title="Rewind 10s" delay={0} position="top">
<Tooltip title="Rewind 10s" position="top">
<button
ref={arrowBackRef}
className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
@ -110,16 +110,16 @@ function PlayerControls(props: Props) {
</Tooltip>
<div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
<OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
<Tooltip
open={showTooltip}
interactive
<Popover
// open={showTooltip}
// interactive
// @ts-ignore
theme="nopadding"
animation="none"
duration={0}
className="cursor-pointer select-none"
distance={20}
html={
render={() => (
<div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
<div className="font-semibold py-2 px-4 w-full text-left">
Jump <span className="text-disabled-text">(Secs)</span>
@ -141,7 +141,7 @@ function PlayerControls(props: Props) {
</div>
))}
</div>
}
)}
>
<div onClick={toggleTooltip} ref={skipRef}>
{/* @ts-ignore */}
@ -149,11 +149,11 @@ function PlayerControls(props: Props) {
{currentInterval}s
</Tooltip>
</div>
</Tooltip>
</Popover>
</OutsideClickDetectingDiv>
</div>
{/* @ts-ignore */}
<Tooltip title="Forward 10s" delay={0} position="top">
<Tooltip title="Forward 10s" position="top">
<button
ref={arrowForwardRef}
className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
@ -173,7 +173,7 @@ function PlayerControls(props: Props) {
<div className="flex items-center">
<div className="mx-2" />
{/* @ts-ignore */}
<Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
<Tooltip title="Control play back speed (↑↓)" placement="top">
<button
ref={speedRef}
className={cn(styles.speedButton, 'focus:border focus:border-blue')}
@ -185,10 +185,10 @@ function PlayerControls(props: Props) {
</Tooltip>
<div className="mx-2" />
<button
className={cn(
styles.skipIntervalButton,
{ [styles.withCheckIcon]: skip, [styles.active]: skip },
)}
className={cn(styles.skipIntervalButton, {
[styles.withCheckIcon]: skip,
[styles.active]: skip,
})}
onClick={toggleSkip}
data-disabled={disabled}
>

25
frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx
View file

@ -1,10 +1,9 @@
//@ts-nocheck
import React from 'react';
import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
import cn from 'classnames';
import stl from './Marker.module.css';
import { activeTarget } from 'Player';
import { Tooltip } from 'react-tippy';
import { Tooltip } from 'UI';
interface Props {
target: MarkedTarget;
@ -17,23 +16,17 @@ export default function Marker({ target, active }: Props) {
left: `${target.boundingRect.left}px`,
width: `${target.boundingRect.width}px`,
height: `${target.boundingRect.height}px`,
}
};
return (
<div className={cn(stl.marker, { [stl.active]: active })} style={style} onClick={() => activeTarget(target.index)}>
<div className={stl.index}>{target.index + 1}</div>
{/* @ts-expect-error Tooltip doesn't have children property */}
<Tooltip
open={active}
arrow
sticky
distance={15}
html={(
<div>{target.count} Clicks</div>
)}
trigger="mouseenter"
<div
className={cn(stl.marker, { [stl.active]: active })}
style={style}
onClick={() => activeTarget(target.index)}
>
<div className={stl.index}>{target.index + 1}</div>
<Tooltip open={active} delay={0} title={<div>{target.count} Clicks</div>}>
<div className="absolute inset-0"></div>
</Tooltip>
</div>
)
);
}

2
frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
View file

@ -12,7 +12,7 @@ interface Props {
export default function SessionInfoItem(props: Props) {
const { label, icon, value, comp, isLast = false } = props
return (
<div className={cn("flex items-center w-full py-2", {'border-b' : !isLast})}>
<div className={cn("flex items-center w-full py-2 color-gray-dark", {'border-b' : !isLast})}>
<div className="px-2 capitalize" style={{ width: '30px' }}>
{ icon && <Icon name={icon} size="16" /> }
{ comp && comp }

3
frontend/app/components/Session_/Storage/Storage.js
View file

@ -8,7 +8,7 @@ import {
selectStorageListNow,
selectStorageList,
} from 'Player/store';
import { JSONTree, NoContent } from 'UI';
import { JSONTree, NoContent, Tooltip } from 'UI';
import { formatMs } from 'App/date';
import { diff } from 'deep-diff';
import { jump } from 'Player';
@ -17,7 +17,6 @@ import BottomBlock from '../BottomBlock/index';
import DiffRow from './DiffRow';
import cn from 'classnames';
import stl from './storage.module.css';
import { Tooltip } from 'react-tippy'
// const STATE = 'STATE';
// const DIFF = 'DIFF';

12
frontend/app/components/Session_/Subheader.js
View file

@ -1,10 +1,9 @@
import React from 'react';
import { Icon } from 'UI';
import { Icon, Tooltip } from 'UI';
import Autoplay from './Autoplay';
import Bookmark from 'Shared/Bookmark';
import SharePopup from '../shared/SharePopup/SharePopup';
import copy from 'copy-to-clipboard';
import { Tooltip } from 'react-tippy';
import Issues from './Issues/Issues';
import NotePopup from './components/NotePopup';
import { connectPlayer, pause } from 'Player';
@ -46,14 +45,7 @@ function SubHeader(props) {
}}
>
<Icon size="20" name="event/link" className="mr-1" />
<Tooltip
delay={0}
arrow
animation="fade"
hideOnClick={false}
position="bottom center"
title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}
>
<Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
{location}
</Tooltip>
</div>

4
frontend/app/components/hocs/withCopy.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import copy from 'copy-to-clipboard';
import { Tooltip } from 'react-tippy';
import { Tooltip } from 'UI';
const withCopy = (WrappedComponent: React.ComponentType) => {
const ComponentWithCopy = (props: any) => {
@ -15,7 +15,7 @@ const withCopy = (WrappedComponent: React.ComponentType) => {
};
return (
<div onClick={() => copyToClipboard(value)} className="w-fit">
<Tooltip delay={0} arrow animation="fade" hideOnClick={false} title={copied ? tooltip : 'Click to copy'}>
<Tooltip title={copied ? tooltip : 'Click to copy'}>
<WrappedComponent {...props} copyToClipboard={copyToClipboard} />
</Tooltip>
</div>

11
frontend/app/components/shared/CopyText/CopyText.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Tooltip } from 'react-tippy';
import { Tooltip } from 'UI';
import copy from 'copy-to-clipboard';
interface Props {
@ -17,14 +17,7 @@ function CopyText(props: Props) {
setTimeout(() => setIsCopied(false), 5000);
};
return (
// @ts-ignore
<Tooltip
delay={0}
arrow
animation="fade"
hideOnClick={false}
title={isCopied ? afterLabel : label}
>
<Tooltip delay={0} title={isCopied ? afterLabel : label}>
<span onClick={onClick}>{children}</span>
</Tooltip>
);

10
frontend/app/components/shared/GuidePopup/GuidePopup.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Tooltip } from 'react-tippy';
import { Tooltip } from 'UI';
export const FEATURE_KEYS = {
XRAY: 'featureViewed'
@ -16,7 +16,7 @@ export default function GuidePopup({ children, title, description }: IProps) {
return (
// @ts-ignore
<Tooltip
html={
title={
<div>
<div className="font-bold">
{title}
@ -26,10 +26,10 @@ export default function GuidePopup({ children, title, description }: IProps) {
</div>
</div>
}
distance={30}
theme={'light'}
// distance={30}
// theme={'light'}
open={true}
arrow={true}
// arrow={true}
>
{children}
</Tooltip>

7
frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
View file

@ -2,7 +2,7 @@ import React, { MouseEvent, useState } from 'react';
import cn from 'classnames';
import { Icon, Input } from 'UI';
import { List } from 'immutable';
import { confirm, Popup } from 'UI';
import { confirm, Tooltip } from 'UI';
import { applySavedSearch, remove, editSavedSearch } from 'Duck/search';
import { connect } from 'react-redux';
import { useModal } from 'App/components/Modal';
@ -18,9 +18,10 @@ interface ITooltipIcon {
function TooltipIcon(props: ITooltipIcon) {
return (
<div onClick={(e) => props.onClick(e)}>
<Popup content={props.title} hideOnClick={true}>
<Tooltip title={props.title}>
{/* @ts-ignore */}
<Icon size="16" name={props.name} color="main" />
</Popup>
</Tooltip>
</div>
);
}

3
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import cn from 'classnames';
import { CountryFlag, Avatar, TextEllipsis, Label, Icon } from 'UI';
import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { durationFormatted, formatTimeOrDate } from 'App/date';
@ -12,7 +12,6 @@ import PlayLink from './PlayLink';
import ErrorBars from './ErrorBars';
import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
import { capitalize } from 'App/utils';
import { Tooltip } from 'react-tippy';
const ASSIST_ROUTE = assistRoute();
const ASSIST_LIVE_SESSION = liveSession();

4
frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
View file

@ -2,7 +2,6 @@ import { useModal } from 'App/components/Modal';
import React from 'react';
import SessionSettings from 'Shared/SessionSettings';
import { Button, Tooltip } from 'UI';
// import { Tooltip } from 'react-tippy';
function SessionSettingButton(props: any) {
const { showModal } = useModal();
@ -13,8 +12,7 @@ function SessionSettingButton(props: any) {
return (
<div className="cursor-pointer ml-4" onClick={handleClick}>
{/* @ts-ignore */}
<Tooltip tooltip="Session Settings">
<Tooltip title="Session Settings">
<Button icon="sliders" variant="text" />
</Tooltip>
</div>

6
frontend/app/components/shared/XRayButton/XRayButton.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import stl from './xrayButton.module.css';
import cn from 'classnames';
import { Popup } from 'UI';
import { Tooltip } from 'UI';
import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
import { Controls as Player } from 'Player';
import { INDEXES } from 'App/constants/zindex';
@ -63,14 +63,14 @@ function XRayButton(props: Props) {
></div>
</GuidePopup>
) : (
<Popup content="Get a quick overview on the issues in this session." disabled={isActive}>
<Tooltip title="Get a quick overview on the issues in this session." disabled={isActive}>
<button
className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
onClick={onClick}
>
<span className="z-1">X-RAY</span>
</button>
</Popup>
</Tooltip>
)}
</div>
</>

2
frontend/app/components/ui/Popover/Popover.tsx
View file

@ -14,6 +14,7 @@ import {
FloatingFocusManager,
} from '@floating-ui/react-dom-interactions';
import { mergeRefs } from 'react-merge-refs';
import { INDEXES } from 'App/constants/zindex';
interface Props {
render: (data: { close: () => void; labelId: string; descriptionId: string }) => React.ReactNode;
@ -62,6 +63,7 @@ const Popover = ({ children, render, placement }: Props) => {
position: strategy,
top: y ?? 0,
left: x ?? 0,
zIndex: INDEXES.TOOLTIP
}}
aria-labelledby={labelId}
aria-describedby={descriptionId}

14
frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
View file

@ -14,16 +14,27 @@ import {
FloatingPortal,
} from '@floating-ui/react-dom-interactions';
import type { Placement } from '@floating-ui/react-dom-interactions';
import { INDEXES } from 'App/constants/zindex';
export function useTooltipState({
disabled = false,
initialOpen = false,
placement = 'top',
delay,
}: {
disabled?: boolean;
initialOpen?: boolean;
placement?: Placement;
delay?: number;
} = {}) {
const [open, setOpen] = React.useState(initialOpen);
React.useEffect(() => {
if (disabled) {
setOpen(false);
}
}, [disabled]);
const data = useFloating({
placement,
open,
@ -34,7 +45,7 @@ export function useTooltipState({
const context = data.context;
const hover = useHover(context, { move: false, restMs: 500 });
const hover = useHover(context, { move: false, restMs: delay, enabled: !disabled });
const focus = useFocus(context);
const dismiss = useDismiss(context);
const role = useRole(context, { role: 'tooltip' });
@ -99,6 +110,7 @@ export const FloatingTooltip = React.forwardRef<
left: state.x ?? 0,
visibility: state.x == null ? 'hidden' : 'visible',
transition: 'opacity 1s',
zIndex: INDEXES.TOOLTIP,
...props.style,
}}
{...state.getFloatingProps(props)}

20
frontend/app/components/ui/Tooltip/Tooltip.tsx
View file

@ -1,18 +1,28 @@
import React from 'react';
import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
import type { Placement } from '@floating-ui/react-dom-interactions';
import cn from 'classnames';
interface Props {
// position: string;
tooltip: string;
title?: any;
children: any;
disabled?: boolean;
open?: boolean;
placement?: Placement;
className?: string;
delay?: number;
}
function Tooltip(props: Props) {
const state = useTooltipState();
const { title, disabled = false, open = false, placement, className = '', delay = 500 } = props;
const state = useTooltipState({ disabled: disabled, placement, delay });
return (
<>
<TooltipAnchor state={state}>{props.children}</TooltipAnchor>
<FloatingTooltip state={state} className="bg-gray-darkest color-white rounded py-1 px-2 animate-fade">
{props.tooltip}
<FloatingTooltip
state={state}
className={cn('bg-gray-darkest color-white rounded py-1 px-2 animate-fade', className)}
>
{title}
</FloatingTooltip>
</>
);

13
frontend/app/constants/zindex.ts
View file

@ -2,11 +2,12 @@ export const INDEXES = {
PLAYER_REQUEST_WINDOW: 10,
BUG_REPORT_PICKER: 19,
BUG_REPORT: 20,
POPUP_GUIDE_BG: 99998,
POPUP_GUIDE_BTN: 99999,
}
POPUP_GUIDE_BG: 99997,
POPUP_GUIDE_BTN: 99998,
TOOLTIP: 99999,
};
export const getHighest = () => {
const allIndexes = Object.values(INDEXES)
return allIndexes[allIndexes.length - 1] + 1
}
const allIndexes = Object.values(INDEXES);
return allIndexes[allIndexes.length - 1] + 1;
};