fix(add-data): reposition sample-data dropdown and raise Cancel button contrast (#863)#864
Conversation
…n contrast (#863) Two UX refinements to the Add Data source dialogs reported for the Add WFS Layer dialog, applied consistently across all nine source dialogs: - Move the "Sample data" dropdown from the top of the form to the bottom, directly below the last input field and right before the action buttons, so the primary workflow of entering production service details is no longer interrupted by a secondary onboarding action. - Switch the Cancel button in the shared Add Data footer from the ghost variant to the outline variant, giving it a visible border and a neutral hover background so it reads clearly as a clickable action next to the primary "Add layer" button. Fixes #863
✅ Deploy Preview for geolibre-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughSample data selectors were moved lower in each add-data source form while keeping their options and handlers unchanged. The shared add-data footer cancel button now uses the outline variant. ChangesAdd-data form layout
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed due to a network error. 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 |
⚡ Cloudflare Pages preview
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Code reviewScope: Bugs
Security
Performance
Quality
CLAUDE.md
Overall this is a clean, low-risk UX polish PR. The one inline note is a minor discoverability concern, not a blocking issue. |
Set the shared SampleDataSelect apart from the production fields above it with a faint top border, addressing review feedback that the picker now sits directly below the ArcGIS access-token field where an accidental selection would silently overwrite the typed token.
| if (samples.length === 0) return null; | ||
| return ( | ||
| <div className="space-y-1.5"> | ||
| <div className="space-y-1.5 border-t border-border/60 pt-3"> |
There was a problem hiding this comment.
The border-t divider is now baked into SampleDataSelect itself rather than applied at the call site. The updated docstring documents the "bottom of the form" assumption, which is correct for every current usage. Just worth flagging that if any future caller places this component at the very top of a form (before any other fields), the top border will render against empty space and look odd. Since the docstring already captures the constraint, this is low risk — but it's an implicit API contract that could trip up a future developer. One option would be an optional withDivider prop defaulting to true to make the assumption explicit; the current approach is fine if the "bottom only" convention holds.
Code reviewReviewed the diff across all 9 changed source files plus the full text of BugsNone found. All nine dialogs were updated consistently. The state-management handlers (mode switches, column resets, token clearing) are unchanged and remain correct in their new positions. SecurityNone found. The ArcGIS dialog's PerformanceNone found. The change is purely positional JSX — no new state, no new effects, no additional renders. QualityMedium confidence — Low confidence — inline checkbox immediately above divider: In CLAUDE.mdNo violations observed. The change touches only UI layout; no new external tile/map hosts are introduced that would require a CSP update. No user-facing strings were added or removed. The PR description notes that |
giswqs
deleted the
fix/issue-863-add-data-sample-data-position-cancel-contrast
branch
1 participant
Summary
Addresses the two UX refinements reported in #863 for the Add WFS Layer dialog. Because the same layout pattern is shared across every Add Data source dialog, both fixes are applied consistently to all nine source dialogs (WFS, WMS, WMTS, XYZ, ArcGIS, GeoRSS, GPX, Delimited Text, Video).
1. Reposition the "Sample data" selection
The "Sample data" dropdown previously sat near the top of the form, above "Saved services" and ahead of the primary configuration fields. Loading sample data is a secondary, low-frequency onboarding action, so it has been moved to the very bottom of the form inputs, directly below the last field and right before the action buttons. Standard users can now fill out their production service details top to bottom without navigating past the sample options.
2. Raise the Cancel button contrast
The Cancel button in the shared Add Data footer used the
ghostvariant (plain text, no boundary), which made it hard to recognize as an interactive element next to the prominent "Add layer" button. It now uses theoutlinevariant, giving it a subtle border, a background, and a neutral hover state so it clearly reads as a clickable action while keeping primary focus on "Add layer".Verification
Verified in the real app with Playwright against a running dev build:
npm run buildand scopedpre-commit(eslint + npm build) pass.Fixes #863
Summary by CodeRabbit