Align Geodata plugin with Redis UI design system#5982
Open
valkirilov wants to merge 8 commits into
Open
Conversation
The geodata plugin's local node_modules pulled in react@18.3.1 while the workspace root is on 18.2.0. When the plugin's main.tsx imports anything from uiSrc/components/base (e.g. ThemeProvider), vite resolved two React copies and the playground crashed with "Cannot read properties of null (reading 'useContext')". Dedupe react/react-dom in the shared plugin vite config so every plugin playground binds to a single React instance. Also accept ?theme=light / ?theme=dark in the geodata dev block so the plugin can be screenshotted in both themes without editing index.html. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace the hand-rolled <section className="geodata-message"> with a Banner.Compose-based shell so the geodata plugin's status/error panels match the rest of the app's design system. - Message wraps Banner.Compose and a Col flex layout (gap="s") around the title + children, with theme-token spacing in Message.styles.ts. - Banner.Compose lets us put a real <div> (Col) inside without the auto <p> wrap that Banner's message slot would otherwise enforce, so the layout stays valid HTML. - MessageVariant is inferred from Banner.Compose's own variant prop rather than redeclared; MessageProps lives in Message.types.ts per the frontend styleguide. - All eight error-titled call sites (App, GeoInspector x6, GeoSearchVisualization x2, RqeGeoVisualization x2) opt into variant="danger" so the banner colour matches the message intent. - jest.setup.ts now wraps every testing-library render with a styled-components ThemeProvider so the new theme-token styles resolve in unit tests. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace the raw <header>/<h2>/<dl> markup with a Row that holds the
heading and the result-summary block, using Title/Text from the design
system and theme-token spacing/border so the geodata plugin header
matches the rest of the app.
The inner result-summary Row uses grow={false} so the outer
justify="between" can push it to the right edge; each metric Col uses
align="end" to right-align its label and value. The header lives in a
styled(Row) with width: 100%, padding-bottom and border-bottom pulled
from theme.core.space and theme.semantic.color.border.
Styles and types live in GeoHeader.styles.ts and GeoHeader.types.ts
per the frontend styleguide.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace the hand-rolled <table className="geodata-table"> with the Redis UI Table from uiSrc/components/base/layout/table (TanStack-based) so the geodata plugin's inspector tables match the shared table chrome. The component keeps its existing (columns: string[], rows: ReactNode[][]) contract by adapting internally into ColumnDef<RowData>[] + data[]: each row is materialised as an object keyed by column name and each column gets an accessorKey + cell renderer. All four call sites in GeoInspector and RqeGeoVisualization stay unchanged. A small styled wrapper holds the top margin via theme.core.space.space150. A future cycle will convert the surrounding geodata-shell into a Col with gap so this margin can drop. jest.setup.ts: tighten the render-override option type so the spread no longer trips noUnusedLocals/Parameters when typecheck runs against @tanstack/table-core via the new Table import. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Introduce three shared geodata components built on the Redis UI design system primitives and rewire the inspector / visualization shells to use them: - Shell: a Col-based wrapper that keeps the existing .geodata-shell className for leaflet/plot CSS variables while providing a uniform gap="m" between header / summary / body sections. Replaces the four remaining <div className="geodata-shell"> blocks in App, GeoInspector, GeoSearchVisualization, and RqeGeoVisualization. - GeoSummary: a Card-backed panel that takes a labelled item list and lays it out in a Row of label/value Cols. Replaces the two <dl className="geodata-summary-grid"> grids in GeoInspector and RqeGeoVisualization. - GeoMetric: a Card-backed metric tile with a small subdued label and a large Title value. Replaces the <section className="geodata-metric"> blocks for Distance, addSummary and storeSummary. Both Card panels override the default Card border with a box-shadow: 0 0 0 1px neutral600 ring so they match the Redis UI Table chrome the GeoTable already renders. Because Shell now adds gap="m" between siblings, the per-component margin-top in GeoTable.styles.ts and Message.styles.ts becomes dead weight: GeoTable.styles.ts is deleted and Message's StyledBanner only keeps width: 100%. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Move the inline DistanceThresholdControls out of GeoPlot.tsx and into its own component folder so it follows the per-folder style guide, then rewire the chrome and inputs to the design system: - TextButton from @redis-ui/components replaces the two raw <button> elements (toggle + Reset). Aria-expanded and disabled props carry over, so the existing GeoPlot specs still locate them by role. - Slider from @redis-ui/components replaces the two <input type="range"> controls. Slider is Radix-backed and exposes role="slider" thumbs that the tests now drive with fireEvent.keyDown on ArrowLeft / ArrowRight - no mock needed. - The overlay panel uses styled(Card) with the same neutral600 box-shadow ring already used by GeoSummary/GeoMetric, plus position: absolute, width: fit-content, and theme-token spacing. - .geodata-threshold-panel was sitting at z-index: 2, below leaflet's marker (600) and control (1000) panes - bump to 1100 so the overlay is visible above the map. - DistanceThresholds and ThresholdControlsProps move to the new DistanceThresholdControls.types.ts; GeoPlot.types.ts and GeoPlot.constants.ts import from the new location. - GeoHeader value Text is now size="XS" so the label and value match visually (label was already XS). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Now that Message, GeoHeader, GeoTable, GeoSummary, GeoMetric and DistanceThresholdControls all render via styled-components on top of Redis UI primitives, the old hand-rolled rules in styles.scss are dead. Keep only the styles still consumed by leaflet-managed nodes that React cannot reach directly: - .geodata-shell + body.theme_LIGHT override (host element on which cluster markers / plot panel inherit their CSS variables) - .geodata-plot-panel / .geodata-plot (positioning and sizing for the leaflet container created imperatively) - .geodata-cluster / .geodata-cluster-icon (DivIcon class names used by marker-cluster groups) - .geodata-offline-note (the "Map tiles unavailable" overlay) The orphan CSS variables (--geodata-distance-*, --geodata-message-*, --geodata-marker-background, --geodata-muted-text, --geodata-panel-*, --geodata-subtle-text, --geodata-table-header-*) are also removed, both in the dark base block and the light-theme override. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The plugin had two leftover direct imports from @redis-ui/components.
Route them through the project's uiSrc aliases per the styleguide:
- Add `export { Slider } from '@redis-ui/components'` to
uiSrc/components/base/inputs/index.ts (same pattern the buttons
barrel uses for TextButton). The geodata plugin now imports Slider
from uiSrc/components/base/inputs.
- Add a per-file uiSrc/components/base/forms/buttons/TextButton.ts
re-export so TextButton matches the per-file pattern used by every
other button in that folder (ActionIconButton, BaseButton,
DestructiveButton, EmptyButton, IconButton, PrimaryButton,
SecondaryButton, ToggleButton). Importing TextButton from the
forms/buttons barrel would also drag in BaseButton -> icons ->
iconRegistry -> themeContext -> services -> utils -> rawproto, which
jest's babel pipeline cannot parse; importing from the per-file
module sidesteps that chain.
The geodata plugin source now has zero direct @redis-ui/components
imports. The only remaining @redis-ui/* reference is themesDefault in
geodata's jest.setup.ts, which mirrors pluginsThemeContext.tsx in the
host app and is test-setup-only.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
🛡️ Jit Security Scan Results
✅ No security findings were detected in this PR
Security scan by Jit
|
Contributor
Code Coverage - Backend unit tests
Test suite run success3439 tests passing in 307 suites. Report generated by 🧪jest coverage report action from c0264f9 |
valkirilov
changed the title
Contributor
Code Coverage - Frontend unit tests
Test suite run success6986 tests passing in 803 suites. Report generated by 🧪jest coverage report action from c0264f9 |
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.
What
Migrate the new Geodata Workbench plugin to the Redis UI design system instead of hand-rolling its own primitives.
Each Redis UI replacement landed as its own commit so the diff can be reviewed component-by-component:
refactor(ui): use Redis UI banner for geodata Messagerefactor(ui): use Redis UI layout primitives in GeoHeaderrefactor(ui): use Redis UI Table for GeoTablerefactor(ui): use Redis UI cards and Col gap in geodata layoutrefactor(ui): use Redis UI TextButton and Slider for distance thresholdschore(ui): drop unused geodata styles after Redis UI migrationAll theme-token spacing, typography sizes, and color tokens live in per-component
*.styles.tsand*.types.tsfiles per the frontend styleguide.Screenshots
MessageerrorGEOPOS / GEOADD
GEOHASH
Map
Testing
The geodata plugin has its own dev server / mock fixtures:
Switch themes via
?theme=light/?theme=darkquery string. Edit the dev block insrc/main.tsxto swap fixtures (GEOPOS,GEOHASH,GEODIST,GEOADD,PING,GEOSEARCH ... WITHCOORDfor markers).For the threshold-overlay leaflet view, run the markers fixture and confirm the toggle expands into two Redis UI Sliders and a Reset
TextButton.Note
Low Risk
Presentation-layer refactor in an isolated Workbench plugin; map parsing and Leaflet behavior are largely unchanged aside from threshold control UX (sliders).
Overview
The geodata Workbench plugin is refactored from custom CSS and HTML primitives to Redis UI components (
Banner,Table,Card,Title/Text,Row/Col,TextButton,Slider) with theme tokens in per-component*.styles.tsfiles.New layout pieces include
Shell,GeoSummary,GeoMetric, and an extractedDistanceThresholdControls(replacing native range inputs on the map). Errors usevariant="danger"on messages.GeoTablenow builds on the shared TanStackTable. Plugin imports go throughuiSrcre-exports forSliderandTextButton.styles.scssshrinks to Leaflet-only selectors; tests wrap renders in aThemeProvider, and the plugin dev server adds React dedupe plus?theme=light|darkfor screenshots.Reviewed by Cursor Bugbot for commit c0264f9. Bugbot is set up for automated code reviews on this repo. Configure here.