feat(webui): extend shared explorer tree actions

2026-07-21 13:58:38 +02:00
parent 2ca61059dc
commit 09b5009187
5 changed files with 261 additions and 117 deletions
--- a/webui/package.json
+++ b/webui/package.json
@@ -24,6 +24,7 @@
    "test:file-drop-zone": "rm -rf .file-drop-test-build && mkdir -p .file-drop-test-build && printf '{\"type\":\"commonjs\"}\\n' > .file-drop-test-build/package.json && tsc -p tsconfig.file-drop-tests.json && node .file-drop-test-build/tests/file-drop-resolver.test.js && node scripts/test-file-drop-zone-structure.mjs",
    "test:data-grid-actions": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/data-grid-actions.test.js",
    "test:dialog-focus": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/dialog-focus.test.js && node scripts/test-dialog-focus-structure.mjs",
+    "test:explorer-tree": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/explorer-tree.test.js",
    "test:icon-button": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/icon-button.test.js",
    "test:module-capabilities": "rm -rf .module-test-build && mkdir -p .module-test-build && printf '{\"type\":\"commonjs\"}\n' > .module-test-build/package.json && tsc -p tsconfig.module-tests.json && node .module-test-build/tests/module-capabilities.test.js && node .module-test-build/tests/privacy-policy.test.js",
    "test:module-permutations": "node scripts/test-module-permutations.mjs",
--- a/webui/src/components/ExplorerTree.tsx
+++ b/webui/src/components/ExplorerTree.tsx
@@ -10,15 +10,13 @@ export type ExplorerTreeNodeContext = {
  disabled: boolean;
 };

-export type ExplorerTreeProps<T> = {
+type ExplorerTreeCommonProps<T> = {
  nodes: T[];
  getNodeId: (node: T) => string;
  getNodeLabel: (node: T) => string;
  getNodeChildren: (node: T) => T[];
  activeId?: string;
-  expandedIds: Set<string>;
  onOpen: (node: T, context: ExplorerTreeNodeContext) => void;
-  onToggle: (node: T, context: ExplorerTreeNodeContext) => void;
  disabled?: boolean;
  depth?: number;
  className?: string;
@@ -29,6 +27,7 @@ export type ExplorerTreeProps<T> = {
  nodeButtonBaseClassName?: string;
  renderToggleIcon?: (node: T, context: ExplorerTreeNodeContext) => ReactNode;
  renderNodeContent?: (node: T, context: ExplorerTreeNodeContext) => ReactNode;
+  renderNodeActions?: (node: T, context: ExplorerTreeNodeContext) => ReactNode;
  getNodeWrapClassName?: (node: T, context: ExplorerTreeNodeContext) => string | undefined;
  getNodeWrapStyle?: (node: T, context: ExplorerTreeNodeContext) => CSSProperties | undefined;
  getNodeButtonClassName?: (node: T, context: ExplorerTreeNodeContext) => string | undefined;
@@ -41,122 +40,162 @@ export type ExplorerTreeProps<T> = {
  onDrop?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
 };

-export default function ExplorerTree<T>({
-  nodes,
-  getNodeId,
-  getNodeLabel,
-  getNodeChildren,
-  activeId = "",
-  expandedIds,
-  onOpen,
-  onToggle,
-  disabled = false,
-  depth = 1,
-  className = "",
-  childrenBaseClassName = "explorer-tree-children file-tree-children",
-  nodeContainerClassName = "",
-  nodeWrapBaseClassName = "explorer-tree-node-wrap file-tree-node-wrap",
-  toggleBaseClassName = "explorer-tree-toggle file-tree-toggle",
-  nodeButtonBaseClassName = "explorer-tree-node file-tree-node",
-  renderToggleIcon,
-  renderNodeContent,
-  getNodeWrapClassName,
-  getNodeWrapStyle,
-  getNodeButtonClassName,
-  getNodeDraggable,
-  onContextMenu,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragLeave,
-  onDrop
-}: ExplorerTreeProps<T>) {
-  if (nodes.length === 0) return null;
+type CollapsibleExplorerTreeProps<T> = {
+  collapsible?: true;
+  expandedIds: ReadonlySet<string>;
+  onToggle: (node: T, context: ExplorerTreeNodeContext) => void;
+};

-  return (
-    <div className={[childrenBaseClassName, className].filter(Boolean).join(" ")}>
-      {nodes.map((node) => {
-        const nodeId = getNodeId(node);
-        const children = getNodeChildren(node);
-        const hasChildren = children.length > 0;
-        const expanded = expandedIds.has(nodeId);
-        const active = activeId === nodeId;
-        const context: ExplorerTreeNodeContext = { depth, active, expanded, hasChildren, disabled };
-        const draggable = getNodeDraggable?.(node, context) ?? false;
+type StaticExplorerTreeProps = {
+  collapsible: false;
+  expandedIds?: never;
+  onToggle?: never;
+};

-        return (
-          <div key={nodeId} className={nodeContainerClassName}>
-            <div
-              className={[
-              nodeWrapBaseClassName,
-              active ? "is-active" : "",
-              getNodeWrapClassName?.(node, context) ?? ""].
-              filter(Boolean).join(" ")}
-              style={getNodeWrapStyle?.(node, context) ?? { paddingLeft: `${Math.min(depth * 14, 56)}px` }}
-              draggable={draggable && !disabled}
-              onContextMenu={onContextMenu ? (event) => onContextMenu(event, node, context) : undefined}
-              onDragStart={draggable && onDragStart ? (event) => onDragStart(event, node, context) : undefined}
-              onDragEnd={draggable && onDragEnd ? (event) => onDragEnd(event, node, context) : undefined}
-              onDragOver={onDragOver ? (event) => onDragOver(event, node, context) : undefined}
-              onDragLeave={onDragLeave ? (event) => onDragLeave(event, node, context) : undefined}
-              onDrop={onDrop ? (event) => onDrop(event, node, context) : undefined}>
+export type ExplorerTreeProps<T> = ExplorerTreeCommonProps<T> & (
+  CollapsibleExplorerTreeProps<T> | StaticExplorerTreeProps
+);

-              <button
-                type="button"
-                className={toggleBaseClassName}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  if (hasChildren) onToggle(node, context);
-                }}
-                disabled={disabled || !hasChildren}
-                aria-label={i18nMessage("i18n:govoplan-core.value_value.dca59cc0", { value0: expanded ? "i18n:govoplan-core.collapse.9cf188d3" : "i18n:govoplan-core.expand.9869e506", value1: getNodeLabel(node) })}
-                aria-expanded={hasChildren ? expanded : undefined}>
+type SafeNode<T> = {
+  id: string;
+  node: T;
+};

-                {renderToggleIcon?.(node, context) ?? (expanded ? <FolderOpen size={15} aria-hidden="true" /> : <Folder size={15} aria-hidden="true" />)}
-              </button>
-              <button
-                type="button"
-                className={[nodeButtonBaseClassName, getNodeButtonClassName?.(node, context) ?? ""].filter(Boolean).join(" ")}
-                onClick={() => onOpen(node, context)}
-                disabled={disabled}>
+const EMPTY_EXPANDED_IDS: ReadonlySet<string> = new Set();

-                {renderNodeContent?.(node, context) ?? <span>{getNodeLabel(node)}</span>}
-              </button>
+export default function ExplorerTree<T>(props: ExplorerTreeProps<T>) {
+  const {
+    nodes,
+    getNodeId,
+    getNodeLabel,
+    getNodeChildren,
+    activeId = "",
+    onOpen,
+    disabled = false,
+    depth = 1,
+    className = "",
+    childrenBaseClassName = "explorer-tree-children file-tree-children",
+    nodeContainerClassName = "",
+    nodeWrapBaseClassName = "explorer-tree-node-wrap file-tree-node-wrap",
+    toggleBaseClassName = "explorer-tree-toggle file-tree-toggle",
+    nodeButtonBaseClassName = "explorer-tree-node file-tree-node",
+    renderToggleIcon,
+    renderNodeContent,
+    renderNodeActions,
+    getNodeWrapClassName,
+    getNodeWrapStyle,
+    getNodeButtonClassName,
+    getNodeDraggable,
+    onContextMenu,
+    onDragStart,
+    onDragEnd,
+    onDragOver,
+    onDragLeave,
+    onDrop
+  } = props;
+  const collapsible = props.collapsible !== false;
+  const expandedIds = props.collapsible === false ? EMPTY_EXPANDED_IDS : props.expandedIds;
+  const onToggle = props.collapsible === false ? undefined : props.onToggle;
+
+  function pathSafeNodes(levelNodes: T[], ancestorIds: ReadonlySet<string>): SafeNode<T>[] {
+    const siblingIds = new Set<string>();
+    const safeNodes: SafeNode<T>[] = [];
+    for (const node of levelNodes) {
+      const id = getNodeId(node);
+      if (ancestorIds.has(id) || siblingIds.has(id)) continue;
+      siblingIds.add(id);
+      safeNodes.push({ id, node });
+    }
+    return safeNodes;
+  }
+
+  function renderLevel(levelNodes: T[], currentDepth: number, ancestorIds: ReadonlySet<string>, root = false): ReactNode {
+    const safeNodes = pathSafeNodes(levelNodes, ancestorIds);
+    if (safeNodes.length === 0) return null;
+
+    return (
+      <div className={[childrenBaseClassName, root ? className : ""].filter(Boolean).join(" ")}>
+        {safeNodes.map(({ id: nodeId, node }) => {
+          const nextAncestorIds = new Set(ancestorIds);
+          nextAncestorIds.add(nodeId);
+          const children = getNodeChildren(node);
+          const hasChildren = pathSafeNodes(children, nextAncestorIds).length > 0;
+          const expanded = collapsible ? expandedIds.has(nodeId) : hasChildren;
+          const active = activeId === nodeId;
+          const context: ExplorerTreeNodeContext = { depth: currentDepth, active, expanded, hasChildren, disabled };
+          const draggable = getNodeDraggable?.(node, context) ?? false;
+          const nodeActions = renderNodeActions?.(node, context);
+          const hasNodeActions = nodeActions !== null && nodeActions !== undefined && nodeActions !== false;
+
+          return (
+            <div key={nodeId} className={nodeContainerClassName}>
+              <div
+                className={[
+                  nodeWrapBaseClassName,
+                  active ? "is-active" : "",
+                  hasNodeActions ? "has-actions" : "",
+                  getNodeWrapClassName?.(node, context) ?? ""
+                ].filter(Boolean).join(" ")}
+                style={getNodeWrapStyle?.(node, context) ?? { paddingLeft: `${Math.min(currentDepth * 14, 56)}px` }}
+                draggable={draggable && !disabled}
+                onContextMenu={onContextMenu ? (event) => onContextMenu(event, node, context) : undefined}
+                onDragStart={draggable && onDragStart ? (event) => onDragStart(event, node, context) : undefined}
+                onDragEnd={draggable && onDragEnd ? (event) => onDragEnd(event, node, context) : undefined}
+                onDragOver={onDragOver ? (event) => onDragOver(event, node, context) : undefined}
+                onDragLeave={onDragLeave ? (event) => onDragLeave(event, node, context) : undefined}
+                onDrop={onDrop ? (event) => onDrop(event, node, context) : undefined}
+              >
+                {collapsible ? (
+                  <button
+                    type="button"
+                    className={toggleBaseClassName}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (hasChildren) onToggle?.(node, context);
+                    }}
+                    disabled={disabled || !hasChildren}
+                    aria-label={i18nMessage("i18n:govoplan-core.value_value.dca59cc0", {
+                      value0: expanded ? "i18n:govoplan-core.collapse.9cf188d3" : "i18n:govoplan-core.expand.9869e506",
+                      value1: getNodeLabel(node)
+                    })}
+                    aria-expanded={hasChildren ? expanded : undefined}
+                  >
+                    {renderToggleIcon?.(node, context) ?? (expanded ? <FolderOpen size={15} aria-hidden="true" /> : <Folder size={15} aria-hidden="true" />)}
+                  </button>
+                ) : (
+                  <span className={`${toggleBaseClassName} explorer-tree-toggle-static`} aria-hidden="true">
+                    {renderToggleIcon?.(node, context) ?? (hasChildren ? <FolderOpen size={15} aria-hidden="true" /> : <Folder size={15} aria-hidden="true" />)}
+                  </span>
+                )}
+                <button
+                  type="button"
+                  className={[nodeButtonBaseClassName, getNodeButtonClassName?.(node, context) ?? ""].filter(Boolean).join(" ")}
+                  onClick={() => onOpen(node, context)}
+                  disabled={disabled}
+                  aria-current={active ? "true" : undefined}
+                >
+                  {renderNodeContent?.(node, context) ?? <span>{getNodeLabel(node)}</span>}
+                </button>
+                {hasNodeActions && (
+                  <div
+                    className="explorer-tree-actions"
+                    role="group"
+                    aria-label={i18nMessage("i18n:govoplan-core.value_value.dca59cc0", {
+                      value0: "i18n:govoplan-core.actions.c3cd636a",
+                      value1: getNodeLabel(node)
+                    })}
+                  >
+                    {nodeActions}
+                  </div>
+                )}
+              </div>
+              {hasChildren && expanded && renderLevel(children, currentDepth + 1, nextAncestorIds)}
            </div>
-            {hasChildren && expanded &&
-            <ExplorerTree
-              nodes={children}
-              getNodeId={getNodeId}
-              getNodeLabel={getNodeLabel}
-              getNodeChildren={getNodeChildren}
-              activeId={activeId}
-              expandedIds={expandedIds}
-              onOpen={onOpen}
-              onToggle={onToggle}
-              disabled={disabled}
-              depth={depth + 1}
-              childrenBaseClassName={childrenBaseClassName}
-              nodeContainerClassName={nodeContainerClassName}
-              nodeWrapBaseClassName={nodeWrapBaseClassName}
-              toggleBaseClassName={toggleBaseClassName}
-              nodeButtonBaseClassName={nodeButtonBaseClassName}
-              renderToggleIcon={renderToggleIcon}
-              renderNodeContent={renderNodeContent}
-              getNodeWrapClassName={getNodeWrapClassName}
-              getNodeWrapStyle={getNodeWrapStyle}
-              getNodeButtonClassName={getNodeButtonClassName}
-              getNodeDraggable={getNodeDraggable}
-              onContextMenu={onContextMenu}
-              onDragStart={onDragStart}
-              onDragEnd={onDragEnd}
-              onDragOver={onDragOver}
-              onDragLeave={onDragLeave}
-              onDrop={onDrop} />
-
-            }
-          </div>);
-
-      })}
-    </div>);
+          );
+        })}
+      </div>
+    );
+  }

+  return renderLevel(nodes, depth, new Set(), true);
 }
--- a/webui/src/styles/components.css
+++ b/webui/src/styles/components.css
@@ -2256,6 +2256,10 @@
  border-radius: 9px;
 }

+.explorer-tree-node-wrap.has-actions {
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+}
+
 .explorer-tree-node,
 .explorer-tree-toggle {
  border: 0;
@@ -2278,6 +2282,11 @@
  opacity: .55;
 }

+.explorer-tree-toggle.explorer-tree-toggle-static {
+  cursor: default;
+  pointer-events: none;
+}
+
 .explorer-tree-node {
  display: flex;
  align-items: center;
@@ -2297,6 +2306,44 @@
  white-space: nowrap;
 }

+.explorer-tree-node-content {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.explorer-tree-node-content strong,
+.explorer-tree-node-content small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.explorer-tree-node-content small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.explorer-tree-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding-right: 4px;
+}
+
+.explorer-tree-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 12px;
+}
+
+.explorer-tree-scroll-region {
+  max-height: 640px;
+  overflow: auto;
+}
+
 .explorer-tree-node-wrap:hover,
 .explorer-tree-node-wrap:focus-within,
 .explorer-tree-node-wrap.is-active {
--- a/webui/tests/explorer-tree.test.tsx
+++ b/webui/tests/explorer-tree.test.tsx
@@ -0,0 +1,55 @@
+function assert(condition: unknown, message = "assertion failed"): void {
+  if (!condition) throw new Error(message);
+}
+
+function count(markup: string, pattern: RegExp): number {
+  return markup.match(pattern)?.length ?? 0;
+}
+
+import { renderToStaticMarkup } from "react-dom/server";
+import ExplorerTree from "../src/components/ExplorerTree";
+import IconButton from "../src/components/IconButton";
+
+type TestNode = {
+  id: string;
+  label: string;
+  children: TestNode[];
+};
+
+function noop() {}
+
+const alpha: TestNode = { id: "alpha", label: "Alpha", children: [] };
+const beta: TestNode = { id: "beta", label: "Beta", children: [] };
+alpha.children.push(beta);
+beta.children.push(alpha);
+
+const markup = renderToStaticMarkup(
+  <ExplorerTree
+    nodes={[alpha, alpha]}
+    getNodeId={(node) => node.id}
+    getNodeLabel={(node) => node.label}
+    getNodeChildren={(node) => node.children}
+    activeId="beta"
+    collapsible={false}
+    onOpen={noop}
+    renderNodeContent={(node) => <span>{`node-${node.id}`}</span>}
+    renderNodeActions={(node) => (
+      <IconButton label={`Add below ${node.label}`} icon={<span>+</span>} onClick={noop} />
+    )}
+  />
+);
+
+assert(markup.includes("node-alpha"), "the root node is rendered");
+assert(markup.includes("node-beta"), "non-collapsible trees render descendants without expansion state");
+assert(count(markup, /node-alpha/g) === 1, "a cycle does not render an ancestor again");
+assert(count(markup, /node-beta/g) === 1, "duplicate paths do not duplicate descendants");
+assert(count(markup, /explorer-tree-toggle-static/g) === 2, "non-collapsible nodes render static tree affordances");
+assert(!markup.includes('<button type="button" class="explorer-tree-toggle'), "non-collapsible nodes do not expose dead toggle buttons");
+assert(markup.includes("explorer-tree-node-wrap file-tree-node-wrap has-actions"), "rows reserve a sibling action column only when used");
+assert(markup.includes('class="explorer-tree-actions" role="group"'), "node actions expose group semantics");
+assert(markup.includes('aria-label="Add below Alpha"'), "node action controls retain accessible labels");
+assert(
+  /node-alpha<\/span><\/button><div class="explorer-tree-actions"/.test(markup),
+  "node actions are siblings of the node button instead of nested interactive content"
+);
+assert(markup.includes('aria-current="true"'), "the active node is exposed to assistive technology");
--- a/webui/tsconfig.component-tests.json
+++ b/webui/tsconfig.component-tests.json
@@ -20,6 +20,7 @@
  "include": [
    "tests/data-grid-actions.test.tsx",
    "tests/dialog-focus.test.tsx",
+    "tests/explorer-tree.test.tsx",
    "tests/icon-button.test.tsx",
    "tests/mail-components.test.tsx",
    "tests/resource-access-explanation.test.tsx",
@@ -34,6 +35,7 @@
    "src/components/Button.tsx",
    "src/components/DismissibleAlert.tsx",
    "src/components/Dialog.tsx",
+    "src/components/ExplorerTree.tsx",
    "src/components/dialogInteractions.ts",
    "src/components/dialogStack.ts",
    "src/components/FormField.tsx",