mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #14379 from overleaf/jdt-history-onboarding
history onboarding popover GitOrigin-RevId: 4afe2ae54317341df64e83bed0b3c94875eb10a0
This commit is contained in:
parent
3bb7a7c7ba
commit
462b7a2256
16 changed files with 283 additions and 8 deletions
|
@ -39,6 +39,7 @@ meta(name="ol-showPersonalAccessToken", data-type="boolean" content=showPersonal
|
|||
meta(name="ol-isReviewPanelReact", data-type="boolean" content=isReviewPanelReact)
|
||||
meta(name="ol-hasTrackChangesFeature", data-type="boolean" content=hasTrackChangesFeature)
|
||||
meta(name="ol-mathJax3Path" content=mathJax3Path)
|
||||
meta(name="ol-completedTutorials", data-type="json" content=user.completedTutorials)
|
||||
|
||||
- var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {})
|
||||
meta(name="ol-fileActionI18n" data-type="json" content=fileActionI18n)
|
||||
|
|
|
@ -798,6 +798,9 @@
|
|||
"quoted_text_in": "",
|
||||
"raw_logs": "",
|
||||
"raw_logs_description": "",
|
||||
"react_history_tutorial_content": "",
|
||||
"react_history_tutorial_learn_more": "",
|
||||
"react_history_tutorial_title": "",
|
||||
"reactivate_subscription": "",
|
||||
"read_only": "",
|
||||
"read_only_token": "",
|
||||
|
|
|
@ -3,10 +3,23 @@ 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 } from '../../utils/history-details'
|
||||
import {
|
||||
isVersionSelected,
|
||||
ItemSelectionState,
|
||||
} 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 getMeta from '../../../../utils/meta'
|
||||
|
||||
type CompletedTutorials = {
|
||||
'react-history-buttons-tutorial': Date
|
||||
}
|
||||
|
||||
const unselectedStates: ItemSelectionState[] = [
|
||||
'aboveSelected',
|
||||
'belowSelected',
|
||||
]
|
||||
|
||||
function AllHistoryList() {
|
||||
const { id: currentUserId } = useUserContext()
|
||||
|
@ -84,6 +97,27 @@ function AllHistoryList() {
|
|||
}
|
||||
}, [updatesLoadingState])
|
||||
|
||||
const completedTutorials: CompletedTutorials = getMeta(
|
||||
'ol-completedTutorials'
|
||||
)
|
||||
|
||||
// only show tutorial popover if they havent dismissed ("completed") it yet
|
||||
const hasCompletedHistTutorial = Boolean(
|
||||
completedTutorials?.['react-history-buttons-tutorial']
|
||||
)
|
||||
|
||||
// only show tutorial popover on the first icon
|
||||
const firstUnselectedIndex = visibleUpdates.findIndex(update => {
|
||||
const selectionState = isVersionSelected(
|
||||
selection,
|
||||
update.fromV,
|
||||
update.toV
|
||||
)
|
||||
return unselectedStates.includes(selectionState)
|
||||
})
|
||||
|
||||
const [showTutorial, setShowTutorial] = useState(!hasCompletedHistTutorial)
|
||||
|
||||
return (
|
||||
<div ref={scrollerRef} className="history-all-versions-scroller">
|
||||
<div className="history-all-versions-container">
|
||||
|
@ -110,6 +144,9 @@ function AllHistoryList() {
|
|||
selected === 'aboveSelected' ||
|
||||
selected === 'belowSelected')
|
||||
|
||||
const hasTutorialOverlay =
|
||||
index === firstUnselectedIndex && showTutorial
|
||||
|
||||
return (
|
||||
<HistoryVersion
|
||||
key={`${update.fromV}_${update.toV}`}
|
||||
|
@ -129,6 +166,8 @@ function AllHistoryList() {
|
|||
activeDropdownItem.isOpened && compareDropdownActive
|
||||
}
|
||||
dropdownActive={dropdownActive}
|
||||
hasTutorialOverlay={hasTutorialOverlay}
|
||||
setShowTutorial={setShowTutorial}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
|
|
@ -1,3 +1,15 @@
|
|||
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 HistoryVersionDetails from './history-version-details'
|
||||
import TagTooltip from './tag-tooltip'
|
||||
import Changes from './changes'
|
||||
|
@ -13,10 +25,11 @@ import {
|
|||
ItemSelectionState,
|
||||
} from '../../utils/history-details'
|
||||
import { ActiveDropdown } from '../../hooks/use-dropdown-active-item'
|
||||
import { memo, useCallback } from 'react'
|
||||
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'
|
||||
|
||||
|
@ -35,6 +48,8 @@ type HistoryVersionProps = {
|
|||
compareDropdownActive: boolean
|
||||
setActiveDropdownItem: ActiveDropdown['setActiveDropdownItem']
|
||||
closeDropdownForItem: ActiveDropdown['closeDropdownForItem']
|
||||
hasTutorialOverlay?: boolean
|
||||
setShowTutorial: (show: boolean) => void
|
||||
}
|
||||
|
||||
function HistoryVersion({
|
||||
|
@ -52,8 +67,97 @@ function HistoryVersion({
|
|||
compareDropdownActive,
|
||||
setActiveDropdownItem,
|
||||
closeDropdownForItem,
|
||||
hasTutorialOverlay = false,
|
||||
setShowTutorial,
|
||||
}: 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)
|
||||
|
||||
useEffect(() => {
|
||||
if (iconRef.current && hasTutorialOverlay && layoutSettled) {
|
||||
const dismissModal = () => {
|
||||
setShowTutorial(false)
|
||||
runAsync(completeHistoryTutorial()).catch(console.error)
|
||||
}
|
||||
|
||||
const compareIcon = (
|
||||
<MaterialIcon
|
||||
type="align_end"
|
||||
className="material-symbols-rounded history-dropdown-icon-inverted"
|
||||
/>
|
||||
)
|
||||
|
||||
setPopover(
|
||||
<Overlay
|
||||
placement="left"
|
||||
show={hasTutorialOverlay}
|
||||
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]} // eslint-disable-line react/jsx-key
|
||||
/>
|
||||
<a href="https://www.overleaf.com/learn/latex/Using_the_History_feature">
|
||||
{' '}
|
||||
{t('react_history_tutorial_learn_more')}
|
||||
</a>
|
||||
</Popover>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
}, [hasTutorialOverlay, runAsync, setShowTutorial, t, layoutSettled])
|
||||
|
||||
// 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 {
|
||||
setShowTutorial(false)
|
||||
}
|
||||
timer = window.setTimeout(() => {
|
||||
timer = null
|
||||
setShowTutorial(true)
|
||||
}, 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, setShowTutorial])
|
||||
|
||||
const closeDropdown = useCallback(() => {
|
||||
closeDropdownForItem(update, 'moreOptions')
|
||||
|
@ -63,6 +167,7 @@ function HistoryVersion({
|
|||
|
||||
return (
|
||||
<>
|
||||
{hasTutorialOverlay && popover}
|
||||
{showDivider ? (
|
||||
<div
|
||||
className={classNames({
|
||||
|
@ -121,7 +226,11 @@ function HistoryVersion({
|
|||
)}
|
||||
|
||||
{selected !== 'selected' ? (
|
||||
<div data-testid="compare-icon-version" className="pull-right">
|
||||
<div
|
||||
data-testid="compare-icon-version"
|
||||
className="pull-right"
|
||||
ref={iconRef}
|
||||
>
|
||||
{selected !== 'withinSelected' ? (
|
||||
<CompareItems
|
||||
updateRange={updateRange}
|
||||
|
|
|
@ -50,6 +50,10 @@ export function deleteLabel(
|
|||
return deleteJSON(`/project/${projectId}/labels/${labelId}`, { signal })
|
||||
}
|
||||
|
||||
export function completeHistoryTutorial() {
|
||||
return postJSON('/tutorial/react-history-buttons-tutorial/complete')
|
||||
}
|
||||
|
||||
export function diffFiles(
|
||||
projectId: string,
|
||||
fromV: number,
|
||||
|
|
|
@ -2,7 +2,7 @@ import { useState } from 'react'
|
|||
import { Alert, AlertProps } from 'react-bootstrap'
|
||||
import Body from './body'
|
||||
import Action from './action'
|
||||
import Close from './close'
|
||||
import Close from '../../../../shared/components/close'
|
||||
import classnames from 'classnames'
|
||||
|
||||
type NotificationProps = {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import Close from './close'
|
||||
import Close from '../../../../shared/components/close'
|
||||
import usePersistedState from '../../../../shared/hooks/use-persisted-state'
|
||||
|
||||
type SystemMessageProps = {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import Close from './close'
|
||||
import Close from '../../../../shared/components/close'
|
||||
import usePersistedState from '../../../../shared/hooks/use-persisted-state'
|
||||
import getMeta from '../../../../utils/meta'
|
||||
import { SuggestedLanguage } from '../../../../../../types/project/dashboard/system-message'
|
||||
|
|
|
@ -2,13 +2,18 @@ import { useTranslation } from 'react-i18next'
|
|||
|
||||
type CloseProps = {
|
||||
onDismiss: React.MouseEventHandler<HTMLButtonElement>
|
||||
variant?: 'light' | 'dark'
|
||||
}
|
||||
|
||||
function Close({ onDismiss }: CloseProps) {
|
||||
function Close({ onDismiss, variant = 'light' }: CloseProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<button type="button" className="close pull-right" onClick={onDismiss}>
|
||||
<button
|
||||
type="button"
|
||||
className={`close pull-right ${variant}`}
|
||||
onClick={onDismiss}
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
<span className="sr-only">{t('close')}</span>
|
||||
</button>
|
|
@ -21,6 +21,16 @@
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
.light.close {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dark.close {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -406,6 +406,11 @@ history-root {
|
|||
color: @neutral-90;
|
||||
}
|
||||
|
||||
.history-dropdown-icon-inverted {
|
||||
color: @neutral-10;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.history-compare-btn {
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
|
|
@ -137,3 +137,54 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover.dark-themed {
|
||||
.popover-title {
|
||||
color: @popover-dark-color;
|
||||
background-color: @popover-dark-bg;
|
||||
border-bottom: 0;
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
color: @popover-dark-color;
|
||||
background-color: @popover-dark-bg;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #97b6e5;
|
||||
}
|
||||
|
||||
padding: 0;
|
||||
border: 1px solid @popover-dark-border-color;
|
||||
max-width: @popover-dark-max-width;
|
||||
}
|
||||
|
||||
.popover.dark-themed {
|
||||
&.top > .arrow {
|
||||
border-top-color: @popover-dark-arrow-outer-color;
|
||||
&:after {
|
||||
border-top-color: @popover-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
&.right > .arrow {
|
||||
border-right-color: @popover-dark-arrow-outer-color;
|
||||
&:after {
|
||||
border-right-color: @popover-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bottom > .arrow {
|
||||
border-bottom-color: @popover-dark-arrow-outer-color;
|
||||
&:after {
|
||||
border-bottom-color: @popover-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.left > .arrow {
|
||||
border-left-color: @popover-dark-arrow-outer-color;
|
||||
&:after {
|
||||
border-left-color: @popover-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -595,6 +595,27 @@
|
|||
20%
|
||||
);
|
||||
|
||||
//== Popovers dark theme
|
||||
//
|
||||
//##
|
||||
//** Popover body background color
|
||||
@popover-dark-bg: #000;
|
||||
//** Popover font color
|
||||
@popover-dark-color: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-dark-max-width: 512px;
|
||||
//** Popover border color
|
||||
@popover-dark-border-color: #000;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-dark-title-bg: #000;
|
||||
|
||||
//** Popover arrow color
|
||||
@popover-dark-arrow-color: #000;
|
||||
|
||||
//** Popover outer arrow color
|
||||
@popover-dark-arrow-outer-color: fadein(@popover-dark-border-color, 5%);
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
|
|
@ -532,6 +532,27 @@
|
|||
20%
|
||||
);
|
||||
|
||||
//== Popovers dark theme
|
||||
//
|
||||
//##
|
||||
//** Popover body background color
|
||||
@popover-dark-bg: #000;
|
||||
//** Popover font color
|
||||
@popover-dark-color: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-dark-max-width: 512px;
|
||||
//** Popover border color
|
||||
@popover-dark-border-color: #000;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-dark-title-bg: #000;
|
||||
|
||||
//** Popover arrow color
|
||||
@popover-dark-arrow-color: #000;
|
||||
|
||||
//** Popover outer arrow color
|
||||
@popover-dark-arrow-outer-color: fadein(@popover-dark-border-color, 5%);
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
|
|
@ -1299,6 +1299,9 @@
|
|||
"quoted_text_in": "Quoted text in",
|
||||
"raw_logs": "Raw logs",
|
||||
"raw_logs_description": "Raw logs from the LaTeX compiler",
|
||||
"react_history_tutorial_content": "To compare a range of versions, use the <0></0> on the versions you want at the start and end of the range. To add a label or to download a version use the options in the three-dot menu. Learn more about using Overleaf History.",
|
||||
"react_history_tutorial_learn_more": "Learn more about using Overleaf History.",
|
||||
"react_history_tutorial_title": "History actions have a new home",
|
||||
"reactivate_subscription": "Reactivate your subscription",
|
||||
"read_only": "Read Only",
|
||||
"read_only_token": "Read-Only Token",
|
||||
|
|
|
@ -51,6 +51,9 @@ describe('change list', function () {
|
|||
cy.intercept('GET', '/project/*/filetree/diff*', {
|
||||
body: { diff: [{ pathname: 'main.tex' }, { pathname: 'name.tex' }] },
|
||||
}).as('diff')
|
||||
window.metaAttributesCache.set('ol-completedTutorials', {
|
||||
'react-history-buttons-tutorial': Date.now(),
|
||||
})
|
||||
})
|
||||
|
||||
describe('toggle switch', function () {
|
||||
|
|
Loading…
Reference in a new issue