Skip to content

Commit

Permalink
feat: Improve rendering cycle of TZ Label (#17532)
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjackwhite
benjackwhite authored Sep 21, 2023
1 parent b8652e7 commit 50af54f
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 106 deletions.
Binary file modified ...napshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 20 additions & 31 deletions frontend/src/lib/components/TZLabel/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,27 @@
.tz-label {
white-space: nowrap;
.TZLabelPopover {
.TZLabelPopover__row {
display: flex;
margin-top: 0.5rem;

&.tz-label--hoverable {
border-bottom: 1px dotted var(--border-bold);
cursor: default;
}
}
> :nth-child(1) {
font-weight: bold;
color: var(--primary-alt);
margin-right: 6px;
}

.tz-label-popover {
.divider {
margin-right: -4px;
margin-left: -4px;
border-bottom: 1px solid var(--border-light);
}
.timezones {
.timezone {
display: flex;
margin-top: 8px;
.name {
font-weight: bold;
color: var(--primary-alt);
margin-right: 6px;
}
> :nth-child(2) {
color: var(--muted);
margin-right: 16px;
flex-grow: 1;
font-style: italic;
}

.scope {
color: var(--muted);
margin-right: 16px;
flex-grow: 1;
font-style: italic;
}
> :nth-child(3) {
min-width: 10rem;
text-align: right;

.time {
min-width: 170px;
text-align: right;
.TZLabelPopover--seconds & {
min-width: 12rem;
}
}
}
Expand Down
161 changes: 86 additions & 75 deletions frontend/src/lib/components/TZLabel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,20 @@
import './index.scss'
import { Col, Popover, Row } from 'antd'
import { Popover } from 'antd'
import { useActions, useValues } from 'kea'
import { ProjectOutlined, LaptopOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
import { Link } from 'lib/lemon-ui/Link'
import { ProjectOutlined, LaptopOutlined, GlobalOutlined } from '@ant-design/icons'
import { humanFriendlyDetailedTime, shortTimeZone } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { teamLogic } from '../../../scenes/teamLogic'
import { dayjs } from 'lib/dayjs'
import { usePeriodicRerender } from 'lib/hooks/usePeriodicRerender'
import clsx from 'clsx'
import React from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { styles } from '../../../styles/vars'
import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
import { IconSettings } from 'lib/lemon-ui/icons'
import { urls } from 'scenes/urls'

const BASE_OUTPUT_FORMAT = 'ddd, MMM D, YYYY h:mm A'

function TZConversionHeader(): JSX.Element {
return (
<h3 className="l3">
Timezone conversion
<span className="float-right">
<Link to="/project/settings#timezone">
<SettingOutlined />
</Link>
</span>
</h3>
)
}

interface TZLabelRawProps {
time: string | dayjs.Dayjs
showSeconds?: boolean
Expand All @@ -37,6 +25,60 @@ interface TZLabelRawProps {
className?: string
}

const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
showSeconds,
time,
}: Pick<TZLabelRawProps, 'showSeconds'> & { time: dayjs.Dayjs }): JSX.Element {
const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
const { currentTeam } = useValues(teamLogic)
const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)

useEffect(() => {
reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
}, [])

return (
<div className={clsx('TZLabelPopover', showSeconds && 'TZLabelPopover--seconds')}>
<div className="flex justify-between items-center">
<h3 className="mb-0">Timezone conversion</h3>
<span>
<LemonButton icon={<IconSettings />} size="small" to={urls.projectSettings('timezone')} />
</span>
</div>

<LemonDivider />

<div className="space-y-2">
<div className="TZLabelPopover__row">
<div>
<LaptopOutlined /> {shortTimeZone(undefined, time.toDate())}
</div>
<div>Your device</div>
<div>{time.format(DATE_OUTPUT_FORMAT)}</div>
</div>
{currentTeam && (
<div className="TZLabelPopover__row">
<div>
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone, time.toDate())}
</div>
<div>Project</div>
<div>{time.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}</div>
</div>
)}
{currentTeam?.timezone !== 'UTC' && (
<div className="TZLabelPopover__row">
<div>
<GlobalOutlined /> UTC
</div>
<div />
<div>{time.tz('UTC').format(DATE_OUTPUT_FORMAT)}</div>
</div>
)}
</div>
</div>
)
})

/** Return a simple label component with timezone conversion UI. */
function TZLabelRaw({
time,
Expand All @@ -47,73 +89,42 @@ function TZLabelRaw({
noStyles = false,
className,
}: TZLabelRawProps): JSX.Element {
usePeriodicRerender(1000)
const parsedTime = useMemo(() => (dayjs.isDayjs(time) ? time : dayjs(time)), [time])

const parsedTime = dayjs.isDayjs(time) ? time : dayjs(time)
const { currentTeam } = useValues(teamLogic)
const format = useCallback(() => {
return formatDate || formatTime
? humanFriendlyDetailedTime(parsedTime, formatDate, formatTime)
: parsedTime.fromNow()
}, [formatDate, formatTime, parsedTime])

const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
const timeStyle = showSeconds ? { minWidth: 192 } : undefined
const [formattedContent, setFormattedContent] = useState(format())

const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
useEffect(() => {
// NOTE: This is an optimization to make sure we don't needlessly re-render the component every second.
const interval = setInterval(() => {
if (format() !== formattedContent) {
setFormattedContent(format())
}
}, 1000)
return () => clearInterval(interval)
}, [parsedTime, format])

const innerContent = (
<span className={!noStyles ? clsx('tz-label', showPopover && 'tz-label--hoverable', className) : className}>
{formatDate || formatTime
? humanFriendlyDetailedTime(parsedTime, formatDate, formatTime)
: parsedTime.fromNow()}
<span
className={
!noStyles ? clsx('whitespace-nowrap', showPopover && 'border-dotted border-b', className) : className
}
>
{formattedContent}
</span>
)

if (showPopover) {
const handleVisibleChange = (visible: boolean): void => {
if (visible) {
reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
}
}

const PopoverContent = (
<div className="tz-label-popover">
<TZConversionHeader />
<div className="divider" />
<div className="timezones">
<Row className="timezone">
<Col className="name">
<LaptopOutlined /> {shortTimeZone(undefined, parsedTime.toDate())}
</Col>
<Col className="scope">Your device</Col>
<Col className="time" style={timeStyle}>
{parsedTime.format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
{currentTeam && (
<Row className="timezone">
<Col className="name">
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone, parsedTime.toDate())}
</Col>
<Col className="scope">Project</Col>
<Col className="time" style={timeStyle}>
{parsedTime.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
{currentTeam?.timezone !== 'UTC' && (
<Row className="timezone">
<Col className="name">
<GlobalOutlined /> UTC
</Col>
<Col className="scope" />
<Col className="time" style={timeStyle}>
{parsedTime.tz('UTC').format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
</div>
</div>
)

return (
<Popover content={PopoverContent} onVisibleChange={handleVisibleChange} zIndex={styles.zPopover}>
<Popover
content={<TZLabelPopoverContent time={parsedTime} showSeconds={showSeconds} />}
zIndex={styles.zPopover}
>
{innerContent}
</Popover>
)
Expand Down
Binary file modified ...-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 50af54f

Please sign in to comment.