From 51cc6c4ad94da722c973fa2d5c7db35ef848f6c9 Mon Sep 17 00:00:00 2001
From: alex-mcgovern <alex_mcgovernsmith@icloud.com>
Date: Tue, 28 Jan 2025 11:21:24 +0000
Subject: [PATCH 1/2] feat: quick "go to settings" for workspace selector

---
 .../workspace/components/workspace-name.tsx   |  8 ++++-
 .../components/workspaces-selection.tsx       | 31 ++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/features/workspace/components/workspace-name.tsx b/src/features/workspace/components/workspace-name.tsx
index b722c96a..15ebe735 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({
@@ -24,6 +24,12 @@ export function WorkspaceName({
 }) {
   const navigate = useNavigate();
   const [name, setName] = useState(workspaceName);
+  // NOTE: When navigating from one settings page to another, this value is not
+  // updated, hence the synchronization effect
+  useEffect(() => {
+    if (name !== workspaceName) setName(workspaceName);
+  }, [name, workspaceName]);
+
   const { mutateAsync, isPending, error } = useMutationCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
diff --git a/src/features/workspace/components/workspaces-selection.tsx b/src/features/workspace/components/workspaces-selection.tsx
index 22239d76..cec6a92f 100644
--- a/src/features/workspace/components/workspaces-selection.tsx
+++ b/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>
             )}
@@ -76,14 +78,33 @@ export function WorkspacesSelection() {
                 key={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 +113,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

From 36a60cbddd9667c05717994c5f527f22ee2e6147 Mon Sep 17 00:00:00 2001
From: alex-mcgovern <alex_mcgovernsmith@icloud.com>
Date: Tue, 28 Jan 2025 11:34:43 +0000
Subject: [PATCH 2/2] fix: failing tests

---
 .../workspace/components/workspace-name.tsx      | 16 +++++++++-------
 .../components/workspaces-selection.tsx          |  1 +
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/features/workspace/components/workspace-name.tsx b/src/features/workspace/components/workspace-name.tsx
index 15ebe735..68cf8c7c 100644
--- a/src/features/workspace/components/workspace-name.tsx
+++ b/src/features/workspace/components/workspace-name.tsx
@@ -23,15 +23,16 @@ export function WorkspaceName({
   isArchived: boolean | undefined;
 }) {
   const navigate = useNavigate();
-  const [name, setName] = useState(workspaceName);
+  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(() => {
-    if (name !== workspaceName) setName(workspaceName);
-  }, [name, workspaceName]);
-
-  const { mutateAsync, isPending, error } = useMutationCreateWorkspace();
-  const errorMsg = error?.detail ? `${error?.detail}` : "";
+    setName(workspaceName);
+    reset();
+  }, [reset, workspaceName]);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -44,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"
diff --git a/src/features/workspace/components/workspaces-selection.tsx b/src/features/workspace/components/workspaces-selection.tsx
index cec6a92f..77eb5078 100644
--- a/src/features/workspace/components/workspaces-selection.tsx
+++ b/src/features/workspace/components/workspaces-selection.tsx
@@ -76,6 +76,7 @@ export function WorkspacesSelection() {
               <ListBoxItem
                 id={item.name}
                 key={item.name}
+                textValue={item.name}
                 data-is-selected={item.name === activeWorkspaceName}
                 className={clsx(
                   "grid grid-cols-[auto_1.5rem] group/selector cursor-pointer py-2 m-1 text-base hover:bg-gray-200 rounded-sm",