[UI v2] Variables table - part 1 (#15985)

ui-v2/src/api/service.ts

@@ -9,11 +9,17 @@ const throwOnError: Middleware = {
 		}
 	},
 };
+
+let client: ReturnType<typeof createClient<paths>> | null = null;
+
 // TODO: Make the baseUrl configurable
-export const createQueryService = () => {
-	const client = createClient<paths>({
-		baseUrl: "http://localhost:4200/api",
-	});
-	client.use(throwOnError);
+export const getQueryService = () => {
+	if (!client) {
+		client = createClient<paths>({
+			baseUrl:
+				(import.meta.env.VITE_API_URL as string) ?? "http://localhost:4200/api",
+		});
+		client.use(throwOnError);
+	}
 	return client;
 };

ui-v2/src/components/flows/data-table.tsx

@@ -1,4 +1,4 @@
-import { components } from "@/api/prefect";
+import type { components } from "@/api/prefect";
 import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/ui/data-table";
 import {

ui-v2/src/components/flows/detail/cells.tsx

@@ -1,5 +1,5 @@
-import { components } from "@/api/prefect";
-import { createQueryService } from "@/api/service";
+import type { components } from "@/api/prefect";
+import { getQueryService } from "@/api/service";
 import { useQuery } from "@tanstack/react-query";
 
 type FlowRun = components["schemas"]["FlowRun"];
@@ -9,7 +9,7 @@ export const DeploymentCell = ({ row }: { row: { original: FlowRun } }) => {
 	const { data: deployment } = useQuery({
 		queryKey: ["deployment", deploymentId],
 		queryFn: () =>
-			createQueryService().GET("/deployments/{id}", {
+			getQueryService().GET("/deployments/{id}", {
 				params: { path: { id: deploymentId as string } },
 			}),
 		enabled: !!deploymentId,
@@ -22,7 +22,7 @@ export const WorkPoolCell = ({ row }: { row: { original: FlowRun } }) => {
 	const { data: deployment } = useQuery({
 		queryKey: ["deployment", deploymentId],
 		queryFn: () =>
-			createQueryService().GET("/deployments/{id}", {
+			getQueryService().GET("/deployments/{id}", {
 				params: { path: { id: deploymentId as string } },
 			}),
 		enabled: !!deploymentId,

ui-v2/src/components/flows/queries.tsx

@@ -1,5 +1,5 @@
 import { components } from "@/api/prefect";
-import { createQueryService } from "@/api/service";
+import { getQueryService } from "@/api/service";
 import {
 	MutationFunction,
 	QueryFunction,
@@ -18,7 +18,7 @@ export const flowQueryParams = (
 	...queryParams,
 	queryKey: ["flows", flowId] as const,
 	queryFn: async (): Promise<components["schemas"]["Flow"]> => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.GET("/flows/{id}", {
 				params: { path: { id: flowId } },
 			})
@@ -38,7 +38,7 @@ export const flowRunsQueryParams = (
 	...queryParams,
 	queryKey: ["flowRun", JSON.stringify({ flowId: id, ...body })] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/flow_runs/filter", {
 				body: {
 					...body,
@@ -73,7 +73,7 @@ export const getLatestFlowRunsQueryParams = (
 		}),
 	] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/flow_runs/filter", {
 				body: {
 					flows: { operator: "and_" as const, id: { any_: [id] } },
@@ -113,7 +113,7 @@ export const getNextFlowRunsQueryParams = (
 		}),
 	] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/flow_runs/filter", {
 				body: {
 					flows: { operator: "and_" as const, id: { any_: [id] } },
@@ -144,7 +144,7 @@ export const flowRunsCountQueryParams = (
 	...queryParams,
 	queryKey: ["flowRunCount", JSON.stringify({ flowId: id, ...body })] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/flow_runs/count", {
 				body: {
 					...body,
@@ -178,7 +178,7 @@ export const deploymentsQueryParams = (
 	...queryParams,
 	queryKey: ["deployments", JSON.stringify({ ...body, flowId: id })] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/deployments/filter", {
 				body: {
 					...body,
@@ -204,7 +204,7 @@ export const deploymentsCountQueryParams = (
 	...queryParams,
 	queryKey: ["deploymentsCount", JSON.stringify({ flowId: id })] as const,
 	queryFn: async () => {
-		const response = await createQueryService()
+		const response = await getQueryService()
 			.POST("/deployments/count", {
 				body: { flows: { operator: "and_" as const, id: { any_: [id] } } },
 			})
@@ -219,7 +219,7 @@ export const deleteFlowMutation = (
 	mutationFn: MutationFunction<void>;
 } => ({
 	mutationFn: async () => {
-		await createQueryService().DELETE("/flows/{id}", {
+		await getQueryService().DELETE("/flows/{id}", {
 			params: { path: { id } },
 		});
 	},

ui-v2/src/components/ui/data-table.tsx

@@ -6,17 +6,18 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { Table as TanstackTable, flexRender } from "@tanstack/react-table";
+import { type Table as TanstackTable, flexRender } from "@tanstack/react-table";
 
 import {
 	Pagination,
 	PaginationContent,
-	PaginationEllipsis,
 	PaginationItem,
-	PaginationLink,
-	PaginationNext,
-	PaginationPrevious,
+	PaginationNextButton,
+	PaginationPreviousButton,
+	PaginationFirstButton,
+	PaginationLastButton,
 } from "@/components/ui/pagination";
+import { cn } from "@/lib/utils";
 
 export function DataTable<TData>({
 	table,
@@ -73,46 +74,47 @@ export function DataTable<TData>({
 					</TableBody>
 				</Table>
 			</div>
-			<DataTablePagination
-				table={table}
-				onPageChange={(page) => {
-					table.setPageIndex(page - 1);
-				}}
-			/>
+			<DataTablePagination table={table} />
 		</>
 	);
 }
 
 interface DataTablePaginationProps<TData> {
 	table: TanstackTable<TData>;
-	onPageChange: (page: number) => void;
+	className?: string;
 }
 
 export function DataTablePagination<TData>({
 	table,
-	onPageChange,
+	className,
 }: DataTablePaginationProps<TData>) {
 	return (
-		<Pagination className="mt-4 justify-end">
+		<Pagination className={cn("justify-end", className)}>
 			<PaginationContent>
 				<PaginationItem>
-					<PaginationPrevious
-						onClick={() =>
-							onPageChange(Math.max(1, table.getState().pagination.pageIndex))
-						}
+					<PaginationFirstButton
+						onClick={() => table.firstPage()}
+						disabled={!table.getCanPreviousPage()}
+					/>
+					<PaginationPreviousButton
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
 					/>
 				</PaginationItem>
-				<PaginationItem>
-					<PaginationLink onClick={() => onPageChange(1)}>1</PaginationLink>
+				<PaginationItem className="text-sm">
+					Page {Math.ceil(table.getState().pagination.pageIndex + 1)} of{" "}
+					{table.getPageCount()}
 				</PaginationItem>
 				<PaginationItem>
-					<PaginationEllipsis />
+					<PaginationNextButton
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					/>
 				</PaginationItem>
 				<PaginationItem>
-					<PaginationNext
-						onClick={() =>
-							onPageChange(table.getState().pagination.pageIndex + 2)
-						}
+					<PaginationLastButton
+						onClick={() => table.lastPage()}
+						disabled={!table.getCanNextPage()}
 					/>
 				</PaginationItem>
 			</PaginationContent>

ui-v2/src/components/ui/pagination.tsx

@@ -1,21 +1,25 @@
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	DotsHorizontalIcon,
-} from "@radix-ui/react-icons";
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 import * as React from "react";
-
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
+import {
+	Button,
+	type ButtonProps,
+	buttonVariants,
+} from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { Link, LinkProps } from "@tanstack/react-router";
+import { Link, type LinkProps } from "@tanstack/react-router";
 
 type PaginationProps = React.ComponentProps<"nav"> & {
 	className?: string;
 };
 
 const Pagination = ({ className, ...props }: PaginationProps) => (
 	<nav
-		role="navigation"
 		aria-label="pagination"
 		className={cn("mx-auto flex w-full justify-center", className)}
 		{...props}
@@ -79,46 +83,66 @@ const PaginationPrevious = ({
 	className,
 	...props
 }: React.ComponentProps<typeof PaginationLink> & LinkProps) => (
-	<Link
+	<PaginationLink
 		aria-label="Go to previous page"
-		className={cn(
-			buttonVariants({
-				variant: "ghost",
-				size: "default",
-			}),
-			"gap-1 pl-2.5",
-			className,
-		)}
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
 		{...props}
 	>
-		<ChevronLeftIcon className="h-4 w-4" />
+		<ChevronLeft className="h-4 w-4" />
 		<span>Previous</span>
-	</Link>
+	</PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
+const PaginationPreviousButton = ({
+	className,
+	...props
+}: React.ComponentProps<typeof Button> & { className?: string }) => (
+	<Button
+		aria-label="Go to previous page"
+		size="default"
+		variant="ghost"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+	</Button>
+);
+PaginationPreviousButton.displayName = "PaginationPreviousButton";
+
 const PaginationNext = ({
 	className,
 	...props
 }: React.ComponentProps<typeof PaginationLink> & LinkProps) => (
-	<Link
+	<PaginationLink
 		aria-label="Go to next page"
-		className={cn(
-			buttonVariants({
-				variant: "ghost",
-				size: "default",
-			}),
-			"gap-1 pr-2.5",
-			className,
-		)}
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
 		{...props}
 	>
 		<span>Next</span>
-		<ChevronRightIcon className="h-4 w-4" />
-	</Link>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
 
+const PaginationNextButton = ({
+	className,
+	...props
+}: React.ComponentProps<typeof Button> & { className?: string }) => (
+	<Button
+		aria-label="Go to next page"
+		variant="ghost"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<ChevronRight className="h-4 w-4" />
+	</Button>
+);
+PaginationNextButton.displayName = "PaginationNextButton";
+
 type PaginationEllipsisProps = React.ComponentProps<"span"> & {
 	className?: string;
 };
@@ -138,6 +162,37 @@ const PaginationEllipsis = ({
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+const PaginationFirstButton = ({
+	className,
+	...props
+}: React.ComponentProps<typeof Button> & { className?: string }) => (
+	<Button
+		aria-label="Go to first page"
+		variant="ghost"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronsLeft className="h-4 w-4" />
+	</Button>
+);
+PaginationFirstButton.displayName = "PaginationFirstButton";
+
+const PaginationLastButton = ({
+	className,
+	...props
+}: React.ComponentProps<typeof Button> & { className?: string }) => (
+	<Button
+		aria-label="Go to last page"
+		variant="ghost"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<ChevronsRight className="h-4 w-4" />
+	</Button>
+);
+
 export {
 	Pagination,
 	PaginationContent,
@@ -146,4 +201,8 @@ export {
 	PaginationPrevious,
 	PaginationNext,
 	PaginationEllipsis,
+	PaginationPreviousButton,
+	PaginationNextButton,
+	PaginationFirstButton,
+	PaginationLastButton,
 };