History UI - Moving pop over out from the version (#14770)

Moving popover out of versions list

GitOrigin-RevId: d1739f4c17b66a0e39c8bb46a0fac5b2069d9171
This commit is contained in:
Davinder Singh 2023-09-21 10:01:52 +01:00 committed by Copybot
parent b1ae8be927
commit 74d64af950
3 changed files with 114 additions and 149 deletions

View file

@ -3,14 +3,17 @@ import HistoryVersion from './history-version'
import LoadingSpinner from '../../../../shared/components/loading-spinner'
import { OwnerPaywallPrompt } from './owner-paywall-prompt'
import { NonOwnerPaywallPrompt } from './non-owner-paywall-prompt'
import {
isVersionSelected,
ItemSelectionState,
} from '../../utils/history-details'
import { isVersionSelected } from '../../utils/history-details'
import { useUserContext } from '../../../../shared/context/user-context'
import useDropdownActiveItem from '../../hooks/use-dropdown-active-item'
import { useHistoryContext } from '../../context/history-context'
import { useEditorContext } from '../../../../shared/context/editor-context'
import { Overlay, Popover } from 'react-bootstrap'
import Close from '@/shared/components/close'
import { Trans, useTranslation } from 'react-i18next'
import MaterialIcon from '@/shared/components/material-icon'
import useAsync from '@/shared/hooks/use-async'
import { completeHistoryTutorial } from '../../services/api'
type CompletedTutorials = {
'react-history-buttons-tutorial': Date
@ -20,11 +23,6 @@ type EditorTutorials = {
setCompletedTutorial: (key: string) => void
}
const unselectedStates: ItemSelectionState[] = [
'aboveSelected',
'belowSelected',
]
function AllHistoryList() {
const { id: currentUserId } = useUserContext()
const {
@ -104,25 +102,113 @@ function AllHistoryList() {
const { completedTutorials, setCompletedTutorial }: EditorTutorials =
useEditorContext()
// only show tutorial popover if they havent dismissed ("completed") it yet
// only show tutorial popover if they haven't dismissed ("completed") it yet
const showTutorial = !completedTutorials?.['react-history-buttons-tutorial']
const completeTutorial = useCallback(() => {
setCompletedTutorial('react-history-buttons-tutorial')
}, [setCompletedTutorial])
// only show tutorial popover on the first icon
const firstUnselectedIndex = visibleUpdates.findIndex(update => {
const selectionState = isVersionSelected(
selection,
update.fromV,
update.toV
const { runAsync } = useAsync()
const { t } = useTranslation()
// wait for the layout to settle before showing popover, to avoid a flash/ instant move
const [layoutSettled, setLayoutSettled] = useState(false)
const [resizing, setResizing] = useState(false)
// When there is a paywall and only two version's to compare,
// they are not comparable because the one that has a paywall will not have the compare button
// so we should not display on-boarding popover in that case
const isPaywallAndNonComparable =
visibleUpdates.length === 2 && updatesInfo.freeHistoryLimitHit
const isMoreThanOneVersion = visibleUpdates.length > 1
let popover = null
if (
isMoreThanOneVersion &&
!isPaywallAndNonComparable &&
showTutorial &&
layoutSettled &&
!resizing
) {
const dismissModal = () => {
completeTutorial()
runAsync(completeHistoryTutorial()).catch(console.error)
}
popover = (
<Overlay
placement="left"
show
// using scrollerRef to position the popover in the middle of the viewport
target={scrollerRef.current ?? undefined}
shouldUpdatePosition
>
<Popover
id="popover-toolbar-overflow"
arrowOffsetTop={10}
title={
<span>
{t('react_history_tutorial_title')}{' '}
<Close variant="dark" onDismiss={() => dismissModal()} />
</span>
}
className="dark-themed history-popover"
>
<Trans
i18nKey="react_history_tutorial_content"
components={[
// eslint-disable-next-line react/jsx-key
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon-inverted"
/>,
<a href="https://www.overleaf.com/learn/latex/Using_the_History_feature" />, // eslint-disable-line jsx-a11y/anchor-has-content, react/jsx-key
]}
/>
</Popover>
</Overlay>
)
return unselectedStates.includes(selectionState)
})
}
// give the components time to position before showing popover so we don't get an instant position change
useEffect(() => {
const timer = window.setTimeout(() => {
setLayoutSettled(true)
}, 500)
return () => clearTimeout(timer)
}, [setLayoutSettled])
useEffect(() => {
let timer: number | null = null
const handleResize = () => {
// Hide popover when a resize starts, then waiting for a gap of 500ms
// with no resizes before making it reappear
if (timer) {
window.clearTimeout(timer)
} else {
setResizing(true)
}
timer = window.setTimeout(() => {
timer = null
setResizing(false)
}, 500)
}
// only need a listener on the component that actually has the popover
if (showTutorial) {
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}
}, [showTutorial])
return (
<div ref={scrollerRef} className="history-all-versions-scroller">
{popover}
<div className="history-all-versions-container">
<div ref={bottomRef} className="history-versions-bottom" />
{visibleUpdates.map((update, index) => {
@ -148,9 +234,6 @@ function AllHistoryList() {
selectionState === 'aboveSelected' ||
selectionState === 'belowSelected')
const hasTutorialOverlay =
index === firstUnselectedIndex && showTutorial
return (
<HistoryVersion
key={`${update.fromV}_${update.toV}`}
@ -170,8 +253,6 @@ function AllHistoryList() {
activeDropdownItem.isOpened && compareDropdownActive
}
dropdownActive={dropdownActive}
hasTutorialOverlay={hasTutorialOverlay}
completeTutorial={completeTutorial}
/>
)
})}

View file

@ -1,15 +1,4 @@
import {
useRef,
useCallback,
memo,
useEffect,
useState,
ReactNode,
} from 'react'
import { Popover, Overlay } from 'react-bootstrap'
import { useTranslation, Trans } from 'react-i18next'
import Close from '../../../../shared/components/close'
import MaterialIcon from '../../../../shared/components/material-icon'
import { useCallback, memo } from 'react'
import HistoryVersionDetails from './history-version-details'
import TagTooltip from './tag-tooltip'
import Changes from './changes'
@ -25,11 +14,9 @@ import {
ItemSelectionState,
} from '../../utils/history-details'
import { ActiveDropdown } from '../../hooks/use-dropdown-active-item'
import useAsync from '../../../../shared/hooks/use-async'
import { HistoryContextValue } from '../../context/types/history-context-value'
import VersionDropdownContent from './dropdown/version-dropdown-content'
import CompareItems from './dropdown/menu-item/compare-items'
import { completeHistoryTutorial } from '../../services/api'
import CompareVersionDropdown from './dropdown/compare-version-dropdown'
import { CompareVersionDropdownContentAllHistory } from './dropdown/compare-version-dropdown-content'
@ -48,8 +35,6 @@ type HistoryVersionProps = {
compareDropdownActive: boolean
setActiveDropdownItem: ActiveDropdown['setActiveDropdownItem']
closeDropdownForItem: ActiveDropdown['closeDropdownForItem']
hasTutorialOverlay?: boolean
completeTutorial: () => void
}
function HistoryVersion({
@ -67,112 +52,8 @@ function HistoryVersion({
compareDropdownActive,
setActiveDropdownItem,
closeDropdownForItem,
hasTutorialOverlay = false,
completeTutorial,
}: HistoryVersionProps) {
const orderedLabels = orderBy(update.labels, ['created_at'], ['desc'])
const iconRef = useRef<HTMLDivElement>(null)
const { runAsync } = useAsync()
const { t } = useTranslation()
const [popover, setPopover] = useState<ReactNode | null>(null)
// wait for the layout to settle before showing popover, to avoid a flash/ instant move
const [layoutSettled, setLayoutSettled] = useState(false)
const [resizing, setResizing] = useState(false)
// Determine whether the tutorial popover should be shown or not.
// This is a slightly unusual pattern, as in theory we could control this via
// the `show` prop. However we were concerned about the perf impact of every
// history version having a (hidden) popover that won't ever be triggered.
useEffect(() => {
if (iconRef.current && hasTutorialOverlay && layoutSettled && !resizing) {
const dismissModal = () => {
completeTutorial()
runAsync(completeHistoryTutorial()).catch(console.error)
}
const compareIcon = (
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon-inverted"
/>
)
setPopover(
<Overlay
placement="left"
show
target={iconRef.current ?? undefined}
shouldUpdatePosition
>
<Popover
id="popover-toolbar-overflow"
title={
<span>
{t('react_history_tutorial_title')}{' '}
<Close variant="dark" onDismiss={() => dismissModal()} />
</span>
}
className="dark-themed"
>
<Trans
i18nKey="react_history_tutorial_content"
components={[
compareIcon,
<a href="https://www.overleaf.com/learn/latex/Using_the_History_feature" />, // eslint-disable-line jsx-a11y/anchor-has-content, react/jsx-key
]}
/>
</Popover>
</Overlay>
)
} else {
setPopover(null)
}
}, [
hasTutorialOverlay,
runAsync,
t,
layoutSettled,
completeTutorial,
resizing,
])
// give the components time to position before showing popover so we dont get a instant position change
useEffect(() => {
const timer = window.setTimeout(() => {
setLayoutSettled(true)
}, 500)
return () => clearTimeout(timer)
}, [setLayoutSettled])
useEffect(() => {
let timer: number | null = null
const handleResize = () => {
// Hide popover when a resize starts, then waiting for a gap of 500ms
// with no resizes before making it reappear
if (timer) {
window.clearTimeout(timer)
} else {
setResizing(true)
}
timer = window.setTimeout(() => {
timer = null
setResizing(false)
}, 500)
}
// only need a listener on the component that actually has the popover
if (hasTutorialOverlay) {
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}
}, [hasTutorialOverlay])
const closeDropdown = useCallback(() => {
closeDropdownForItem(update, 'moreOptions')
}, [closeDropdownForItem, update])
@ -180,7 +61,6 @@ function HistoryVersion({
const updateRange = updateRangeForUpdate(update)
return (
<>
{popover}
{showDivider ? (
<div
className={classNames({
@ -241,11 +121,7 @@ function HistoryVersion({
)}
{selectionState !== 'selected' && !faded ? (
<div
data-testid="compare-icon-version"
className="pull-right"
ref={iconRef}
>
<div data-testid="compare-icon-version" className="pull-right">
{selectionState !== 'withinSelected' ? (
<CompareItems
updateRange={updateRange}

View file

@ -7,6 +7,14 @@ history-root {
display: block;
}
// Adding !important to override the styling of overlays and popovers
.history-popover {
top: 90px !important;
.arrow {
top: 20px !important;
}
}
.history-react {
display: flex;
height: 100%;