Integrate shared feature into content uploader

[dealwith]

Summary by CodeRabbit

• New Features

  • ContentUploader component now supports a modernized uploads manager implementation via an optional prop, with automatic item mapping and callback handling
  • Added Storybook story demonstrating the modernized uploads functionality

• Tests

  • Added comprehensive test coverage for modernized uploads rendering, callback routing, and item status mapping

• Chores

  • Updated Jest configuration for additional package support

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5c4cdaad-b26b-4441-b72a-a0e55d3c9179

📥 Commits

Reviewing files that changed from the base of the PR and between fa9ccea and b7bf9cc.

📒 Files selected for processing (6)

• scripts/jest/jest.config.js
• src/elements/content-uploader/ContentUploader.tsx
• src/elements/content-uploader/__tests__/ContentUploader.test.js
• src/elements/content-uploader/stories/ContentUploader.stories.js
• src/elements/content-uploader/utils/__tests__/mapToModernizedUploadItem.test.ts
• src/elements/content-uploader/utils/mapToModernizedUploadItem.ts

---

Walkthrough

The PR extends ContentUploader to support a modernized uploads manager implementation via a new enableModernizedUploads prop. It includes new item mapping utilities translating legacy upload shapes to modernized format, Jest configuration updates enabling those packages, component render logic switching between old and new managers, and comprehensive tests plus a Storybook variant documenting the feature.

Changes

Modernized Uploads Manager Feature

Layer / File(s)	Summary
Jest configuration for modernized uploads dependencies scripts/jest/jest.config.js	Expands Jest transformIgnorePatterns to include additional @box/* packages required by the modernized uploads implementation.
Modernized upload item mapping utilities src/elements/content-uploader/utils/mapToModernizedUploadItem.ts, src/elements/content-uploader/utils/__tests__/mapToModernizedUploadItem.test.ts	Defines ModernizedUploadItem shape and implements mapToModernizedUploadItem and mapToModernizedUploadItems functions translating legacy UploadItem format (with status constants and error objects) to modernized format (with string statuses and optional error messages). Tests verify field mapping, status translation, default values, and batch conversion.
ContentUploader integration with modernized manager src/elements/content-uploader/ContentUploader.tsx, src/elements/content-uploader/__tests__/ContentUploader.test.js	Adds enableModernizedUploads prop and refactors render logic into three branches: when enabled, renders UploadsManagerBP with mapped items and modernized callbacks; when legacy useUploadsManager is enabled, renders UploadsManager; otherwise renders droppable UI. Includes helper functions bridging modernized action and remove callbacks to legacy queue handlers. Tests validate conditional rendering, item mapping, state forwarding, and callback routing with coverage for unknown item ids.
Storybook story variant for modernized uploads src/elements/content-uploader/stories/ContentUploader.stories.js	Adds exported withModernizedUploads story demonstrating ContentUploader with enableModernizedUploads set to true.

Sequence Diagram

sequenceDiagram
  participant ContentUploader
  participant UploadsManagerBP as UploadsManagerBP<br/>(modernized)
  participant LegacyUploadsManager
  participant DroppableContent
  ContentUploader->>ContentUploader: Check enableModernizedUploads
  alt enableModernizedUploads=true
    ContentUploader->>ContentUploader: Map items via mapToModernizedUploadItems
    ContentUploader->>UploadsManagerBP: Render with mapped items
    UploadsManagerBP->>ContentUploader: onItemCancel callback
    ContentUploader->>ContentUploader: Bridge to onClick handler
    UploadsManagerBP->>ContentUploader: onItemRemove callback
    ContentUploader->>ContentUploader: Bridge to removeFileFromUploadQueue
  else useUploadsManager=true
    ContentUploader->>LegacyUploadsManager: Render legacy manager
  else neither enabled
    ContentUploader->>DroppableContent: Render droppable UI
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• box/box-ui-elements#4282: Both PRs directly modify scripts/jest/jest.config.js by extending the transformIgnorePatterns negated allowlist regex for specific @box/* packages.
• box/box-ui-elements#4505: Both PRs modify scripts/jest/jest.config.js to change the transformIgnorePatterns Jest allowlist (expanding @box/* packages and explicitly adding @box/content-field).

Suggested labels

ready-to-merge

Suggested reviewers

• tjiang-box
• olehrybak
• tjuanitas

Poem

🐰 Hops with glee at uploads refined,
Legacy and modern intertwined,
Props that switch with graceful care,
Items mapped beyond compare!
Jest unlocks the packages anew,
A modernized uploader breaks through!

✨ 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 integrate-shared-feature-into-content-uploader

---

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 and usage tips.}