feat: quick "go to settings" for workspace selector (#213)

* feat: quick "go to settings" for workspace selector

* fix: failing tests

Author: alex-mcgovern

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<HTMLFormElement>) => {
     e.preventDefault();
     mutateAsync(
@@ -38,13 +45,14 @@ export function WorkspaceName({
   };
 
   return (
-    <Form onSubmit={handleSubmit} validationBehavior="aria">
+    <Form onSubmit={handleSubmit} validationBehavior="aria" key={workspaceName}>
       <Card
         className={twMerge(className, "shrink-0")}
         data-testid="workspace-name"
       >
         <CardBody>
           <TextField
+            key={workspaceName}
             aria-label="Workspace name"
             value={name}
             name="Workspace name"

src/features/workspace/components/workspaces-selection.tsx

@@ -16,6 +16,8 @@ import { useState } from "react";
 import { useMutationActivateWorkspace } from "../hooks/use-mutation-activate-workspace";
 import clsx from "clsx";
 import { useActiveWorkspaceName } from "../hooks/use-active-workspace-name";
+import { hrefs } from "@/lib/hrefs";
+import { twMerge } from "tailwind-merge";
 
 export function WorkspacesSelection() {
   const queryClient = useQueryClient();
@@ -46,7 +48,7 @@ export function WorkspacesSelection() {
         <ChevronDown />
       </Button>
 
-      <Popover className="w-1/4 p-4" placement="bottom left">
+      <Popover className="w-[32rem] p-3" placement="bottom left">
         <div>
           <div>
             <SearchField
@@ -65,7 +67,7 @@ export function WorkspacesSelection() {
             onAction={(v) => {
               handleWorkspaceClick(v?.toString());
             }}
-            className="py-2 pt-3 max-h-80 overflow-auto"
+            className="-mx-1 my-2 max-h-80 overflow-auto"
             renderEmptyState={() => (
               <p className="text-center">No workspaces found</p>
             )}
@@ -74,16 +76,36 @@ export function WorkspacesSelection() {
               <ListBoxItem
                 id={item.name}
                 key={item.name}
+                textValue={item.name}
                 data-is-selected={item.name === activeWorkspaceName}
                 className={clsx(
-                  "cursor-pointer py-2 m-1 text-base hover:bg-gray-300",
+                  "grid grid-cols-[auto_1.5rem] group/selector cursor-pointer py-2 m-1 text-base hover:bg-gray-200 rounded-sm",
                   {
                     "!bg-gray-900 hover:bg-gray-900 !text-gray-25 hover:!text-gray-25":
                       item.is_active,
                   },
                 )}
               >
-                {item.name}
+                <span className="block truncate">{item.name}</span>
+
+                <LinkButton
+                  href={hrefs.workspaces.edit(item.name)}
+                  onPress={() => 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",
+                  )}
+                >
+                  <Settings
+                    className={twMerge(
+                      item.is_active ? "text-gray-25" : "text-secondary",
+                    )}
+                  />
+                </LinkButton>
               </ListBoxItem>
             )}
           </ListBox>
@@ -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"
           >
             <Settings />
             Manage Workspaces