Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paanSinghCoder wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dcc92f6
chore(admin): migrate SDK admin and host app to Apsara v1 (rc.6)
paanSinghCoder May 12, 2026
c4beddf
Merge branch 'main' into chore/sdk-admin-apsara-v1
paanSinghCoder May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions web/apps/admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-v1": "npm:@raystack/apsara@1.0.0-rc.6",
"@raystack/frontier": "workspace:^",
"@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
"@stitches/react": "^1.2.8",
Expand All @@ -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",
Expand Down
6 changes: 3 additions & 3 deletions web/apps/admin/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex } from "@raystack/apsara";
import { Flex } from "@raystack/apsara-v1";
import { Outlet } from "react-router-dom";
import "@raystack/apsara/style.css";
import "@raystack/apsara/normalize.css";
import "@raystack/apsara-v1/normalize.css";
import "@raystack/apsara-v1/style.css";
import "./App.css";
import IAMSidebar from "./components/Sidebar";

Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Box, Flex } from "@raystack/apsara";
import { Box, Flex } from "@raystack/apsara-v1";

type Props = {
header?: React.ReactNode;
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/Price.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex } from "@raystack/apsara";
import { Flex } from "@raystack/apsara-v1";
import { getCurrencyValue } from "~/utils/helper";

type PriceProps = {
Expand Down
46 changes: 24 additions & 22 deletions web/apps/admin/src/components/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import type React from "react";
import { useContext } from "react";
import {
Avatar,
DropdownMenu,
Menu,
Flex,
Sidebar,
Text,
useTheme,
} from "@raystack/apsara";
} from "@raystack/apsara-v1";
import { useMutation } from "@connectrpc/connect-query";
import { FrontierServiceQueries } from "@raystack/proton/frontier";

import styles from "./sidebar.module.css";
import { OrganizationIcon } from "@raystack/apsara/icons";
import { OrganizationIcon } from "@raystack/apsara-v1/icons";
import IAMIcon from "~/assets/icons/iam.svg?react";
import UserIcon from "~/assets/icons/users.svg?react";
import InvoicesIcon from "~/assets/icons/invoices.svg?react";
Expand Down Expand Up @@ -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>
))}
Expand All @@ -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>
);
Expand Down Expand Up @@ -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>
);
}
4 changes: 4 additions & 0 deletions web/apps/admin/src/components/Sidebar/sidebar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
width: 220px !important;
}

.sidebar :global(.sidebar-module_main__qDvo4) {
gap: var(--rs-space-1);
}
Comment on lines +9 to +11
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 12, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Avoid targeting CSS Module hashed class names directly.

The selector .sidebar :global(.sidebar-module_main__qDvo4) relies on a generated hash that may change when the source module is modified or rebuilt, causing the style rule to silently fail.

Consider using a stable selector approach: a data attribute, semantic class, or direct child combinator instead.

♻️ Suggested alternatives

Option 1: Use a data attribute on the target element

-.sidebar :global(.sidebar-module_main__qDvo4) {
+.sidebar [data-sidebar-main] {
   gap: var(--rs-space-1);
 }

Then add data-sidebar-main to the target element in the component.

Option 2: Use a direct child selector (if structure allows)

-.sidebar :global(.sidebar-module_main__qDvo4) {
+.sidebar > .main {
   gap: var(--rs-space-1);
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.sidebar :global(.sidebar-module_main__qDvo4) {
gap: var(--rs-space-1);
}
.sidebar [data-sidebar-main] {
gap: var(--rs-space-1);
}
🧰 Tools
🪛 Stylelint (17.11.0)

[error] 9-9: Unknown pseudo-class selector ":global" (selector-pseudo-class-no-unknown)

(selector-pseudo-class-no-unknown)


.sidebar-group {
margin-top: var(--rs-space-5);
}
30 changes: 16 additions & 14 deletions web/apps/admin/src/components/assign-role.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {
Flex,
Label,
Text,
toast,
} from "@raystack/apsara";
toastManager,
} from "@raystack/apsara-v1";
import { useCallback } from "react";
import type {
SearchOrganizationUsersResponse_OrganizationUser,
Expand Down Expand Up @@ -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);
}
};
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/collapsable-search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
import { IconButton, Search } from "@raystack/apsara";
import { IconButton, Search } from "@raystack/apsara-v1";
import React, { useState } from "react";

interface CollapsableSearchProps {
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/dialog/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex, Image, Text } from "@raystack/apsara";
import { Flex, Image, Text } from "@raystack/apsara-v1";

type DialogHeaderProps = {
title?: string;
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/error-boundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component, ReactNode } from "react";
import { EmptyState } from "@raystack/apsara";
import { EmptyState } from "@raystack/apsara-v1";
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";

interface Props {
Expand Down
10 changes: 5 additions & 5 deletions web/apps/admin/src/components/page-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Flex, Text } from "@raystack/apsara";
import { Flex, Text } from "@raystack/apsara-v1";
import { Link } from "react-router-dom";
import styles from "./page-header.module.css";
export type PageHeaderTypes = {
Expand All @@ -25,8 +25,8 @@ export default function PageHeader({
style={{ padding: "16px 24px", ...style }}
{...props}
>
<Flex align="center" gap="medium">
<Flex align="center" gap="small" className={styles.breadcrumb}>
<Flex align="center" gap={5}>
<Flex align="center" gap={3} className={styles.breadcrumb}>
<Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
{breadcrumb.map((item) => (
<Link
Expand All @@ -35,13 +35,13 @@ export default function PageHeader({
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>
);
}
4 changes: 2 additions & 2 deletions web/apps/admin/src/components/sheet/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Cross1Icon } from "@radix-ui/react-icons";
import { Flex, Text } from "@raystack/apsara";
import { Flex, Text } from "@raystack/apsara-v1";

type SheetHeaderProps = {
title: string;
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/states/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex, Spinner } from "@raystack/apsara";
import { Flex, Spinner } from "@raystack/apsara-v1";

export default function LoadingState() {
return (
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/components/states/Unauthorized.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
import { Button, EmptyState, Flex } from "@raystack/apsara";
import { Button, EmptyState, Flex } from "@raystack/apsara-v1";
import { useMutation } from "@connectrpc/connect-query";
import { FrontierServiceQueries } from "@raystack/proton/frontier";

Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/configs/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ThemeProviderProps } from "@raystack/apsara";
import { ThemeProviderProps } from "@raystack/apsara-v1";

export const themeConfig: ThemeProviderProps = {
defaultTheme: "system",
Expand Down
8 changes: 4 additions & 4 deletions web/apps/admin/src/containers/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { Box, Flex, Image } from "@raystack/apsara";
import { Header, MagicLink } from "@raystack/frontier/react";
import { Box, Flex, Image } from "@raystack/apsara-v1";
import { AuthHeader, MagicLinkView } from "@raystack/frontier/client";
import { useContext } from "react";
import PageTitle from "~/components/page-title";
import { AppContext } from "~/contexts/App";
Expand All @@ -26,7 +26,7 @@ export default function Login() {
}}
>
<Flex direction="column" gap={5} style={{ width: "100%" }}>
<Header
<AuthHeader
logo={
config?.logo ? (
<Image
Expand All @@ -42,7 +42,7 @@ export default function Login() {
}
title={`Login to ${config?.title || defaultConfig.title}`}
/>
<MagicLink open />
<MagicLinkView open inline />
</Flex>
</Flex>
</Box>
Expand Down
6 changes: 3 additions & 3 deletions web/apps/admin/src/containers/magiclink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { Flex, Image } from "@raystack/apsara";
import { MagicLinkVerify } from "@raystack/frontier/react";
import { Flex, Image } from "@raystack/apsara-v1";
import { MagicLinkVerifyView } from "@raystack/frontier/client";
import IAMIcon from "~/assets/icons/iam.svg?react";
import { AppContext } from "~/contexts/App";
import { useContext } from "react";
Expand All @@ -15,7 +15,7 @@ export default function MagicLink() {
justify="center"
style={{ height: "100vh", textAlign: "center" }}
>
<MagicLinkVerify
<MagicLinkVerifyView
logo={
config?.logo ? (
<Image
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/hooks/useRQL.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useState } from "react";
import type { DataTableQuery } from "@raystack/apsara";
import type { DataTableQuery } from "@raystack/apsara-v1";
import type {
RQLQueryGroupResponse,
RQLQueryPaginationResponse
Expand Down
2 changes: 1 addition & 1 deletion web/apps/admin/src/layout/auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
11 changes: 6 additions & 5 deletions web/apps/admin/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ThemeProvider, ToastContainer } from "@raystack/apsara";
import { ThemeProvider, Toast } from "@raystack/apsara-v1";
import { SkeletonTheme } from "react-loading-skeleton";
import React from "react";
import ReactDOM from "react-dom/client";
Expand All @@ -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>
Expand Down
1 change: 0 additions & 1 deletion web/apps/admin/src/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// import { MagicLinkVerify } from "@raystack/frontier/react";
import * as R from "ramda";
import { memo, useContext } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
Expand Down
8 changes: 3 additions & 5 deletions web/apps/admin/src/utils/transform-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
import type { RQLRequest, RQLFilter, RQLSort } from "@raystack/proton/frontier";
import { RQLRequestSchema, RQLFilterSchema, RQLSortSchema } from "@raystack/proton/frontier";
import { create } from "@bufbuild/protobuf";
Expand All @@ -19,9 +19,7 @@ export interface TransformOptions {
/**
* Converts a filter value to the appropriate RQLFilter value format
*/
function convertFilterValue(
value: string | number | boolean | null | undefined,
): RQLFilter["value"] {
function convertFilterValue(value: unknown): RQLFilter["value"] {
switch (typeof value) {
case "boolean":
return { case: "boolValue", value };
Expand All @@ -30,7 +28,7 @@ function convertFilterValue(
case "string":
return { case: "stringValue", value };
default:
return { case: "stringValue", value: value ?? "" };
return { case: "stringValue", value: value == null ? "" : String(value) };
}
}

Expand Down
Loading
Loading