feat: use consistent headers almost everywhere (#1337)

* feat: add contentlayout for members page

* feat: add contentLayout to action run page

* feat: prettify token page

* fix: make token page slightly prettier

* fix: fix type errors for toekens

* fix: fix broken tests

* feat: improve stage page look

* feat: add layout to stages and stageid page

* feat: add layout for actions settings pages

* feat: add contentlayout to pubs page

Author: tefkah

core/app/c/[communitySlug]/activity/actions/page.tsx

@@ -1,17 +1,15 @@
 import type { Metadata } from "next";
 
 import { notFound, redirect } from "next/navigation";
-import { jsonObjectFrom } from "kysely/helpers/postgres";
 
 import { Capabilities, MembershipType } from "db/public";
+import { Activity } from "ui/icon";
 
-import type { ActionRun } from "./getActionRunsTableColumns";
-import { db } from "~/kysely/database";
 import { getPageLoginData } from "~/lib/authentication/loginData";
 import { userCan } from "~/lib/authorization/capabilities";
-import { pubType } from "~/lib/server";
-import { autoCache } from "~/lib/server/cache/autoCache";
+import { getActionRuns } from "~/lib/server/actions";
 import { findCommunityBySlug } from "~/lib/server/community";
+import { ContentLayout } from "../../ContentLayout";
 import { ActionRunsTable } from "./ActionRunsTable";
 
 export const metadata: Metadata = {
@@ -27,81 +25,40 @@ export default async function Page(props: {
 
 	const { communitySlug } = params;
 
-	const { user } = await getPageLoginData();
+	const [{ user }, community] = await Promise.all([
+		getPageLoginData(),
+		findCommunityBySlug(communitySlug),
+	]);
 
-	const community = await findCommunityBySlug(communitySlug);
 	if (!community) {
 		notFound();
 	}
 
-	if (
-		!(await userCan(
+	const [canEditCommunity, actionRuns] = await Promise.all([
+		userCan(
 			Capabilities.editCommunity,
 			{ type: MembershipType.community, communityId: community.id },
 			user.id
-		))
-	) {
+		),
+		getActionRuns(community.id).execute(),
+	]);
+
+	if (!canEditCommunity) {
 		redirect(`/c/${communitySlug}/unauthorized`);
 	}
 
-	const actionRuns = (await autoCache(
-		db
-			.selectFrom("stages")
-			.where("stages.communityId", "=", community.id)
-			.innerJoin("action_instances", "stages.id", "action_instances.stageId")
-			.innerJoin("action_runs", "action_instances.id", "action_runs.actionInstanceId")
-			.leftJoin("users", "action_runs.userId", "users.id")
-			.select((eb) => [
-				"action_runs.id",
-				"action_runs.config",
-				"action_runs.event",
-				"action_runs.params",
-				"action_runs.status",
-				"action_runs.result",
-				"action_runs.createdAt",
-				jsonObjectFrom(
-					eb
-						.selectFrom("action_instances")
-						.whereRef("action_instances.id", "=", "action_runs.actionInstanceId")
-						.select(["action_instances.name", "action_instances.action"])
-				).as("actionInstance"),
-				"action_runs.sourceActionRunId",
-				jsonObjectFrom(
-					eb
-						.selectFrom("action_runs as ar")
-						.innerJoin("action_instances", "ar.actionInstanceId", "action_instances.id")
-						.whereRef("ar.id", "=", "action_runs.sourceActionRunId")
-						.select(["action_instances.name", "action_instances.action"])
-				).as("sourceActionInstance"),
-				jsonObjectFrom(
-					eb
-						.selectFrom("stages")
-						.whereRef("stages.id", "=", "action_instances.stageId")
-						.select(["stages.id", "stages.name"])
-				).as("stage"),
-				jsonObjectFrom(
-					eb
-						.selectFrom("pubs")
-						.select(["pubs.id", "pubs.createdAt", "pubs.title"])
-						.whereRef("pubs.id", "=", "action_runs.pubId")
-						.select((eb) => pubType({ eb, pubTypeIdRef: "pubs.pubTypeId" }))
-				).as("pub"),
-				jsonObjectFrom(
-					eb
-						.selectFrom("users")
-						.whereRef("users.id", "=", "action_runs.userId")
-						.select(["id", "firstName", "lastName"])
-				).as("user"),
-			])
-			.orderBy("action_runs.createdAt", "desc")
-	).execute()) as ActionRun[];
-
 	return (
-		<>
-			<div className="mb-16 flex items-center justify-between">
-				<h1 className="text-xl font-bold">Action Activity</h1>
+		<ContentLayout
+			title={
+				<>
+					<Activity size={24} strokeWidth={1} className="mr-2 text-gray-500" /> Action
+					Logs
+				</>
+			}
+		>
+			<div className="m-4">
+				<ActionRunsTable actionRuns={actionRuns} communitySlug={community.slug} />
 			</div>
-			<ActionRunsTable actionRuns={actionRuns} communitySlug={community.slug} />
-		</>
+		</ContentLayout>
 	);
 }

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

@@ -4,6 +4,7 @@ import { notFound, redirect } from "next/navigation";
 
 import type { FormsId } from "db/public";
 import { Capabilities, MemberRole, MembershipType } from "db/public";
+import { Users } from "ui/icon";
 
 import type { TableMember } from "./getMemberTableColumns";
 import { AddMemberDialog } from "~/app/components/Memberships/AddMemberDialog";
@@ -13,6 +14,7 @@ import { compareMemberRoles } from "~/lib/authorization/rolesRanking";
 import { findCommunityBySlug } from "~/lib/server/community";
 import { getSimpleForms } from "~/lib/server/form";
 import { selectAllCommunityMemberships } from "~/lib/server/member";
+import { ContentLayout } from "../ContentLayout";
 import { addMember, createUserWithCommunityMembership } from "./actions";
 import { MemberTable } from "./MemberTable";
 
@@ -34,31 +36,31 @@ export default async function Page(props: {
 
 	const { communitySlug } = params;
 
-	const community = await findCommunityBySlug(communitySlug);
+	const [{ user }, community] = await Promise.all([
+		getPageLoginData(),
+		findCommunityBySlug(communitySlug),
+	]);
 
 	if (!community) {
 		return notFound();
 	}
 
-	const { user } = await getPageLoginData();
-
-	if (
-		!(await userCan(
-			Capabilities.editCommunity,
-			{ type: MembershipType.community, communityId: community.id },
-			user.id
-		))
-	) {
-		redirect(`/c/${communitySlug}/unauthorized`);
-	}
-
 	const page = parseInt(searchParams.page ?? "1", 10);
-	const [members, availableForms] = await Promise.all([
+	const [members, availableForms, canEditCommunity] = await Promise.all([
 		selectAllCommunityMemberships({ communityId: community.id }).execute(),
 
 		getSimpleForms(),
+		userCan(
+			Capabilities.editCommunity,
+			{ type: MembershipType.community, communityId: community.id },
+			user.id
+		),
 	]);
 
+	if (!canEditCommunity) {
+		return redirect(`/c/${communitySlug}/unauthorized`);
+	}
+
 	if (!members.length && page !== 1) {
 		return notFound();
 	}
@@ -127,19 +129,27 @@ export default async function Page(props: {
 	const dedupedMembers = [...dedupedMembersMap.values()];
 
 	return (
-		<>
-			<div className="mb-16 flex items-center justify-between">
-				<h1 className="text-xl font-bold">Members</h1>
+		<ContentLayout
+			title={
+				<>
+					<Users size={24} strokeWidth={1} className="mr-2 text-gray-500" /> Members
+				</>
+			}
+			right={
 				<AddMemberDialog
 					addMember={addMember}
 					addUserMember={createUserWithCommunityMembership}
 					existingMembers={dedupedMembers.map((member) => member.id)}
 					isSuperAdmin={user.isSuperAdmin}
 					membershipType={MembershipType.community}
 					availableForms={availableForms}
+					className="bg-emerald-500 text-white"
 				/>
+			}
+		>
+			<div className="m-4">
+				<MemberTable members={dedupedMembers} />
 			</div>
-			<MemberTable members={dedupedMembers} />
-		</>
+		</ContentLayout>
 	);
 }