style

frontend/src/documents/DocumentsTable.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
-import DetailPanel from '../detail/DetailPanel';
 import {
   DownloadIcon,
   EditIcon,
@@ -12,9 +11,10 @@ import {
   TrashIcon,
   RefreshIcon,
   MinusVerticalIcon,
-  ArrowUpIcon,
 } from '../ui/icons';
 import BreadcrumbTrail from '../ui/BreadcrumbTrail';
+import createWorkspaceSurfaceConfig from './workspaceHeader';
+import DetailPanel from '../detail/DetailPanel';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const DEFAULT_GRID_ICON_SIZE = 144;
@@ -1161,35 +1161,21 @@ export const createDocumentsSurface = ({
   });
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
-  const parentControl = parentBreadcrumb
-    ? (
-        <button
-          type="button"
-          className="icon-button"
-          onClick={onNavigateParent}
-          aria-label="Go to parent folder"
-          title="Go to parent folder"
-        >
-          <ArrowUpIcon />
-        </button>
-      )
-    : null;
-  const leading = sidebarToggle || parentControl
-    ? (
-        <>
-          {sidebarToggle}
-          {parentControl}
-        </>
-      )
-    : null;
-
   const detail = detailOpen && detailProps ? <DetailPanel {...detailProps} /> : null;
 
-  return {
+  const surfaceConfig = createWorkspaceSurfaceConfig({
     key: 'documents',
     variant: 'documents',
-    header: { title, subtitle, leading, actions, breadcrumbs },
+    title,
+    subtitle,
+    sidebarToggle,
+    parentBreadcrumb,
+    onNavigateParent,
+    actions,
+    breadcrumbs,
     content: <DocumentsTable {...tableProps} showHeader={false} />,
     detail,
-  };
+  });
+
+  return surfaceConfig;
 };

frontend/src/documents/workspaceHeader.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ArrowUpIcon } from '../ui/icons';
+
+export const createWorkspaceSurfaceConfig = ({
+  title,
+  subtitle = null,
+  sidebarToggle = null,
+  parentBreadcrumb = null,
+  onNavigateParent = null,
+  actions = null,
+  breadcrumbs = null,
+  content = null,
+  detail = null,
+  variant = 'documents',
+  key = 'documents',
+}) => {
+  const showParent = parentBreadcrumb && typeof onNavigateParent === 'function';
+
+  const parentControl = showParent ? (
+    <button
+      type="button"
+      className="icon-button"
+      onClick={onNavigateParent}
+      aria-label="Go to parent folder"
+      title="Go to parent folder"
+    >
+      <ArrowUpIcon />
+    </button>
+  ) : null;
+
+  const leading = sidebarToggle || parentControl
+    ? (
+        <>
+          {sidebarToggle}
+          {parentControl}
+        </>
+      )
+    : null;
+
+  return {
+    key,
+    variant,
+    header: {
+      title,
+      subtitle,
+      leading,
+      actions,
+      breadcrumbs,
+    },
+    content,
+    detail,
+  };
+};
+
+export default createWorkspaceSurfaceConfig;