Merge pull request #12850 from overleaf/ii-history-react-fix-disappeared-pseudo-labels

[web] Fix disappeared pseudo labels

GitOrigin-RevId: 4d33eb8888cadbccba29ac001e205db8fa717c49

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

@@ -6,7 +6,7 @@ import Origin from './origin'
 import HistoryVersionDropdown from './dropdown/history-version-dropdown'
 import { useUserContext } from '../../../../shared/context/user-context'
 import { useHistoryContext } from '../../context/history-context'
-import { isUpdateSelected } from '../../utils/history-details'
+import { isVersionSelected } from '../../utils/history-details'
 import { relativeDate, formatTime } from '../../../utils/format-date'
 import { orderBy } from 'lodash'
 import { LoadedUpdate } from '../../services/types/update'
@@ -20,11 +20,7 @@ function HistoryVersion({ update }: HistoryEntryProps) {
   const { projectId, selection } = useHistoryContext()
 
   const orderedLabels = orderBy(update.labels, ['created_at'], ['desc'])
-  const selected = isUpdateSelected({
-    fromV: update.fromV,
-    toV: update.toV,
-    selection,
-  })
+  const selected = isVersionSelected(selection, update.fromV, update.toV)
 
   return (
     <div>

services/web/frontend/js/features/history/components/change-list/labels-list.tsx

@@ -5,15 +5,15 @@ import UserNameWithColoredBadge from './user-name-with-colored-badge'
 import LabelDropdown from './dropdown/label-dropdown'
 import { useHistoryContext } from '../../context/history-context'
 import { useUserContext } from '../../../../shared/context/user-context'
-import { isUpdateSelected } from '../../utils/history-details'
+import { isVersionSelected } from '../../utils/history-details'
 import { isPseudoLabel } from '../../utils/label'
-import { formatTime } from '../../../utils/format-date'
+import { formatTime, isoToUnix } from '../../../utils/format-date'
 import { groupBy, orderBy } from 'lodash'
 import { LoadedLabel } from '../../services/types/label'
 
 function LabelsList() {
   const { t } = useTranslation()
-  const { updatesInfo, labels, projectId, selection } = useHistoryContext()
+  const { labels, projectId, selection } = useHistoryContext()
   const { id: currentUserId } = useUserContext()
 
   let versionWithLabels: { version: number; labels: LoadedLabel[] }[] = []
@@ -29,25 +29,20 @@ function LabelsList() {
   return (
     <>
       {versionWithLabels.map(({ version, labels }) => {
-        const selected = isUpdateSelected({
-          fromV: version,
-          toV: version,
-          selection,
-        })
+        const selected = isVersionSelected(selection, version)
 
-        const update = updatesInfo.updates.find(update => {
-          return update.labels.some(label => label.version === version)
-        })
-
-        if (!update) return null
+        // first label
+        const fromVTimestamp = isoToUnix(labels[labels.length - 1].created_at)
+        // most recent label
+        const toVTimestamp = isoToUnix(labels[0].created_at)
 
         return (
           <HistoryVersionDetails
             key={version}
             fromV={version}
             toV={version}
-            fromVTimestamp={update.meta.end_ts}
-            toVTimestamp={update.meta.end_ts}
+            fromVTimestamp={fromVTimestamp}
+            toVTimestamp={toVTimestamp}
             selected={selected}
           >
             <div className="history-version-main-details">
@@ -82,7 +77,7 @@ function LabelsList() {
               id={version.toString()}
               projectId={projectId}
               version={version}
-              updateMetaEndTimestamp={update.meta.end_ts}
+              updateMetaEndTimestamp={toVTimestamp}
               isComparing={selection.comparing}
               isSelected={selected}
             />

services/web/frontend/js/features/history/utils/auto-select-file.ts

@@ -1,16 +1,10 @@
 import _ from 'lodash'
+import { getUpdateForVersion } from './history-details'
 import type { Nullable } from '../../../../../types/utils'
 import type { FileDiff } from '../services/types/file'
 import type { FileOperation } from '../services/types/file-operation'
 import type { LoadedUpdate, Version } from '../services/types/update'
 
-function getUpdateForVersion(
-  version: Version,
-  updates: LoadedUpdate[]
-): Nullable<LoadedUpdate> {
-  return updates.filter(update => update.toV === version)?.[0] ?? null
-}
-
 type FileWithOps = {
   pathname: FileDiff['pathname']
   operation: FileOperation
@@ -26,7 +20,7 @@ function getFilesWithOps(
     const filesWithOps: FileWithOps[] = []
     const currentUpdate = getUpdateForVersion(toV, updates)
 
-    if (currentUpdate !== null) {
+    if (currentUpdate) {
       for (const pathname of currentUpdate.pathnames) {
         filesWithOps.push({
           pathname,

services/web/frontend/js/features/history/utils/history-details.ts

@@ -1,7 +1,7 @@
 import ColorManager from '../../../ide/colors/ColorManager'
 import { Nullable } from '../../../../../types/utils'
 import { User } from '../services/types/shared'
-import { ProjectOp, Version } from '../services/types/update'
+import { LoadedUpdate, ProjectOp, Version } from '../services/types/update'
 import { Selection } from '../services/types/selection'
 
 export const getUserColor = (user?: Nullable<{ id: string }>) => {
@@ -37,21 +37,37 @@ export const getProjectOpDoc = (projectOp: ProjectOp) => {
   return ''
 }
 
-type UpdateIsSelectedArg = {
-  fromV: Version
+export function isVersionSelected(
+  selection: Selection,
+  version: Version
+): boolean
+// eslint-disable-next-line no-redeclare
+export function isVersionSelected(
+  selection: Selection,
+  fromV: Version,
   toV: Version
-  selection: Selection
-}
-
-export const isUpdateSelected = ({
-  fromV,
-  toV,
-  selection,
-}: UpdateIsSelectedArg) => {
+): boolean
+// eslint-disable-next-line no-redeclare
+export function isVersionSelected(
+  selection: Selection,
+  ...args: [Version] | [Version, Version]
+): boolean {
   if (selection.updateRange) {
-    return (
-      fromV >= selection.updateRange.fromV && toV <= selection.updateRange.toV
-    )
+    let [fromV, toV] = args
+    toV = toV ?? fromV
+
+    if (selection.comparing) {
+      // compare mode
+      return (
+        fromV >= selection.updateRange.fromV && toV <= selection.updateRange.toV
+      )
+    } else {
+      // single version mode
+      return toV === selection.updateRange.toV
+    }
   }
   return false
 }
+
+export const getUpdateForVersion = (version: number, updates: LoadedUpdate[]) =>
+  updates.find(update => update.toV === version)

services/web/frontend/js/features/utils/format-date.js

@@ -18,3 +18,12 @@ export function formatTime(date, format = 'h:mm a') {
 export function relativeDate(date) {
   return moment(date).calendar()
 }
+
+/**
+ * @param {string} isoTimestamp
+ * @returns {number}
+ */
+export function isoToUnix(isoTimestamp) {
+  const unixTimestamp = Date.parse(isoTimestamp) / 1000
+  return unixTimestamp
+}