From 7e98b6d853c6e6b89b231dc52a4072fd0f6e0377 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 10 Apr 2023 16:02:29 -0700
Subject: [PATCH] Dropdown keys and pointer events

---
 src-web/components/RecentRequestsDropdown.tsx   | 4 +++-
 src-web/components/RequestActionsDropdown.tsx   | 3 +++
 src-web/components/ResponsePane.tsx             | 3 +++
 src-web/components/WorkspaceActionsDropdown.tsx | 4 ++++
 src-web/components/WorkspaceHeader.tsx          | 2 +-
 src-web/components/core/Button.tsx              | 6 ++++--
 src-web/components/core/Dropdown.tsx            | 3 ++-
 src-web/components/core/RadioDropdown.tsx       | 1 +
 8 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src-web/components/RecentRequestsDropdown.tsx b/src-web/components/RecentRequestsDropdown.tsx
index 46c4bf8f..82fd0666 100644
--- a/src-web/components/RecentRequestsDropdown.tsx
+++ b/src-web/components/RecentRequestsDropdown.tsx
@@ -49,6 +49,7 @@ export function RecentRequestsDropdown() {
       if (request === undefined) continue;
 
       recentRequestItems.push({
+        key: request.id,
         label: request.name,
         leftSlot: <CountBadge className="!ml-0 px-0 w-5" count={recentRequestItems.length + 1} />,
         onSelect: () => {
@@ -71,8 +72,9 @@ export function RecentRequestsDropdown() {
   return (
     <Dropdown ref={dropdownRef} items={items}>
       <Button
+        disabled={activeRequest === null}
         size="sm"
-        className="pointer-events-auto flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"
+        className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"
       >
         {activeRequest?.name ?? <span className="text-gray-400">No Request</span>}
       </Button>
diff --git a/src-web/components/RequestActionsDropdown.tsx b/src-web/components/RequestActionsDropdown.tsx
index bf051efa..9a85034c 100644
--- a/src-web/components/RequestActionsDropdown.tsx
+++ b/src-web/components/RequestActionsDropdown.tsx
@@ -34,12 +34,14 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
       ref={dropdownRef}
       items={[
         {
+          key: 'duplicate',
           label: 'Duplicate',
           onSelect: duplicateRequest.mutate,
           leftSlot: <Icon icon="copy" />,
           rightSlot: <HotKey modifier="Meta" keyName="D" />,
         },
         {
+          key: 'delete',
           label: 'Delete',
           onSelect: deleteRequest.mutate,
           variant: 'danger',
@@ -47,6 +49,7 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
         },
         { type: 'separator', label: 'Yaak Settings' },
         {
+          key: 'appearance',
           label: appearance === 'dark' ? 'Light Theme' : 'Dark Theme',
           onSelect: toggleAppearance,
           leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 662fdb88..09bd61ab 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -131,11 +131,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                 <Dropdown
                   items={[
                     {
+                      key: 'clear-single',
                       label: 'Clear Response',
                       onSelect: deleteResponse.mutate,
                       disabled: responses.length === 0,
                     },
                     {
+                      key: 'clear-all',
                       label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
                       onSelect: deleteAllResponses.mutate,
                       hidden: responses.length <= 1,
@@ -143,6 +145,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     },
                     { type: 'separator', label: 'History' },
                     ...responses.slice(0, 10).map((r) => ({
+                      key: r.id,
                       label: (
                         <HStack space={2}>
                           <StatusTag className="text-xs" response={r} />
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
index 88d28148..883ea4d6 100644
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -29,6 +29,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
 
   const items: DropdownItem[] = useMemo(() => {
     const workspaceItems = workspaces.map((w) => ({
+      key: w.id,
       label: w.name,
       leftSlot: activeWorkspaceId === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
       onSelect: () => {
@@ -51,6 +52,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
     return [
       ...activeWorkspaceItems,
       {
+        key: 'rename',
         label: 'Rename',
         leftSlot: <Icon icon="pencil" />,
         onSelect: async () => {
@@ -69,6 +71,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
         },
       },
       {
+        key: 'delete',
         label: 'Delete',
         leftSlot: <Icon icon="trash" />,
         onSelect: deleteWorkspace.mutate,
@@ -76,6 +79,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
       },
       { type: 'separator' },
       {
+        key: 'create-workspace',
         label: 'Create Workspace',
         leftSlot: <Icon icon="plus" />,
         onSelect: async () => {
diff --git a/src-web/components/WorkspaceHeader.tsx b/src-web/components/WorkspaceHeader.tsx
index 742d3619..079e768e 100644
--- a/src-web/components/WorkspaceHeader.tsx
+++ b/src-web/components/WorkspaceHeader.tsx
@@ -25,7 +25,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <SidebarActions />
         <WorkspaceActionsDropdown className="pointer-events-auto" />
       </HStack>
-      <div>
+      <div className="pointer-events-none">
         <RecentRequestsDropdown />
       </div>
       <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index 03e1f5a9..734cc4f0 100644
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -39,6 +39,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     type = 'button',
     justify = 'center',
     size = 'md',
+    disabled,
     ...props
   }: ButtonProps,
   ref,
@@ -50,6 +51,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         'outline-none whitespace-nowrap',
         'focus-visible-or-class:ring',
         'rounded-md flex items-center',
+        disabled ? 'pointer-events-none' : 'pointer-events-auto',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
@@ -57,7 +59,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         size === 'sm' && 'h-sm px-2.5 text-sm',
         size === 'xs' && 'h-xs px-2 text-sm',
       ),
-    [color, size, justify, className],
+    [className, disabled, color, justify, size],
   );
 
   if (typeof to === 'string') {
@@ -69,7 +71,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     );
   } else {
     return (
-      <button ref={ref} type={type} className={classes} {...props}>
+      <button ref={ref} type={type} className={classes} disabled={disabled} {...props}>
         {isLoading && <Icon icon="update" size={size} className="animate-spin mr-1" />}
         {children}
         {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index fc58c5f5..5b94fc24 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -25,6 +25,7 @@ export type DropdownItemSeparator = {
 
 export type DropdownItem =
   | {
+      key: string;
       type?: 'default';
       label: ReactNode;
       variant?: 'danger';
@@ -306,7 +307,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                       focused={i === selectedIndex}
                       onFocus={handleFocus}
                       onSelect={handleSelect}
-                      key={i + item.label}
+                      key={item.key}
                       item={item}
                     />
                   );
diff --git a/src-web/components/core/RadioDropdown.tsx b/src-web/components/core/RadioDropdown.tsx
index 6b23a81d..e8297da2 100644
--- a/src-web/components/core/RadioDropdown.tsx
+++ b/src-web/components/core/RadioDropdown.tsx
@@ -32,6 +32,7 @@ export function RadioDropdown<T = string | null>({
           return item;
         } else {
           return {
+            key: item.label,
             label: item.label,
             shortLabel: item.shortLabel,
             onSelect: () => onChange(item.value),