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

Dockerfile.dev

@@ -6,6 +6,7 @@ WORKDIR /app
 
 COPY Makefile .
 COPY web ./web
+ENV CI=true
 RUN make admin-app
 
 # Build the Go binary

docker-compose.yml

@@ -49,35 +49,31 @@ services:
       - FRONTIER_SPICEDB_HOST=spicedb
       - FRONTIER_SPICEDB_PRE_SHARED_KEY=frontier
 
-  frontier:
-    build:
-      context: .
-      dockerfile: Dockerfile.dev
-    ports:
-      - "8002:8002" # connect endpoint
-      - "8083:8083" # ui
-      - "9000:9000" # metrics
-    command: ["server", "start"]
-    restart: on-failure
-    depends_on:
-      pg:
-        condition: service_healthy
-      frontier-migrate:
-        condition: service_completed_successfully
-      spicedb:
-        condition: service_healthy
-    environment:
-      - FRONTIER_DB_DRIVER=postgres
-      - FRONTIER_DB_URL=postgres://frontier:@pg:5432/frontier?sslmode=disable
-      - FRONTIER_SPICEDB_PORT=50051
-      - FRONTIER_SPICEDB_HOST=spicedb
-      - FRONTIER_SPICEDB_PRE_SHARED_KEY=frontier
-      - FRONTIER_APP_RESOURCES_CONFIG_PATH=file:///opt
-      - FRONTIER_UI_PORT=8083
-      - FRONTIER_AUTHENTICATION_SESSION_HEADERS_CLIENT_IP=x-forwarded-for
-      - FRONTIER_AUTHENTICATION_SESSION_HEADERS_CLIENT_COUNTRY=x-frontier-country
-      - FRONTIER_AUTHENTICATION_SESSION_HEADERS_CLIENT_CITY=x-frontier-city
-      - FRONTIER_AUTHENTICATION_SESSION_HEADERS_CLIENT_USER_AGENT=User-Agent
+  # frontier:
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile.dev
+  #   ports:
+  #     - "8081:8080" # rest endpoint
+  #     - "8082:8081" # grpc endpoint
+  #     - "8083:8083" # ui
+  #   command: ["server", "start"]
+  #   restart: on-failure
+  #   depends_on:
+  #     pg:
+  #       condition: service_healthy
+  #     frontier-migrate:
+  #       condition: service_completed_successfully
+  #     spicedb:
+  #       condition: service_healthy
+  #   environment:
+  #     - FRONTIER_DB_DRIVER=postgres
+  #     - FRONTIER_DB_URL=postgres://frontier:@pg:5432/frontier?sslmode=disable
+  #     - FRONTIER_SPICEDB_PORT=50051
+  #     - FRONTIER_SPICEDB_HOST=spicedb
+  #     - FRONTIER_SPICEDB_PRE_SHARED_KEY=frontier
+  #     - FRONTIER_APP_RESOURCES_CONFIG_PATH=file:///opt
+  #     - FRONTIER_UI_PORT=8083
   #      - FRONTIER_APP_MAILER_SMTP_HOST=sandbox.smtp.mailtrap.io
   #      - FRONTIER_APP_MAILER_SMTP_PORT=2525
   #      - FRONTIER_APP_MAILER_SMTP_USERNAME=
@@ -119,4 +115,12 @@ services:
       pg2:
         condition: service_healthy
       spicedb-repair:
-        condition: service_completed_successfully
+        condition: service_completed_successfully
+
+  # sdk:
+  #   build:
+  #     context: ./sdks/js/packages/sdk-demo
+  #   ports:
+  #     - "3000:3000"
+  #   environment:
+  #     - FRONTIER_ENDPOINT=http://frontier:8080

web/apps/admin/src/pages/admins/AdminsPage.tsx

@@ -1,5 +1,6 @@
 import { AdminsView, useAdminPaths } from "@raystack/frontier/admin";
 import { useNavigate } from "react-router-dom";
+import AdminsIcon from "~/assets/icons/admins.svg?react";
 
 export function AdminsPage() {
   const navigate = useNavigate();
@@ -8,6 +9,7 @@ export function AdminsPage() {
   return (
     <AdminsView
       onNavigateToOrg={(orgId: string) => navigate(`/${paths.organizations}/${orgId}`)}
+      icon={<AdminsIcon />}
     />
   );
 }

web/apps/admin/src/pages/plans/PlansPage.tsx

@@ -1,5 +1,6 @@
 import { PlansView } from "@raystack/frontier/admin";
 import { useNavigate, useParams } from "react-router-dom";
+import PlansIcon from "~/assets/icons/plans.svg?react";
 
 export function PlansPage() {
   const { planId } = useParams();
@@ -10,6 +11,7 @@ export function PlansPage() {
       selectedPlanId={planId}
       onCloseDetail={() => navigate("/plans")}
       onSelectPlan={(id: string) => navigate(`/plans/${id}`)}
+      icon={<PlansIcon />}
     />
   );
 }

web/apps/admin/src/pages/preferences/PreferencesPage.tsx

@@ -1,5 +1,6 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { PreferencesView } from "@raystack/frontier/admin";
+import PreferencesIcon from "~/assets/icons/preferences.svg?react";
 
 export function PreferencesPage() {
   const { name } = useParams();
@@ -10,6 +11,7 @@ export function PreferencesPage() {
       selectedPreferenceName={name}
       onCloseDetail={() => navigate("/preferences")}
       onSelectPreference={(prefName: string) => navigate(`/preferences/${prefName}`)}
+      icon={<PreferencesIcon />}
     />
   );
 }

web/apps/admin/src/pages/products/ProductsPage.tsx

@@ -1,5 +1,6 @@
 import { ProductsView } from "@raystack/frontier/admin";
 import { useParams, useNavigate } from "react-router-dom";
+import ProductsIcon from "~/assets/icons/products.svg?react";
 
 export function ProductsPage() {
   const { productId } = useParams();
@@ -11,6 +12,7 @@ export function ProductsPage() {
       onSelectProduct={(id) => navigate(`/products/${encodeURIComponent(id)}`)}
       onCloseDetail={() => navigate("/products")}
       onNavigateToPrices={(id) => navigate(`/products/${encodeURIComponent(id)}/prices`)}
+      icon={<ProductsIcon />}
     />
   );
 }

web/apps/admin/src/pages/roles/RolesPage.tsx

@@ -1,5 +1,6 @@
 import { RolesView } from "@raystack/frontier/admin";
 import { useParams, useNavigate } from "react-router-dom";
+import RolesIcon from "~/assets/icons/roles.svg?react";
 
 export function RolesPage() {
   const { roleId } = useParams();
@@ -10,6 +11,7 @@ export function RolesPage() {
       selectedRoleId={roleId}
       onSelectRole={(id) => navigate(`/roles/${encodeURIComponent(id)}`)}
       onCloseDetail={() => navigate("/roles")}
+      icon={<RolesIcon />}
     />
   );
 }

web/apps/admin/src/pages/webhooks/WebhooksPage.tsx

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useMatch, useParams, useNavigate } from "react-router-dom";
 import { WebhooksView } from "@raystack/frontier/admin";
 import { AppContext } from "~/contexts/App";
+import WebhooksIcon from "~/assets/icons/webhooks.svg?react";
 
 export function WebhooksPage() {
   const { config } = useContext(AppContext);
@@ -19,6 +20,7 @@ export function WebhooksPage() {
       onSelectWebhook={(id: string) => navigate(`/webhooks/${encodeURIComponent(id)}`)}
       onOpenCreate={() => navigate("/webhooks/create")}
       enableDelete={enableDelete}
+      icon={<WebhooksIcon />}
     />
   );
 }

web/sdk/admin/components/PageHeader.tsx

@@ -1,9 +1,10 @@
-import type { CSSProperties, PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren, ReactNode } from "react";
 import { Flex, Text } from "@raystack/apsara-v1";
 import styles from "./page-header.module.css";
 
 export type PageHeaderTypes = {
   title: string;
+  icon?: ReactNode;
   breadcrumb: { name: string; href?: string }[];
   // eslint-disable-next-line no-unused-vars -- callback param name is for type documentation
   onBreadcrumbClick?: (item: { name: string; href?: string }) => void;
@@ -13,6 +14,7 @@ export type PageHeaderTypes = {
 
 export function PageHeader({
   title,
+  icon,
   breadcrumb,
   onBreadcrumbClick,
   children,
@@ -25,11 +27,12 @@ export function PageHeader({
       align="center"
       justify="between"
       className={className}
-      style={{ padding: "16px 24px", ...style }}
+      style={{ padding: "16px 24px", minHeight: "var(--rs-space-12)", ...style }}
       {...props}
     >
       <Flex align="center" gap={5}>
-        <Flex align="center" gap={3} className={styles.breadcrumb}>
+        <Flex align="center" gap={2} className={styles.breadcrumb}>
+          {icon}
           <Text size="regular" weight="medium">{title}</Text>
           {breadcrumb.map((item) =>
             item.href && onBreadcrumbClick ? (

web/sdk/admin/views/admins/index.tsx

@@ -1,4 +1,5 @@
 import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { getColumns } from "./columns";
 import styles from "./admins.module.css";
 import { useQuery } from "@connectrpc/connect-query";
@@ -23,10 +24,12 @@
 };
 
 export type AdminsViewProps = {
   onNavigateToOrg?: (orgId: string) => void;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
-export default function AdminsView({ onNavigateToOrg }: AdminsViewProps = {}) {
+export default function AdminsView({ onNavigateToOrg, icon }: AdminsViewProps = {}) {
   const t = useTerminology();
   const {
     data: platformUsersData,
@@ -68,6 +71,7 @@
       <Flex direction="column" className={styles.tableWrapper}>
         <PageHeader
           title={pageHeader.title}
+          icon={icon}
           breadcrumb={pageHeader.breadcrumb}
           className={styles.header}
         />

web/sdk/admin/views/audit-logs/audit-logs.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/invoices/invoices.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/organizations/list/list.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/plans/index.tsx

@@ -1,21 +1,17 @@
 import { EmptyState, Flex, DataTable, Drawer } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import type { Plan } from "@raystack/proton/frontier";
 import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
-import { PlanHeader } from "./header";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import styles from "./plans.module.css";
+import { PageHeader } from "../../components/PageHeader";
 import { PageTitle } from "../../components/PageTitle";
 import { SheetHeader } from "../../components/SheetHeader";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 import PlanDetails from "./details";
 
-const pageHeader = {
-  title: "Plans",
-  breadcrumb: [],
-};
-
 export type PlansViewProps = {
   /** When set, opens the detail sheet for this plan. */
   selectedPlanId?: string;
@@ -25,13 +21,16 @@ export type PlansViewProps = {
   onSelectPlan?: (planId: string) => void;
   /** App name displayed in the page title. */
   appName?: string;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function PlansView({
   selectedPlanId,
   onCloseDetail,
   onSelectPlan,
   appName,
+  icon,
 }: PlansViewProps = {}) {
   const {
     data: plansResponse,
@@ -70,7 +69,14 @@ export default function PlansView({
     >
       <Flex direction="column">
         <PageTitle title="Plans" appName={appName} />
-        <PlanHeader header={pageHeader} />
+        <PageHeader
+          title="Plans"
+          icon={icon}
+          breadcrumb={[]}
+          className={styles.header}
+        >
+          <DataTable.Search size="small" placeholder="Search plans..." />
+        </PageHeader>
         <DataTable.Content
           emptyState={noDataChildren}
           classNames={{ root: styles.tableRoot, table: styles.table }}

web/sdk/admin/views/preferences/PreferencesView.tsx

@@ -1,4 +1,5 @@
 import { Flex, EmptyState } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { createQueryOptions, useTransport } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
@@ -20,12 +21,15 @@ export type PreferencesViewProps = {
   /** Called when the detail panel is closed. Use to clear the selected preference. */
   onCloseDetail?: () => void;
   onSelectPreference?: (name: string) => void;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function PreferencesView({
   selectedPreferenceName,
   onCloseDetail,
   onSelectPreference,
+  icon,
 }: PreferencesViewProps = {}) {
   const transport = useTransport();
 
@@ -85,6 +89,7 @@ export default function PreferencesView({
         traits={traits}
         isLoading={isLoading}
         onSelectPreference={onSelectPreference}
+        icon={icon}
       />
     </Flex>
   );

web/sdk/admin/views/preferences/index.tsx

@@ -1,4 +1,5 @@
 import { EmptyState, DataTable, Flex } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { Preference, PreferenceTrait } from "@raystack/proton/frontier";
 import { PageHeader } from "../../components/PageHeader";
 import { getColumns } from "./columns";
@@ -15,13 +16,15 @@ export type PreferencesListProps = {
   traits: PreferenceTrait[];
   isLoading: boolean;
   onSelectPreference?: (name: string) => void;
+  icon?: ReactNode;
 };
 
 export default function PreferencesList({
   preferences,
   traits,
   isLoading,
   onSelectPreference,
+  icon,
 }: PreferencesListProps) {
   const columns = getColumns({
     traits,
@@ -40,6 +43,7 @@ export default function PreferencesList({
       <Flex direction="column" className={styles.tableWrapper}>
         <PageHeader
           title={pageHeader.title}
+          icon={icon}
           breadcrumb={pageHeader.breadcrumb}
           className={styles.header}
         />