display total file & folder counts for the selected workspace beneath the workspace title

twrichards · twrichards · commit 06a06c1bdcce · 2025-12-17T14:53:51.000Z
diff --git a/frontend/src/js/components/Uploads/CaptureFromUrl.tsx b/frontend/src/js/components/Uploads/CaptureFromUrl.tsx
@@ -249,7 +249,7 @@ export const CaptureFromUrl = connect(
                   align: 'left',
                   render: (entry) =>
                     isWorkspaceNode(entry.data)
-                      ? <>{entry.name || '--'}<FileAndFolderCounts {...entry.data} /></>
+                      ? <>{entry.name || '--'}<FileAndFolderCounts marginLeft="5px" {...entry.data} /></>
                       : <></>, // don't render leaves since they can't be selected
                   sort: (a, b) => a.name.localeCompare(b.name),
                   style: {},
diff --git a/frontend/src/js/components/UtilComponents/TreeBrowser/FileAndFolderCounts.tsx b/frontend/src/js/components/UtilComponents/TreeBrowser/FileAndFolderCounts.tsx
@@ -4,10 +4,11 @@ interface FileAndFolderCountsProps {
   descendantsNodeCount: number;
   descendantsLeafCount: number;
   prefix?: string;
+  marginLeft?: string | number;
 }
 
-export const FileAndFolderCounts = ({descendantsNodeCount, descendantsLeafCount, prefix}: FileAndFolderCountsProps) => (
-  <span style={{marginLeft: prefix ? undefined : "5px", fontSize: "smaller", color: "#8b8b8b"}}>
+export const FileAndFolderCounts = ({marginLeft, descendantsNodeCount, descendantsLeafCount, prefix}: FileAndFolderCountsProps) => (
+  <span style={{marginLeft, fontSize: "smaller", color: "#8b8b8b"}}>
     ({prefix}{prefix && " "}{descendantsNodeCount === 0 && descendantsLeafCount === 0
       ? 'empty'
       : `${descendantsNodeCount.toLocaleString()} folders & ${descendantsLeafCount.toLocaleString()} files`
diff --git a/frontend/src/js/components/workspace/WorkspaceSummary.tsx b/frontend/src/js/components/workspace/WorkspaceSummary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WorkspaceMetadata, WorkspaceEntry, Workspace } from '../../types/Workspaces';
+import {WorkspaceMetadata, WorkspaceEntry, Workspace, isWorkspaceNode} from '../../types/Workspaces';
 import ModalAction from '../UtilComponents/ModalAction';
 import { Label, Popup } from 'semantic-ui-react';
 import { PartialUser } from '../../types/User';
@@ -17,6 +17,8 @@ import MdDelete from "react-icons/lib/md/delete";
 import TakeOwnershipOfWorkspaceModal from "./TakeOwnershipOfWorkspaceModal";
 import {takeOwnershipOfWorkspace} from "../../actions/workspaces/takeOwnershipOfWorkspace";
 import {CaptureFromUrl} from "../Uploads/CaptureFromUrl";
+import {EuiText} from "@elastic/eui";
+import {FileAndFolderCounts} from "../UtilComponents/TreeBrowser/FileAndFolderCounts";
 
 type Props = {
     workspace: Workspace,
@@ -57,8 +59,18 @@ export default function WorkspaceSummary({
         && follower.username !== workspace.owner.username
     )
 
+    const maybeRootNodeData = isWorkspaceNode(workspace.rootNode.data) && workspace.rootNode.data;
+
     return <div className='page-title workspace__header'>
-        <h1 className='workspace__title'>{workspace.name}</h1>
+        <h1 className='workspace__title'>
+            {workspace.name}{maybeRootNodeData && <>
+              <br/>
+              <EuiText size="s"><FileAndFolderCounts
+                descendantsNodeCount={maybeRootNodeData.descendantsNodeCount}
+                descendantsLeafCount={maybeRootNodeData.descendantsLeafCount}
+              /></EuiText>
+            </>}
+        </h1>
         <div className='workspace__badges'>
             {workspace.owner.username !== workspace.creator.username && (<Label>Created&nbsp;by {workspace.creator.displayName}</Label>)}
             <Label>Owned&nbsp;by {workspace.owner.displayName}</Label>
diff --git a/frontend/src/js/components/workspace/Workspaces.tsx b/frontend/src/js/components/workspace/Workspaces.tsx
@@ -234,7 +234,7 @@ class WorkspacesUnconnected extends React.Component<Props, State> {
                       </ReactTooltip>
                     </>}
                     <ItemName canEdit={canEdit} id={entry.id} name={entry.name} onFinishRename={curryRename}/>
-                    {isWorkspaceNode(entry.data) && <FileAndFolderCounts {...entry.data} />}
+                    {isWorkspaceNode(entry.data) && <FileAndFolderCounts marginLeft="5px" {...entry.data} />}
                 </React.Fragment>;
             },
             sort: (a: TreeEntry<WorkspaceEntry>, b: TreeEntry<WorkspaceEntry>) => {
