migrate(admin): SDK admin and SDK app to Apsara v1 (rc.6)

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/package.json

@@ -17,7 +17,7 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.1.8",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "0.56.6",
+    "@raystack/apsara": "1.0.0-rc.6",
     "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e",
     "@stitches/react": "^1.2.8",
@@ -37,7 +37,6 @@
     "react-router-dom": "^6.9.0",
     "react-select": "^5.8.0",
     "slugify": "^1.6.6",
-    "sonner": "^1.4.41",
     "swr": "^2.1.2",
     "usehooks-ts": "^3.1.1",
     "vite-tsconfig-paths": "^4.0.7",

web/apps/admin/src/App.tsx

@@ -1,7 +1,7 @@
 import { Flex } from "@raystack/apsara";
 import { Outlet } from "react-router-dom";
-import "@raystack/apsara/style.css";
 import "@raystack/apsara/normalize.css";
+import "@raystack/apsara/style.css";
 import "./App.css";
 import IAMSidebar from "./components/Sidebar";
 

web/apps/admin/src/components/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import type React from "react";
 import { useContext } from "react";
 import {
   Avatar,
-  DropdownMenu,
+  Menu,
   Flex,
   Sidebar,
   Text,
@@ -144,7 +144,7 @@ export default function IAMSidebar() {
           {BRAND_NAME}
         </Text>
       </Sidebar.Header>
-      <Sidebar.Main>
+      <Sidebar.Main className={styles["sidebar-main"]}>
         {navigationItems.map(nav => {
           return nav?.subItems?.length ? (
             <Sidebar.Group
@@ -157,7 +157,7 @@ export default function IAMSidebar() {
                   key={subItem.name}
                   active={isActive(subItem.to)}
                   data-test-id={`admin-sidebar-navigation-cell-${subItem.name}`}
-                  as={<Link to={subItem?.to ?? ""} />}>
+                  render={<Link to={subItem?.to ?? ""} />}>
                   {subItem.name}
                 </Sidebar.Item>
               ))}
@@ -168,7 +168,7 @@ export default function IAMSidebar() {
               key={nav.name}
               active={isActive(nav.to)}
               data-test-id={`admin-sidebar-navigation-cell-${nav.name}`}
-              as={<Link to={nav?.to ?? ""} />}>
+              render={<Link to={nav?.to ?? ""} />}>
               {nav.name}
             </Sidebar.Item>
           );
@@ -207,28 +207,30 @@ function UserDropdown() {
       : { icon: <SunIcon />, label: "Light" };
 
   return (
-    <DropdownMenu placement="top">
-      <DropdownMenu.Trigger asChild>
-        <Sidebar.Item
-          leadingIcon={
-            <Avatar src={user?.avatar} fallback={userInital} size={3} />
-          }
-          data-test-id="frontier-sdk-sidebar-logout">
-          {user?.email}
-        </Sidebar.Item>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Sidebar.Item
+            leadingIcon={
+              <Avatar src={user?.avatar} fallback={userInital} size={3} />
+            }
+            data-test-id="frontier-sdk-sidebar-logout">
+            {user?.email}
+          </Sidebar.Item>
+        }
+      />
+      <Menu.Content side="top">
+        <Menu.Item
           onClick={toggleTheme}
           data-test-id="admin-toggle-theme">
           {themeData.icon} {themeData.label}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
+        </Menu.Item>
+        <Menu.Item
           onClick={() => logoutMutation.mutate({})}
           data-test-id="admin-logout-btn">
           Logout
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu>
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
   );
 }

web/apps/admin/src/components/Sidebar/sidebar.module.css

@@ -6,6 +6,10 @@
   width: 220px !important;
 }
 
+.sidebar .sidebar-main {
+  gap: var(--rs-space-1);
+}
+
 .sidebar-group {
   margin-top: var(--rs-space-5);
 }

web/apps/admin/src/components/assign-role.tsx

@@ -5,7 +5,7 @@ import {
   Flex,
   Label,
   Text,
-  toast,
+  toastManager,
 } from "@raystack/apsara";
 import { useCallback } from "react";
 import type {
@@ -139,9 +139,9 @@ export const AssignRole = ({
         onRoleUpdate();
       }
 
-      toast.success("Role assigned successfully");
+      toastManager.add({ title: "Role assigned successfully", type: "success" });
     } catch (error) {
-      toast.error("Failed to assign role");
+      toastManager.add({ title: "Failed to assign role", type: "error" });
       console.error(error);
     }
   };
@@ -187,16 +187,18 @@ export const AssignRole = ({
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="assign-role-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="assign-role-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               data-test-id="assign-role-update-button"

web/apps/admin/src/components/dialog/header.tsx

@@ -10,7 +10,7 @@ export function DialogHeader({ title }: DialogHeaderProps) {
       align="center"
       style={{ padding: "16px 32px", width: "98%", height: "52px" }}
     >
-      <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
+      <Text size="regular" weight="medium">{title}</Text>
       <Image alt="share-image" src="/share.svg" />
     </Flex>
   );

web/apps/admin/src/components/page-header.tsx

@@ -25,23 +25,23 @@ export default function PageHeader({
       style={{ padding: "16px 24px", ...style }}
       {...props}
     >
-      <Flex align="center" gap="medium">
-        <Flex align="center" gap="small" className={styles.breadcrumb}>
-          <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
+      <Flex align="center" gap={5}>
+        <Flex align="center" gap={3} className={styles.breadcrumb}>
+          <Text size="regular" weight="medium">{title}</Text>
           {breadcrumb.map((item) => (
             <Link
               key={item.name}
               to={item?.href ?? ""}
               style={{ display: "flex", flexDirection: "row", gap: "8px" }}
             >
               <Flex align="center">
-                <Text size={1}>{item.name}</Text>
+                <Text size="mini">{item.name}</Text>
               </Flex>
             </Link>
           ))}
         </Flex>
       </Flex>
-      <Flex gap="small">{children}</Flex>
+      <Flex gap={3}>{children}</Flex>
     </Flex>
   );
 }

web/apps/admin/src/components/sheet/header.tsx

@@ -9,7 +9,7 @@ type SheetHeaderProps = {
 export function SheetHeader({ title, onClick }: SheetHeaderProps) {
   return (
     <Flex justify="between" style={styles.header}>
-      <Text size={4} style={{ fontWeight: "500" }}>
+      <Text size="regular" weight="medium">
         {title}
       </Text>
       <Cross1Icon

web/apps/admin/src/containers/login.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Box, Flex, Image } from "@raystack/apsara";
-import { Header, MagicLink } from "@raystack/frontier/react";
+import { AuthHeader, MagicLinkView } from "@raystack/frontier/client";
 import { useContext } from "react";
 import PageTitle from "~/components/page-title";
 import { AppContext } from "~/contexts/App";
@@ -26,7 +26,7 @@ export default function Login() {
           }}
         >
           <Flex direction="column" gap={5} style={{ width: "100%" }}>
-            <Header
+            <AuthHeader
               logo={
                 config?.logo ? (
                   <Image
@@ -42,7 +42,7 @@ export default function Login() {
               }
               title={`Login to ${config?.title || defaultConfig.title}`}
             />
-            <MagicLink open />
+            <MagicLinkView open inline />
           </Flex>
         </Flex>
       </Box>

web/apps/admin/src/containers/magiclink.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Flex, Image } from "@raystack/apsara";
-import { MagicLinkVerify } from "@raystack/frontier/react";
+import { MagicLinkVerifyView } from "@raystack/frontier/client";
 import IAMIcon from "~/assets/icons/iam.svg?react";
 import { AppContext } from "~/contexts/App";
 import { useContext } from "react";
@@ -15,7 +15,7 @@ export default function MagicLink() {
       justify="center"
       style={{ height: "100vh", textAlign: "center" }}
     >
-      <MagicLinkVerify
+      <MagicLinkVerifyView
         logo={
           config?.logo ? (
             <Image

web/apps/admin/src/layout/auth.tsx

@@ -1,4 +1,4 @@
-import { FrontierProvider } from "@raystack/frontier/react";
+import { FrontierProvider } from "@raystack/frontier/client";
 import { Outlet } from "react-router-dom";
 import { frontierConfig } from "~/configs/frontier";
 import { themeConfig } from "~/configs/theme";

web/apps/admin/src/main.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider, ToastContainer } from "@raystack/apsara";
+import { ThemeProvider, Toast } from "@raystack/apsara";
 import { SkeletonTheme } from "react-loading-skeleton";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -20,10 +20,11 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
             baseColor="var(--rs-color-background-base-primary-hover)"
           >
             <ConnectProvider>
-              <AppContextProvider>
-                <Routes />
-              </AppContextProvider>
-              <ToastContainer richColors />
+              <Toast.Provider>
+                <AppContextProvider>
+                  <Routes />
+                </AppContextProvider>
+              </Toast.Provider>
             </ConnectProvider>
           </SkeletonTheme>
         </ThemeProvider>

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 />}
     />
   );
 }