Skip to content

feat(admin-ui): unify page header height and surface icon prop on Views#1606

Open
paanSinghCoder wants to merge 2 commits into
chore/sdk-admin-apsara-v1from
feat/admin-page-header-icon-and-height
Open

feat(admin-ui): unify page header height and surface icon prop on Views#1606
paanSinghCoder wants to merge 2 commits into
chore/sdk-admin-apsara-v1from
feat/admin-page-header-icon-and-height

Conversation

@paanSinghCoder
Copy link
Copy Markdown
Contributor

@paanSinghCoder paanSinghCoder commented May 13, 2026

Two small follow-ups to the Apsara v1 migration:

1. Header height parity

  • Added `min-height: var(--rs-space-12)` (56px) to the four list-page navbars (orgs/users/audit-logs/invoices) and to `` itself.
  • Roles/Products/Plans/Webhooks already rendered ≥56px due to their Search/Button content; this is a floor.
  • Preferences/Admins previously rendered ~52px (no children); now match 56px.

2. Icon prop on Views

  • Added `icon?: ReactNode` to `RolesView`, `ProductsView`, `PlansView`, `WebhooksView`, `PreferencesView`, `AdminsView`.
  • Each View threads it through to its header / `` and renders next to the title.
  • Each host page imports its sidebar SVG and passes it down, so sidebar and page-header share the same icon source.

Base

Targets `chore/sdk-admin-apsara-v1` (the migration PR). Auto-retargets to `main` once that merges.

@paanSinghCoder @claude
feat(admin-ui): unify page header height and surface icon prop on Views
f90c0e4 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 13, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontier Ready Ready Preview, Comment May 15, 2026 10:41am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 13, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e33317e0-3ca3-44a3-9de5-ddb5a0ee6014

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@paanSinghCoder paanSinghCoder self-assigned this May 13, 2026
@coveralls
Copy link
Copy Markdown

coveralls commented May 13, 2026 •
edited
Loading

Coverage Report for CI Build 25913556014

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 42.291%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats

Coverage Status
Relevant Lines: 37542
Covered Lines: 15877
Line Coverage: 42.29%
Coverage Strength: 11.9 hits per line
💛 - Coveralls

rohanchkrabrty
rohanchkrabrty requested changes May 15, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO we can create a BaseViewProps and then extend all view/extend types from it

Comment thread web/sdk/admin/views/plans/header.tsx Outdated
import styles from "./plans.module.css";

export const PlanHeader = ({ header }: any) => {
export const PlanHeader = ({ header, icon }: { header: any; icon?: ReactNode }) => {
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component can be skipped and the code can be inlined

Copy link
Copy Markdown
Contributor Author

@paanSinghCoder paanSinghCoder May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Comment thread web/sdk/admin/views/products/header.tsx
@@ -13,14 +14,17 @@ const defaultPageHeader = {
export const ProductsHeader = ({
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component can also be skipped and inlined instead

Copy link
Copy Markdown
Contributor Author

@paanSinghCoder paanSinghCoder May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Comment thread web/sdk/admin/views/roles/header.tsx Outdated
};

export const RolesHeader = () => {
export const RolesHeader = ({ icon }: { icon?: ReactNode }) => {
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component can also be skipped and inlined instead

Copy link
Copy Markdown
Contributor Author

@paanSinghCoder paanSinghCoder May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Comment thread web/sdk/admin/views/webhooks/webhooks/header.tsx Outdated
};

export const WebhooksHeader = ({ header = pageHeader, onOpenCreate }: WebhooksHeaderProps) => {
export const WebhooksHeader = ({ header = pageHeader, onOpenCreate, icon }: WebhooksHeaderProps) => {
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for this

Copy link
Copy Markdown
Contributor Author

@paanSinghCoder paanSinghCoder May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@paanSinghCoder
refactor(admin): replace custom headers with unified PageHeader compo…
5e923bf 
…nent across plans, roles, and webhooks views
@paanSinghCoder
Copy link
Copy Markdown
Contributor Author

paanSinghCoder commented May 15, 2026

IMO we can create a BaseViewProps and then extend all view/extend types from it

@rohanchkrabrty There is only one prop (icon) shared across these components. I don't think creating a base type adds much value here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rohanchkrabrty rohanchkrabrty Awaiting requested review from rohanchkrabrty

Assignees

@paanSinghCoder paanSinghCoder

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@paanSinghCoder @coveralls @rohanchkrabrty