feat: add bulk import for environment variables #124
Conversation
Add utility function to parse .env file content into key-value pairs. Handles comments, empty lines, quoted values, and duplicate keys.
Add modal dialog for importing environment variables from .env content. Supports both pasting content and file upload with real-time preview.
Add Bulk Import button and modal integration. Imported variables merge with existing ones (duplicates are replaced).
Apply the same bulk import functionality to the add-new-agent page.
This fixes the empty first row issue that occurred after bulk importing environment variables.
Enables bulk import modal usage in the add new agent page.
Gets current form values directly at import time instead of relying on memoized watched values.
📝 WalkthroughWalkthroughThis PR introduces a bulk import feature for environment variables. It adds a new Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Modal as EnvBulkImportModal
participant Parser as parseEnvContent
participant Form as EnvironmentVariable
User->>Modal: Open modal (click Bulk Import)
User->>Modal: Paste .env content OR upload file
activate Modal
Modal->>Modal: Read file/textarea content
deactivate Modal
Note over Modal: Real-time variable count
User->>Modal: Click Import
activate Modal
Modal->>Parser: parseEnvContent(content)
activate Parser
Parser->>Parser: Split lines, extract key=value, strip quotes
Parser-->>Modal: EnvVariable[]
deactivate Parser
Modal->>Form: onImport(parsedVars)
deactivate Modal
activate Form
Form->>Form: Merge imported vars with existing<br/>(imported overrides, filter empty)
Form->>Form: Replace entire env array
Form-->>User: Updated form with imported vars
deactivate Form
Modal->>Modal: Clear content, close
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes The changes span multiple files with consistent new logic (modal component, parsing utility, form integration), but the individual pieces are straightforward. Review requires understanding the merge semantics, file handling, and form integration, plus verification that the parsing handles Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
console/workspaces/libs/shared-component/src/components/EnvironmentVariable.tsx (1)
19-115: Consider consolidating duplicate EnvironmentVariable components.This component is nearly identical to the one in
console/workspaces/pages/add-new-agent/src/components/EnvironmentVariable.tsx, with only minor differences in import paths and styling. Since both components share the same logic for handling environment variables and bulk imports, consolidating them into a single shared implementation would:
- Reduce code duplication
- Simplify maintenance
- Ensure consistent behavior across pages
Consider using this shared-component version in add-new-agent by importing it rather than maintaining two separate implementations.
🔎 Verification: Check if EnvironmentVariable is exported from shared-component
#!/bin/bash # Check if EnvironmentVariable is exported from shared-component index rg -n "EnvironmentVariable" console/workspaces/libs/shared-component/src/components/index.ts console/workspaces/libs/shared-component/src/index.tsconsole/workspaces/libs/shared-component/src/components/EnvBulkImportModal.tsx (1)
61-79: Consider adding error handling for file upload.The file upload handler lacks error handling for:
- FileReader errors (e.g., file read failures)
- Large file sizes that might cause browser issues
- Non-text file content
For production robustness, consider adding:
const handleFileUpload = useCallback( (e: ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0]; if (!file) return; // Optional: check file size (e.g., 1MB limit) if (file.size > 1024 * 1024) { // Show error to user return; } const reader = new FileReader(); reader.onload = (event) => { const text = event.target?.result; if (typeof text === "string") { setContent(text); } }; reader.onerror = () => { // Show error to user }; reader.readAsText(file); e.target.value = ""; }, [] );
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
console/common/config/rush/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
console/workspaces/libs/shared-component/src/components/EnvBulkImportModal.tsxconsole/workspaces/libs/shared-component/src/components/EnvironmentVariable.tsxconsole/workspaces/libs/shared-component/src/components/index.tsconsole/workspaces/libs/shared-component/src/index.tsconsole/workspaces/libs/shared-component/src/utils/envParser.tsconsole/workspaces/libs/shared-component/src/utils/index.tsconsole/workspaces/pages/add-new-agent/package.jsonconsole/workspaces/pages/add-new-agent/src/components/EnvironmentVariable.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
console/workspaces/libs/shared-component/src/utils/envParser.ts (1)
console/workspaces/libs/shared-component/src/utils/index.ts (2)
EnvVariable(20-20)parseEnvContent(19-19)
console/workspaces/pages/add-new-agent/src/components/EnvironmentVariable.tsx (2)
console/workspaces/libs/shared-component/src/components/EnvironmentVariable.tsx (1)
EnvironmentVariable(27-115)console/workspaces/libs/shared-component/src/components/EnvBulkImportModal.tsx (1)
EnvBulkImportModal(39-190)
console/workspaces/libs/shared-component/src/components/EnvironmentVariable.tsx (2)
console/workspaces/pages/add-new-agent/src/components/EnvironmentVariable.tsx (1)
EnvironmentVariable(26-104)console/workspaces/libs/shared-component/src/components/EnvBulkImportModal.tsx (1)
EnvBulkImportModal(39-190)
🔇 Additional comments (17)
console/workspaces/libs/shared-component/src/components/index.ts (1)
28-28: LGTM!The export follows the established barrel pattern and correctly exposes the new EnvBulkImportModal component.
console/workspaces/libs/shared-component/src/index.ts (1)
20-20: LGTM!The export correctly expands the public API to include utilities (parseEnvContent and EnvVariable type) for use by consumers.
console/workspaces/pages/add-new-agent/package.json (1)
52-52: LGTM!The workspace dependency correctly enables the add-new-agent page to consume EnvBulkImportModal and related utilities from the shared-component library.
console/workspaces/libs/shared-component/src/utils/index.ts (1)
19-20: LGTM!The barrel exports correctly separate type and value exports, following TypeScript best practices for public API design.
console/workspaces/libs/shared-component/src/utils/envParser.ts (3)
19-22: LGTM!The EnvVariable interface appropriately models environment variables with a simple key-value structure.
25-34: LGTM!The stripQuotes helper correctly handles basic quote stripping for single and double quotes, which is appropriate for typical .env file formats.
37-70: LGTM!The parseEnvContent function implements a solid basic .env parser that handles:
- Cross-platform line endings
- Comments and empty lines
- Quoted values (single and double)
- Duplicate keys (last value wins)
- Proper key-value splitting at the first
=The implementation is appropriate for typical .env file formats and aligns with the PR objectives.
console/workspaces/pages/add-new-agent/src/components/EnvironmentVariable.tsx (5)
19-19: LGTM!The imports are correctly structured and all new dependencies (useState, useCallback, useMemo, FileText, EnvBulkImportModal, EnvVariable) are properly utilized in the component.
Also applies to: 21-21, 24-24
27-30: LGTM!The hook additions correctly support the bulk import feature:
getValuesavoids stale closures in handleImportreplaceenables swapping the entire env arrayuseWatchprovides reactive env valuesuseStatemanages modal visibility
32-36: LGTM!The memoization correctly stabilizes envValues for use in callbacks and validation logic, preventing unnecessary re-renders and ensuring consistent behavior.
Also applies to: 38-38
41-64: LGTM!The handleImport merge logic correctly:
- Uses
getValuesto avoid stale closures- Filters empty rows before merging
- Uses a Map for efficient key-based merging (imported values override existing)
- Preserves key insertion order (existing keys maintain position, new imports append)
- Replaces the entire array for clean state management
87-100: LGTM!The UI integration correctly adds:
- A "Bulk Import" button with appropriate icon and styling
- EnvBulkImportModal properly wired with open state and handlers
The implementation provides a smooth user experience for bulk importing environment variables.
console/workspaces/libs/shared-component/src/components/EnvBulkImportModal.tsx (5)
19-31: LGTM!All imports are correctly structured and utilized throughout the component.
33-37: LGTM!The props interface correctly defines a standard modal contract with clear responsibilities for open state, close handling, and import callback.
44-50: LGTM!State management is clean and efficient:
- Content state for user input
- Ref for file input control
- Memoized parsing to avoid redundant work
87-99: LGTM!Both handlers are correctly implemented:
- handleImport validates count before proceeding and properly cleans up
- handleClose ensures clean state reset
101-189: LGTM!The UI implementation is excellent:
- Clean dialog structure with appropriate sizing
- Monospace textarea with helpful placeholder and theme-aware styling
- Standard file upload pattern with clear accept types
- Real-time visual feedback via count indicator with color coding
- Proper button states (Import disabled when no variables detected)
The user experience is intuitive and polished.
1 participant
Purpose
Resolves #106
Goals
Approach
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.