addressing PR comments

PrefectHQ · Feb 19, 2025 · d03ed0f · d03ed0f
1 parent 996aa51
commit d03ed0f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/ui-v2/src/components/flow-runs/data-table/data-table.tsx b/ui-v2/src/components/flow-runs/data-table/data-table.tsx
@@ -24,6 +24,7 @@ import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-di
 import { Icon } from "@/components/ui/icons";
 import { Typography } from "@/components/ui/typography";
 import { pluralize } from "@/utils";
+import { CheckedState } from "@radix-ui/react-checkbox";
 import { DeploymentCell } from "./deployment-cell";
 import { DurationCell } from "./duration-cell";
 import { NameCell } from "./name-cell";
@@ -48,16 +49,25 @@ const createColumns = ({
 }) => {
 	const ret = [
 		columnHelper.display({
+			size: 40,
 			id: "select",
-			header: ({ table }) => (
-				<Checkbox
-					checked={table.getIsAllPageRowsSelected()}
-					onCheckedChange={(value) =>
-						table.toggleAllPageRowsSelected(Boolean(value))
-					}
-					aria-label="Select all"
-				/>
-			),
+			header: ({ table }) => {
+				let checkedState: CheckedState = false;
+				if (table.getIsAllRowsSelected()) {
+					checkedState = true;
+				} else if (table.getIsSomePageRowsSelected()) {
+					checkedState = "indeterminate";
+				}
+				return (
+					<Checkbox
+						checked={checkedState}
+						onCheckedChange={(value) =>
+							table.toggleAllPageRowsSelected(Boolean(value))
+						}
+						aria-label="Select all"
+					/>
+				);
+			},
 			cell: ({ row }) => (
 				<Checkbox
 					checked={row.getIsSelected()}
@@ -69,6 +79,7 @@ const createColumns = ({
 			enableHiding: false,
 		}),
 		columnHelper.display({
+			size: 200,
 			id: "name",
 			header: "Name",
 			cell: ({ row }) => <NameCell flowRun={row.original} />,
@@ -117,6 +128,7 @@ const createColumns = ({
 	if (showDeployment) {
 		ret.push(
 			columnHelper.display({
+				size: 200,
 				id: "deployment",
 				header: "Deployment",
 				cell: ({ row }) => {

diff --git a/ui-v2/src/components/flow-runs/data-table/deployment-cell.tsx b/ui-v2/src/components/flow-runs/data-table/deployment-cell.tsx
@@ -9,7 +9,7 @@ type DeploymentCellProps = { deployment: Deployment };
 export const DeploymentCell = ({ deployment }: DeploymentCellProps) => {
 	return (
 		<Link
-			className="flex items-center gap-1 min-w-40"
+			className="flex items-center gap-1"
 			to="/deployments/deployment/$id"
 			params={{ id: deployment.id }}
 		>

diff --git a/ui-v2/src/components/flow-runs/data-table/name-cell.tsx b/ui-v2/src/components/flow-runs/data-table/name-cell.tsx
@@ -13,7 +13,7 @@ type NameCellProps = {
 
 export const NameCell = ({ flowRun }: NameCellProps) => {
 	return (
-		<div className="flex items-center min-w-40">
+		<div className="flex items-center">
 			<Breadcrumb>
 				<BreadcrumbList>
 					<BreadcrumbItem>