feat(authz-ui): align KPI tiles with dashboard style across policy screens#17282
feat(authz-ui): align KPI tiles with dashboard style across policy screens#17282podlesrafal wants to merge 4 commits into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the KpiTile component by adding support for optional icons and custom icon styling, alongside layout improvements. These updates are applied across several pages (ServicePolicyPage, EntitiesPage, and SchemaPage), transitioning them to a responsive auto-fit grid layout. Feedback points out that ActionsPage.tsx was missed during the grid layout update, and suggests applying the same responsive grid styling to its KpiTile container for consistency.
| <Card className="p-4" aria-label={label}> | ||
| {loading ? <Skeleton className="h-8 w-12" /> : <div className={cn('text-2xl', TONE_CLASS[tone])}>{value}</div>} | ||
| <p className="text-xs text-muted-foreground">{label}</p> | ||
| <Card className="flex flex-col gap-3 p-5" aria-label={label}> |
There was a problem hiding this comment.
is ti really a card here or should we check if there is something more relevant in the observability framework for this kind of thing ?
There was a problem hiding this comment.
I dont see any other better options.
|
podlesrafal
force-pushed
the
feat/authz-ui-tiles-consistency
branch
from
a7a87b5 to
245e375
Compare
…reens Enrich KpiTile with an optional icon badge and adopt the dashboard's auto-fit grid so Entities, Actions, Schema, and policy-management screens render their metrics in a single row with a consistent look.
Apply the same dashboard-style auto-fit grid to the Actions page so its metrics container matches the other policy screens.
Swap the inline gridTemplateColumns auto-fit style for the safelisted grid-cols-4 Tailwind utility across the KPI tile rows. The module is a Tier 1 graphene-core consumer with no Tailwind pipeline, so arbitrary auto-fit values cannot be generated; grid-cols-4 is guaranteed by the graphene-core safelist.
podlesrafal
force-pushed
the
feat/authz-ui-tiles-consistency
branch
from
5484564 to
67f9e69
Compare
3 participants
Issue
No associated Jira ticket — small UI consistency follow-up.
Description
Unifies the KPI tiles across the Authorization module so every screen matches the Dashboard look.
KpiTilegains an optional icon badge (Icon+iconClassName) rendered as a tinted rounded square, with a larger value and label — same anatomy as the Dashboard cards.auto-fitgrid (repeat(auto-fit, minmax(240px, 1fr))) instead ofgrid-cols-2 md:grid-cols-4, so metric tiles render in a single row.KpiTiles for consistency.No behavioural changes — purely presentational.
Additional context
tsc --noEmitandeslintboth pass.