feat(hub): add dedicated name column for actors & builds (#1995)

<!-- Please make sure there is an issue that this PR is correlated to. -->

## Changes

<!-- If there are frontend changes, please include screenshots. -->

frontend/apps/hub/src/domains/project/components/actors/actor-tags.tsx

@@ -8,7 +8,10 @@ import {
 import { Icon, faTag } from "@rivet-gg/icons";
 import { type ReactNode, forwardRef } from "react";
 
-const BUILT_IN_TAGS = ["current", "rivet/latest", "enabled", "rivet/enabled"];
+const BUILT_IN_TAGS = {
+	actors: ["name"],
+	builds: ["name", "current"],
+};
 
 export const ActorTag = forwardRef<
 	HTMLSpanElement,
@@ -22,14 +25,14 @@ export const ActorTag = forwardRef<
 
 interface ActorTagsProps {
 	tags?: unknown;
-	excludeBuiltIn?: boolean;
+	excludeBuiltIn?: keyof typeof BUILT_IN_TAGS;
 	className?: string;
 	truncate?: boolean;
 }
 
 export function ActorTags({
 	tags = {},
-	excludeBuiltIn = false,
+	excludeBuiltIn = undefined,
 	truncate = true,
 	className,
 }: ActorTagsProps) {
@@ -44,7 +47,7 @@ export function ActorTags({
 				? Object.entries(tags)
 						.filter(([key]) =>
 							excludeBuiltIn
-								? !BUILT_IN_TAGS.includes(key)
+								? !BUILT_IN_TAGS[excludeBuiltIn].includes(key)
 								: true,
 						)
 						.sort(([a], [b]) => a.localeCompare(b))

frontend/apps/hub/src/domains/project/components/actors/actors-list-row.tsx

@@ -12,6 +12,8 @@ import { ActorRegion } from "./actor-region";
 import { ActorStatusIndicator } from "./actor-status-indicator";
 import { ActorTags } from "./actor-tags";
 
+const BUILT_IN_TAGS = ["name"];
+
 interface ActorsListRowProps
 	extends Pick<
 		Rivet.actor.Actor,
@@ -71,13 +73,17 @@ export const ActorsListRow = memo(
 						/>
 					</SmallText>
 					<SmallText>{id.split("-")[0]}</SmallText>
+					<SmallText>
+						{(tags as Record<string, string>).name ?? "-"}
+					</SmallText>
 					<WithTooltip
 						trigger={
 							<div className="relative overflow-r-gradient">
 								<ActorTags
 									className="flex-nowrap empty:block overflow-hidden"
 									truncate={false}
 									tags={tags}
+									excludeBuiltIn="builds"
 								/>
 							</div>
 						}

frontend/apps/hub/src/domains/project/components/actors/actors-list.tsx

@@ -31,7 +31,7 @@ export function ActorsList({
 		);
 	return (
 		<ScrollArea className="w-full">
-			<div className="grid grid-cols-[2rem_min-content_min-content_minmax(1.5rem,3fr)_minmax(min-content,1fr)_minmax(min-content,1fr)] items-center justify-center gap-x-4 w-full min-w-[450px]">
+			<div className="grid grid-cols-[2rem_min-content_min-content_minmax(min-content,1fr)_minmax(1.5rem,3fr)_minmax(min-content,1fr)_minmax(min-content,1fr)] items-center justify-center gap-x-4 w-full min-w-[450px]">
 				<div className="grid grid-cols-subgrid col-span-full sticky top-0 border-b z-[1] bg-card">
 					<div className="col-span-full border-b justify-between flex  p-1 py-2 gap-1">
 						<ActorsFiltersButton
@@ -44,6 +44,7 @@ export function ActorsList({
 						<div />
 						<div className="pb-3 pt-3">Region</div>
 						<div className="pb-3 pt-3">ID</div>
+						<div className="pb-3 pt-3">Name</div>
 						<div className="pb-3 pt-3">Tags</div>
 						<div className="pb-3 pt-3">Created</div>
 						<div className="pb-3 pt-3">Destroyed</div>

frontend/apps/hub/src/domains/project/queries/actors/mutations.ts

@@ -45,7 +45,7 @@ export function usePatchActorBuildTagsMutation({
 	onSuccess,
 }: { onSuccess?: () => void } = {}) {
 	return useMutation({
-		mutationFn: ({
+		mutationFn: async ({
 			projectNameId,
 			environmentNameId,
 			buildId,
@@ -54,12 +54,51 @@ export function usePatchActorBuildTagsMutation({
 			projectNameId: string;
 			environmentNameId: string;
 			buildId: string;
-		} & Rivet.servers.PatchBuildTagsRequest) =>
-			rivetClient.actor.builds.patchTags(buildId, {
+		} & Rivet.servers.PatchBuildTagsRequest) => {
+			console.log("mutating", request.tags);
+
+			// TODO: Cache this
+			// Get original build
+			const ogBuild = await rivetClient.actor.builds.get(buildId, {
+				project: projectNameId,
+				environment: environmentNameId,
+			});
+
+			// If setting build to current, remove current tag from all other builds with the same name
+			if (
+				ogBuild.build.tags.name &&
+				(request.tags as Record<string, string> | undefined)
+					?.current === "true"
+			) {
+				const currentBuilds = await rivetClient.actor.builds.list({
+					project: projectNameId,
+					environment: environmentNameId,
+					tagsJson: JSON.stringify({
+						name: ogBuild.build.tags.name,
+						current: "true",
+					}),
+				});
+				console.log("updating builds", currentBuilds.builds);
+				for (const build of currentBuilds.builds) {
+					await rivetClient.actor.builds.patchTags(build.id, {
+						project: projectNameId,
+						environment: environmentNameId,
+						body: {
+							tags: {
+								current: null,
+							},
+						},
+					});
+				}
+			}
+
+			// Update tags
+			return await rivetClient.actor.builds.patchTags(buildId, {
 				project: projectNameId,
 				environment: environmentNameId,
 				body: request,
-			}),
+			});
+		},
 		onSuccess: async (_, { projectNameId, environmentNameId, buildId }) => {
 			await Promise.all([
 				queryClient.invalidateQueries(

frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/builds.tsx

@@ -145,7 +145,10 @@ function ProjectBuildsRoute() {
 									{build.createdAt.toLocaleString()}
 								</TableCell>
 								<TableCell>
-									<ActorTags {...build} excludeBuiltIn />
+									<ActorTags
+										{...build}
+										excludeBuiltIn="builds"
+									/>
 								</TableCell>
 								<TableCell>
 									<ProjectBuildLatestButton
@@ -204,9 +207,11 @@ function ProjectBuildLatestButton({
 	projectNameId,
 	environmentNameId,
 }: ProjectBuildLatestButtonProps) {
-	const { mutateAsync } = usePatchActorBuildTagsMutation();
-	const { mutate, isPending } = useUpgradeAllActorsMutation();
-	const { data: latestBulds } = useSuspenseQuery(
+	const { mutateAsync: mutateBuildTagsAsync } =
+		usePatchActorBuildTagsMutation();
+	const { mutate: mutateUpgradeActors, isPending } =
+		useUpgradeAllActorsMutation();
+	const { data: latestBuilds } = useSuspenseQuery(
 		projectCurrentBuildsQueryOptions({ projectId, environmentId }),
 	);
 
@@ -217,19 +222,18 @@ function ProjectBuildLatestButton({
 				size="sm"
 				isLoading={isPending}
 				onClick={async () => {
-					await mutateAsync({
+					await mutateBuildTagsAsync({
 						projectNameId,
 						environmentNameId,
 						buildId: id,
 						tags: { current: "true" },
-						exclusiveTags: ["current"],
 					});
-					if (latestBulds.length > 0) {
-						mutate({
+					if (latestBuilds.length > 0) {
+						mutateUpgradeActors({
 							projectNameId,
 							environmentNameId,
 							buildTags: { current: "true" },
-							tags: { name: latestBulds[0].name },
+							tags: { name: latestBuilds[0].name },
 						});
 					}
 				}}