chore(admin-ui): migrate components to apsara v1 (#1039)

* chore: migrate super admins table to v1

* chore: update datatable of preferences page to v1

* chore: migrate webhooks table to v1

* chore: migrate roles table to v1

* chore: remove unused old user list page

* chore: migrate plans table to v1

* chore: migrate products table to v1

* chore: update css variables

* chore: remove groups pages

* chore: remove unused components

* chore: update import to v1

Author: rsbh

ui/src/components/DialogTable.tsx

@@ -24,6 +24,6 @@ export function SheetHeader({ title, onClick }: SheetHeaderProps) {
 const styles = {
   header: {
     padding: "18px 32px",
-    borderBottom: "1px solid var(--border-base)",
+    borderBottom: "1px solid var(--rs-color-border-base-primary)",
   },
 };

ui/src/components/TableLoader/index.tsx

@@ -1,15 +1,18 @@
 import { Link } from "react-router-dom";
-import { ApsaraColumnDef } from "@raystack/apsara";
-import { V1Beta1Plan } from "@raystack/frontier";
+import { type DataTableColumnDef } from "@raystack/apsara/v1";
+import type { V1Beta1Plan } from "@raystack/frontier";
 
-export const getColumns: () => ApsaraColumnDef<V1Beta1Plan>[] = () => {
+export const getColumns: () => DataTableColumnDef<
+  V1Beta1Plan,
+  unknown
+>[] = () => {
   return [
     {
       header: "ID",
       accessorKey: "id",
       filterVariant: "text",
       cell: ({ row, getValue }) => (
-        <Link to={`/plans/${row.getValue("id")}`}>{getValue()}</Link>
+        <Link to={`/plans/${row.getValue("id")}`}>{getValue() as string}</Link>
       ),
     },
     {
@@ -23,22 +26,16 @@ export const getColumns: () => ApsaraColumnDef<V1Beta1Plan>[] = () => {
       accessorKey: "interval",
       filterVariant: "text",
       cell: (info) => info.getValue(),
-      footer: (props) => props.column.id,
     },
     {
       header: "Created At",
       accessorKey: "created_at",
-      meta: {
-        headerFilter: false,
-      },
       cell: (info) =>
         new Date(info.getValue() as Date).toLocaleString("en", {
           month: "long",
           day: "numeric",
           year: "numeric",
         }),
-      filterVariant: "date",
-      footer: (props) => props.column.id,
     },
   ];
 };

ui/src/components/sheet/header.tsx

@@ -1,20 +1,10 @@
-import { Grid } from "@raystack/apsara";
-import { Flex, Text } from "@raystack/apsara/v1";
+import { Flex, Text, Grid } from "@raystack/apsara/v1";
 import { usePlan } from ".";
 export default function PlanDetails() {
   const { plan } = usePlan();
 
   return (
-    <Flex
-      direction="column"
-      gap="large"
-      style={{
-        width: "320px",
-        height: "calc(100vh - 60px)",
-        borderLeft: "1px solid var(--border-base)",
-        padding: "var(--pd-16)",
-      }}
-    >
+    <Flex direction="column" gap="large">
       <Text size={4}>{plan?.name}</Text>
       <Flex direction="column" gap="large">
         <Grid columns={2} gap="small">

ui/src/containers/billingplans.list/columns.tsx

@@ -1,15 +1,15 @@
-import { DataTable, useTable } from "@raystack/apsara";
+import { DataTable } from "@raystack/apsara/v1";
 import PageHeader from "~/components/page-header";
+import styles from "./plans.module.css";
 
 export const PlanHeader = ({ header }: any) => {
-  const { filteredColumns } = useTable();
-  const isFiltered = filteredColumns.length > 0;
-
   return (
-    <PageHeader title={header.title} breadcrumb={header?.breadcrumb || []}>
-      {isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />}
-      <DataTable.ViewOptions />
-      <DataTable.GloabalSearch placeholder="Search plans..." />
+    <PageHeader
+      title={header.title}
+      breadcrumb={header?.breadcrumb || []}
+      className={styles.header}
+    >
+      <DataTable.Search size="small" placeholder="Search plans..." />
     </PageHeader>
   );
 };

ui/src/containers/billingplans.list/details.tsx

@@ -1,14 +1,21 @@
-import { DataTable } from "@raystack/apsara";
-import { EmptyState, Flex } from "@raystack/apsara/v1";
+import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara/v1";
 import { useEffect, useState } from "react";
-import { Outlet, useOutletContext, useParams } from "react-router-dom";
+import {
+  Outlet,
+  useNavigate,
+  useOutletContext,
+  useParams,
+} from "react-router-dom";
 
-import { V1Beta1Plan } from "@raystack/frontier";
+import type { V1Beta1Plan } from "@raystack/frontier";
 import { reduceByKey } from "~/utils/helper";
 import { getColumns } from "./columns";
 import { PlanHeader } from "./header";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { api } from "~/api";
+import styles from "./plans.module.css";
+import PageTitle from "~/components/page-title";
+import { SheetHeader } from "~/components/sheet/header";
 
 const pageHeader = {
   title: "Plans",
@@ -38,45 +45,45 @@ export default function PlanList() {
 
   let { planId } = useParams();
 
-  const userMapByName = reduceByKey(plans ?? [], "id");
+  const planMapByName = reduceByKey(plans ?? [], "id");
 
-  const tableStyle = plans?.length
-    ? { width: "100%" }
-    : { width: "100%", height: "100%" };
+  const columns = getColumns();
 
-  const planList = isPlansLoading
-    ? [...new Array(5)].map((_, i) => ({
-        name: i.toString(),
-        title: "",
-      }))
-    : plans;
+  const navigate = useNavigate();
 
-  const columns = getColumns();
+  function onClose() {
+    navigate("/plans");
+  }
 
   return (
-    <Flex direction="row" style={{ height: "100%", width: "100%" }}>
-      <DataTable
-        data={planList ?? []}
-        // @ts-ignore
-        columns={columns}
-        emptyState={noDataChildren}
-        parentStyle={{ height: "calc(100vh - 60px)" }}
-        style={tableStyle}
-        isLoading={isPlansLoading}
-      >
-        <DataTable.Toolbar>
-          <PlanHeader header={pageHeader} />
-          <DataTable.FilterChips style={{ padding: "8px 24px" }} />
-        </DataTable.Toolbar>
-        <DataTable.DetailContainer>
-          <Outlet
-            context={{
-              user: planId ? userMapByName[planId] : null,
-            }}
-          />
-        </DataTable.DetailContainer>
-      </DataTable>
-    </Flex>
+    <DataTable
+      data={plans}
+      columns={columns}
+      isLoading={isPlansLoading}
+      mode="client"
+      defaultSort={{ name: "title", order: "asc" }}
+    >
+      <Flex direction="column">
+        <PageTitle title="Plans" />
+        <PlanHeader header={pageHeader} />
+        <DataTable.Content
+          emptyState={noDataChildren}
+          classNames={{ root: styles.tableRoot, table: styles.table }}
+        />
+      </Flex>
+      <Sheet open={planId !== undefined}>
+        <Sheet.Content className={styles.sheetContent}>
+          <SheetHeader title="Plan Details" onClick={onClose} />
+          <Flex className={styles.sheetContentBody}>
+            <Outlet
+              context={{
+                plan: planId ? planMapByName[planId] : null,
+              }}
+            />
+          </Flex>
+        </Sheet.Content>
+      </Sheet>
+    </DataTable>
   );
 }
 

ui/src/containers/billingplans.list/header.tsx

@@ -0,0 +1,24 @@
+.tableRoot {
+    width: 100%;
+}
+.tableWrapper {
+    width: 100%;
+}
+
+.table {
+    table-layout: fixed;
+}
+
+.header {
+    background-color: var(--rs-color-background-base-primary);
+    border-bottom: 1px solid var(--rs-color-border-base-primary);
+}
+
+.sheetContent {
+    width: 400px;
+    padding: 0;
+}
+
+.sheetContentBody {
+    padding: var(--rs-space-5);
+}