From 17a98d756e09dd06bce3b470168d223aea4885f1 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 4 Apr 2023 09:00:30 -0700 Subject: [PATCH] Add badges UI to history react file tree (#12479) GitOrigin-RevId: 52c45b72110e01bb193139654fa9385cb9b9e489 --- .../file-tree/history-file-tree-doc.tsx | 4 ++++ .../history-file-tree-folder-list.tsx | 18 ++++++++++++------ .../file-tree/history-file-tree-item.tsx | 13 ++++++++++++- .../history/services/types/file-tree.ts | 1 + .../js/features/history/utils/file-tree.ts | 12 ++++++++---- .../stylesheets/app/editor/history-react.less | 13 +++++++++++++ 6 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 services/web/frontend/js/features/history/services/types/file-tree.ts diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx index b2c027e499..d121ab067d 100644 --- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx +++ b/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({ > { - return + return ( + + ) })} {children} @@ -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) } diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx index af5a7b94df..9aa69b77ab 100644 --- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx +++ b/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 (
{icons}
diff --git a/services/web/frontend/js/features/history/services/types/file-tree.ts b/services/web/frontend/js/features/history/services/types/file-tree.ts new file mode 100644 index 0000000000..04add7dae5 --- /dev/null +++ b/services/web/frontend/js/features/history/services/types/file-tree.ts @@ -0,0 +1 @@ +export type DiffOperation = 'edited' | 'added' | 'renamed' | 'removed' diff --git a/services/web/frontend/js/features/history/utils/file-tree.ts b/services/web/frontend/js/features/history/utils/file-tree.ts index ff125534df..47c99b6dbb 100644 --- a/services/web/frontend/js/features/history/utils/file-tree.ts +++ b/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 + 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) { diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less index c616cd3088..052402181d 100644 --- a/services/web/frontend/stylesheets/app/editor/history-react.less +++ b/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; + } }