add: presets in collection setting#6389
Conversation
WalkthroughAdds a Collection-level Presets feature: UI (PresetsSettings + StyledWrapper), Redux reducer/action to store presets, autosave middleware hookup, and using collection presets as defaults when creating new requests. Changes
Sequence DiagramsequenceDiagram
participant User
participant UI as PresetsSettings
participant Store as Redux Store
participant Middleware as Autosave Middleware
participant NewReq as NewRequest
User->>UI: choose request type & enter base URL
UI->>Store: dispatch updateCollectionPresets({ collectionUid, presets })
activate Store
Store->>Store: write presets to collection.draft.brunoConfig.presets
deactivate Store
Store->>Middleware: action observed (updateCollectionPresets)
activate Middleware
Middleware->>Middleware: schedule autosave for collection
deactivate Middleware
User->>NewReq: open "New Request"
NewReq->>Store: read collection (draft or saved) brunoConfig.presets
Store-->>NewReq: return presets
NewReq->>NewReq: apply requestType & requestUrl defaults
NewReq-->>User: initialized request with presets
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js (1)
10-26: Remove redundant / hardcoded textbox styles (prefer theme-only).
.textboxsetsborder/box-shadow/border-radiustwice and includes a hardcoded#cccthat gets overridden anyway. Consider trimming to the theme-driven declarations and (if possible) drop!importanton focus by relying on selector specificity. Based on learnings, prefer theme props for colors.packages/bruno-app/src/components/Sidebar/NewRequest/index.js (1)
76-102: Request type mapping is clear; consider centralizing the enum mapping later.This works, but the
'http'/'graphql'/'grpc'/'ws'↔ app*-requestmapping now exists in more than one place conceptually (Presets UI + NewRequest). If it grows, a small shared helper would reduce drift.Also applies to: 106-113
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (2)
1-7: Preferlodash/getimport style for consistency / bundle size.Most of this codebase seems to use
import get from 'lodash/get'. This file usesimport { get } from 'lodash', which can be heavier depending on tooling. Consider:-import { get } from 'lodash'; +import get from 'lodash/get';
47-85: Presets UI omits WebSocket, but New Request supports it—confirm this is intentional.NewRequest maps
presets.requestType === 'ws'→ws-request, but PresetsSettings offers only HTTP/GraphQL/gRPC. If WS presets are supported, add the radio option; if not, consider dropping the WS mapping to avoid “hidden” config states.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/CollectionSettings/Presets/index.js(1 hunks)packages/bruno-app/src/components/CollectionSettings/index.js(4 hunks)packages/bruno-app/src/components/Sidebar/NewRequest/index.js(3 hunks)packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js(1 hunks)packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/index.jspackages/bruno-app/src/components/Sidebar/NewRequest/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/index.jspackages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
🧠 Learnings (3)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Applied to files:
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component
Applied to files:
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/index.js
🧬 Code graph analysis (3)
packages/bruno-app/src/components/CollectionSettings/index.js (2)
packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js (1)
getTabClassname(85-89)packages/bruno-app/src/components/StatusDot/index.js (1)
StatusDot(4-12)
packages/bruno-app/src/components/Sidebar/NewRequest/index.js (2)
packages/bruno-cli/src/runner/prepare-request.js (1)
get(1-1)packages/bruno-app/src/components/Preferences/General/index.js (1)
formik(62-90)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (2)
packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js (2)
saveCollectionSettings(2184-2223)saveCollectionSettings(2184-2223)packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js (1)
StyledWrapper(3-27)
⏰ 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). (6)
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: Unit Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
🔇 Additional comments (2)
packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js (1)
4-76: Autosave intercept addition looks correct; ensureupdateCollectionPresetsalways carriespayload.collectionUid.This middleware assumes an intercepted action has a
payloadobject (Line 145 destructuring). Please ensurecollections/updateCollectionPresetsis always dispatched with{ collectionUid }(and doesn’t ever dispatchundefinedpayload), otherwise autosave will throw.Also applies to: 142-146
packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js (1)
2083-2098:updateCollectionPresetsreducer matches existing draft/brunoConfig patterns.Draft initialization +
set(collection, 'draft.brunoConfig.presets', action.payload.presets)is consistent with other collection-level brunoConfig updates.Also applies to: 3457-3470
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
6-16: Optional: droplodash/gethere; optional chaining is enough
This reduces deps/indirection in a simple read path.-import { get } from 'lodash'; ... - const currentPresets = collection.draft?.brunoConfig - ? get(collection, 'draft.brunoConfig.presets', initialPresets) - : get(collection, 'brunoConfig.presets', initialPresets); + const currentPresets = collection.draft?.brunoConfig?.presets + ?? collection.brunoConfig?.presets + ?? initialPresets;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/CollectionSettings/Presets/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js (2)
saveCollectionSettings(2184-2223)saveCollectionSettings(2184-2223)
⏰ 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). (6)
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
🔇 Additional comments (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
17-27: Overall structure looks solid (incl. WebSocket option + non-submit Save button)
State updates + save wiring are straightforward.Also applies to: 47-98, 124-128
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
100-122: Fix naming inconsistency: "Base URL" vs "Request URL".The label says "Base URL" but the placeholder still says "Request URL". This creates UX confusion.
<input id="request-url" type="text" name="requestUrl" - placeholder="Request URL" + placeholder="Base URL" className="block textbox"
🧹 Nitpick comments (2)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (2)
12-15: Consider simplifying preset retrieval.The ternary is redundant since
lodash.getalready handles undefined/null paths gracefully. You can simplify to a single call:- // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig - const currentPresets = collection.draft?.brunoConfig - ? get(collection, 'draft.brunoConfig.presets', initialPresets) - : get(collection, 'brunoConfig.presets', initialPresets); + // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig + const currentPresets = get(collection, 'draft.brunoConfig.presets') || get(collection, 'brunoConfig.presets', initialPresets);
41-98: Good fixes applied from previous reviews!The
htmlFornow correctly matches the first radio button id, and WebSocket has been added. Nice work addressing the feedback.Optional: Extract repeated default value.
The expression
(currentPresets.requestType || 'http')is repeated in all fourcheckedattributes. Consider extracting it:+ const requestType = currentPresets.requestType || 'http'; + return ( <StyledWrapper className="h-full w-full"> ... <input id="http" ... - checked={(currentPresets.requestType || 'http') === 'http'} + checked={requestType === 'http'} /> ... - checked={(currentPresets.requestType || 'http') === 'graphql'} + checked={requestType === 'graphql'} /> ... - checked={(currentPresets.requestType || 'http') === 'grpc'} + checked={requestType === 'grpc'} /> ... - checked={(currentPresets.requestType || 'http') === 'ws'} + checked={requestType === 'ws'}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/CollectionSettings/Presets/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (2)
packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js (2)
saveCollectionSettings(2184-2223)saveCollectionSettings(2184-2223)packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js (1)
StyledWrapper(3-27)
⏰ 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). (6)
- GitHub Check: SSL Tests - Windows
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (4)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (4)
1-10: LGTM!Clean imports and sensible default values for presets.
17-34: LGTM!Clean helper functions with proper Redux dispatch handling.
124-128: LGTM!Good fix—button is now
type="button"as recommended in previous reviews.
130-134: LGTM!Clean component structure and export.
Description
JIRA
Contribution Checklist:
Summary by CodeRabbit
New Features
Behavior
Style
✏️ Tip: You can customize this high-level summary in your review settings.