[UI v2] feat: Adds block document create page

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

@@ -178,8 +178,15 @@ export const useCreateBlockDocument = () => {
 	const queryClient = useQueryClient();
 
 	const { mutate: createBlockDocument, ...rest } = useMutation({
-		mutationFn: (body: components["schemas"]["BlockDocumentCreate"]) =>
-			getQueryService().POST("/block_documents/", { body }),
+		mutationFn: async (body: components["schemas"]["BlockDocumentCreate"]) => {
+			const res = await getQueryService().POST("/block_documents/", { body });
+
+			if (!res.data) {
+				throw new Error("'data' expected");
+			}
+
+			return res.data;
+		},
 		onSuccess: () => {
 			void queryClient.invalidateQueries({
 				queryKey: queryKeyFactory.lists(),

ui-v2/src/components/blocks/block-document-create-page/block-document-create-page-header.tsx

@@ -0,0 +1,54 @@
+import type { BlockType } from "@/api/block-types";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+type BlockDocumentCreatePageHeaderProps = {
+	blockType: BlockType;
+};
+
+export const BlockDocumentCreatePageHeader = ({
+	blockType,
+}: BlockDocumentCreatePageHeaderProps) => {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink to="/blocks" className="text-xl font-semibold">
+						Blocks
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+
+				<BreadcrumbItem>
+					<BreadcrumbLink
+						to="/blocks/catalog"
+						className="text-xl font-semibold"
+					>
+						Catalog
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+
+				<BreadcrumbItem>
+					<BreadcrumbLink
+						to="/blocks/catalog"
+						className="text-xl font-semibold"
+					>
+						{blockType.name}
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+
+				<BreadcrumbItem className="text-xl font-semibold">
+					<BreadcrumbPage>Create</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+};

ui-v2/src/components/blocks/block-document-create-page/block-document-create-page.tsx

@@ -0,0 +1,141 @@
+import { useCreateBlockDocument } from "@/api/block-documents";
+import type { BlockSchema } from "@/api/block-schemas";
+import type { BlockType } from "@/api/block-types";
+import { BlockTypeDetails } from "@/components/blocks/block-type-details";
+import {
+	type PrefectSchemaObject,
+	SchemaForm,
+	useSchemaForm,
+} from "@/components/schemas";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { BlockDocumentCreatePageHeader } from "./block-document-create-page-header";
+
+type BlockDocumentCreatePageProps = {
+	blockSchema: BlockSchema;
+	blockType: BlockType;
+};
+
+// Letters, numbers, and dashes only
+const BLOCK_NAME_REGEX = /^[a-zA-Z0-9-]+$/;
+
+const BlockNameFormSchema = z.object({
+	blockName: z.string().regex(BLOCK_NAME_REGEX, {
+		message: "Name must only contain lowercase letters, numbers, and dashes",
+	}),
+});
+
+export type BlockNameFormSchema = z.infer<typeof BlockNameFormSchema>;
+const DEFAULT_VALUES: BlockNameFormSchema = {
+	blockName: "",
+};
+
+export const BlockDocumentCreatePage = ({
+	blockSchema,
+	blockType,
+}: BlockDocumentCreatePageProps) => {
+	const navigate = useNavigate();
+	const { values, setValues, errors, validateForm } = useSchemaForm();
+	const { createBlockDocument, isPending } = useCreateBlockDocument();
+
+	const form = useForm({
+		resolver: zodResolver(BlockNameFormSchema),
+		defaultValues: DEFAULT_VALUES,
+	});
+
+	const onSave = async (zodFormValues: BlockNameFormSchema) => {
+		try {
+			await validateForm({ schema: values });
+			// Early exit if there's errors from block schema validation
+			if (errors.length > 0) {
+				return;
+			}
+			createBlockDocument(
+				{
+					block_schema_id: blockSchema.id,
+					block_type_id: blockType.id,
+					is_anonymous: false,
+					data: values,
+					name: zodFormValues.blockName,
+				},
+				{
+					onSuccess: (res) => {
+						toast.success("Block created successfully");
+						void navigate({
+							to: "/blocks/block/$id",
+							params: { id: res.id },
+						});
+					},
+					onError: (err) => {
+						const message = "Unknown error while creating block.";
+						toast.error(message);
+						console.error(message, err);
+					},
+				},
+			);
+		} catch (err) {
+			const message = "Unknown error while validating block data.";
+			toast.error(message);
+			console.error(message, err);
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-6">
+			<BlockDocumentCreatePageHeader blockType={blockType} />
+			<Card className=" p-6 grid grid-cols-[minmax(0,_1fr)_250px] gap-4 ">
+				<Form {...form}>
+					<form
+						className="flex flex-col gap-4"
+						onSubmit={(e) => void form.handleSubmit(onSave)(e)}
+					>
+						<FormField
+							control={form.control}
+							name="blockName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input {...field} value={field.value} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<SchemaForm
+							values={values}
+							onValuesChange={setValues}
+							errors={errors}
+							kinds={["json"]}
+							schema={blockSchema.fields as unknown as PrefectSchemaObject}
+						/>
+						<div className="flex gap-3 justify-end">
+							<Button variant="secondary">
+								<Link to="/blocks/catalog">Cancel</Link>
+							</Button>
+							<Button loading={isPending} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+				<BlockTypeDetails blockType={blockType} />
+			</Card>
+		</div>
+	);
+};

ui-v2/src/components/blocks/block-document-create-page/index.ts

@@ -0,0 +1 @@
+export { BlockDocumentCreatePage } from "./block-document-create-page";

ui-v2/src/components/blocks/block-document-edit-page/block-document-edit-page.tsx

@@ -52,14 +52,14 @@ export const BlockDocumentEditPage = ({
 						});
 					},
 					onError: (err) => {
-						const message = "Unknown error while updating validating schema.";
+						const message = "Unknown error while updating block.";
 						toast.error(message);
 						console.error(message, err);
 					},
 				},
 			);
 		} catch (err) {
-			const message = "Unknown error while updating validating schema.";
+			const message = "Unknown error while validating block data.";
 			toast.error(message);
 			console.error(message, err);
 		}

ui-v2/src/routes/blocks/catalog_.$slug_.create.tsx

@@ -1,9 +1,47 @@
+import { buildListFilterBlockSchemasQuery } from "@/api/block-schemas";
+import { buildGetBlockTypeQuery } from "@/api/block-types";
+import { BlockDocumentCreatePage } from "@/components/blocks/block-document-create-page";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/blocks/catalog_/$slug_/create")({
 	component: RouteComponent,
+	loader: async ({ params, context: { queryClient } }) => {
+		// critical data
+		const res = await queryClient.ensureQueryData(
+			buildGetBlockTypeQuery(params.slug),
+		);
+		void queryClient.ensureQueryData(
+			buildListFilterBlockSchemasQuery({
+				block_schemas: {
+					block_type_id: { any_: [res.id] },
+					operator: "and_",
+				},
+				offset: 0,
+			}),
+		);
+	},
+	wrapInSuspense: true,
 });
 
 function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
+	const { slug } = Route.useParams();
+	const { data: blockType } = useSuspenseQuery(buildGetBlockTypeQuery(slug));
+	const { data: blockSchemas } = useSuspenseQuery(
+		buildListFilterBlockSchemasQuery({
+			block_schemas: {
+				block_type_id: { any_: [blockType.id] },
+				operator: "and_",
+			},
+			offset: 0,
+		}),
+	);
+	const blockSchema = blockSchemas[0];
+	if (!blockSchema) {
+		throw new Error("Block schema not found");
+	}
+
+	return (
+		<BlockDocumentCreatePage blockSchema={blockSchema} blockType={blockType} />
+	);
 }