feat: add client version to element api calls #4198

tjuanitas · 2025-07-23T02:24:54Z

Summary by CodeRabbit

New Features
- The application now includes client version information when initializing API clients across multiple components.
Chores
- Updated build and release scripts for language and locale asset generation.
- Enhanced version management script with new get/set commands.
- Centralized global version declaration and usage.
- Refactored Jest setup for more concise global mocks and overrides.
- Added environment-dependent version constant for Storybook configuration.
Refactor
- Removed legacy version assignment in wrapper components.

coderabbitai · 2025-07-23T02:25:01Z

Walkthrough

This update standardizes how the client version is defined and propagated throughout the codebase. It introduces a global __VERSION__ constant, configures its value via build and test setups, and ensures all API constructors receive the client version through a new CLIENT_VERSION constant. Related scripts and configuration files are refactored for clarity and consistency.

Changes

File(s)	Change Summary
.storybook/main.ts	Adds DefinePlugin to inject a global `__VERSION__` constant based on `NODE_ENV`.
package.json	Updates script commands to reference new script filenames for i18n and CDN release tasks.
scripts/jest/jest-setup.ts	Refactors Jest setup to centrally define global mocks, including `__VERSION__ = 'test'`.
scripts/version.sh	Refactors into functions for getting/setting version; adds command dispatch for version management.
src/constants.js	Declares global `__VERSION__` and exports `CLIENT_VERSION = __VERSION__`.
src/elements/content-explorer/...ContentExplorer.ts	Passes `CLIENT_VERSION` as `version` to the API constructor.
src/elements/content-open-with/...ContentOpenWith.js	Passes `CLIENT_VERSION` as `version` to the API constructor.
src/elements/content-picker/...ContentPicker.js	Passes `CLIENT_VERSION` as `version` to the API constructor.
src/elements/content-preview/...ContentPreview.js	Passes `CLIENT_VERSION` as `version` to the API constructor.
src/elements/content-sharing/...ContentSharing.js	Passes `CLIENT_VERSION` as `version` to the API initialization object.
src/elements/content-sidebar/...ContentSidebar.js	Passes `CLIENT_VERSION` as `version` to the API constructor.
src/elements/content-uploader/...ContentUploader.ts	Adds `version: CLIENT_VERSION` to the return value of `getBaseAPIOptions()`.
src/elements/wrappers/ES6Wrapper.js	Removes `__VERSION__` usage and declaration from the wrapper.

Sequence Diagram(s)

sequenceDiagram
    participant BuildProcess
    participant DefinePlugin
    participant Global
    participant APIConsumer
    participant API

    BuildProcess->>DefinePlugin: Set __VERSION__ (env-dependent)
    DefinePlugin->>Global: Injects __VERSION__
    APIConsumer->>Global: Import CLIENT_VERSION = __VERSION__
    APIConsumer->>API: Pass { version: CLIENT_VERSION }
    API->>API: Use version for requests/config

Estimated code review effort

2 (~18 minutes)

Suggested labels

ready-to-merge

Suggested reviewers

jmcbgaston
jpan-box

Poem

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6c7c6c2 and affdd90.

📒 Files selected for processing (3)

src/elements/content-explorer/ContentExplorer.tsx (2 hunks)
src/elements/content-picker/ContentPicker.js (2 hunks)
src/elements/content-uploader/ContentUploader.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

src/elements/content-explorer/ContentExplorer.tsx
src/elements/content-uploader/ContentUploader.tsx
src/elements/content-picker/ContentPicker.js

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: lint_test_build
GitHub Check: Analyze (javascript-typescript)
GitHub Check: Summary

✨ Finishing Touches

📝 Generate Docstrings

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

♻️ Duplicate comments (1)

🧹 Nitpick comments (1)

scripts/version.sh (1)

7-9: Consider adding error handling to the set_version function.

The set_version function looks good but could benefit from error handling to ensure the jq command succeeds before replacing the original file.

 set_version() {
-    jq --arg version "$1" '.version = $version' package.json > package.json.tmp && mv package.json.tmp package.json
+    if jq --arg version "$1" '.version = $version' package.json > package.json.tmp; then
+        mv package.json.tmp package.json
+    else
+        rm -f package.json.tmp
+        echo "Error: Failed to update version in package.json" >&2
+        exit 1
+    fi
 }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1506020 and 82f996a.

📒 Files selected for processing (13)

.storybook/main.ts (2 hunks)
package.json (2 hunks)
scripts/jest/jest-setup.ts (1 hunks)
scripts/version.sh (1 hunks)
src/constants.js (3 hunks)
src/elements/content-explorer/ContentExplorer.tsx (2 hunks)
src/elements/content-open-with/ContentOpenWith.js (2 hunks)
src/elements/content-picker/ContentPicker.js (2 hunks)
src/elements/content-preview/ContentPreview.js (2 hunks)
src/elements/content-sharing/ContentSharing.js (2 hunks)
src/elements/content-sidebar/ContentSidebar.js (2 hunks)
src/elements/content-uploader/ContentUploader.tsx (2 hunks)
src/elements/wrappers/ES6Wrapper.js (0 hunks)

🧠 Learnings (10)

src/elements/content-sharing/ContentSharing.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-preview/ContentPreview.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-picker/ContentPicker.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-sidebar/ContentSidebar.js (2)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

Learnt from: rafalmaksymiuk
PR: #4144
File: src/elements/content-sidebar/versions/VersionsList.js:24-33
Timestamp: 2025-06-17T13:30:02.172Z
Learning: In the box-ui-elements codebase, Flow components use .flow.js type definition files, not TypeScript .ts files. The InternalSidebarNavigation type is a union type where different variants may have different properties like versionId, and proper type safety is ensured through conditional checks in methods like getSelectedVersionId.

src/elements/content-explorer/ContentExplorer.tsx (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-open-with/ContentOpenWith.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-uploader/ContentUploader.tsx (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

.storybook/main.ts (2)

Learnt from: tjuanitas
PR: #4126
File: scripts/buildTranslations.js:1-8
Timestamp: 2025-06-17T15:16:46.279Z
Learning: The buildTranslations and buildLanguageBundles functions from @box/frontend package are synchronous functions that already handle errors internally, so additional error handling wrappers and await keywords are not needed.

Learnt from: jpan-box
PR: #4166
File: src/elements/content-sidebar/SidebarNav.js:126-126
Timestamp: 2025-07-11T14:43:02.677Z
Learning: In the box-ui-elements repository, there's a file-type-based pattern for internationalization: TypeScript files (.tsx) predominantly use the modern useIntl hook (41 vs 15 files), while JavaScript files (.js) predominantly use the legacy injectIntl HOC (64 vs 5 files). New TypeScript components should use useIntl, while existing JavaScript components typically continue using injectIntl for consistency.

scripts/jest/jest-setup.ts (1)

Learnt from: jpan-box
PR: #4166
File: src/elements/content-sidebar/SidebarNav.js:126-126
Timestamp: 2025-07-11T14:43:02.677Z
Learning: In the box-ui-elements repository, there's a file-type-based pattern for internationalization: TypeScript files (.tsx) predominantly use the modern useIntl hook (41 vs 15 files), while JavaScript files (.js) predominantly use the legacy injectIntl HOC (64 vs 5 files). New TypeScript components should use useIntl, while existing JavaScript components typically continue using injectIntl for consistency.

package.json (3)

Learnt from: tjuanitas
PR: #4126
File: scripts/buildLocaleBundles.js:39-40
Timestamp: 2025-06-17T15:19:52.028Z
Learning: In scripts/buildLocaleBundles.js, the user intentionally wants to kill ALL running build:prod:dist processes on error (not just the ones spawned by the script) for comprehensive cleanup. They've confirmed that tracking individual PIDs from execSync is not feasible and their current approach serves their intended purpose.

Learnt from: tjuanitas
PR: #4126
File: scripts/buildTranslations.js:1-8
Timestamp: 2025-06-17T15:16:46.279Z
Learning: The buildTranslations and buildLanguageBundles functions from @box/frontend package are synchronous functions that already handle errors internally, so additional error handling wrappers and await keywords are not needed.

Learnt from: tjuanitas
PR: #4126
File: scripts/webpack.config.js:72-76
Timestamp: 2025-06-17T15:21:36.180Z
Learning: The Box UI Elements project does not run webpack builds on Windows machines, so Windows path separator compatibility is not a concern for their build scripts.

🧬 Code Graph Analysis (8)

src/elements/content-sharing/ContentSharing.js (1)

src/elements/content-preview/ContentPreview.js (1)

src/elements/content-picker/ContentPicker.js (1)

src/elements/content-sidebar/ContentSidebar.js (1)

src/elements/content-explorer/ContentExplorer.tsx (1)

src/elements/content-open-with/ContentOpenWith.js (1)

src/elements/content-uploader/ContentUploader.tsx (1)

.storybook/main.ts (1)

💤 Files with no reviewable changes (1)

src/elements/wrappers/ES6Wrapper.js

🧰 Additional context used

🧠 Learnings (10)

src/elements/content-sharing/ContentSharing.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-preview/ContentPreview.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-picker/ContentPicker.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-sidebar/ContentSidebar.js (2)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

Learnt from: rafalmaksymiuk
PR: #4144
File: src/elements/content-sidebar/versions/VersionsList.js:24-33
Timestamp: 2025-06-17T13:30:02.172Z
Learning: In the box-ui-elements codebase, Flow components use .flow.js type definition files, not TypeScript .ts files. The InternalSidebarNavigation type is a union type where different variants may have different properties like versionId, and proper type safety is ensured through conditional checks in methods like getSelectedVersionId.

src/elements/content-explorer/ContentExplorer.tsx (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-open-with/ContentOpenWith.js (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

src/elements/content-uploader/ContentUploader.tsx (1)

Learnt from: rafalmaksymiuk
PR: #4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: VersionSidebarView intentionally uses the versionId field to stay consistent with current URL parameter naming; a potential rename to fileVersionId is deferred until React Router is removed.

.storybook/main.ts (2)

Learnt from: tjuanitas
PR: #4126
File: scripts/buildTranslations.js:1-8
Timestamp: 2025-06-17T15:16:46.279Z
Learning: The buildTranslations and buildLanguageBundles functions from @box/frontend package are synchronous functions that already handle errors internally, so additional error handling wrappers and await keywords are not needed.

Learnt from: jpan-box
PR: #4166
File: src/elements/content-sidebar/SidebarNav.js:126-126
Timestamp: 2025-07-11T14:43:02.677Z
Learning: In the box-ui-elements repository, there's a file-type-based pattern for internationalization: TypeScript files (.tsx) predominantly use the modern useIntl hook (41 vs 15 files), while JavaScript files (.js) predominantly use the legacy injectIntl HOC (64 vs 5 files). New TypeScript components should use useIntl, while existing JavaScript components typically continue using injectIntl for consistency.

scripts/jest/jest-setup.ts (1)

Learnt from: jpan-box
PR: #4166
File: src/elements/content-sidebar/SidebarNav.js:126-126
Timestamp: 2025-07-11T14:43:02.677Z
Learning: In the box-ui-elements repository, there's a file-type-based pattern for internationalization: TypeScript files (.tsx) predominantly use the modern useIntl hook (41 vs 15 files), while JavaScript files (.js) predominantly use the legacy injectIntl HOC (64 vs 5 files). New TypeScript components should use useIntl, while existing JavaScript components typically continue using injectIntl for consistency.

package.json (3)

Learnt from: tjuanitas
PR: #4126
File: scripts/buildLocaleBundles.js:39-40
Timestamp: 2025-06-17T15:19:52.028Z
Learning: In scripts/buildLocaleBundles.js, the user intentionally wants to kill ALL running build:prod:dist processes on error (not just the ones spawned by the script) for comprehensive cleanup. They've confirmed that tracking individual PIDs from execSync is not feasible and their current approach serves their intended purpose.

Learnt from: tjuanitas
PR: #4126
File: scripts/buildTranslations.js:1-8
Timestamp: 2025-06-17T15:16:46.279Z
Learning: The buildTranslations and buildLanguageBundles functions from @box/frontend package are synchronous functions that already handle errors internally, so additional error handling wrappers and await keywords are not needed.

Learnt from: tjuanitas
PR: #4126
File: scripts/webpack.config.js:72-76
Timestamp: 2025-06-17T15:21:36.180Z
Learning: The Box UI Elements project does not run webpack builds on Windows machines, so Windows path separator compatibility is not a concern for their build scripts.

🧬 Code Graph Analysis (8)

src/elements/content-sharing/ContentSharing.js (1)

src/elements/content-preview/ContentPreview.js (1)

src/elements/content-picker/ContentPicker.js (1)

src/elements/content-sidebar/ContentSidebar.js (1)

src/elements/content-explorer/ContentExplorer.tsx (1)

src/elements/content-open-with/ContentOpenWith.js (1)

src/elements/content-uploader/ContentUploader.tsx (1)

.storybook/main.ts (1)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: lint_test_build
GitHub Check: Analyze (javascript-typescript)
GitHub Check: Summary

🔇 Additional comments (16)

tjuanitas added 4 commits July 22, 2025 17:21

chore: add script to set package.json version

31901da

feat: add client version to element api calls

2915487

feat: add version in storybook

688469b

fix: missing test variable

82f996a

tjuanitas requested review from a team as code owners July 23, 2025 02:24

fix: update script permissions

6c7c6c2

coderabbitai bot reviewed Jul 23, 2025

View reviewed changes

fix: i before e

affdd90

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add client version to element api calls #4198

feat: add client version to element api calls #4198

Uh oh!

tjuanitas commented Jul 23, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jul 23, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

feat: add client version to element api calls #4198

Are you sure you want to change the base?

feat: add client version to element api calls #4198

Uh oh!

Conversation

tjuanitas commented Jul 23, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tjuanitas commented Jul 23, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 23, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)