feat(metadata-editor): wire new MetadataTaxonomyPicker into redesigned sidebar

[AnnaStepchenko]

Summary

Wires the new MetadataTaxonomyPicker (from @box/metadata-taxonomy-picker, consumed via @box/metadata-editor) into the redesigned metadata sidebar behind a new metadata.taxonomyPicker.enabled feature flag. When the flag is off, the sidebar keeps rendering the legacy MultilevelTaxonomyField — no behavior change for existing consumers.

What's in this PR

Fetcher — src/elements/content-sidebar/fetchers/metadataTaxonomyFetcher.ts

• New createTaxonomyItemsService factory that returns per-field TaxonomyItemsServices (browse + search) backed by the existing /metadata_templates/.../options endpoint.
• Requests are scoped to the correct level based on the field's optionsRules.selectableLevels:
• Single-level picker (selectableLevels has exactly one entry): loads that level directly (level=N, no ancestor) and marks every returned node as a leaf so no drill-down chevron renders.
• Multi-level picker (selectableLevels.length > 1): starts at level 1 and drills down on demand, tracking each returned node's level so it can request parentLevel + 1 with ancestor=<parentId>.

Sidebar wiring

• MetadataSidebarRedesign.tsx — reads the new metadata.taxonomyPicker.enabled flag, resolves the editing template's field config (levels + optionsRules.selectableLevels), memoizes a createTaxonomyItemsService instance, and threads it into MetadataInstanceEditor.
• MetadataInstanceEditor.tsx — accepts the new isMetadataTaxonomyPickerEnabled and createTaxonomyItemsService props and forwards them to MetadataInstanceForm (as isTaxonomyPickerEnabled and createTaxonomyItemsService).

Summary by CodeRabbit

• New Features

  • Added taxonomy picker support in the content sidebar for both single-level and multi-level taxonomy fields.
  • Improved taxonomy browsing and search behavior, including clearer breadcrumb-style ancestry and better handling of selectable items.

• Bug Fixes

  • Fixed inconsistent taxonomy field data handling so labels, ancestors, and child availability display more reliably.
  • Improved taxonomy navigation when switching between browse and search results.

• Tests

  • Expanded visual and behavior coverage for taxonomy picker flows.

[coderabbitai]

Walkthrough

Adds a taxonomy items service factory (createTaxonomyItemsService) to the metadata taxonomy fetcher, exposes an isMetadataTaxonomyPickerEnabled flag and createTaxonomyItemsService prop through MetadataInstanceEditor and MetadataSidebarRedesign, normalizes ancestor/display-name fields in fetchers, and extends tests and visual stories.

Changes

Metadata Taxonomy Picker Service

Layer / File(s)	Summary
Taxonomy items service factory and fetcher normalization src/elements/content-sidebar/fetchers/metadataTaxonomyFetcher.ts	Adds createTaxonomyItemsService with helpers for level tracking, ancestor mapping, hasChildren derivation, and node/search mapping; normalizes displayName, selectable, ancestors, and totalResultCount in existing fetchers.
MetadataInstanceEditor and MetadataSidebarRedesign wiring src/elements/content-sidebar/MetadataInstanceEditor.tsx, src/elements/content-sidebar/MetadataSidebarRedesign.tsx	Adds isMetadataTaxonomyPickerEnabled/createTaxonomyItemsService props to the editor and forwards them to the form; the sidebar derives the feature flag, resolves per-template taxonomy field config, memoizes the service, and conditionally passes it down.
Fetcher and service unit tests src/elements/content-sidebar/__tests__/metadataTaxonomyFetcher.test.ts	Updates fixtures for revised field naming/casing and adds a large createTaxonomyItemsService test suite covering browse/search, drill-down, pagination, ancestor scoping, and cache isolation.
Visual story coverage for taxonomy picker src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx	Adds a taxonomy-picker feature-flag bundle, an editor-open helper, and four new story variants for multilevel/singlelevel view/edit with the picker enabled.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MetadataSidebarRedesign
  participant MetadataInstanceEditor
  participant createTaxonomyItemsService
  participant getMetadataOptions

  MetadataSidebarRedesign->>MetadataSidebarRedesign: resolveTaxonomyFieldConfig(template)
  MetadataSidebarRedesign->>createTaxonomyItemsService: build service (memoized)
  MetadataSidebarRedesign->>MetadataInstanceEditor: pass isMetadataTaxonomyPickerEnabled, createTaxonomyItemsService
  MetadataInstanceEditor->>createTaxonomyItemsService: getNodes(level, ancestorId) / searchNodes(query)
  createTaxonomyItemsService->>getMetadataOptions: fetch options with level/ancestorId/marker
  getMetadataOptions-->>createTaxonomyItemsService: entries, marker, total_result_count
  createTaxonomyItemsService-->>MetadataInstanceEditor: TaxonomyNode[] / TaxonomySearchResult[]

Loading

Possibly related PRs

• box/box-ui-elements#4192: Both PRs modify metadataTaxonomyFetcher.ts and its tests to adjust returned taxonomy/option fields and pagination fields.
• box/box-ui-elements#4354: Renames getMetadataOptions request params, matching the field/casing updates this PR depends on for taxonomy item resolution.

Suggested labels: ready-to-merge

Suggested reviewers: bkepka-box, jfox-box, tjuanitas

Poem

A rabbit hops through levels deep,
Ancestors mapped while others sleep,
One flag flips on, the picker wakes,
New nodes and leaves the service makes.
🐇🌿 Hop, drill down, and cache with care —
Taxonomy trails now everywhere!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: wiring the new taxonomy picker into the redesigned sidebar.
Description check	✅ Passed	The description is sufficiently complete, with a clear summary and implementation details that cover the main changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch taxonomy-picker-update-for-preview

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/elements/content-sidebar/__tests__/metadataTaxonomyFetcher.test.ts (1)

623-630: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Assert the positional level arg here to fully cover the "safe default" contract.

This test verifies options has no level, but does not assert the positional level argument (mock.calls[0][4]). Given getNodes always passes a computed childLevel positionally (see metadataTaxonomyFetcher.ts), the unrestricted-browse guarantee isn't actually exercised. Adding an assertion on mock.calls[0][4] would catch the divergence from searchNodes.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/elements/content-sidebar/__tests__/metadataTaxonomyFetcher.test.ts`
around lines 623 - 630, The safe-default test only checks the options object and
misses the positional level argument passed by
createTaxonomyItemsService/getNodes. Update the test in
metadataTaxonomyFetcher.test.ts to also assert the fifth mock call argument
(mock.calls[0][4]) for the expected unrestricted-browse childLevel behavior, so
it covers the same contract that getNodes and searchNodes rely on.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/elements/content-sidebar/__tests__/metadataTaxonomyFetcher.test.ts`:
- Around line 623-630: The safe-default test only checks the options object and
misses the positional level argument passed by
createTaxonomyItemsService/getNodes. Update the test in
metadataTaxonomyFetcher.test.ts to also assert the fifth mock call argument
(mock.calls[0][4]) for the expected unrestricted-browse childLevel behavior, so
it covers the same contract that getNodes and searchNodes rely on.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5f2f1982-179b-40c7-b4a6-5912790a1336

📥 Commits

Reviewing files that changed from the base of the PR and between 1ebc004 and 0ee8334.

📒 Files selected for processing (5)

• src/elements/content-sidebar/MetadataInstanceEditor.tsx
• src/elements/content-sidebar/MetadataSidebarRedesign.tsx
• src/elements/content-sidebar/__tests__/metadataTaxonomyFetcher.test.ts
• src/elements/content-sidebar/fetchers/metadataTaxonomyFetcher.ts
• src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

[alexkirillovtech]

lgtm