KPMP-6543: add feature switch to nav bar header#314
Conversation
WalkthroughThis PR introduces a new environment variable Changes
Possibly related PRs
✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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: 2
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
.env.examplepackage.jsonsrc/App.js
| REACT_APP_RUN_ANALYZER= | ||
| REACT_APP_SEARCH_ENDPOINT= No newline at end of file | ||
| REACT_APP_SEARCH_ENDPOINT= | ||
| REACT_APP_COMPARATOR_ON="true" No newline at end of file |
There was a problem hiding this comment.
Remove quotes from the value and add a trailing newline.
Two minor issues flagged by dotenv-linter:
- QuoteCharacter:
.envconvention is to omit quotes for simple values (REACT_APP_COMPARATOR_ON=true). Whiledotenvstrips the outer double-quotes, retaining them can mislead developers copying this template and may behave unexpectedly in other tooling (e.g., Docker--env-file). - EndingBlankLine: The file is missing a trailing newline.
🛠️ Proposed fix
-REACT_APP_COMPARATOR_ON="true"
+REACT_APP_COMPARATOR_ON=true
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| REACT_APP_COMPARATOR_ON="true" | |
| REACT_APP_COMPARATOR_ON=true | |
🧰 Tools
🪛 dotenv-linter (4.0.0)
[warning] 6-6: [EndingBlankLine] No blank line at the end of the file
(EndingBlankLine)
[warning] 6-6: [QuoteCharacter] The value has quote characters (', ")
(QuoteCharacter)
[warning] 6-6: [UnorderedKey] The REACT_APP_COMPARATOR_ON key should go before the REACT_APP_IMAGE_PATH key
(UnorderedKey)
| <BrowserRouter history={history} basename={packageJson.baseURL}> | ||
| <ErrorBoundaryContainer> | ||
| <NavBar app='atlas' /> | ||
| <NavBar app='atlas' comparatorOn={process.env.REACT_APP_COMPARATOR_ON} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, find and examine App.js to confirm the line in question
find . -name "App.js" -type f | head -5Repository: KPMP/hubble-web
Length of output: 71
🏁 Script executed:
# Check package.json for dependencies
cat package.json | grep -A 50 '"dependencies"'Repository: KPMP/hubble-web
Length of output: 1625
🏁 Script executed:
# Search for NavBar usage patterns in the codebase
rg "NavBar" --type js --type jsx -B 2 -A 2Repository: KPMP/hubble-web
Length of output: 86
🏁 Script executed:
# Look for process.env.REACT_APP_COMPARATOR_ON usage
rg "REACT_APP_COMPARATOR_ON" --type js --type jsx -B 1 -A 1Repository: KPMP/hubble-web
Length of output: 86
🏁 Script executed:
# Check if there's a node_modules or look for kpmp-common-components
find . -name "kpmp-common-components" -type d | head -3Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Look for any TypeScript definitions or type files
find . -name "*.d.ts" -o -name "tsconfig.json" | head -10Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Read App.js around line 61
sed -n '55,70p' ./src/App.jsRepository: KPMP/hubble-web
Length of output: 733
🏁 Script executed:
# Search for NavBar without problematic file types
rg "NavBar" -B 2 -A 2Repository: KPMP/hubble-web
Length of output: 653
🏁 Script executed:
# Search for REACT_APP_COMPARATOR_ON
rg "REACT_APP_COMPARATOR_ON"Repository: KPMP/hubble-web
Length of output: 155
🏁 Script executed:
# Check if kpmp-common-components is in node_modules
ls -la node_modules/kpmp-common-components/ 2>/dev/null | head -20Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Look for NavBar component definition
find . -path ./node_modules -prune -o -name "*.js" -type f -exec grep -l "export.*NavBar\|const NavBar\|function NavBar" {} \;Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Try to find NavBar in the codebase or check for type definitions
find . -path ./node_modules -prune -o -type f \( -name "*.d.ts" -o -name "*.ts" \) -print | head -20Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Look for kpmp-common-components in node_modules more carefully
ls -la node_modules/ 2>/dev/null | grep kpmpRepository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Try to find any documentation or package info about kpmp-common-components
cat node_modules/kpmp-common-components/package.json 2>/dev/null | grep -A 30 '"main"\|"types"\|"typings"'Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Search for NavBar in the installed node_modules
find node_modules/kpmp-common-components -name "*.js" -o -name "*.ts" -o -name "*.d.ts" 2>/dev/null | head -20Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Check if there's a README or documentation
cat node_modules/kpmp-common-components/README.md 2>/dev/null | head -50Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Let me check if there's any environment configuration or test files that show how REACT_APP_COMPARATOR_ON is used
find . -name ".env*" -o -name "*.test.js" -o -name "*.spec.js" | grep -v node_modules | head -20Repository: KPMP/hubble-web
Length of output: 336
🏁 Script executed:
# Check if there's any configuration documentation
find . -maxdepth 3 -name "*.md" -type f | head -10Repository: KPMP/hubble-web
Length of output: 85
🏁 Script executed:
# Check the .env.example file for context on REACT_APP_COMPARATOR_ON
cat ./.env.exampleRepository: KPMP/hubble-web
Length of output: 270
🏁 Script executed:
# Check the README for information about configuration
cat ./README.md | head -100Repository: KPMP/hubble-web
Length of output: 534
🏁 Script executed:
# Look for any usage of comparatorOn elsewhere in the codebase
rg "comparatorOn" -iRepository: KPMP/hubble-web
Length of output: 155
🏁 Script executed:
# Check if there are any prop-types or type definitions in src
find ./src -name "*.d.ts" -o -name "*.ts" 2>/dev/null | head -10Repository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Try to search online or in the repo for any documentation about NavBar props
rg "NavBar" --type-list | head -20Repository: KPMP/hubble-web
Length of output: 448
🏁 Script executed:
# Check if there are any comments or JSDoc for NavBar usage
rg "comparatorOn" -B 5 -A 5Repository: KPMP/hubble-web
Length of output: 752
🏁 Script executed:
# Look at git history to see if there's any context about this prop (avoid -p to keep output small)
git log --oneline -- src/App.js | head -10Repository: KPMP/hubble-web
Length of output: 114
🏁 Script executed:
# Check if there are any build artifacts or type definitions generated locally
find . -path ./node_modules -prune -o -name "*.d.ts" -printRepository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Check the git diff for that commit to understand what was added
git show a524afb --stat | head -30Repository: KPMP/hubble-web
Length of output: 1847
🏁 Script executed:
# Try to find if there's any inline documentation or prop-types in App.js
cat -n ./src/App.js | head -50Repository: KPMP/hubble-web
Length of output: 2298
🏁 Script executed:
# Check if there's a types folder or any TypeScript configuration
find . -type f -name "tsconfig.json" -o -path ./node_modules -pruneRepository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Let's verify the JavaScript string truthiness issue with a quick test
node -e "console.log('String \"false\" is truthy:', Boolean('false')); console.log('Undefined is truthy:', Boolean(undefined)); console.log('String \"true\" is truthy:', Boolean('true'));"Repository: KPMP/hubble-web
Length of output: 146
🏁 Script executed:
# Verify if there are any other uses of REACT_APP_COMPARATOR_ON in the codebase
rg "REACT_APP_COMPARATOR_ON" -C 3Repository: KPMP/hubble-web
Length of output: 564
🏁 Script executed:
# Check if there's any documentation in changelog about this feature
grep -i "comparator\|REACT_APP_COMPARATOR_ON" ./changelog.mdRepository: KPMP/hubble-web
Length of output: 41
🏁 Script executed:
# Let's also verify that the env var is indeed treated as a string in practice
rg "process.env\." | head -20Repository: KPMP/hubble-web
Length of output: 1157
String "false" is truthy — the feature flag cannot be disabled via env var.
process.env.REACT_APP_COMPARATOR_ON is always a string (or undefined). Environment variables always store strings, and converting them to booleans is the caller's responsibility. Passing the raw string to the prop means REACT_APP_COMPARATOR_ON=false evaluates as truthy in JavaScript, making it impossible to turn the feature off in deployed environments without unsetting the variable entirely.
Your codebase already uses explicit string comparison for other boolean environment variables elsewhere (e.g., process.env.REACT_APP_RUN_ANALYZER === "true" in craco.config.cjs). Apply the same pattern here:
🐛 Fix: explicit string comparison
-<NavBar app='atlas' comparatorOn={process.env.REACT_APP_COMPARATOR_ON} />
+<NavBar app='atlas' comparatorOn={process.env.REACT_APP_COMPARATOR_ON === 'true'} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <NavBar app='atlas' comparatorOn={process.env.REACT_APP_COMPARATOR_ON} /> | |
| <NavBar app='atlas' comparatorOn={process.env.REACT_APP_COMPARATOR_ON === 'true'} /> |
2 participants
Summary by CodeRabbit
New Features
Dependencies
kpmp-common-componentsto the latest version for improved functionality and stability.