test new layout

src/app/[orgId]/settings/resources/ResourcesDataTable.tsx

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
+import { DataTable } from "@app/components/ui/data-table";
 
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
-
-interface ResourcesDataTableProps<TData, TValue> {
+interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addResource?: () => void;
+    createResource?: () => void;
 }
 
 export function ResourcesDataTable<TData, TValue>({
-    addResource,
     columns,
-    data
-}: ResourcesDataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
+    data,
+    createResource
+}: DataTableProps<TData, TValue>) {
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search resources"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addResource) {
-                            addResource();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Resource
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No resources. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Resources"
+            searchPlaceholder="Search resources..."
+            searchColumn="name"
+            onAdd={createResource}
+            addButtonText="Add Resource"
+        />
     );
 }

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -327,7 +327,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
             <ResourcesDataTable
                 columns={columns}
                 data={resources}
-                addResource={() => {
+                createResource={() => {
                     setIsCreateModalOpen(true);
                 }}
             />

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -7,7 +7,7 @@ import {
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -80,29 +80,25 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         redirect(`/${params.orgId}/settings/resources`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: `/{orgId}/settings/resources/{resourceId}/general`
-            // icon: <Settings className="w-4 h-4" />,
         },
         {
             title: "Connectivity",
             href: `/{orgId}/settings/resources/{resourceId}/connectivity`
-            // icon: <Cloud className="w-4 h-4" />,
         }
     ];
 
     if (resource.http) {
-        sidebarNavItems.push({
+        navItems.push({
             title: "Authentication",
             href: `/{orgId}/settings/resources/{resourceId}/authentication`
-            // icon: <Shield className="w-4 h-4" />,
         });
-        sidebarNavItems.push({
+        navItems.push({
             title: "Rules",
             href: `/{orgId}/settings/resources/{resourceId}/rules`
-            // icon: <Shield className="w-4 h-4" />,
         });
     }
 
@@ -129,10 +125,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
             <OrgProvider org={org}>
                 <ResourceProvider resource={resource} authInfo={authInfo}>
-                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <div className="space-y-6">
                         <ResourceInfoBox />
-                        {children}
-                    </SidebarSettings>
+                        <HorizontalTabs items={navItems}>
+                            {children}
+                        </HorizontalTabs>
+                    </div>
                 </ResourceProvider>
             </OrgProvider>
         </>

src/app/[orgId]/settings/resources/page.tsx

@@ -70,7 +70,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
 
     return (
         <>
-            <ResourcesSplashCard />
+            {/* <ResourcesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Resources"