Merge pull request #13159 from overleaf/td-history-comparison-text-icon-tweaks

History migration: Icon and text changes to version comparison, switch order of from and to

GitOrigin-RevId: e31db255c55caf15481ed0237875e637c0ac0861

services/web/frontend/extracted-translations.json

@@ -137,7 +137,7 @@
   "commons_plan_tooltip": "",
   "compact": "",
   "company_name": "",
-  "comparing_x_to_y": "",
+  "comparing_from_x_to_y": "",
   "compile_error_entry_description": "",
   "compile_error_handling": "",
   "compile_larger_projects": "",
@@ -405,7 +405,7 @@
   "history_are_you_sure_delete_label": "",
   "history_compare_from_this_version": "",
   "history_compare_to_selected_version": "",
-  "history_compare_to_this_version": "",
+  "history_compare_up_to_this_version": "",
   "history_delete_label": "",
   "history_deleting_label": "",
   "history_download_this_version": "",

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

@@ -3,6 +3,7 @@ import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import Compare from './compare'
 import { updateRangeUnion } from '../../../../utils/range'
+import MaterialIcon from '../../../../../../shared/components/material-icon'
 
 type CompareItemsProps = {
   updateRange: UpdateRange
@@ -38,18 +39,6 @@ function CompareItems({
           text={t('history_compare_to_selected_version')}
         />
       ) : null}
-      {showCompareToThis ? (
-        <Compare
-          comparisonRange={{
-            fromV: selRange.fromV,
-            toV: updateRange.toV,
-            fromVTimestamp: selRange.fromVTimestamp,
-            toVTimestamp: updateRange.toVTimestamp,
-          }}
-          closeDropdown={closeDropdown}
-          text={t('history_compare_to_this_version')}
-        />
-      ) : null}
       {showCompareFromThis ? (
         <Compare
           comparisonRange={{
@@ -60,6 +49,20 @@ function CompareItems({
           }}
           closeDropdown={closeDropdown}
           text={t('history_compare_from_this_version')}
+          icon={<MaterialIcon type="line_start_circle" />}
+        />
+      ) : null}
+      {showCompareToThis ? (
+        <Compare
+          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="line_end_circle" />}
         />
       ) : null}
     </>

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

@@ -2,10 +2,12 @@ import { MenuItem, MenuItemProps } from 'react-bootstrap'
 import Icon from '../../../../../../shared/components/icon'
 import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
+import { ReactNode } from 'react'
 
 type CompareProps = {
   comparisonRange: UpdateRange
   text: string
+  icon?: ReactNode
   closeDropdown: () => void
 }
 
@@ -13,6 +15,7 @@ function Compare({
   comparisonRange,
   text,
   closeDropdown,
+  icon = <Icon type="exchange" fw />,
   ...props
 }: CompareProps) {
   const { setSelection } = useHistoryContext()
@@ -30,7 +33,7 @@ function Compare({
 
   return (
     <MenuItem onClick={handleCompareVersion} {...props}>
-      <Icon type="exchange" fw /> {text}
+      {icon} {text}
     </MenuItem>
   )
 }

services/web/frontend/js/features/history/components/diff-view/toolbar/toolbar-datetime.tsx

@@ -11,7 +11,7 @@ export default function ToolbarDatetime({ selection }: ToolbarDatetimeProps) {
     <div className="history-react-toolbar-datetime">
       {selection.comparing ? (
         <Trans
-          i18nKey="comparing_x_to_y"
+          i18nKey="comparing_from_x_to_y"
           // eslint-disable-next-line react/jsx-key
           components={[<time className="history-react-toolbar-time" />]}
           values={{

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -331,6 +331,10 @@ history-root {
       color: @neutral-90;
       background-color: @neutral-10;
     }
+
+    span.material-symbols-rounded {
+      vertical-align: middle;
+    }
   }
 }
 

services/web/locales/en.json

@@ -248,7 +248,7 @@
   "compact": "Compact",
   "company_name": "Company Name",
   "compare_to_another_version": "Compare to another version",
-  "comparing_x_to_y": "Comparing <0>__startTime__</0> to <0>__endTime__</0>",
+  "comparing_from_x_to_y": "Comparing from <0>__startTime__</0> to <0>__endTime__</0>",
   "compile_error_entry_description": "An error which prevented this project from compiling",
   "compile_error_handling": "Compile Error Handling",
   "compile_larger_projects": "Compile larger projects",
@@ -686,7 +686,7 @@
   "history_are_you_sure_delete_label": "Are you sure you want to delete the following label",
   "history_compare_from_this_version": "Compare from this version",
   "history_compare_to_selected_version": "Compare to selected version",
-  "history_compare_to_this_version": "Compare to this version",
+  "history_compare_up_to_this_version": "Compare up to this version",
   "history_delete_label": "Delete label",
   "history_deleting_label": "Deleting label",
   "history_download_this_version": "Download this version",

services/web/test/frontend/features/history/components/toolbar.spec.tsx

@@ -109,7 +109,7 @@ describe('history toolbar', function () {
     )
 
     cy.get('.history-react-toolbar').within(() => {
-      cy.get('div:first-child').contains('Comparing 12th April')
+      cy.get('div:first-child').contains('Comparing from 12th April')
 
       cy.get('div:first-child').contains('to 13th April')
     })