Align activity-ui with datum-ui 2.9 - #235
Conversation
**Problem** The custom time range used native datetime-local inputs with no ordering check and a browser-drawn calendar icon that disappears in some themes. The feed's infinite scroll observed its own list container, which never scrolls when the host page is the scroller, so users saw one page with no way to load more. **Solution** TimeRangeDropdown now wraps datum-ui's DateTimeRangePicker; relative presets keep their keys so URL state such as `start=now-7d` is unchanged, and the picker enforces start before end and draws its own icon. ActivityFeed observes the viewport when its container does not overflow. Playwright specs cover preset and manual round-trips and a second page load in a document-scrolled layout. `react-day-picker` is added as a dev dependency only; hosts already provide it through datum-ui. Stacked on #235. Closes datum-cloud/cloud-portal#1471, datum-cloud/cloud-portal#1472, datum-cloud/cloud-portal#1468. Design: docs/enhancements/ui-datum-ui-alignment.md
RFC and implementation plan for rebuilding activity-ui on datum-ui 2.9, swapping the time range dropdown for datum-ui's range picker, moving every colour to theme tokens, and fixing feed pagination when the host page is the scroller.
Require datum-ui 2.9, delete the twelve local primitives the index already sources from datum-ui, rebuild the filter chips on datum-ui popover and command, adapt combobox and multi-combobox, and drop the Radix and cmdk peers except tooltip. Fix pre-existing lint errors, move the example app to React 19 so it can server-render, repair rotted e2e assertions, and add a ui-tests CI job. Public exports are unchanged.
TimeRangeDropdown wraps datum-ui's DateTimeRangePicker and keeps the relative preset keys so URL state is unchanged. ActivityFeed observes the viewport when its list container does not scroll. Playwright specs cover preset and manual round-trips and a second page load.
Every colour comes from datum-ui components or theme tokens and the hand-written dark variants are gone. Success and info bind to datum-ui's raw scales because 2.9.1 exposes no Tailwind tokens for them.
All toolbar controls on the activity, events, and audit-log feeds render at 36px with datum-ui's small Button and Input metrics, with a shared segmented toggle on ButtonGroup and a spec asserting one height. The example app now loads datum-ui's stylesheet.
c8c5a90 to
e92405b
Compare
|
The rewritten Fix: restore the previous defaults in |
The datum-ui rewrite dropped the base defaults, so SimpleQueryBuilder's verb, resource, namespace, and user dropdowns lost their "All" item and their trigger fell back to placeholder text when unfiltered. Default showAllOption to true and clearable to false again. Give the "All" item a non-empty sentinel so datum-ui's Autocomplete resolves it as a selected option; the public value stays '' for "no filter". Render the selected value as "label (count)" when the option carries a count, as the base trigger did. Mount SimpleQueryBuilder on an unlinked /query-builder example route and cover all four dropdowns end to end: the trigger reads "All" as a value rather than a placeholder, the list opens with "All" first, picking a value updates the trigger, and picking "All" again clears it.
|
@kevwilliams - Fixed in 5dd36ea. Two details beyond the report:
|
…on (#1542) **Problem** The Activity Log's custom range accepted a start after the end, lost its calendar icon in light mode, and only ever showed the first thirty events because the feed's infinite scroll never fired when the dashboard page is the scroller. **Solution** Take `@datum-cloud/activity-ui` 0.6.0 (milo-os/activity#235), which replaces its time range dropdown with datum-ui's range picker, observes the viewport when its list does not scroll, renders on theme tokens, and sizes every toolbar control like datum-ui's. Move `@datum-cloud/datum-ui` to 2.9.1, which the package requires. Embedded feeds now pass `infiniteScroll={false}` so they render the explicit "Load more" footer with a count and paging no longer depends on the host layout. **Verified** - Typecheck, lint, 1055 unit tests, and a production build locally; pre-commit hooks green. - In the portal against staging: org Activity page and the vultr.com DNS zone Activity tab render the new toolbar, the picker opens with presets and calendar in light and dark, and the footer reports the count and end of results. No zone in reach has more than thirty events, so the "Load more" button itself was exercised in the package's example app and Playwright suite rather than on staging. - The failing E2E regression shards are the domain and ALB creation specs returning 403 from staging, unrelated to this change; re-run requested. **Preview** <img width="1568" height="745" alt="screenshot-1789457229842-25" src="https://github.com/user-attachments/assets/be496f12-ec34-4550-81fe-191675cdc9ef" /> <img width="1568" height="745" alt="screenshot-1789457229841-24" src="https://github.com/user-attachments/assets/f122cb93-bb83-4079-9747-934f1ae3c7c2" /> <img width="1568" height="745" alt="screenshot-1789457208677-23" src="https://github.com/user-attachments/assets/647c85ec-0bb8-44e0-8de7-aea89e3a424b" /> Closes #1471 Closes #1472 Closes #1468
Problem
activity-ui carried its own copies of shadcn primitives next to datum-ui re-exports, imported Radix and cmdk directly, pinned a datum-ui peer (^0.8.0) that predates the picker family, had no UI checks in CI, and drew about two hundred hard-coded palette classes with hand-written dark variants. Its custom time range used native datetime-local inputs with no ordering check and a browser-drawn icon, and its infinite scroll never fired when the host page is the scroller. The example app could not server-render at all and 19 Playwright tests had rotted.
Solution
This branch now carries the whole alignment, merged in from #236, #237, and #238 after their reviews:
ui-testsCI job.Public exports of
ui/src/index.tsare byte-identical to before.Closes datum-cloud/cloud-portal#1471, datum-cloud/cloud-portal#1472, datum-cloud/cloud-portal#1468. Design: docs/enhancements/ui-datum-ui-alignment.md