Controls: Fix adding new values to arrays #32512
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
View your CI Pipeline Execution ↗ for commit 50afef0
☁️ Nx Cloud last updated this comment at |
ndelangen
approved these changes
Sep 24, 2025
Contributor
WalkthroughThe JsonArray class in JsonNodes.tsx changed the handleAddValueAdd method signature to accept only { newValue } instead of { key, newValue }. The method now computes key internally as data.length. The internal flow uses the derived key for beforeAddAction, updating the array data at the computed index, and emitting delta updates. No other control-flow changes are indicated. Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant C as JsonArray component
participant H as beforeAddAction hook
participant S as State/Data
participant E as Delta/Change Emitter
U->>C: Click "+" and Save new value
Note over C: New flow: no external key provided
C->>C: key = data.length
C->>H: beforeAddAction(key, newValue)
H-->>C: ok / continue
C->>S: Insert newValue at index=key
C->>E: Emit delta with key and newValue
E-->>U: UI reflects updated array
sequenceDiagram
autonumber
participant Old as Old Flow (pre-change)
participant New as New Flow (post-change)
rect rgb(240,240,255)
note right of Old: External key passed in params
Old->>Old: handleAddValueAdd({ key, newValue })
end
rect rgb(240,255,240)
note right of New: Key derived from data length
New->>New: handleAddValueAdd({ newValue })
New->>New: key = data.length
end
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
ndelangen
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx (2)
263-266: Minor: use push() for appendingSemantically clearer for appending to arrays.
- // Update data - data[key] = newValue; + // Update data + data.push(newValue);
255-255: Tighten param typingNarrow the destructured param type for clarity.
- handleAddValueAdd({ newValue }: any) { + handleAddValueAdd({ newValue }: { newValue: any }) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx(1 hunks)
⏰ 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: normal
- GitHub Check: Danger JS
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx (1)
255-282: Good fix — derive array index internally; callers don't pass a keyJsonAddValue only includes key when onlyValue is false; the array render sets onlyValue={true} so it never passes a key, while the object render uses the separate handler that accepts {key, newValue}.
16 tasks
ndelangen
added
the
needs qa
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 18 | 18 | 0 |
| Self size | 2.07 MB | 2.06 MB | 🎉 -11 KB 🎉 |
| Dependency size | 9.44 MB | 9.43 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-vitest
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 6 | 6 | 0 |
| Self size | 501 KB | 491 KB | 🎉 -11 KB 🎉 |
| Dependency size | 1.53 MB | 1.53 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 11 | 11 | 0 |
| Self size | 330 KB | 319 KB | 🎉 -10 KB 🎉 |
| Dependency size | 1.30 MB | 1.30 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/html-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 14 | 0 |
| Self size | 23 KB | 23 KB | 🚨 +18 B 🚨 |
| Dependency size | 1.67 MB | 1.66 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 531 | 531 | 0 |
| Self size | 950 KB | 939 KB | 🎉 -11 KB 🎉 |
| Dependency size | 58.43 MB | 58.41 MB | 🎉 -21 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 124 | 0 |
| Self size | 4.10 MB | 4.01 MB | 🎉 -81 KB 🎉 |
| Dependency size | 21.62 MB | 21.59 MB | 🎉 -31 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 14 | 0 |
| Self size | 14 KB | 14 KB | 🎉 -18 B 🎉 |
| Dependency size | 1.65 MB | 1.64 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 157 | 157 | 0 |
| Self size | 31 KB | 31 KB | 🎉 -24 B 🎉 |
| Dependency size | 23.01 MB | 22.97 MB | 🎉 -31 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 37 KB | 37 KB | 0 B |
| Dependency size | 19.56 MB | 19.53 MB | 🎉 -31 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 272 | 272 | 0 |
| Self size | 25 KB | 25 KB | 🚨 +18 B 🚨 |
| Dependency size | 43.35 MB | 43.33 MB | 🎉 -21 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 19 | 19 | 0 |
| Self size | 59 KB | 59 KB | 🎉 -52 B 🎉 |
| Dependency size | 26.79 MB | 26.78 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 20 | 0 |
| Self size | 58 KB | 48 KB | 🎉 -11 KB 🎉 |
| Dependency size | 26.85 MB | 26.84 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 109 | 0 |
| Self size | 38 KB | 38 KB | 0 B |
| Dependency size | 43.78 MB | 43.77 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 15 | 15 | 0 |
| Self size | 20 KB | 20 KB | 🎉 -18 B 🎉 |
| Dependency size | 1.70 MB | 1.68 MB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 187 | 0 |
| Self size | 905 KB | 890 KB | 🎉 -14 KB 🎉 |
| Dependency size | 79.76 MB | 79.76 MB | 🎉 -2 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-dom-shim
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 22 KB | 12 KB | 🎉 -10 KB 🎉 |
| Dependency size | 785 B | 785 B | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-create-react-app
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 68 | 68 | 0 |
| Self size | 36 KB | 26 KB | 🎉 -10 KB 🎉 |
| Dependency size | 5.97 MB | 5.97 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 2 | 2 | 0 |
| Self size | 894 KB | 884 KB | 🎉 -10 KB 🎉 |
| Dependency size | 28 KB | 18 KB | 🎉 -10 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
yannbf
removed
the
needs qa
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #32000
What I did
This PR fixes a bug in the functionality that adds new values to array controls. The feature wasn't working since the key was not passed while it requires an index to be in there.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
Bug Fixes
Refactor