8000 feat: Begin Blocks page with just the data table (#17705) · CodersSampling/prefect@6d3d12c · GitHub
[go: up one dir, main page]
Skip to content

Commit 6d3d12c

Browse files
devinvillarosadevinvillarosa
authored
feat: Begin Blocks page with just the data table (PrefectHQ#17705)
1 parent 601e532 commit 6d3d12c

File tree

8 files changed

+225
-125
lines changed

8 files changed

+225
-125
lines changed

‎ui-v2/src/api/block-documents/block-documents.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,21 +71,15 @@ export const buildCountFilterBlockDocumentsQuery = (
7171
const res = await getQueryService().POST("/block_documents/count", {
7272
body: filter,
7373
});
74-
if (!res.data) {
75-
throw new Error("'data' exoected");
76-
}
77-
return res.data;
74+
return res.data ?? 0;
7875
},
7976
});
8077
export const buildCountAllBlockDocumentsQuery = () =>
8178
queryOptions({
8279
queryKey: queryKeyFactory.countAll(),
8380
queryFn: async () => {
8481
const res = await getQueryService().POST("/block_documents/count");
85-
if (!res.data) {
86-
throw new Error("'data' exoected");
87-
}
88-
return res.data;
82+
return res.data ?? 0;
8983
},
9084
});
9185

‎ui-v2/src/api/block-documents/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export {
22
type BlockDocument,
3+
type BlockDocumentsFilter,
34
buildListFilterBlockDocumentsQuery,
45
buildCountAllBlockDocumentsQuery,
56
buildCountFilterBlockDocumentsQuery,

‎ui-v2/src/components/blocks/block-document-data-table/block-document-data-table.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { useCallback } from "react";
1313

1414
import { BlockDocument } from "@/api/block-documents";
1515
import { BlockDocumentActionMenu } from "@/components/blocks/block-document-action-menu";
16+
import { useDeleteBlockDocumentConfirmationDialog } from "@/components/blocks/use-delete-block-document-confirmation-dialog";
17+
import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
1618
import { BlockDocumentCell } from "./block-document-cell";
1719

1820
const columnHelper = createColumnHelper<BlockDocument>();
@@ -84,12 +86,14 @@ export type BlockDocumentsDataTableProps = {
8486
export const BlockDocumentsDataTable = ({
8587
blockDocuments,
8688
blockDocumentsCount,
87-
onDelete,
8889
onPaginationChange,
8990
pagination,
9091
rowSelection,
9192
setRowSelection,
9293
}: BlockDocumentsDataTableProps) => {
94+
const [dialogState, handleConfirmDelete] =
95+
useDeleteBlockDocumentConfirmationDialog();
96+
9397
const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(
9498
(updater) => {
9599
let newPagination = pagination;
@@ -104,7 +108,7 @@ export const BlockDocumentsDataTable = ({
104108
);
105109

106110
const table = useReactTable({
107-
columns: createColumns({ onDelete }),
111+
columns: createColumns({ onDelete: handleConfirmDelete }),
108112
data: blockDocuments,
109113
defaultColumn: { maxSize: 300 },
110114
getCoreRowModel: getCoreRowModel(),
@@ -116,5 +120,10 @@ export const BlockDocumentsDataTable = ({
116120
state: { pagination, rowSelection },
117121
});
118122

119-
return <DataTable table={table} />;
123+
return (
124+
<>
125+
<DataTable table={table} />
126+
<DeleteConfirmationDialog {...dialogState} />
127+
</>
128+
);
120129
};

‎ui-v2/src/components/blocks/blocks-page.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
buildCountFilterBlockDocumentsQuery,
3+
buildListFilterBlockDocumentsQuery,
4+
} from "@/api/block-documents";
5+
import { Button } from "@/components/ui/button";
6+
import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
7+
import { Icon } from "@/components/ui/icons";
8+
import { Typography } from "@/components/ui/typography";
9+
import { useSu F438 spenseQuery } from "@tanstack/react-query";
10+
import { Link } from "@tanstack/react-router";
11+
import { RowSelectionState } from "@tanstack/react-table";
12+
import { useState } from "react";
13+
import { BlockDocumentsDataTable } from "./block-document-data-table";
14+
import { BlocksEmptyState } from "./empty-state";
15+
import { useDeleteBlockDocumentConfirmationDialog } from "./use-delete-block-document-confirmation-dialog";
16+
17+
export const BlocksPage = () => {
18+
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
19+
20+
const [dialogState, handleConfirmDelete] =
21+
useDeleteBlockDocumentConfirmationDialog();
22+
23+
const { data: blockDocuments } = useSuspenseQuery(
24+
buildListFilterBlockDocumentsQuery(),
25+
);
26+
const { data: allBlockkDocumentsCount } = useSuspenseQuery(
27+
buildCountFilterBlockDocumentsQuery(),
28+
);
29+
30+
return (
31+
<>
32+
<div className="flex flex-col gap-4">
33+
<BlocksPageHeader />
34+
{allBlockkDocumentsCount === 0 ? (
35+
<BlocksEmptyState />
36+
) : (
37+
<BlockDocumentsDataTable
38+
blockDocuments={blockDocuments}
39+
rowSelection={rowSelection}
40+
setRowSelection={setRowSelection}
41+
blockDocumentsCount={allBlockkDocumentsCount}
42+
pageCount={0}
43+
pagination={{
44+
pageIndex: 0,
45+
pageSize: 10,
46+
}}
47+
onPaginationChange={() => {
48+
/** TODO */
49+
}}
50+
onDelete={() => handleConfirmDelete(Object.keys(rowSelection))}
51+
/>
52+
)}
53+
</div>
54+
<DeleteConfirmationDialog {...dialogState} />
55+
</>
56+
);
57+
};
58+
59+
function BlocksPageHeader() {
60+
return (
61+
<div className="flex gap-2 items-center">
62+
<Typography className="font-semibold">Blocks</Typography>
63+
<Link to="/blocks/catalog">
64+
<Button
65+
size="icon"
66+
className="size-7"
67+
variant="outline"
68+
aria-label="add block document"
69+
>
70+
<Icon id="Plus" className="size-4" />
71+
</Button>
72+
</Link>
73+
</div>
74+
);
75+
}

‎ui-v2/src/components/blocks/use-delete-block-document-confirmation-dialog.ts

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,71 @@ export const useDeleteBlockDocumentConfirmationDialog = () => {
99
const navigate = routeApi.useNavigate();
1010
const [dialogState, confirmDelete] = useDeleteConfirmationDialog();
1111

12-
const { deleteBlockDocument } = useDeleteBlockDocument();
12+
const { deleteBlockDocument, mutateAsync } = useDeleteBlockDocument();
1313

1414
const handleConfirmDelete = (
15-
blockDocument: BlockDocument,
15+
/** Pass a block document or list of block document ids for bulk edit */
16+
blockDocument: BlockDocument | Array<string>,
1617
{
1718
shouldNavigate = false,
1819
}: {
1920
/** Should navigate back to /blocks */
2021
shouldNavigate?: boolean;
2122
} = {},
22-
) =>
23-
confirmDelete({
24-
title: "Delete Block",
25-
description: `Are you sure you want to delete ${blockDocument.name ? blockDocument.name : "this block"}?`,
26-
onConfirm: () => {
27-
deleteBlockDocument(blockDocument.id, {
28-
onSuccess: () => {
29-
toast.success("Block deleted");
30-
if (shouldNavigate) {
31-
void navigate({ to: "/blocks" });
32-
}
33-
},
34-
onError: (error) => {
35-
const message =
36-
error.message || "Unknown error while deleting block.";
37-
toast.error(message);
38-
console.error(message);
39-
},
40-
});
41-
},
42-
});
23+
) => {
24+
if (Array.isArray(blockDocument)) {
25+
const handleDeleteBlockDocuments = async () => {
26+
try {
27+
await Promise.all(blockDocument.map((id) => mutateAsync(id)));
28+
toast.success("Blocks deleted");
29+
if (shouldNavigate) {
30+
void navigate({ to: "/blocks" });
31+
}
32+
} catch (error) {
33+
const message =
34+
error instanceof Error
35+
? error.message
36+
: "Unknown error while deleting block.";
37+
toast.error(message);
38+
console.error(message);
39+
}
40+
};
41+
42+
const description =
43+
blockDocument.length > 0
44+
? `Are you sure you want to delete these ${blockDocument.length} selected blocks?`
45+
: "Are you sure you want to delete this selectged block?";
46+
47+
confirmDelete({
48+
title: "Delete Blocks",
49+
description,
50+
onConfirm: () => {
51+
void handleDeleteBlockDocuments();
52+
},
53+
});
54+
} else {
55+
confirmDelete({
56+
title: "Delete Block",
57+
description: `Are you sure you want to delete ${blockDocument.name ? blockDocument.name : "this block"}?`,
58+
onConfirm: () => {
59+
deleteBlockDocument(blockDocument.id, {
60+
onSuccess: () => {
61+
toast.success("Block deleted");
62+
if (shouldNavigate) {
63+
void navigate({ to: "/blocks" });
64+
}
65+
},
66+
onError: (error) => {
67+
const message =
68+
error.message || "Unknown error while deleting block.";
69+
toast.error(message);
70+
console.error(message);
71+
},
72+
});
73+
},
74+
});
75+
}
76+
};
4377

4478
return [dialogState, handleConfirmDelete] as const;
4579
};

0 commit comments

Comments
 (0)
0