Improve Submissions integration UI

core/app/c/[communitySlug]/stages/StageList.tsx

@@ -4,9 +4,10 @@ import PubRow from "../pubs/PubRow";
 import { StagesData } from "./page";
 import { Button } from "ui";
 import Link from "next/link";
+import { Fragment } from "react";
 
-type Props = { stages: NonNullable<StagesData>, token: string };
-type IntegrationAction = { text: string, href: string, kind?: "stage" };
+type Props = { stages: NonNullable<StagesData>; token: string };
+type IntegrationAction = { text: string; href: string; kind?: "stage" };
 
 const StageList: React.FC<Props> = function ({ stages, token }) {
 	return (
@@ -17,28 +18,43 @@ const StageList: React.FC<Props> = function ({ stages, token }) {
 						<h3 className="font-bold text-lg mb-2">{stage.name}</h3>
 						{stage.integrationInstances.map((instance) => {
 							if (!Array.isArray(instance.integration.actions)) {
-								return null
+								return null;
 							}
-							return instance.integration.actions?.map((action: IntegrationAction) => {
-								if (action.kind === "stage") {
-									const href = new URL(action.href)
-									href.searchParams.set('instanceId', instance.id)
-									href.searchParams.set('token', token)
-									return (
-										<Button variant="outline" size="sm" asChild>
-											<Link href={href.toString()}>{action.text}</Link>
-										</Button>
-									)
-								}
-							})
+							return (
+								<Fragment key={instance.id}>
+									{instance.integration.actions?.map(
+										(action: IntegrationAction) => {
+											if (action.kind === "stage") {
+												const href = new URL(action.href);
+												href.searchParams.set("instanceId", instance.id);
+												href.searchParams.set("token", token);
+												return (
+													<Button
+														key={action.text}
+														variant="outline"
+														size="sm"
+														asChild
+													>
+														<Link href={href.toString()}>
+															{action.text}
+														</Link>
+													</Button>
+												);
+											}
+										}
+									)}
+								</Fragment>
+							);
 						})}
-						<Card >
+						<Card>
 							<CardContent className="pt-4">
 								{stage.pubs.map((pub, index, list) => {
-									return <>
-										<PubRow key={pub.id} pub={pub} token={token} />
-										{index < list.length - 1 && <hr />}
-									</>
+									return (
+										<Fragment key={pub.id}>
+											<PubRow pub={pub} token={token} />
+											{index < list.length - 1 && <hr />}
+										</Fragment>
+									);
 								})}
 							</CardContent>
 						</Card>

core/prisma/exampleCommunitySeeds/unjournal.ts

@@ -492,30 +492,38 @@ export default async function main(prisma: PrismaClient, communityUUID: string)
 		},
 	});
 
+	const submissionsIntegrationUrl =
+		process.env.NODE_ENV === "production"
+			? "https://integration-submissions.onrender.com"
+			: "http://localhost:3002";
 	const submissionsIntegration = await prisma.integration.create({
 		data: {
 			name: "Submission Manager",
 			actions: [
 				{
 					text: "Submit Pub",
-					href: "https://integration-submissions.onrender.com/actions/submit",
+					href: `${submissionsIntegrationUrl}/actions/submit`,
 					kind: "stage",
 				},
 			],
-			settingsUrl: "https://integration-submissions.onrender.com/configure",
+			settingsUrl: `${submissionsIntegrationUrl}/configure`,
 		},
 	});
 
+	const evaluationIntegrationUrl =
+		process.env.NODE_ENV === "production"
+			? "https://integration-evaluations.onrender.com"
+			: "http://localhost:3001";
 	const evaluationIntegration = await prisma.integration.create({
 		data: {
 			name: "Evaluation Manager",
 			actions: [
 				{
 					text: "Manage Evaluation",
-					href: "https://integration-evaluations.onrender.com/run",
+					href: `${evaluationIntegrationUrl}/actions/manage`,
 				},
 			],
-			settingsUrl: "https://integration-evaluations.onrender.com/configure",
+			settingsUrl: `${evaluationIntegrationUrl}/configure`,
 		},
 	});
 

integrations/submissions/app/actions/submit/actions.ts

@@ -6,9 +6,8 @@ import { assert, expect } from "utils";
 import { client } from "~/lib/pubpub";
 import { findInstance } from "~/lib/instance";
 
-export async function submit(form: FormData) {
+export async function submit(instanceId: string, pub: Pub<typeof manifest>) {
 	try {
-		const { "instance-id": instanceId, ...pub } = Object.fromEntries(form);
 		assert(typeof instanceId === "string");
 		const instance = expect(await findInstance(instanceId));
 		return client.create(instanceId, pub as Pub<typeof manifest>, instance.pubTypeId);

integrations/submissions/app/actions/submit/page.tsx

@@ -1,22 +1,12 @@
-import { client } from "~/lib/pubpub";
 import { Submit } from "./submit";
 
 type Props = {
 	searchParams: {
 		instanceId: string;
-		token: string;
 	};
 };
 
 export default async function Page(props: Props) {
-	const { instanceId, token } = props.searchParams;
-	const user = await client.auth(instanceId, token);
-
-	return (
-		<main>
-			<p>Hello {user.name}</p>
-			<img src={`${process.env.PUBPUB_URL}/${user.avatar}`} />
-			<Submit instanceId={instanceId} />
-		</main>
-	);
+	const { instanceId } = props.searchParams;
+	return <Submit instanceId={instanceId} />;
 }

integrations/submissions/app/actions/submit/submit.tsx

@@ -1,30 +1,112 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+	Button,
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Icon,
+	Input,
+	useToast,
+	Card,
+	CardHeader,
+	CardFooter,
+	CardContent,
+	CardTitle,
+	CardDescription,
+} from "ui";
+import { cn } from "utils";
+import * as z from "zod";
 import { submit } from "./actions";
 
 type Props = {
 	instanceId: string;
 };
 
+const schema = z.object({
+	Title: z.string().min(1),
+	instanceId: z.string(),
+});
+
 export function Submit(props: Props) {
-	const [message, setMessage] = useState<string>("");
-	const [isPending, startTransition] = useTransition();
+	const { toast } = useToast();
+	const form = useForm<z.infer<typeof schema>>({
+		resolver: zodResolver(schema),
+		defaultValues: {
+			Title: "",
+			instanceId: props.instanceId,
+		},
+	});
 
-	async function onSubmit(form: FormData) {
-		const response = await submit(form);
-		setMessage("error" in response ? response.error : "Pub submitted!");
+	async function onSubmit(values: z.infer<typeof schema>) {
+		const { instanceId, ...pub } = values;
+		const result = await submit(instanceId, pub);
+		if ("error" in result) {
+			toast({
+				title: "Error",
+				description: result.error,
+				variant: "destructive",
+			});
+		} else {
+			toast({
+				title: "Success",
+				description: "The pub was created successfully.",
+			});
+		}
 	}
 
 	return (
-		<form action={(form) => startTransition(() => onSubmit(form))}>
-			<label>
-				<span>Title</span>
-				<input type="text" name="Title" />
-			</label>
-			<input type="hidden" name="instance-id" value={props.instanceId} />
-			<button type="submit">Submit</button>
-			<p>{isPending ? "Submitting Pub..." : message}</p>
-		</form>
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)}>
+				<Card>
+					<CardHeader>
+						<CardTitle>Submit Pub</CardTitle>
+						<CardDescription>
+							This form will create a pub from the fields below.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Input type="hidden" name="instanceId" value={props.instanceId} />
+						<FormField
+							control={form.control}
+							name="Title"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Title</FormLabel>
+									<FormControl>
+										<Input {...field} />
+									</FormControl>
+									<FormDescription>The title of the pub.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</CardContent>
+					<CardFooter className={cn("flex justify-between")}>
+						<Button
+							variant="outline"
+							onClick={(e) => {
+								e.preventDefault();
+								window.history.back();
+							}}
+						>
+							Go Back
+						</Button>
+						<Button type="submit" disabled={!form.formState.isValid}>
+							Submit Pub
+							{form.formState.isSubmitting && (
+								<Icon.Spinner className="h-4 w-4 ml-4 animate-spin" />
+							)}
+						</Button>
+					</CardFooter>
+				</Card>
+			</form>
+		</Form>
 	);
 }

integrations/submissions/app/configure/actions.ts

@@ -1,14 +1,10 @@
 "use server";
 
-import { assert } from "utils";
 import { updateInstance } from "~/lib/instance";
 
-export const configure = (form: FormData) => {
-	const instanceId = form.get("instance-id");
-	const pubTypeId = form.get("pub-type-id");
-	assert(typeof instanceId === "string");
-	assert(typeof pubTypeId === "string");
+export const configure = (instanceId: string, pubTypeId: string) => {
 	try {
+		// return { error: "We couldn't update the instance." };
 		return updateInstance(instanceId, { pubTypeId });
 	} catch (error) {
 		return { error: error.message };