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

HIstory UI - Adding a new compare component for drop down

GitOrigin-RevId: 3e01e8fedd5966c1bc6253df0e8868e4a41b8504

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

@@ -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"
+      <CompareDropDownItem
+        comparisonRange={{
+          fromV: selRange.fromV,
+          toV: updateRange.toV,
+          fromVTimestamp: selRange.fromVTimestamp,
+          toVTimestamp: updateRange.toVTimestamp,
+        }}
+        closeDropdown={closeDropdown}
         text={t('history_compare_up_to_this_version')}
-          closeDropdown={closeDropdown}
+        icon={
+          <MaterialIcon
+            type="align_start"
+            className="material-symbols-rounded history-dropdown-icon p-1"
           />
-      </DropdownOption>
-      <DropdownOption>
-        <CompareItems
-          updateRange={updateRange}
-          selectionState="belowSelected"
+        }
+      />
+      <CompareDropDownItem
+        comparisonRange={{
+          fromV: updateRange.fromV,
+          toV: selRange.toV,
+          fromVTimestamp: updateRange.fromVTimestamp,
+          toVTimestamp: selRange.toVTimestamp,
+        }}
+        closeDropdown={closeDropdown}
         text={t('history_compare_from_this_version')}
-          closeDropdown={closeDropdown}
+        icon={
+          <MaterialIcon
+            type="align_end"
+            className="material-symbols-rounded history-dropdown-icon p-1"
+          />
+        }
       />
-      </DropdownOption>
     </>
   )
 }
@@ -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,
+      <CompareDropDownItem
+        comparisonRange={{
+          fromV: selRange.fromV,
           toV: version,
-            fromVTimestamp: versionTimestamp,
+          fromVTimestamp: selRange.fromVTimestamp,
           toVTimestamp: versionTimestamp,
         }}
-          selectionState="aboveSelected"
+        closeDropdown={closeDropdownLabels}
         text={t('history_compare_up_to_this_version')}
-          closeDropdown={closeDropdownLabels}
+        icon={
+          <MaterialIcon
+            type="align_start"
+            className="material-symbols-rounded history-dropdown-icon p-1"
           />
-      </DropdownOption>
-      <DropdownOption>
-        <CompareItems
-          updateRange={{
+        }
+      />
+      <CompareDropDownItem
+        comparisonRange={{
           fromV: version,
-            toV: version,
+          toV: selRange.toV,
           fromVTimestamp: versionTimestamp,
-            toVTimestamp: versionTimestamp,
+          toVTimestamp: selRange.toVTimestamp,
         }}
-          selectionState="belowSelected"
-          text={t('history_compare_from_this_version')}
         closeDropdown={closeDropdownLabels}
+        text={t('history_compare_from_this_version')}
+        icon={
+          <MaterialIcon
+            type="align_end"
+            className="material-symbols-rounded history-dropdown-icon p-1"
           />
-      </DropdownOption>
-    </>
-  )
         }
-
-type DropdownOptionProps = {
-  children: ReactNode
-}
-
-function DropdownOption({ children, ...props }: DropdownOptionProps) {
-  return (
-    <>
-      <MenuItem {...props}>{children}</MenuItem>
+      />
     </>
   )
 }

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

@@ -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

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

@@ -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"

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

@@ -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>
   )

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

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