diff --git a/src/features/workspace/components/workspace-name.tsx b/src/features/workspace/components/workspace-name.tsx index b722c96a..68cf8c7c 100644 --- a/src/features/workspace/components/workspace-name.tsx +++ b/src/features/workspace/components/workspace-name.tsx @@ -10,7 +10,7 @@ import { } from "@stacklok/ui-kit"; import { twMerge } from "tailwind-merge"; import { useMutationCreateWorkspace } from "../hooks/use-mutation-create-workspace"; -import { FormEvent, useState } from "react"; +import { FormEvent, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; export function WorkspaceName({ @@ -23,10 +23,17 @@ export function WorkspaceName({ isArchived: boolean | undefined; }) { const navigate = useNavigate(); - const [name, setName] = useState(workspaceName); - const { mutateAsync, isPending, error } = useMutationCreateWorkspace(); + const { mutateAsync, isPending, error, reset } = useMutationCreateWorkspace(); const errorMsg = error?.detail ? `${error?.detail}` : ""; + const [name, setName] = useState(() => workspaceName); + // NOTE: When navigating from one settings page to another, this value is not + // updated, hence the synchronization effect + useEffect(() => { + setName(workspaceName); + reset(); + }, [reset, workspaceName]); + const handleSubmit = (e: FormEvent) => { e.preventDefault(); mutateAsync( @@ -38,13 +45,14 @@ export function WorkspaceName({ }; return ( -
+ - +
{ handleWorkspaceClick(v?.toString()); }} - className="py-2 pt-3 max-h-80 overflow-auto" + className="-mx-1 my-2 max-h-80 overflow-auto" renderEmptyState={() => (

No workspaces found

)} @@ -74,16 +76,36 @@ export function WorkspacesSelection() { - {item.name} + {item.name} + + setIsOpen(false)} + isIcon + variant="tertiary" + className={twMerge( + "ml-auto size-6 group-hover/selector:opacity-100 opacity-0 transition-opacity", + item.is_active + ? "hover:bg-gray-800 pressed:bg-gray-700" + : "hover:bg-gray-50 hover:text-primary", + )} + > + + )} @@ -92,7 +114,7 @@ export function WorkspacesSelection() { href="/workspaces" onPress={() => setIsOpen(false)} variant="tertiary" - className="text-secondary h-8 pl-2 gap-2 flex mt-2 justify-start" + className="text-secondary h-10 pl-2 gap-2 flex mt-2 justify-start" > Manage Workspaces