Fix hardcoded image paths for subpath deployments#402
Open
ralphbean wants to merge 2 commits intothoughtworks:masterfrom
Open
Fix hardcoded image paths for subpath deployments#402ralphbean wants to merge 2 commits intothoughtworks:masterfrom
ralphbean wants to merge 2 commits intothoughtworks:masterfrom
Conversation
Replaces hardcoded absolute image paths (/images/*.svg) in quadrants.js with webpack require() imports. This allows the radar to work correctly when deployed to URL subpaths (e.g., /team/radar/) instead of only at the root path. The hardcoded paths resolve to the domain root regardless of deployment location, breaking image loading for subpath deployments. By importing images with require(), webpack processes them with the correct publicPath automatically. Changes: - Import image assets at module level - Replace hardcoded strings in renderRadarLegends() - Use mapping object for dynamic quadrant backgrounds in renderMobileView() Tested by building with npm run build:prod and verifying webpack processes the paths correctly. Signed-off-by: Ralph Bean <rbean@redhat.com>
Adds moduleNameMapper to jest.config.js to mock image file imports with a simple string stub. This fixes test failures introduced by webpack require() imports for SVG files, which Jest cannot parse as JavaScript. Without this configuration, Jest attempts to parse SVG files as JS code, resulting in "SyntaxError: Unexpected token '<'" when importing images. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Signed-off-by: Ralph Bean <rbean@redhat.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix hardcoded image paths for subpath deployments
The current code has hardcoded absolute image paths in src/graphing/components/quadrants.js that prevent the radar from working when deployed to a URL subpath. Paths like /images/new.svg resolve to the domain root instead of the deployment path, breaking image loading for GitLab Pages, GitHub Pages, and similar subpath deployments.
This change imports the images using require() so webpack can process them with the correct publicPath. The images are imported at the module level and referenced by variable instead of hardcoded string paths. This allows webpack to automatically resolve paths correctly for any deployment location, whether at root or a subpath.
The fix follows the existing pattern used in common.js where other images are already imported with require(). No configuration changes are needed and there are no breaking changes for existing deployments.
Changes affect renderRadarLegends() where four icon paths are replaced with imported variables, and renderMobileView() where dynamic path construction is replaced with a mapping object for the quadrant background images.