Skip to content

Align activity-ui with datum-ui 2.9 - #235

Merged
yahyafakhroji merged 6 commits into
mainfrom
feat/ui-datum-ui-alignment
Sep 15, 2026
Merged

yahyafakhroji merged 6 commits into
mainfrom
feat/ui-datum-ui-alignment

Conversation

@yahyafakhroji

@yahyafakhroji yahyafakhroji commented Sep 14, 2026 •

Copy link
Copy Markdown
Contributor

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:

  • Require datum-ui 2.9; delete the twelve local primitives the index already sources from datum-ui; rebuild filter chips on datum-ui popover and command; adapt combobox and multi-combobox; drop Radix and cmdk peers except tooltip; add a ui-tests CI job.
  • TimeRangeDropdown wraps datum-ui's DateTimeRangePicker, keeping relative preset keys so URL state is unchanged; ActivityFeed observes the viewport when its container does not scroll.
  • Every colour comes from datum-ui components or theme tokens; no palette classes or dark variants remain.
  • All feed toolbar controls render at 36px with datum-ui's small Button and Input metrics, with a Playwright spec asserting one shared height.
    Public exports of ui/src/index.ts are 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

@yahyafakhroji yahyafakhroji self-assigned this Sep 14, 2026
yahyafakhroji added a commit that referenced this pull request Sep 15, 2026
**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
@yahyafakhroji yahyafakhroji changed the title Build activity-ui primitives on datum-ui 2.9 Align activity-ui with datum-ui 2.9 Sep 15, 2026
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.
@yahyafakhroji
yahyafakhroji force-pushed the feat/ui-datum-ui-alignment branch from c8c5a90 to e92405b Compare September 15, 2026 00:45
@kevwilliams

Copy link
Copy Markdown
Contributor

The rewritten Combobox (ui/src/components/ui/combobox.tsx) drops the previous defaults clearable = false, showAllOption = true. SimpleQueryBuilder.tsx relies on those defaults for its Action/Resource/Namespace/User filters and never passes them explicitly, so all four filter dropdowns silently lose the "All" option and the clear-selection control. No e2e test covers this, so CI stays green despite the regression.

Fix: restore the previous defaults in Combobox, or pass showAllOption clearable explicitly in SimpleQueryBuilder.tsx, and add a Playwright spec asserting "All" still appears and clears the filter.

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.
@yahyafakhroji

yahyafakhroji commented Sep 15, 2026 •

Copy link
Copy Markdown
Contributor Author

@kevwilliams - Fixed in 5dd36ea. Combobox again defaults showAllOption to true and clearable to false, matching the version before the rewrite, so the four query-builder dropdowns get their "All" item back.

Two details beyond the report:

  • The trigger label had regressed as well: with an empty value, datum-ui's Autocomplete showed the placeholder instead of "All". The "All" item now carries a sentinel value mapped to and from the empty string, so it resolves as the selected option and the trigger reads "All" when unfiltered, as before.
  • clearable already defaulted to false before the rewrite, so no clear control was shown by default then either. /resource-history opts into it explicitly and is unaffected.

@yahyafakhroji
yahyafakhroji merged commit a55ad87 into main Sep 15, 2026
9 checks passed
@yahyafakhroji
yahyafakhroji deleted the feat/ui-datum-ui-alignment branch September 15, 2026 01:51
yahyafakhroji added a commit to datum-cloud/cloud-portal that referenced this pull request Sep 15, 2026
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Activity Log allows start date after end date

2 participants