feat: integrate import/export modals and refactor environment handling#6346
feat: integrate import/export modals and refactor environment handling#6346bijin-bruno merged 1 commit intousebruno:mainfrom
Conversation
WalkthroughAdds export functionality to the environment management UI by introducing modal components for import and export workflows. Replaces existing ImportEnvironment component with ImportEnvironmentModal, adds an Export button to EnvironmentList, and manages modal visibility through state props passed from parent to child components. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
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: 0
🧹 Nitpick comments (2)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js (1)
29-29: Export modal wiring looks correct; minor naming consistency nit
showExportModalstate and the conditional<ExportEnvironmentModal>render are wired correctly and safely closed viaonClose. For readability, you might align naming with other booleans (e.g.openExportModalorisExportModalOpen) to match patterns likeopenCreateModalelsewhere.Also applies to: 58-66
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (1)
15-15: Make export button truly optional-safe whensetShowExportModalis absentYou’ve made
handleExportClickguard onsetShowExportModal, but the Export button still renders even when the prop isn’t provided, making clicks a no-op in those contexts. Consider hiding the button unless the setter is passed.Example refactor:
-const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection, setShowExportModal }) => { +const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection, setShowExportModal }) => { ... - <button className="btn-action" onClick={() => handleExportClick()} title="Export environment"> - <IconUpload size={16} strokeWidth={1.5} /> - </button> + {setShowExportModal && ( + <button className="btn-action" onClick={() => handleExportClick()} title="Export environment"> + <IconUpload size={16} strokeWidth={1.5} /> + </button> + )}This keeps the UX clean in any future call sites that don’t support export yet.
Also applies to: 299-301
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js(4 hunks)packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/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. 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/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
🧬 Code graph analysis (2)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (1)
packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js (1)
ImportEnvironmentModal(14-164)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js (2)
packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js (1)
ImportEnvironmentModal(14-164)packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js (1)
ExportEnvironmentModal(10-267)
⏰ 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: SSL Tests - Linux
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
🔇 Additional comments (6)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js (3)
7-8: Use of shared import/export modals is appropriateReusing the common
ImportEnvironmentModalandExportEnvironmentModalkeeps import/export logic centralized and consistent; imports look correct and follow existing patterns.
10-23: DefaultTab wiring to tab state is cleanThe empty-state
DefaultTabcleanly drives thetabstate into the existing create/import branches, with simple, readable JSX and no extra local state.
40-40: Import tab now correctly usesImportEnvironmentModalUsing
<ImportEnvironmentModal type="global" onClose={() => setTab('default')} />matches the modal’s API (nocollectionrequired for global) and keeps the UX consistent with the previous import tab.packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (3)
5-5: Icon imports remain consistent with usageAdding
IconUploadinto the existing@tabler/iconsimport keeps icon usage centralized and matches the new export button.
8-8: Switch toImportEnvironmentModalkeeps import flow centralizedUsing the shared
ImportEnvironmentModalwithtype="global"in the list aligns this flow with the rest of the app and keeps import behavior in one place.Also applies to: 279-279
261-265: Export ignoresisModified, potentially exporting stale dataCreate/import actions respect
isModifiedand route through the confirm-switch flow, but export currently does not. That means a user can export while there are unsaved edits inEnvironmentDetails, and the exported data may not match what they see.Consider reusing the same guard:
- const handleExportClick = () => { - if (setShowExportModal) { - setShowExportModal(true); - } - }; + const handleExportClick = () => { + if (isModified) { + setSwitchEnvConfirmClose(true); + return; + } + if (setShowExportModal) { + setShowExportModal(true); + } + };This keeps export behavior consistent with other actions when there are unsaved changes.
Also applies to lines 299-301.
bijin-bruno
left a comment
There was a problem hiding this comment.
@naman-bruno Need some follow up changes
- After importing collections it's auto selecting the last among newly imported envs
- It shows changes save when clicking on save multiple times. It used to show "nothing to save". I feel we can improvise the experience with a draft indicator and prevent writing when there are no changes.
Description
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
✏️ Tip: You can customize this high-level summary in your review settings.