[HendrikThePendric]

Implements DHIS2-21263 (client side, batch 3 of OuTree)

---

Description

Rendering for OuTree's browse mode, over the batch 2 data layer: a virtualised list that looks like OrganisationUnitTree, built from exported hooks and small style pieces with OuTree as a few lines of glue. Still over the stand-in; still not exported from any package.

• Rows are measured, with @tanstack/react-virtual: 24px by default, taller when a long name wraps or a custom label needs it. Rows are keyed by identity (node id, or parent and slot, rowKey), the row builder reuses every row whose content is unchanged, and the virtualiser's getItemKey changes only with the tree, so opening a node does not remount or re-measure the rows below it and scrolling costs nothing per row.
• Indentation and guide lines are markup: OuTreeRowShell renders one span.indent per level, each drawing its ancestor's line, so right-to-left needs no extra rule and a later batch can highlight one ancestor's lines across rows. No nesting of subtrees.
• Failures, one model for both kinds: red means failed, hover or keyboard focus colours the control and shows a sync icon at its end, one tooltip beside the control says what failed and that a click retries, and the control is a plain button. A node whose first page failed did not open: the row body is the button, hugging its content: the error icon in the arrow's place, the label and, on hover, the sync icon after it; and clicking it opens the node again, which requests the page again. Each empty slot of a failed later page, and each failed root, is a retry skeleton: a button that is itself the red error bar, named "Retry"; clicking any slot reloads the page. Roots load as one skeleton row per root id. Skeleton and retry bars share one silhouette, 20px tall with 2px above and below, and sit after the empty toggle slot, so they line up with labels and a loaded row keeps its place.
• Three layers, all exported from src/ou-tree/index.ts: hooks (useOuTree, useOuTreeNode, new useOuTreeActions for components that act on the tree without subscribing, new useOuTreeVirtualRows); styled pieces that take plain props and read nothing from the tree (OuTreeContainer, OuTreeVirtualSizer, OuTreeVirtualRow, OuTreeRowShell, OuTreeToggle with a leaf state, OuTreeNodeLabel, OuTreeLoader, OuTreeSkeleton, OuTreeRetrySkeleton, OuTreeRetryNode); glue with no styles (OuTreeNodeToggle, OuTreeNodeRow, OuTreeSkeletonRow, OuTreeErrorRow, OuTreeRow, OuTreeRootsRows, OuTreeList, OuTree).
• renderLabel is the one customisation convenience: it swaps what sits in the label slot and keeps the indent, toggle and loader. It must be a stable function, since rows are memoised on the row object. Batch 5's checkbox and single-selection labels go in that slot; while a node's children failed to load the slot sits inside the row's retry button, which batch 5's focus model has to resolve; that model should also replace both retry buttons, which are non-conforming children of a tree, with the treeitem's own action.
• Naming: the tree exposes rootIds (as given) and rootNodes (loaded, nested ones excluded); the component prop and the endpoint query parameter are rootIds, as DHIS2-21263 specifies (the dhis2-core PR still says roots). useOuTreeNode and renderLabel call the children status childrenStatus. The _País_Test unit is dropped from the PAHO fixture.
• Stories: the tree over the PAHO stand-in (default, initially open, long names, custom label, loading and errors, roots failed, right to left) and, in the same OuTree sidebar entry, a Building block: story per piece, each in each state with no tree behind it. The stand-in gained delay and a gist failWith for them, and the stand-in answers after 1.5 seconds so the Netlify preview demos every loading state; STORYBOOK_OU_TREE_DELAY=<milliseconds> sets another latency when Storybook starts, 0 included.

Deviations from the old look, on purpose: a long name wraps instead of overflowing sideways; the first-page error is an icon and a button in the row instead of text under it; the guide line runs through the last descendant's whole row; the toggle's hover no longer darkens the line. New dependencies on this package: @tanstack/react-virtual, @dhis2-ui/tooltip, @dhis2/ui-icons.

---

Known issues

• Failure states are visual only: the error message is in a tooltip, a failed node's button is named by its label and the retry skeletons are all named "Retry". Announcing failures to assistive technology is part of batch 5 (selection and keyboard), with the rest of the ARIA tree pattern.
• eslint prints a React Compiler warning on useVirtualizer (react-hooks/incompatible-library), a warning, not an error, and not suppressible without an eslint-disable.

---

Checklist

• API docs are generated (nothing is exported, so there is nothing to document)
• Tests were added
• Storybook demos were added

---

Screenshots

Initially open (AMR, Brazil, Minas Gerais); the first-page failure on Rio de Janeiro hovered, with its tooltip; the failed page 3 of Minas Gerais with one slot hovered; and a loading page beside leaf rows, the skeletons lined up with the labels.

🤖 Generated with Claude Code

[dhis2-bot]

🚀 Deployed on https://pr-1786--dhis2-ui.netlify.app

[sonarqubecloud]

Quality Gate failed

Failed conditions
4 New issues
B Reliability Rating on New Code (required ≥ A)
2 New Bugs (required ≤ 0)
2 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE