From b15cdec7011957d2b43d0393c308e4167d5ea161 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 2 Nov 2023 20:38:33 -0700
Subject: [PATCH] Refactor environment edit dialog

---
 src-web/components/EnvironmentEditDialog.tsx  | 116 ++++++++++++------
 src-web/components/Overlay.tsx                |   4 -
 .../components/WorkspaceActionsDropdown.tsx   |   3 +-
 src-web/components/core/Button.tsx            |  10 +-
 src-web/components/core/Dropdown.tsx          |   1 +
 src-web/hooks/useCreateEnvironment.ts         |   1 -
 6 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/src-web/components/EnvironmentEditDialog.tsx b/src-web/components/EnvironmentEditDialog.tsx
index 54513778..cdadbbc4 100644
--- a/src-web/components/EnvironmentEditDialog.tsx
+++ b/src-web/components/EnvironmentEditDialog.tsx
@@ -16,7 +16,10 @@ import { Icon } from './core/Icon';
 import { usePrompt } from '../hooks/usePrompt';
 import { InlineCode } from './core/InlineCode';
 import { useWindowSize } from 'react-use';
-import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
+import type {
+  GenericCompletionConfig,
+  GenericCompletionOption,
+} from './core/Editor/genericCompletion';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 
@@ -25,8 +28,8 @@ interface Props {
 }
 
 export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
-  const [selectedEnvironment, setSelectedEnvironment] = useState<Environment | null>(
-    initialEnvironment,
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string | null>(
+    initialEnvironment?.id ?? null,
   );
   const environments = useEnvironments();
   const createEnvironment = useCreateEnvironment();
@@ -35,6 +38,11 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
   const windowSize = useWindowSize();
   const showSidebar = windowSize.width > 500;
 
+  const selectedEnvironment = useMemo(
+    () => environments.find((e) => e.id === selectedEnvironmentId) ?? null,
+    [environments, selectedEnvironmentId],
+  );
+
   return (
     <div
       className={classNames(
@@ -45,44 +53,30 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
       {showSidebar && (
         <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-4 border-r border-gray-100">
           <div className="min-w-0 h-full w-full overflow-y-scroll">
-            <Button
-              size="xs"
-              color="custom"
-              justify="start"
-              className={classNames(
-                'w-full',
-                'text-gray-600 hocus:text-gray-800 !ring-0',
-                selectedEnvironment == null && 'bg-highlightSecondary !text-gray-900',
-              )}
-              onClick={() => {
-                setSelectedEnvironment(null);
-              }}
+            <SidebarButton
+              active={selectedEnvironmentId == null}
+              onClick={() => setSelectedEnvironmentId(null)}
             >
               Base Environment
-            </Button>
-            {environments.map((e) => (
-              <Button
-                key={e.id}
-                justify="start"
-                size="xs"
-                color="custom"
-                className={classNames(
-                  'w-full',
-                  'text-gray-600 hocus:text-gray-800',
-                  selectedEnvironment?.id === e.id && 'bg-highlightSecondary !text-gray-900',
-                )}
-                onClick={() => {
-                  setSelectedEnvironment(e);
-                }}
-              >
-                {e.name}
-              </Button>
-            ))}
+            </SidebarButton>
+            <div className="ml-3 pl-2 border-l border-highlight">
+              {environments.map((e) => (
+                <SidebarButton
+                  key={e.id}
+                  active={selectedEnvironmentId === e.id}
+                  onClick={() => setSelectedEnvironmentId(e.id)}
+                  className="pl-2"
+                >
+                  {e.name}
+                </SidebarButton>
+              ))}
+            </div>
           </div>
           <Button
             size="sm"
-            className="w-full"
+            className="w-full text-center"
             color="gray"
+            justify="center"
             onClick={() => createEnvironment.mutate()}
           >
             New Environment
@@ -123,14 +117,32 @@ const EnvironmentEditor = function ({
     [updateWorkspace, updateEnvironment, environment],
   );
 
+  // Gather a list of env names from other environments, to help the user get them aligned
   const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
-    const allVariableNames = environments.flatMap((e) => e.variables.map((v) => v.name));
-    // Filter out empty strings and variables that already exist in the active environment
+    const otherEnvironments = environments.filter((e) => e.id !== environment?.id);
+    const allVariableNames =
+      environment == null
+        ? [
+            // Nothing to autocomplete if we're in the base environment
+          ]
+        : [
+            ...workspace.variables.map((v) => v.name),
+            ...otherEnvironments.flatMap((e) => e.variables.map((v) => v.name)),
+          ];
+
+    // Filter out empty strings and variables that already exist
     const variableNames = allVariableNames.filter(
       (name) => name != '' && !variables.find((v) => v.name === name),
     );
-    return { options: variableNames.map((name) => ({ label: name, type: 'constant' })) };
-  }, [environments, variables]);
+    const uniqueVariableNames = [...new Set(variableNames)];
+    const options = uniqueVariableNames.map(
+      (name): GenericCompletionOption => ({
+        label: name,
+        type: 'constant',
+      }),
+    );
+    return { options };
+  }, [environments, variables, workspace, environment]);
 
   const prompt = usePrompt();
   const items = useMemo<DropdownItem[] | null>(
@@ -198,3 +210,29 @@ const EnvironmentEditor = function ({
     </VStack>
   );
 };
+
+function SidebarButton({
+  children,
+  className,
+  active,
+  onClick,
+}: {
+  className?: string;
+  children: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={classNames(
+        className,
+        'flex text-sm text-left w-full mb-1 h-xs',
+        'text-gray-600 hocus:text-gray-800 !ring-0',
+        active && '!text-gray-900',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx
index f4defd51..b764dbcf 100644
--- a/src-web/components/Overlay.tsx
+++ b/src-web/components/Overlay.tsx
@@ -46,10 +46,6 @@ export function Overlay({
                 variant === 'default' && 'bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm',
               )}
             />
-            {/* Add region to still be able to drag the window */}
-            {variant !== 'transparent' && (
-              <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />
-            )}
             <div className="bg-red-100">{children}</div>
           </motion.div>
         </FocusTrap>
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
index c063f987..359e12d5 100644
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -133,8 +133,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
           const name = await prompt({
             name: 'name',
             label: 'Name',
-            defaultValue: '',
-            description: 'Enter a name for the new workspace',
+            defaultValue: 'My Workspace',
             title: 'Create Workspace',
           });
           createWorkspace.mutate({ name });
diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index 9d64b4b4..6e80c29b 100644
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -72,7 +72,15 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       ) : leftSlot ? (
         <div className="mr-1">{leftSlot}</div>
       ) : null}
-      <div className={classNames('max-w-[15em] truncate w-full text-left', innerClassName)}>{children}</div>
+      <div
+        className={classNames(
+          'max-w-[15em] truncate w-full',
+          justify === 'start' ? 'text-left' : 'text-center',
+          innerClassName,
+        )}
+      >
+        {children}
+      </div>
       {rightSlot && <div className="ml-1">{rightSlot}</div>}
       {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}
     </button>
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 3c4765dd..150505c9 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -366,6 +366,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
         'focus:bg-highlight focus:text-gray-900 rounded',
         item.variant === 'danger' && 'text-red-600',
       )}
+      innerClassName="!text-left"
       {...props}
     >
       <div
diff --git a/src-web/hooks/useCreateEnvironment.ts b/src-web/hooks/useCreateEnvironment.ts
index c9d8cb54..d1d46280 100644
--- a/src-web/hooks/useCreateEnvironment.ts
+++ b/src-web/hooks/useCreateEnvironment.ts
@@ -20,7 +20,6 @@ export function useCreateEnvironment() {
       const name = await prompt({
         name: 'name',
         title: 'Create Environment',
-        description: 'Enter a name for the new environment',
         label: 'Name',
         defaultValue: 'My Environment',
       });