fix: various bugs (#736)

Author: Cahllagerfeld

src/app/components/columns.tsx

@@ -5,7 +5,6 @@ import { ComponentSheet } from "@/components/stack-components/component-sheet";
 import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
-import { getUsername } from "@/lib/user";
 import { StackComponent } from "@/types/components";
 import { ColumnDef } from "@tanstack/react-table";
 import { Tag } from "@zenml-io/react-component-library/components/server";
@@ -88,9 +87,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 			header: "Author",
 			accessorFn: (row) => row.body?.user?.name,
 			cell: ({ row }) => {
-				const author = row.original.body?.user;
+				const author = row.original.body?.user?.name;
 				if (!author) return null;
-				return <InlineAvatar username={getUsername(author)} />;
+				return <InlineAvatar username={author} />;
 			}
 		},
 		{

src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx

@@ -15,9 +15,9 @@ export function DeletePipelineAlert() {
 
 	return (
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-			<AlertDialogTrigger>
+			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/pipelines/RunsTab/DeleteRunAlert.tsx

@@ -15,9 +15,9 @@ export function DeleteRunAlert() {
 
 	return (
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-			<AlertDialogTrigger>
+			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/pipelines/RunsTab/columns.tsx

@@ -137,13 +137,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 		id: "author",
 		header: "Author",
 		accessorFn: (row) => ({
-			name: row.body?.user?.body?.full_name || row.body?.user?.name
+			name: row.body?.user?.name
 		}),
 		cell: ({ getValue }) => {
 			const { name } = getValue<{
-				name: string;
+				name?: string;
 			}>();
 
+			if (!name) return null;
+
 			return <InlineAvatar username={name} />;
 		}
 	},

src/app/runs/[id]/_Tabs/Configuration/ParameterCollapsible.tsx

@@ -1,5 +1,6 @@
 import ChevronDown from "@/assets/icons/chevron-down.svg?react";
 import { NestedCollapsible } from "@/components/NestedCollapsible";
+import { NotAvailable } from "@/components/not-available";
 import { pipelineDeploymentQueries } from "@/data/pipeline-deployments";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -37,7 +38,7 @@ export function PipelineParamsCollapsible({ deploymentId }: Props) {
 					Pipeline Parameters
 				</CollapsibleHeader>
 				<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
-					Not available
+					<NotAvailable />
 				</CollapsibleContent>
 			</CollapsiblePanel>
 		);

src/app/settings/members/columns.tsx

@@ -1,6 +1,5 @@
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
-import { getUsername } from "@/lib/user";
 import { User, UserBody } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Badge } from "@zenml-io/react-component-library";
@@ -71,7 +70,7 @@ export function columns({ isAdmin }: Props): ColumnDef<User>[] {
 						header: "",
 						accessorFn: (row) => ({
 							id: row.id,
-							name: getUsername(row)
+							name: row.name
 						}),
 						meta: {
 							width: "5%"

src/app/settings/page.tsx

@@ -1,10 +1,9 @@
+import { InlineAvatar } from "@/components/InlineAvatar";
 import { useCurrentUser } from "@/data/users/current-user-query";
+import { Skeleton } from "@zenml-io/react-component-library";
 import { Outlet } from "react-router-dom";
 import { DisplayServer, ProfileSettingsMenu, ServerSettingsMenu } from "./LayoutSidebar";
-import { InlineAvatar } from "@/components/InlineAvatar";
 import { VersionDisplay } from "./VersionDisplay";
-import { getUsername } from "@/lib/user";
-import { Skeleton } from "@zenml-io/react-component-library";
 
 export default function SettingsPage() {
 	const { data } = useCurrentUser();
@@ -20,7 +19,7 @@ export default function SettingsPage() {
 				{data ? (
 					<div className="flex flex-col gap-4">
 						<p className="text-text-xs font-semibold uppercase text-theme-text-tertiary">Account</p>
-						<InlineAvatar username={getUsername(data)} />
+						<InlineAvatar username={data.name} />
 					</div>
 				) : (
 					<Skeleton className="h-[70px] w-full" />

src/app/settings/profile/page.tsx

@@ -1,7 +1,6 @@
 import { Avatar, AvatarFallback, Box, Skeleton } from "@zenml-io/react-component-library";
 import { UpdateProfileForm } from "./UpdateProfileForm";
 import { useCurrentUser } from "@/data/users/current-user-query";
-import { getUsername } from "@/lib/user";
 
 export default function ProfilePage() {
 	const { data: user } = useCurrentUser();
@@ -15,7 +14,7 @@ export default function ProfilePage() {
 				{user ? (
 					<Avatar size="xxl" className="ml-5 h-[140px] w-[140px]" type="rounded">
 						<AvatarFallback className="text-display-lg" size="xxl">
-							{getUsername(user)[0]}
+							{user.name[0]}
 						</AvatarFallback>
 					</Avatar>
 				) : (

src/app/settings/secrets/columns.tsx

@@ -3,10 +3,8 @@ import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { getSecretSnippet } from "@/lib/code-snippets";
-import { getUsername } from "@/lib/user";
 import { routes } from "@/router/routes";
 import { SecretNamespace } from "@/types/secret";
-import { User } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Link } from "react-router-dom";
 import SecretsDropdown from "./SecretsDropdown";
@@ -54,14 +52,11 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
 	{
 		id: "author",
 		header: "Author",
-		accessorFn: (row) => row.body?.user,
+		accessorFn: (row) => row.body?.user?.name,
 		cell: ({ getValue }) => {
-			const user = getValue<User>();
-			return (
-				<>
-					<InlineAvatar username={getUsername(user)} />
-				</>
-			);
+			const name = getValue<string>();
+			if (!name) return null;
+			return <InlineAvatar username={name} />;
 		}
 	},
 	{

src/app/settings/service-accounts/DeleteAlert.tsx

@@ -21,7 +21,7 @@ export function DeleteServiceAccountAlert() {
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
 			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"