Address Greptile review on PR #4262.
P2 (line 62): the value read back from localStorage was typed as
any and trusted blindly, so a value written by an extension or a
manual edit could end up as the chart's displayMode. Read it once,
keep only 'table' or 'cards', otherwise fall back to null and let
the existing useMobile-driven default decide. Self-correcting on the
next click is no longer necessary because the next render is already
clean.
P2 (line 114): the empty <span /> was a flex placeholder that
existed only to make justify-content: space-between push the toggle
button to the right when allowSearch was false. Drop the span, drop
space-between, and put marginLeft: auto on the inner Row holding the
actions and the toggle. The toggle now hugs the right edge whether
search is rendered or not, with no extra DOM node. style={{}} is
used because the react-zen Row marginLeft prop only accepts spacing
tokens, not auto.
Verified in Playwright at 1400 viewport: the toggle is now flush
with the right edge of the action row, the toggle still flips
between table and cards on click, and a deliberately invalid
localStorage value ({"malicious":true}) is rejected on reload so
the page falls back to the table default.
DataGrid was already injecting displayMode='cards' on small viewports
via useMobile() and leaving it undefined (default 'table') everywhere
else. The user had no way to override either side: someone on a wide
screen who preferred a denser card list could not get there, and
someone on a tablet with a tall narrow window could not force the
table view to keep their layout consistent.
Add a small icon toggle in the DataGrid header row that flips between
table and cards, and persist the choice in localStorage under
umami.datagrid.displayMode. The user choice wins; if there is none,
the existing useMobile-driven default applies. Every DataGrid
consumer (sessions, websites, links, pixels, boards, team admin,
etc.) gets the toggle automatically with no caller-side change.
Verified in playwright on the sessions page: at 1400 viewport the
default is table; clicking the toggle switches to cards and a reload
keeps cards. At 800 viewport the default is cards; clicking the
toggle switches to table even though useMobile would otherwise force
cards. Round trip in both directions works and the choice survives
navigation away and back.
The session and event expanded metrics queries use implicit column
aliasing (`${column} name`) which causes a PostgreSQL syntax error
when the column name (like `os`) is followed by `name` without `AS`.
PostgreSQL parses `os name` ambiguously and fails with:
syntax error at or near "name"
The sibling file getPageviewExpandedMetrics.ts already uses the correct
`${column} as name` pattern. This applies the same fix to the session
and event queries.
Fixes#3970
Yan
Mike CaoandGitHub
Mike Cao
Yhya syrianandGitHub
Mahesh RavuriandGitHub
Francis Cao
lawrence3699