Add badges UI to history react file tree (#12479)

GitOrigin-RevId: 52c45b72110e01bb193139654fa9385cb9b9e489

services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx

@@ -2,15 +2,18 @@ import HistoryFileTreeItem from './history-file-tree-item'
 import iconTypeFromName from '../../../file-tree/util/icon-type-from-name'
 import Icon from '../../../../shared/components/icon'
 import { useSelectableEntity } from '../../context/history-file-tree-selectable'
+import { DiffOperation } from '../../services/types/file-tree'
 
 type HistoryFileTreeDocProps = {
   name: string
   id: string
+  operation?: DiffOperation
 }
 
 export default function HistoryFileTreeDoc({
   name,
   id,
+  operation,
 }: HistoryFileTreeDocProps) {
   const { props: selectableEntityProps } = useSelectableEntity(id)
 
@@ -23,6 +26,7 @@ export default function HistoryFileTreeDoc({
     >
       <HistoryFileTreeItem
         name={name}
+        operation={operation}
         icons={
           <Icon
             type={iconTypeFromName(name)}

services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder-list.tsx

@@ -3,13 +3,12 @@ import classNames from 'classnames'
 import HistoryFileTreeDoc from './history-file-tree-doc'
 import HistoryFileTreeFolder from './history-file-tree-folder'
 import { fileCollator } from '../../../file-tree/util/file-collator'
-import type { Doc } from '../../../../../../types/doc'
 import type { ReactNode } from 'react'
-import type { HistoryFileTree } from '../../utils/file-tree'
+import type { HistoryFileTree, HistoryDoc } from '../../utils/file-tree'
 
 type HistoryFileTreeFolderListProps = {
   folders: HistoryFileTree[]
-  docs: Doc[]
+  docs: HistoryDoc[]
   rootClassName?: string
   children?: ReactNode
 }
@@ -33,7 +32,14 @@ export default function HistoryFileTreeFolderList({
         )
       })}
       {docs.sort(compareFunction).map(doc => {
-        return <HistoryFileTreeDoc key={doc._id} name={doc.name} id={doc._id} />
+        return (
+          <HistoryFileTreeDoc
+            key={doc._id}
+            name={doc.name}
+            id={doc._id}
+            operation={doc.operation}
+          />
+        )
       })}
       {children}
     </ul>
@@ -41,8 +47,8 @@ export default function HistoryFileTreeFolderList({
 }
 
 function compareFunction(
-  one: HistoryFileTree | Doc,
-  two: HistoryFileTree | Doc
+  one: HistoryFileTree | HistoryDoc,
+  two: HistoryFileTree | HistoryDoc
 ) {
   return fileCollator.compare(one.name, two.name)
 }

services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx

@@ -1,17 +1,28 @@
 import type { ReactNode } from 'react'
+import { DiffOperation } from '../../services/types/file-tree'
 
 type FileTreeItemProps = {
   name: string
+  operation?: DiffOperation
   icons: ReactNode
 }
 
-export default function FileTreeItem({ name, icons }: FileTreeItemProps) {
+export default function FileTreeItem({
+  name,
+  operation,
+  icons,
+}: FileTreeItemProps) {
   return (
     <div className="entity" role="presentation">
       <div className="entity-name entity-name-react" role="presentation">
         {icons}
         <button className="item-name-button">
           <span>{name}</span>
+          {operation ? (
+            <span className="history-file-entity-operation-badge">
+              {operation}
+            </span>
+          ) : null}
         </button>
       </div>
     </div>

services/web/frontend/js/features/history/services/types/file-tree.ts

@@ -0,0 +1 @@
+export type DiffOperation = 'edited' | 'added' | 'renamed' | 'removed'

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

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import type { Doc } from '../../../../../types/doc'
 import type { FileDiff, FileRenamed } from '../services/types/file'
+import type { DiffOperation } from '../services/types/file-tree'
 
 // `Partial` because the `reducePathsToTree` function was copied directly
 // from a javascript file without proper type system and the logic is not typescript-friendly.
@@ -12,7 +13,7 @@ type FileTreeEntity = Partial<{
   newPathname: string
   pathname: string
   children: FileTreeEntity[]
-  operation: 'edited' | 'added' | 'renamed' | 'removed'
+  operation: DiffOperation
 }>
 
 export function reducePathsToTree(
@@ -48,8 +49,10 @@ export function reducePathsToTree(
   return currentFileTree
 }
 
+export type HistoryDoc = Doc & Pick<FileTreeEntity, 'operation'>
+
 export type HistoryFileTree = {
-  docs?: Doc[]
+  docs?: HistoryDoc[]
   folders: HistoryFileTree[]
   name: string
   _id: string
@@ -60,13 +63,14 @@ export function fileTreeDiffToFileTreeData(
   currentFolderName = 'rootFolder' // default value from angular version
 ): HistoryFileTree {
   const folders: HistoryFileTree[] = []
-  const docs: Doc[] = []
+  const docs: HistoryDoc[] = []
 
   for (const file of fileTreeDiff) {
     if (file.type === 'file') {
       docs.push({
-        _id: file.pathname as string,
+        _id: file.pathname ?? '',
         name: file.name ?? '',
+        operation: file.operation,
       })
     } else if (file.type === 'folder') {
       if (file.children) {

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

@@ -71,4 +71,17 @@ history-root {
     font-family: @font-family-serif;
     text-align: center;
   }
+
+  .history-file-entity-operation-badge {
+    flex: 0 0 auto;
+    text-transform: lowercase;
+    margin-left: 0.5em;
+    font-size: 0.7em;
+    background: @history-file-badge-bg;
+    color: @history-file-badge-color;
+    border-radius: 8px;
+    line-height: 1;
+    padding: 2px 4px 3px;
+    margin-top: 2px;
+  }
 }