github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 16:13:42 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #14492 from overleaf/ds-remake-compare

Browse source 
HIstory UI - Adding a new compare component for drop down

GitOrigin-RevId: 3e01e8fedd5966c1bc6253df0e8868e4a41b8504
This commit is contained in:
Jimmy Domagala-Tang 2023-09-05 10:00:19 -04:00 committed by Copybot
parent 3fa1245860
commit 0d932a226b
5 changed files with 126 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown-content.tsx
View file

@ -1,10 +1,11 @@
import { LoadedUpdate, Version } from '../../../services/types/update'
import { ReactNode, useCallback } from 'react'
import { useCallback } from 'react'
import { ActiveDropdown } from '../../../hooks/use-dropdown-active-item'
import { MenuItem } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import CompareItems from './menu-item/compare-items'
import { updateRangeForUpdate } from '../../../utils/history-details'
import CompareDropDownItem from './menu-item/compare-dropdown-item'
import { useHistoryContext } from '../../../context/history-context'
import MaterialIcon from '../../../../../shared/components/material-icon'
type VersionDropdownContentAllHistoryProps = {
update: LoadedUpdate
@ -22,25 +23,45 @@ function CompareVersionDropdownContentAllHistory({
}, [closeDropdownForItem, update])
const { t } = useTranslation()
const { selection } = useHistoryContext()
const { updateRange: selRange } = selection
if (selRange === null) {
return null
}
return (
<>
<DropdownOption>
<CompareItems
updateRange={updateRange}
selectionState="aboveSelected"
text={t('history_compare_up_to_this_version')}
closeDropdown={closeDropdown}
/>
</DropdownOption>
<DropdownOption>
<CompareItems
updateRange={updateRange}
selectionState="belowSelected"
text={t('history_compare_from_this_version')}
closeDropdown={closeDropdown}
/>
</DropdownOption>
<CompareDropDownItem
comparisonRange={{
fromV: selRange.fromV,
toV: updateRange.toV,
fromVTimestamp: selRange.fromVTimestamp,
toVTimestamp: updateRange.toVTimestamp,
}}
closeDropdown={closeDropdown}
text={t('history_compare_up_to_this_version')}
icon={
<MaterialIcon
type="align_start"
className="material-symbols-rounded history-dropdown-icon p-1"
/>
}
/>
<CompareDropDownItem
comparisonRange={{
fromV: updateRange.fromV,
toV: selRange.toV,
fromVTimestamp: updateRange.fromVTimestamp,
toVTimestamp: selRange.toVTimestamp,
}}
closeDropdown={closeDropdown}
text={t('history_compare_from_this_version')}
icon={
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon p-1"
/>
}
/>
</>
)
}
@ -61,47 +82,46 @@ function CompareVersionDropdownContentLabelsList({
}, [closeDropdownForItem, version])
const { t } = useTranslation()
const { selection } = useHistoryContext()
const { updateRange: selRange } = selection
if (selRange === null) {
return null
}
return (
<>
<DropdownOption>
<CompareItems
updateRange={{
fromV: version,
toV: version,
fromVTimestamp: versionTimestamp,
toVTimestamp: versionTimestamp,
}}
selectionState="aboveSelected"
text={t('history_compare_up_to_this_version')}
closeDropdown={closeDropdownLabels}
/>
</DropdownOption>
<DropdownOption>
<CompareItems
updateRange={{
fromV: version,
toV: version,
fromVTimestamp: versionTimestamp,
toVTimestamp: versionTimestamp,
}}
selectionState="belowSelected"
text={t('history_compare_from_this_version')}
closeDropdown={closeDropdownLabels}
/>
</DropdownOption>
</>
)
}
type DropdownOptionProps = {
children: ReactNode
}
function DropdownOption({ children, ...props }: DropdownOptionProps) {
return (
<>
<MenuItem {...props}>{children}</MenuItem>
<CompareDropDownItem
comparisonRange={{
fromV: selRange.fromV,
toV: version,
fromVTimestamp: selRange.fromVTimestamp,
toVTimestamp: versionTimestamp,
}}
closeDropdown={closeDropdownLabels}
text={t('history_compare_up_to_this_version')}
icon={
<MaterialIcon
type="align_start"
className="material-symbols-rounded history-dropdown-icon p-1"
/>
}
/>
<CompareDropDownItem
comparisonRange={{
fromV: version,
toV: selRange.toV,
fromVTimestamp: versionTimestamp,
toVTimestamp: selRange.toVTimestamp,
}}
closeDropdown={closeDropdownLabels}
text={t('history_compare_from_this_version')}
icon={
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon p-1"
/>
}
/>
</>
)
}

43
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx Normal file
View file

@ -0,0 +1,43 @@
import Icon from '../../../../../../shared/components/icon'
import { useHistoryContext } from '../../../../context/history-context'
import { UpdateRange } from '../../../../services/types/update'
import { ReactNode } from 'react'
import { Button, MenuItem } from 'react-bootstrap'
type CompareProps = {
comparisonRange: UpdateRange
icon: ReactNode
text: string
closeDropdown: () => void
}
function CompareDropDownItem({
comparisonRange,
text,
closeDropdown,
icon = <Icon type="exchange" fw />,
...props
}: CompareProps) {
const { setSelection } = useHistoryContext()
const handleCompareVersion = (e: React.MouseEvent<Button>) => {
e.stopPropagation()
closeDropdown()
setSelection(({ previouslySelectedPathname }) => ({
updateRange: comparisonRange,
comparing: true,
files: [],
previouslySelectedPathname,
}))
}
return (
<MenuItem {...props} onClick={handleCompareVersion}>
{icon}
<span className="">{text}</span>
</MenuItem>
)
}
export default CompareDropDownItem

4
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx
View file

@ -8,14 +8,12 @@ import { ItemSelectionState } from '../../../../utils/history-details'
type CompareItemsProps = {
updateRange: UpdateRange
selectionState: ItemSelectionState
text?: string
closeDropdown: () => void
}
function CompareItems({
updateRange,
selectionState,
text,
closeDropdown,
}: CompareItemsProps) {
const { t } = useTranslation()
@ -37,7 +35,6 @@ function CompareItems({
}}
closeDropdown={closeDropdown}
toolTipDescription={t('history_compare_from_this_version')}
text={text}
icon={
<MaterialIcon
type="align_end"
@ -56,7 +53,6 @@ function CompareItems({
}}
closeDropdown={closeDropdown}
toolTipDescription={t('history_compare_up_to_this_version')}
text={text}
icon={
<MaterialIcon
type="align_start"

3
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx
View file

@ -8,14 +8,12 @@ import { Button } from 'react-bootstrap'
type CompareProps = {
comparisonRange: UpdateRange
icon?: ReactNode
text?: string
toolTipDescription?: string
closeDropdown: () => void
}
function Compare({
comparisonRange,
text,
closeDropdown,
toolTipDescription,
icon = <Icon type="exchange" fw />,
@ -48,7 +46,6 @@ function Compare({
>
<span className="sr-only">{toolTipDescription}</span>
{icon}
{text ?? <span className="px-1">{text}</span>}
</Button>
</Tooltip>
)

8
services/web/test/frontend/features/history/components/change-list.spec.tsx
View file

@ -363,9 +363,11 @@ describe('change list', function () {
.eq(1)
.within(() => {
cy.findByRole('button', { name: /compare drop down/i }).click()
cy.findByRole('button', {
name: /compare up to this version/i,
}).click()
cy.findByRole('menu').within(() => {
cy.findByRole('menuitem', {
name: /compare up to this version/i,
}).click()
})
})
cy.findAllByTestId('history-version-details').should($versions => {