chore: merge

.github/dependabot.yml

@@ -0,0 +1,55 @@
+# yaml-language-server: $schema=https://json.schemastore.org/dependabot-2.0.json
+# Dependabot configuration file
+# See documentation: https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+    # package.json + pnpm catalog updates
+    - package-ecosystem: "npm"
+      directory: "/"
+      schedule:
+          interval: "weekly"
+          day: "monday"
+      open-pull-requests-limit: 10
+      labels:
+          - "dependencies"
+          - "npm"
+      commit-message:
+          prefix: "npm"
+          include: "scope"
+      # group all minor and patch updates together
+      groups:
+          minor-patch-dependencies:
+              patterns:
+                  - "*"
+              update-types:
+                  - "minor"
+                  - "patch"
+
+    # GitHub Actions updates
+    - package-ecosystem: "github-actions"
+      directory: "/"
+      schedule:
+          interval: "weekly"
+          day: "monday"
+      open-pull-requests-limit: 5
+      labels:
+          - "dependencies"
+          - "github-actions"
+      commit-message:
+          prefix: "github-actions"
+          include: "scope"
+
+    # docker updates
+    - package-ecosystem: "docker"
+      directory: "/"
+      schedule:
+          interval: "weekly"
+          day: "monday"
+      open-pull-requests-limit: 5
+      labels:
+          - "dependencies"
+          - "docker"
+      commit-message:
+          prefix: "docker"
+          include: "scope"

.vscode/extensions.json

@@ -3,6 +3,8 @@
 		"ms-playwright.playwright",
 		"YoavBls.pretty-ts-errors",
 		"esbenp.prettier-vscode",
-		"dbaeumer.vscode-eslint"
+		"dbaeumer.vscode-eslint",
+		// for yaml autocompletion using the # yaml-language-server: $schema=... directive
+		"redhat.vscode-yaml"
 	]
 }

core/app/c/[communitySlug]/fields/page.tsx

@@ -59,7 +59,6 @@ export default async function Page(props: Props) {
 
 	const pubFields = await getPubFields({
 		communityId: community?.id as CommunitiesId,
-		includeRelations: true,
 	}).executeTakeFirst();
 
 	if (!pubFields || !pubFields.fields) {

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

@@ -65,7 +65,7 @@ export default async function Page(props: {
 			slug: formSlug,
 			communityId,
 		}).executeTakeFirstOrThrow(),
-		getPubFields({ communityId, includeRelations: true }).executeTakeFirstOrThrow(),
+		getPubFields({ communityId }).executeTakeFirstOrThrow(),
 		getPubTypesForCommunity(community.id),
 	]);
 

core/app/c/[communitySlug]/pubs/[pubId]/edit/page.tsx

@@ -130,7 +130,7 @@ export default async function Page(props: {
 			}
 		>
 			<div className="flex justify-center py-10">
-				<div className="max-w-prose">
+				<div className="prose max-w-prose flex-1">
 					<PubEditor
 						searchParams={searchParams}
 						pubId={pub.id}

core/app/c/[communitySlug]/pubs/[pubId]/page.tsx

@@ -15,6 +15,7 @@ import { MembersList } from "~/app/components//Memberships/MembersList";
 import { PubsRunActionDropDownMenu } from "~/app/components/ActionUI/PubsRunActionDropDownMenu";
 import { AddMemberDialog } from "~/app/components/Memberships/AddMemberDialog";
 import { CreatePubButton } from "~/app/components/pubs/CreatePubButton";
+import { RemovePubButton } from "~/app/components/pubs/RemovePubButton";
 import SkeletonTable from "~/app/components/skeletons/SkeletonTable";
 import { db } from "~/kysely/database";
 import { getPageLoginData } from "~/lib/authentication/loginData";
@@ -143,6 +144,8 @@ export default async function Page(props: {
 	if (!pub) {
 		return null;
 	}
+	const pubTypeHasRelatedPubs = pub.pubType.fields.some((field) => field.isRelation);
+	const pubHasRelatedPubs = pub.values.some((value) => !!value.relatedPub);
 
 	const { stage, children, ...slimPub } = pub;
 	return (
@@ -154,12 +157,20 @@ export default async function Page(props: {
 					</div>
 					<h1 className="mb-2 text-xl font-bold">{getPubTitle(pub)} </h1>
 				</div>
-				<Button variant="outline" asChild className="flex items-center gap-1">
-					<Link href={`/c/${communitySlug}/pubs/${pub.id}/edit`}>
-						<Pencil size="14" />
-						Update
-					</Link>
-				</Button>
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						asChild
+						className="flex items-center gap-x-2 py-4"
+					>
+						<Link href={`/c/${communitySlug}/pubs/${pub.id}/edit`}>
+							<Pencil size="12" />
+							<span>Update</span>
+						</Link>
+					</Button>
+					<RemovePubButton pubId={pub.id} redirectTo={`/c/${communitySlug}/pubs`} />
+				</div>
 			</div>
 
 			<div className="flex flex-wrap space-x-4">
@@ -232,13 +243,6 @@ export default async function Page(props: {
 			</div>
 			<div>
 				<h2 className="text-xl font-bold">Pub Contents</h2>
-				<p className="text-muted-foreground">
-					Use the "Add New Pub" button below to create a new pub and add it to this pub's
-					contents.
-				</p>
-			</div>
-			<div className="mb-2">
-				<CreatePubButton text="Add New Pub" communityId={community.id} parentId={pub.id} />
 			</div>
 			<Suspense fallback={<SkeletonTable /> /* does not exist yet */}>
 				<PubChildrenTableWrapper
@@ -247,10 +251,18 @@ export default async function Page(props: {
 					parentPubId={pub.id}
 				/>
 			</Suspense>
-			<div>
-				<h2 className="mb-2 text-xl font-bold">Related Pubs</h2>
-				<RelatedPubsTable pub={pub} />
-			</div>
+			{(pubTypeHasRelatedPubs || pubHasRelatedPubs) && (
+				<div className="flex flex-col gap-2" data-testid="related-pubs">
+					<h2 className="mb-2 text-xl font-bold">Related Pubs</h2>
+					<CreatePubButton
+						text="Add Related Pub"
+						communityId={community.id}
+						relatedPub={{ pubId: pub.id, pubTypeId: pub.pubTypeId }}
+						className="w-fit"
+					/>
+					<RelatedPubsTable pub={pub} />
+				</div>
+			)}
 		</div>
 	);
 }

core/app/c/[communitySlug]/pubs/create/page.tsx

@@ -59,15 +59,6 @@ export default async function Page(props: {
 
 	const formId = `create-pub`;
 
-	// Build the specifiers conditionally since PubEditor checks for the existence of the prop
-	const pubEditorSpecifiers: Record<string, string> = {};
-	if (searchParams["stageId"]) {
-		pubEditorSpecifiers.stageId = searchParams["stageId"];
-	}
-	if (searchParams["parentId"]) {
-		pubEditorSpecifiers.parentId = searchParams["parentId"];
-	}
-
 	return (
 		<ContentLayout
 			left={
@@ -79,12 +70,13 @@ export default async function Page(props: {
 			right={<div />}
 		>
 			<div className="flex justify-center py-10">
-				<div className="max-w-prose">
+				<div className="prose max-w-prose flex-1">
 					<PubEditor
 						searchParams={searchParams}
 						communityId={community.id}
 						formId={formId}
-						{...pubEditorSpecifiers}
+						// PubEditor checks for the existence of the stageId prop
+						{...(searchParams["stageId"] ? { stageId: searchParams["stageId"] } : {})}
 					/>
 				</div>
 			</div>

core/app/c/[communitySlug]/stages/manage/components/panel/StagePanelPubs.tsx

@@ -37,7 +37,7 @@ const StagePanelPubsInner = async (props: PropsInner) => {
 				<div className="flex flex-wrap items-center justify-between">
 					<h4 className="mb-2 text-base font-semibold">Pubs</h4>
 					<Suspense fallback={<SkeletonCard />}>
-						<CreatePubButton stageId={props.stageId as StagesId} />
+						<CreatePubButton stageId={props.stageId} />
 					</Suspense>
 				</div>
 				{stagePubs.map((pub) => (

core/app/c/[communitySlug]/types/page.tsx

@@ -51,7 +51,6 @@ export default async function Page(props: {
 		getAllPubTypesForCommunity(communitySlug).execute(),
 		getPubFields({
 			communityId: community.id,
-			includeRelations: true,
 		}).executeTakeFirstOrThrow(),
 	]);
 

core/app/components/ActionUI/ActionConfigFormWrapper.tsx

@@ -29,7 +29,6 @@ export const ActionConfigFormWrapper = async ({
 
 	const fieldPromise = getPubFields({
 		communityId: stage.communityId,
-		includeRelations: true,
 	}).executeTakeFirstOrThrow();
 
 	const resolvedFieldConfigPromise = resolveFieldConfig(actionInstance.action, "config", {

core/app/components/forms/elements/ContextEditorElement.tsx

@@ -56,7 +56,7 @@ const EditorFormElement = ({
 	return (
 		<FormItem>
 			<FormLabel className="flex">{label}</FormLabel>
-			<div className="w-full">
+			<div className="max-h-96 w-full overflow-scroll">
 				<FormControl>
 					<ContextEditorClient
 						pubId={pubId}

core/app/components/forms/elements/RelatedPubsElement.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type { FieldErrors } from "react-hook-form";
+
 import { useMemo, useState } from "react";
 import { Value } from "@sinclair/typebox/value";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -23,8 +25,6 @@ import { useContextEditorContext } from "../../ContextEditor/ContextEditorContex
 import { useFormElementToggleContext } from "../FormElementToggleContext";
 import { PubFieldFormElement } from "../PubFieldFormElement";
 
-type RelatedPubValueSlug = `${string}.${number}.value`;
-
 const RelatedPubBlock = ({
 	pub,
 	onRemove,
@@ -35,7 +35,7 @@ const RelatedPubBlock = ({
 	pub: GetPubsResult[number];
 	onRemove: () => void;
 	valueComponentProps: PubFieldFormElementProps;
-	slug: RelatedPubValueSlug;
+	slug: string;
 	onBlur?: () => void;
 }) => {
 	return (
@@ -64,23 +64,45 @@ type FieldValue = { value: JsonValue; relatedPubId: PubsId };
 type FormValue = {
 	[slug: string]: FieldValue[];
 };
+type FormValueSingle = {
+	[slug: string]: JsonValue;
+};
+
+const parseRelatedPubValuesSlugError = (
+	slug: string,
+	formStateErrors: FieldErrors<FormValueSingle> | FieldErrors<FormValue>
+) => {
+	const [baseSlug, index] = slug.split(".");
+	const indexNumber = index ? parseInt(index) : undefined;
+
+	if (!indexNumber || isNaN(indexNumber)) {
+		const baseError = (formStateErrors as FieldErrors<FormValueSingle>)[baseSlug];
+		return baseError;
+	}
+	const valueError = (formStateErrors as FieldErrors<FormValue>)[baseSlug]?.[indexNumber]?.value;
+	return valueError;
+};
 
 export const ConfigureRelatedValue = ({
 	slug,
 	element,
 	onBlur,
+	className,
 	...props
-}: PubFieldFormElementProps & { slug: RelatedPubValueSlug; onBlur?: () => void }) => {
+}: PubFieldFormElementProps & {
+	slug: string;
+	onBlur?: () => void;
+	className?: string;
+}) => {
 	const configLabel = "label" in element.config ? element.config.label : undefined;
 	const label = configLabel || element.label || slug;
 
-	const { watch, formState } = useFormContext<FormValue>();
+	const { watch, formState } = useFormContext<FormValue | FormValueSingle>();
 	const [isPopoverOpen, setPopoverIsOpen] = useState(false);
 	const value = watch(slug);
 	const showValue = value != null && value !== "";
 
-	const [baseSlug, index] = slug.split(".");
-	const valueError = formState.errors[baseSlug]?.[parseInt(index)]?.value;
+	const valueError = parseRelatedPubValuesSlugError(slug, formState.errors);
 
 	if (element.component === null) {
 		return null;
@@ -103,9 +125,13 @@ export const ConfigureRelatedValue = ({
 					data-testid="add-related-value"
 					variant="link"
 					size="sm"
-					className={cn("flex h-4 max-w-full gap-1 p-0 text-blue-500", {
-						"text-red-500": valueError,
-					})}
+					className={cn(
+						"flex h-4 max-w-full gap-1 p-0 text-blue-500",
+						{
+							"text-red-500": valueError,
+						},
+						className
+					)}
 				>
 					{valueError && <TriangleAlert />}
 					<span className="truncate">