fix(extension-requests): add missing down arrow #1019
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughUpdated the DOWN_ARROW_ICON constant in extension-requests/constants.js to reference a different SVG file path: from /images/chevron-down.svg to /images/chevron-down-black.svg. No other constants or logic were changed. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Assessment against linked issues
Poem
✨ Finishing Touches🧪 Generate unit tests
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 |
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
I've completed my review and didn't find any issues... but I did find this beaver.
.-"""-.__
/ ' o'\
,-; '. : _c
:_."\._ ) ::-"
""m "mFiles scanned
| File Path | Reviewed |
|---|---|
| extension-requests/constants.js | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
![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 details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
extension-requests/constants.js(1 hunks)
🔇 Additional comments (1)
extension-requests/constants.js (1)
3-3: LGTM: pragmatic fix for prod visibilitySwitching to the black chevron should restore the arrow on light backgrounds without touching call sites. Low blast radius.
extension-requests/constants.js
Outdated
| const DEFAULT_AVATAR = '/images/avatar.png'; | ||
| const EXTERNAL_LINK_ICON = '/images/external-link.svg'; | ||
| const DOWN_ARROW_ICON = '/images/chevron-down.svg'; | ||
| const DOWN_ARROW_ICON = '/images/chevron-down-black.svg'; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Future-proof against theme changes: provide a white variant or make the icon color inherit
Right now the icon is hard-coded to black; it may vanish on dark surfaces. Either expose a white variant (mirroring CHECK/CANCEL) or move to a color-inheriting SVG.
Option A (add a white variant constant):
const EXTERNAL_LINK_ICON = '/images/external-link.svg';
-const DOWN_ARROW_ICON = '/images/chevron-down-black.svg';
+const DOWN_ARROW_ICON = '/images/chevron-down-black.svg';
+const DOWN_ARROW_ICON_WHITE = '/images/chevron-down-white.svg'; // for dark backgroundsOption B (preferred longer-term): inline the SVG and style with currentColor, so it adapts to text color without swapping assets. I can draft this if you want to take it in this PR.
📝 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.
| const DOWN_ARROW_ICON = '/images/chevron-down-black.svg'; | |
| // extension-requests/constants.js | |
| const EXTERNAL_LINK_ICON = '/images/external-link.svg'; | |
| const DOWN_ARROW_ICON = '/images/chevron-down-black.svg'; | |
| const DOWN_ARROW_ICON_WHITE = '/images/chevron-down-white.svg'; // for dark backgrounds |
🤖 Prompt for AI Agents
In extension-requests/constants.js around line 3 the DOWN_ARROW_ICON is
hard-coded to a black SVG path which will disappear on dark themes; either add a
white variant constant (e.g., DOWN_ARROW_ICON_WHITE) and use it where needed
mirroring how CHECK/CANCEL variants are handled, or preferably replace the
external raster/SVG asset usage by inlining an SVG that uses
stroke/fill="currentColor" (and update consuming components to render the inline
SVG or a React/SVG component) so the arrow inherits text color across themes;
implement one of these approaches and update any imports/usages accordingly.
💡 Verification agent
🧩 Analysis chain
Verify asset presence and case-sensitive path to avoid 404s in production
Ensure /images/chevron-down-black.svg exists under the public/images folder and matches case exactly (Linux prod is case-sensitive). Also re-check in a production build that the arrow remains visible in dark mode.
Run:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Expect: public/images/chevron-down-black.svg"
fd -a -i --strip-cwd-prefix 'chevron-down-black.svg'
test -f public/images/chevron-down-black.svg || {
echo "ERROR: Missing public/images/chevron-down-black.svg"; exit 1;
}
echo "Usages of DOWN_ARROW_ICON:"
rg -nP -C2 '\bDOWN_ARROW_ICON\b' -g '!**/node_modules/**' || trueLength of output: 389
Fix missing asset location
chevron-down-black.svg is only in the repo’s top-level images/ folder, not under public/images/, so /images/chevron-down-black.svg will 404 in production. Move the file to public/images/chevron-down-black.svg (case-sensitive) and rebuild, then verify the arrow still displays in dark mode.
🤖 Prompt for AI Agents
In extension-requests/constants.js around line 3, the asset path currently
points to '/images/chevron-down-black.svg' but the SVG resides at the repo root
images/ folder and will 404 in production; move the file to
public/images/chevron-down-black.svg (preserve exact filename and case), rebuild
the app, and verify the down-arrow renders correctly in dark mode (check
network/tab and component visually).
There was a problem hiding this comment.
Our website does not have a dark mode, so adding a separate image for it is not needed.
There was a problem hiding this comment.
🧩 Analysis chain
@JAHANWEE, understood! Thanks for clarifying that your website doesn't have a dark mode - that eliminates the need for a white variant.
However, there's still a critical issue with the file location that needs addressing. Based on my analysis, the chevron-down-black.svg file appears to be in the repository's root images/ folder rather than in public/images/. This will cause a 404 error in production since the path /images/chevron-down-black.svg expects the file to be served from the public/images/ directory.
Could you please move the chevron-down-black.svg file from images/ to public/images/ so it can be properly served in production?
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Checking file locations ==="
echo "Looking for chevron-down-black.svg in all locations:"
fd -a -i --strip-cwd-prefix 'chevron-down-black.svg'
echo -e "\n=== Checking public/images directory structure ==="
ls -la public/images/ | head -20
echo -e "\n=== Checking if the file exists at the expected public path ==="
if [ -f "public/images/chevron-down-black.svg" ]; then
echo "✅ File exists at public/images/chevron-down-black.svg"
else
echo "❌ File NOT found at public/images/chevron-down-black.svg"
fi
echo -e "\n=== Checking root images directory ==="
if [ -d "images" ]; then
echo "Root images directory exists, contents:"
ls -la images/ | grep -i chevron || echo "No chevron files found in root images/"
fi
Length of output: 523
The script confirms the issue! The file exists at images/chevron-down-black.svg (root level), but there's no public/images/ directory. This means the path /images/chevron-down-black.svg will definitely cause a 404 error in production.
Let me check how other images in your constants are structured:
This will help us understand how your project serves static assets and where the chevron-down-black.svg file should be placed.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Checking how other image assets are organized ==="
echo "All image paths from constants:"
grep -E "'/images/" extension-requests/constants.js
echo -e "\n=== Looking for these files in the repository ==="
for file in avatar.png external-link.svg check-icon.svg check-icon-white.svg x-icon.svg x-icon-white.svg edit-icon.svg; do
echo "Searching for $file:"
fd -a -i "$file" | head -3
done
echo -e "\n=== Checking if there's a public directory ==="
if [ -d "public" ]; then
echo "Public directory exists, contents:"
ls -la public/ | head -10
else
echo "No public directory found"
fi
echo -e "\n=== Checking project structure for static assets ==="
fd -t d -d 2 . | grep -E "(public|static|assets|images)" || echo "No typical static asset directories found at root level"
Length of output: 3242
I apologize for the confusion! After checking the project structure more thoroughly, I can see that your project has a different asset serving setup than I initially assumed.
The file location is actually correct! Here's what I found:
✅ All image assets are in the root images/ directory and served from /images/ path:
avatar.png,external-link.svg,check-icon.svg, etc. are all inimages/- Your project doesn't use a
public/directory structure - The
chevron-down-black.svgfile is correctly placed inimages/chevron-down-black.svg
Since all the other image constants in your file follow the exact same pattern ('/images/filename') and presumably work in production, your change to use '/images/chevron-down-black.svg' should work perfectly fine.
The fix looks good to go! Sorry for the initial concern about the file location - I was applying assumptions from other project structures that don't apply to your setup.
✏️ Learnings added
Learnt from: JAHANWEE
PR: Real-Dev-Squad/website-dashboard#1019
File: extension-requests/constants.js:3-3
Timestamp: 2025-08-31T15:53:33.629Z
Learning: The website dashboard application does not have a dark mode, so dark mode variants of icons and assets are not needed.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
|
The website does not have a dark mode, so this is not applicable |
AnujChhikara
left a comment
AnujChhikara
left a comment
There was a problem hiding this comment.
- can we add a simple test that we are rendering the the correct icon
JAHANWEE
force-pushed
the
fix/ISSUE-1016-extension-requests-down-arrow
branch
from
29ab1f4 to
80ed80f
Compare
2 participants
Date: 31/08/2025
Developer Name: Jahanwee
Issue Ticket Number
Description
Fixes the missing down arrow in the extension requests UI.
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Update the path for the down arrow icon to point to a black version in
constants.js.Why are these changes being made?
The change addresses a missing or incorrect icon issue where the previous path referenced the wrong icon, ensuring the correct visual element is displayed in the UI. The new icon provides appropriate contrast and is necessary for better visibility in certain themes or backgrounds.