Feat/folder overview #6299
Feat/folder overview #6299
Conversation
tlaloc911
requested review from
bijin-bruno,
helloanoop,
lohit-bruno and
naman-bruno
as code owners
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds an Overview panel for FolderSettings with two new subcomponents (Info, Docs), replaces the previous Docs tab with an Overview tab, and updates tests to explicitly activate the Headers tab before header creation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OverviewUI as Overview (UI)
participant DocsComp as Docs Component
participant Redux as Redux Actions/Store
participant Backend as Persistence/API
User->>OverviewUI: open FolderSettings -> selects Overview tab
OverviewUI->>DocsComp: render docs (view mode) / double-click to edit
User->>DocsComp: edit content (CodeEditor) -> onEdit
DocsComp->>Redux: dispatch updateFolderDocs(draft)
Redux->>Redux: update draft state
User->>DocsComp: click Save
DocsComp->>Redux: dispatch saveFolderRoot(rootDocs)
Redux->>Backend: persist folder root docs
Backend-->>Redux: persist success
Redux-->>DocsComp: update state (saved)
DocsComp-->>OverviewUI: exit editing mode / render saved docs
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This pull request adds a new "Overview" tab to the folder settings interface, which consolidates folder information and documentation in a single view. The Overview tab becomes the default landing page when opening folder settings, replacing the previous default "Headers" tab.
- Introduces an Overview tab with folder statistics (requests, subfolders, location) and embedded documentation
- Refactors the documentation functionality into a dedicated Docs component within the Overview section
- Updates the default folder settings tab from 'headers' to 'overview' for improved UX
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-app/src/components/FolderSettings/index.js | Updates tab structure to replace standalone "Docs" tab with "Overview" tab; changes default tab to 'overview' |
| packages/bruno-app/src/components/FolderSettings/Overview/index.js | Creates new Overview component with two-column layout for folder info and documentation |
| packages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.js | Adds empty styled wrapper component (currently unused) |
| packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js | Implements folder information display showing location, request counts, and subfolder statistics |
| packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js | Refactors documentation editor with enhanced UI including icons, improved edit/cancel controls, and placeholder content |
| packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js | Adds styled wrapper for documentation component with editing mode styling |
Comments suppressed due to low confidence (1)
packages/bruno-app/src/components/FolderSettings/Overview/index.js:1
- Unused import StyledWrapper.
import StyledWrapper from './StyledWrapper';
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/bruno-app/src/components/FolderSettings/Overview/index.js
Outdated
Show resolved
Hide resolved
| <div className="font-medium">Requests</div> | ||
| <div className="mt-1 text-muted text-xs"> | ||
| { | ||
| isFolderLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the folder loaded` : `${totalRequestsInFolder} request${totalRequestsInFolder !== 1 ? 's' : ''} in folder` |
There was a problem hiding this comment.
The message "requests in the folder loaded" is grammatically incorrect. It should be "requests in the folder have been loaded" or simply "requests loaded".
| isFolderLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the folder loaded` : `${totalRequestsInFolder} request${totalRequestsInFolder !== 1 ? 's' : ''} in folder` | |
| isFolderLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the folder have been loaded` : `${totalRequestsInFolder} request${totalRequestsInFolder !== 1 ? 's' : ''} in folder` |
| <div className="editing-mode" role="tab" onClick={handleDiscardChanges}> | ||
| <IconX className="cursor-pointer" size={20} strokeWidth={1.5} /> | ||
| </div> | ||
| <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}> | ||
| Save | ||
| </button> | ||
| </> | ||
| ) : ( | ||
| <div className="editing-mode" role="tab" onClick={toggleViewMode}> | ||
| <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} /> | ||
| </div> |
There was a problem hiding this comment.
Using role="tab" on a button element is semantically incorrect. This element is a button for discarding changes, not a tab. Consider removing the role attribute or changing it to role="button" with appropriate aria-label for better accessibility.
| <div className="editing-mode" role="tab" onClick={handleDiscardChanges}> | |
| <IconX className="cursor-pointer" size={20} strokeWidth={1.5} /> | |
| </div> | |
| <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}> | |
| Save | |
| </button> | |
| </> | |
| ) : ( | |
| <div className="editing-mode" role="tab" onClick={toggleViewMode}> | |
| <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} /> | |
| </div> | |
| <button | |
| className="editing-mode" | |
| type="button" | |
| aria-label="Discard changes" | |
| onClick={handleDiscardChanges} | |
| > | |
| <IconX className="cursor-pointer" size={20} strokeWidth={1.5} /> | |
| </button> | |
| <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}> | |
| Save | |
| </button> | |
| </> | |
| ) : ( | |
| <button | |
| className="editing-mode" | |
| type="button" | |
| aria-label="Edit documentation" | |
| onClick={toggleViewMode} | |
| > | |
| <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} /> | |
| </button> |
| </button> | ||
| </> | ||
| ) : ( | ||
| <div className="editing-mode" role="tab" onClick={toggleViewMode}> |
There was a problem hiding this comment.
Using role="tab" on a div that functions as an edit button is semantically incorrect. This element is a button for toggling edit mode, not a tab. Consider removing the role attribute or changing it to role="button" with appropriate aria-label for better accessibility.
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/FolderSettings/index.js (1)
11-21: Handle legacy 'docs' tab values and unknown tab keysPersisted
folderLevelSettingsSelectedTabentries may still contain'docs'from previous versions, but the new switch no longer has a'docs'case. In that situation,getTabPanel('docs')returnsundefinedand no tab appears active.I’d suggest:
- Mapping old
'docs'values to'overview'when restoring the tab, and- Adding a defensive default in
getTabPanelso unknown values still render Overview.For example:
- let tab = 'overview'; - const { folderLevelSettingsSelectedTab } = collection; - if (folderLevelSettingsSelectedTab?.[folder?.uid]) { - tab = folderLevelSettingsSelectedTab[folder?.uid]; - } + let tab = 'overview'; + const { folderLevelSettingsSelectedTab } = collection; + const persistedTab = folderLevelSettingsSelectedTab?.[folder?.uid]; + if (persistedTab === 'docs') { + tab = 'overview'; + } else if (persistedTab) { + tab = persistedTab; + } @@ const getTabPanel = (tab) => { switch (tab) { case 'overview': { return <Overview collection={collection} folder={folder} />; } + // Fallback for unknown/legacy values + default: { + return <Overview collection={collection} folder={folder} />; + } } };This keeps existing users with a stored
'docs'tab on a sane default while supporting future tab key changes.Also applies to: 47-68, 80-104
🧹 Nitpick comments (2)
packages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.js (1)
1-5: Empty Overview StyledWrapper is currently a no-opRight now this wrapper has no styles, so it only adds an extra layer of indirection. Either plan to move non-layout styling (colors, typography) into it, or consider inlining it to reduce indirection.
As per coding guidelines, avoid abstractions that don’t yet add value.
packages/bruno-app/src/components/FolderSettings/Overview/index.js (1)
1-25: Confirm JSX runtime / React import and consider documenting OverviewThis file uses JSX but doesn’t import
React. If the project hasn’t fully switched to the new JSX transform with automatic runtime, this will fail to build; in that case you’ll need:+import React from 'react'; import StyledWrapper from './StyledWrapper'; import Docs from './Docs'; import Info from './Info';Also, consider adding a brief JSDoc describing that Overview renders the two-column Folder header/Info + Docs layout, and (optionally) wrapping the root markup in
StyledWrapperonce you introduce theme-based styling here.As per coding guidelines.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/index.js(1 hunks)packages/bruno-app/src/components/FolderSettings/index.js(3 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, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions:() => {}
No space between function name and parentheses:func()notfunc ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments
Files:
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Overview/Docs/index.jspackages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Overview/index.jspackages/bruno-app/src/components/FolderSettings/Overview/Info/index.jspackages/bruno-app/src/components/FolderSettings/index.js
🧠 Learnings (4)
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles
Applied to files:
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors
Applied to files:
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : In styled components and React components using styled components, use the theme prop to manage CSS colors instead of CSS variables
Applied to files:
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Add JSDoc comments to provide details to abstractions
Applied to files:
packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js
🧬 Code graph analysis (5)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js (4)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js (1)
StyledWrapper(3-8)packages/bruno-app/src/components/Icons/IconEdit/index.js (1)
IconEdit(3-17)packages/bruno-app/src/components/CodeEditor/index.js (1)
CodeEditor(27-339)packages/bruno-app/src/components/MarkDown/index.jsx (1)
Markdown(7-49)
packages/bruno-app/src/components/FolderSettings/Overview/StyledWrapper.js (1)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js (1)
StyledWrapper(3-8)
packages/bruno-app/src/components/FolderSettings/Overview/index.js (3)
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js (1)
Info(6-66)packages/bruno-app/src/components/FolderSettings/index.js (1)
collection(18-18)packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js (1)
Docs(13-94)
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js (1)
packages/bruno-app/src/components/FolderSettings/index.js (1)
collection(18-18)
packages/bruno-app/src/components/FolderSettings/index.js (3)
packages/bruno-app/src/components/CollectionSettings/index.js (4)
dispatch(20-20)tab(21-21)getTabClassname(91-95)setTab(22-29)packages/bruno-app/src/components/FolderSettings/Documentation/index.js (1)
dispatch(13-13)packages/bruno-app/src/components/FolderSettings/Overview/index.js (1)
Overview(6-23)
⏰ 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). (7)
- GitHub Check: Agent
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: Unit Tests
- GitHub Check: CLI Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
🔇 Additional comments (2)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/StyledWrapper.js (1)
1-10: Theme-based editing state styling looks good
.editing-modeuses the theme for color and keeps behavior simple; no changes needed here.Based on learnings, this aligns with styled-components color guidance.
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js (1)
1-65: Verify collection utilities signature and add defensive checksSeveral items to address:
- Line 7: Confirm that
getTotalRequestCountInCollection(folder)is the correct signature. Some collection utility functions expect(collection, item)parameters—verify this matches the actual implementation to ensure accurate request counting.- Lines 15–16: Add a null safety check before calling
.map()ontreePath, asgetTreePathFromCollectionToItemmay returnnullorundefined:const relativePath = (treePath || []).map((item) => item.name).join(' / ') || '/';- Lines 24–25, 37–38, 52–53: Audit the direct use of Tailwind color classes (
bg-green-50,text-green-500,bg-purple-50, etc.). Verify whether the project's styling guidelines require colors to be sourced from a theme (e.g., styled-components or Tailwind config) rather than hardcoded class names.- Optional: Add a JSDoc comment to document the expected shapes of
collectionandfolderprops.
- Discard currently doesn’t revert docs to the last saved state - The StyledWrapper import is unused in this file. It should be removed to keep the imports clean. -Consider consolidating (imports) them into a single import statement for better maintainability.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js (1)
40-44: Tighten the loading message grammar for the Requests rowThe phrase
requests in the folder loadedis slightly off; consider “have been loaded” for clarity. For example:- isFolderLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the folder loaded` : `${totalRequestsInFolder} request${totalRequestsInFolder !== 1 ? 's' : ''} in folder` + isFolderLoading + ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the folder have been loaded` + : `${totalRequestsInFolder} request${totalRequestsInFolder !== 1 ? 's' : ''} in folder`
🧹 Nitpick comments (1)
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js (1)
5-16: Add a brief JSDoc to document expectedcollectionandfoldershapeGiven this is a shared Overview panel that relies on
collection/folderstructure (items, type, name), a short JSDoc onInfowould help future readers understand the expected props without chasing the utilities.Example:
-const Info = ({ collection, folder }) => { +/** + * Renders folder metadata such as location within the collection, + * request counts (including loading state), and direct subfolder count. + * + * @param {{ items?: any[] }} collection - Root collection object containing the folder. + * @param {{ items?: any[] }} folder - Folder node whose overview is being displayed. + */ +const Info = ({ collection, folder }) => {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/Info/index.js(1 hunks)packages/bruno-app/src/components/FolderSettings/Overview/index.js(1 hunks)tests/collection/draft/draft-indicator.spec.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/bruno-app/src/components/FolderSettings/Overview/Docs/index.js
- packages/bruno-app/src/components/FolderSettings/Overview/index.js
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions:() => {}
No space between function name and parentheses:func()notfunc ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments
Files:
packages/bruno-app/src/components/FolderSettings/Overview/Info/index.jstests/collection/draft/draft-indicator.spec.ts
**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified
Files:
tests/collection/draft/draft-indicator.spec.ts
tests/**/**.*
⚙️ CodeRabbit configuration file
tests/**/**.*: Review the following e2e test code written using the Playwright test library. Ensure that:
Follow best practices for Playwright code and e2e automation
Try to reduce usage of
page.waitForTimeout();in code unless absolutely necessary and the locator cannot be found using existingexpect()playwright callsAvoid using
page.pause()in codeUse locator variables for locators
Avoid using test.only
Use multiple assertions
Promote the use of
test.stepas much as possible so the generated reports are easier to readEnsure that the
fixtureslike the collections are nested inside thefixturesfolderFixture Example*: Here's an example of possible fixture and test pair
. ├── fixtures │ └── collection │ ├── base.bru │ ├── bruno.json │ ├── collection.bru │ ├── ws-test-request-with-headers.bru │ ├── ws-test-request-with-subproto.bru │ └── ws-test-request.bru ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection ├── headers.spec.ts ├── persistence.spec.ts ├── variable-interpolation │ ├── fixtures │ │ └── collection │ │ ├── environments │ │ ├── bruno.json │ │ └── ws-interpolation-test.bru │ ├── init-user-data │ └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection └── subproto.spec.ts
Files:
tests/collection/draft/draft-indicator.spec.ts
🧠 Learnings (1)
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{test,spec}.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified
Applied to files:
tests/collection/draft/draft-indicator.spec.ts
⏰ 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: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
🔇 Additional comments (1)
tests/collection/draft/draft-indicator.spec.ts (1)
259-263: Explicitly selecting the Headers tab here is a solid fix for tab‑activation issuesClicking the
.tab.headerstab before adding a header makes the test more robust against lazy mounting of the headers table/CodeMirror in the updated folder settings UI. This is consistent with the collection‑level test above and should reduce flakiness.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/collection/draft/draft-values-in-requests.spec.ts (1)
59-61: LGTM! Change correctly aligns with the new folder UI.The explicit Headers tab activation is necessary now that the folder settings default to an Overview tab. This mirrors the pattern already used for collection headers at line 22.
Consider wrapping test sections in
test.stepfor better reporting.The coding guidelines recommend promoting
test.stepusage. This would make the generated reports easier to read by clearly delineating each phase of the test.Example refactor:
- // Add collection header in draft (unsaved) - // Click on Headers tab - await page.locator('.tab.headers').click(); - - // Add a new header - await page.getByRole('button', { name: 'Add Header' }).click(); + await test.step('Add collection header in draft (unsaved)', async () => { + await page.locator('.tab.headers').click(); + await page.getByRole('button', { name: 'Add Header' }).click(); + // ... rest of header addition logic + });You could apply similar wrapping for other logical sections like "Create folder", "Add folder header", "Create request", etc.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
tests/collection/draft/draft-values-in-requests.spec.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions:() => {}
No space between function name and parentheses:func()notfunc ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments
Files:
tests/collection/draft/draft-values-in-requests.spec.ts
**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified
Files:
tests/collection/draft/draft-values-in-requests.spec.ts
tests/**/**.*
⚙️ CodeRabbit configuration file
tests/**/**.*: Review the following e2e test code written using the Playwright test library. Ensure that:
Follow best practices for Playwright code and e2e automation
Try to reduce usage of
page.waitForTimeout();in code unless absolutely necessary and the locator cannot be found using existingexpect()playwright callsAvoid using
page.pause()in codeUse locator variables for locators
Avoid using test.only
Use multiple assertions
Promote the use of
test.stepas much as possible so the generated reports are easier to readEnsure that the
fixtureslike the collections are nested inside thefixturesfolderFixture Example*: Here's an example of possible fixture and test pair
. ├── fixtures │ └── collection │ ├── base.bru │ ├── bruno.json │ ├── collection.bru │ ├── ws-test-request-with-headers.bru │ ├── ws-test-request-with-subproto.bru │ └── ws-test-request.bru ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection ├── headers.spec.ts ├── persistence.spec.ts ├── variable-interpolation │ ├── fixtures │ │ └── collection │ │ ├── environments │ │ ├── bruno.json │ │ └── ws-interpolation-test.bru │ ├── init-user-data │ └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection └── subproto.spec.ts
Files:
tests/collection/draft/draft-values-in-requests.spec.ts
⏰ 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 - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
1 participant
Description
Add folder overview
FIxes #6298
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Summary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.