frontend/app/(deploy)/[workspace]/databases/database-table.tsx

'use client';

import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { useWorkspace } from '@/hooks/useWorkspace';
import { useRouter } from 'next/navigation';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { EllipsisVertical, X } from 'lucide-react';
import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
import { useState } from 'react';
import { Database } from '@prisma/client';
import { deleteDatabase } from '@/lib/deploy/database';

interface DataTableProps<TData, TValue> {
	columns: ColumnDef<TData, TValue>[];
	data: (TData & Database)[];
}

export function DatabaseTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
	const [open, setOpen] = useState(false);
	const [destroyOpen, setDestroyOpen] = useState(false);

	const table = useReactTable({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
	});

	const router = useRouter();
	const { slug, id } = useWorkspace();

	return (
		<div className="rounded-lg w-full overflow-hidden">
			<Table>
				<TableHeader>
					{table.getHeaderGroups().map((headerGroup) => (
						<TableRow key={headerGroup.id}>
							{headerGroup.headers.map((header) => {
								return (
									<TableHead className="text-black" key={header.id}>
										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
									</TableHead>
								);
							})}
							<TableHead key={'actions'} className="text-black">
								Actions
							</TableHead>
						</TableRow>
					))}
				</TableHeader>
				<TableBody>
					{table.getRowModel().rows?.length ? (
						table.getRowModel().rows.map((row, index) => (
							<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className="bg-white text-gray-700">
								{row.getVisibleCells().map((cell) => (
									<TableCell
										key={cell.id}
										onClick={(e) => {
											router.push(`/${slug}/databases/${(row.original as any)?.id}`);
										}}
										className="cursor-pointer"
									>
										{flexRender(cell.column.columnDef.cell, cell.getContext())}
									</TableCell>
								))}
								<TableCell key={'actions'} className="w-5">
									<DropdownMenu>
										<DropdownMenuTrigger asChild>
											<Button variant={'ghost'}>
												<EllipsisVertical size={20} />
											</Button>
										</DropdownMenuTrigger>

										<DropdownMenuContent>
											{/* <DropdownMenuLabel>Edit Database</DropdownMenuLabel>
												<DropdownMenuSeparator /> */}
											<Dialog open={open} onOpenChange={setOpen}>
												<DialogTrigger asChild>
													<DropdownMenuItem
														onClick={(e) => {
															e.preventDefault();
															setOpen(true);
														}}
													>
														Connection details
													</DropdownMenuItem>
												</DialogTrigger>
												<DialogContent>
													<div className="flex flex-col">
														<div className="flex flex-row justify-between mb-0">
															<h1 className="text-3xl font-semibold">Connection details</h1>
															<DialogClose asChild>
																<Button variant="ghost">
																	<X size={17} />
																</Button>
															</DialogClose>
														</div>
														<p className="text-gray-700">Details to connect to your new database</p>
													</div>

													<div className="flex flex-col gap-2">
														<p>Host: {data[index].host}</p>
														<p>Port: {data[index].port}</p>
														<p>Username: {data[index].username}</p>
														<p>Password: {data[index].password}</p>
													</div>
												</DialogContent>
											</Dialog>

											<Dialog open={destroyOpen} onOpenChange={setDestroyOpen}>
												<DialogTrigger asChild>
													<DropdownMenuItem
														onClick={(e) => {
															e.preventDefault();
															setDestroyOpen(true);
														}}
														className="text-red-400"
													>
														Destroy
													</DropdownMenuItem>
												</DialogTrigger>
												<DialogContent>
													<div className="flex flex-col">
														<div className="flex flex-row justify-between mb-0">
															<h1 className="text-3xl font-semibold">Are you sure?</h1>
															<DialogClose asChild>
																<Button variant="ghost">
																	<X size={17} />
																</Button>
															</DialogClose>
														</div>
														<p className="text-gray-700">Deleting a database if irreversible. This action cannot be undone.</p>
													</div>
													<div>
														<Button
															variant={'destructive'}
															onClick={(e) => {
																e.preventDefault();
																deleteDatabase({ id: data[index].id, workspaceId: id })
																	.then(() => {
																		setDestroyOpen(false);
																		router.refresh();
																	})
																	.catch((err) => {
																		console.error(err);
																	});
															}}
														>
															Delete
														</Button>
													</div>
												</DialogContent>
											</Dialog>
										</DropdownMenuContent>
									</DropdownMenu>
								</TableCell>
							</TableRow>
						))
					) : (
						<TableRow>
							<TableCell colSpan={columns.length} className="h-24 text-center">
								No results.
							</TableCell>
						</TableRow>
					)}
				</TableBody>
			</Table>
		</div>
	);
}