feat: better indicators in the form (#1349)

* fix: add a lil red star if a form element is required

* fix: make it clearer what's going to happen to a form element on save

* fix: fix hydration error by not id but elementid

* fix: add some autorevalidates

* chore: remove button changes

* fix: remove thing

---------

Co-authored-by: Eric McDaniel <[email protected]>

Author: tefkah

core/app/c/[communitySlug]/forms/[formSlug]/edit/page.tsx

@@ -31,10 +31,9 @@ export default async function Page(props: {
 }) {
 	const params = await props.params;
 
-	const { formSlug, communitySlug } = params;
+	const { formSlug } = params;
 
-	const { user } = await getPageLoginData();
-	const community = await findCommunityBySlug();
+	const [{ user }, community] = await Promise.all([getPageLoginData(), findCommunityBySlug()]);
 
 	if (!community) {
 		notFound();
@@ -47,7 +46,7 @@ export default async function Page(props: {
 			user.id
 		))
 	) {
-		redirect(`/c/${communitySlug}/unauthorized`);
+		redirect(`/c/${community.slug}/unauthorized`);
 	}
 
 	const communityId = community.id as CommunitiesId;

core/app/components/FormBuilder/FormBuilder.tsx

@@ -14,13 +14,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
 
-import type {
-	FormElementsId,
-	FormsId,
-	NewFormElements,
-	NewFormElementToPubType,
-	Stages,
-} from "db/public";
+import type { FormElementsId, NewFormElements, NewFormElementToPubType, Stages } from "db/public";
 import { formElementsInitializerSchema } from "db/public";
 import { logger } from "logger";
 import { Form, FormControl, FormField, FormItem } from "ui/form";
@@ -244,7 +238,7 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 
 	const formValues = form.getValues();
 
-	useUnsavedChangesWarning(form.formState.isDirty);
+	useUnsavedChangesWarning(isChanged);
 
 	const payload = useMemo(
 		() => preparePayload({ formValues, defaultValues }),
@@ -274,7 +268,7 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 	};
 	const addElement = useCallback(
 		(element: FormElementData) => {
-			append(element);
+			append({ ...element, added: true });
 		},
 		[append]
 	);
@@ -329,6 +323,8 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 		})
 	);
 
+	const dndContextId = React.useId();
+
 	return (
 		<TokenProvider tokens={tokens}>
 			<BuilderProvider
@@ -385,6 +381,7 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 														]}
 														onDragEnd={handleDragEnd}
 														sensors={sensors}
+														id={dndContextId}
 													>
 														<SortableContext
 															items={elements}

core/app/components/FormBuilder/FormElement.tsx

@@ -39,7 +39,7 @@ export const FormElement = ({ element, index, isEditing, isDisabled }: FormEleme
 	const field = pubFields[element.fieldId as PubFieldsId];
 	const labelName = field
 		? (element.label ?? (element.config as any)?.label ?? field.name)
-		: (element.label ?? element.id);
+		: (element.label ?? element.elementId);
 
 	const { openConfigPanel, removeElement, restoreElement } = useBuilder();
 
@@ -86,8 +86,12 @@ export const FormElement = ({ element, index, isEditing, isDisabled }: FormEleme
 				"group flex min-h-[76px] flex-1 flex-shrink-0 items-center justify-between gap-3 self-stretch rounded border border-l-[12px] border-solid border-gray-200 border-l-emerald-100 bg-white p-3 pr-4",
 				isEditing && "border-sky-500 border-l-blue-500",
 				isDisabled && "cursor-auto opacity-50",
-				element.deleted && "border-l-red-200",
-				isDragging && "z-10 cursor-grabbing"
+				isDragging && "z-10 cursor-grabbing",
+				{
+					"border-l-amber-200/70 bg-amber-50/30": element.updated && !element.added,
+					"border-l-emerald-200 bg-emerald-50/30": element.added,
+					"border-l-red-200 bg-red-50/30": element.deleted,
+				}
 			)}
 		>
 			<div className="flex flex-1 flex-shrink-0 flex-wrap justify-start gap-0.5">
@@ -154,16 +158,23 @@ export const FieldInputElement = ({ element, isEditing, labelId }: FieldInputEle
 				className={cn(
 					"mr-4 mt-3 shrink-0",
 					isEditing ? "text-blue-500" : "text-emerald-500",
-					element.deleted && "text-gray-500"
+					{
+						"text-red-300": element.deleted,
+						"text-amber-500": element.updated && !element.added,
+						"text-emerald-700": element.added,
+					}
 				)}
 			/>
 			<div>
 				<div className="text-gray-500">{field.slug}</div>
 				<div
 					id={labelId}
-					className={cn("font-semibold", element.deleted ? "text-gray-500" : "")}
+					className={cn("font-semibold", {
+						"text-gray-500": element.deleted,
+					})}
 				>
 					{(element.config as any)?.label ?? field.name}
+					{element.required && <span className="text-red-500">* </span>}
 				</div>
 			</div>
 		</>
@@ -179,24 +190,24 @@ const StructuralElement = ({ element, isEditing, labelId }: StructuralElementPro
 	const { Icon, name } = structuralElements[element.element];
 
 	return (
-		<>
-			<Icon
-				size={20}
-				className={cn(
-					"mr-4 mt-3 shrink-0",
-					isEditing ? "text-blue-500" : "text-emerald-500",
-					element.deleted && "text-gray-500"
-				)}
-			/>
-			<div>
+		<div>
+			<div className="flex items-center gap-2">
+				<Icon
+					size={20}
+					className={cn("shrink-0", isEditing ? "text-blue-500" : "text-emerald-500", {
+						"text-amber-500": element.updated && !element.added,
+						"text-emerald-700": element.added,
+						"text-red-300": element.deleted,
+					})}
+				/>
 				<div id={labelId} className="text-gray-500">
 					{name}
 				</div>
-				<div className={cn("prose prose-sm", element.deleted ? "text-gray-500" : "")}>
-					{/* TODO: sanitize links, truncate, generally improve styles for rendered content*/}
-					<Markdown className="line-clamp-2">{element.content}</Markdown>
-				</div>
 			</div>
-		</>
+			<div className={cn("prose prose-sm", element.deleted ? "text-gray-500" : "")}>
+				{/* TODO: sanitize links, truncate, generally improve styles for rendered content*/}
+				<Markdown className="line-clamp-2">{element.content}</Markdown>
+			</div>
+		</div>
 	);
 };

core/app/components/FormBuilder/actions.ts

@@ -24,12 +24,14 @@ const upsertRelatedPubTypes = async (
 
 	if (formElementIds.length) {
 		// Delete old values
-		await trx.deleteFrom("_FormElementToPubType").where("A", "in", formElementIds).execute();
+		await autoRevalidate(
+			trx.deleteFrom("_FormElementToPubType").where("A", "in", formElementIds)
+		).execute();
 	}
 
 	// Insert new ones
 	if (values.length) {
-		await trx.insertInto("_FormElementToPubType").values(values).execute();
+		await autoRevalidate(trx.insertInto("_FormElementToPubType").values(values)).execute();
 	}
 };
 

core/app/components/FormBuilder/types.ts

@@ -18,6 +18,7 @@ const baseElementSchema = z.object({
 	rank: z.string(),
 	deleted: z.boolean().default(false),
 	updated: z.boolean().default(false),
+	added: z.boolean().default(false),
 	configured: z.boolean().default(true),
 	stageId: z.string().nullable().optional(),
 	schemaName: z.nativeEnum(CoreSchemaType).nullable().optional(),