Allow editing base environment

src-web/components/EnvironmentActionsDropdown.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { memo, useCallback, useMemo } from 'react';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
@@ -22,7 +21,6 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
 }: Props) {
   const environments = useEnvironments();
   const activeEnvironment = useActiveEnvironment();
-  const createEnvironment = useCreateEnvironment();
   const dialog = useDialog();
   const routes = useAppRoutes();
 
@@ -54,28 +52,15 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
       ...((environments.length > 0
         ? [{ type: 'separator', label: 'Environments' }]
         : []) as DropdownItem[]),
-      ...((environments.length > 0
-        ? [
-            {
-              key: 'edit',
-              label: 'Manage Environments',
-              hotKeyAction: 'environmentEditor.toggle',
-              leftSlot: <Icon icon="box" />,
-              onSelect: showEnvironmentDialog,
-            },
-          ]
-        : []) as DropdownItem[]),
       {
-        key: 'new',
+        key: 'edit',
-        label: 'New Environment',
+        label: 'Manage Environments',
-        leftSlot: <Icon icon="plus" />,
+        hotKeyAction: 'environmentEditor.toggle',
-        onSelect: async () => {
+        leftSlot: <Icon icon="box" />,
-          await createEnvironment.mutateAsync();
+        onSelect: showEnvironmentDialog,
-          showEnvironmentDialog();
-        },
       },
     ],
-    [activeEnvironment?.id, createEnvironment, environments, routes, showEnvironmentDialog],
+    [activeEnvironment?.id, environments, routes, showEnvironmentDialog],
   );
 
   return (
@@ -89,7 +74,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         )}
         {...buttonProps}
       >
-        {activeEnvironment?.name ?? 'No Environment'}
+        {activeEnvironment?.name ?? 'Environment'}
       </Button>
     </Dropdown>
   );

src-web/components/EnvironmentEditDialog.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useWindowSize } from 'react-use';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
@@ -58,13 +59,19 @@ 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-3 border-r border-gray-100 -ml-2 pb-4">
           <div className="min-w-0 h-full w-full overflow-y-scroll">
+            <SidebarButton
+              active={selectedEnvironment?.id == null}
+              onClick={() => setSelectedEnvironmentId(null)}
+            >
+              Global
+            </SidebarButton>
             {environments.map((e) => (
               <SidebarButton
                 key={e.id}
                 active={selectedEnvironment?.id === e.id}
                 onClick={() => setSelectedEnvironmentId(e.id)}
               >
-                {e.name}
+                &rarr; {e.name}
               </SidebarButton>
             ))}
           </div>
@@ -79,12 +86,8 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
           </Button>
         </aside>
       )}
-      {activeWorkspace != null ? (
+      {activeWorkspace != null && (
         <EnvironmentEditor environment={selectedEnvironment} workspace={activeWorkspace} />
-      ) : (
-        <div className="flex w-full h-full items-center justify-center text-gray-400 italic">
-          select an environment
-        </div>
       )}
     </div>
   );
@@ -187,7 +190,7 @@ const EnvironmentEditor = function ({
   return (
     <VStack space={2}>
       <HStack space={2} className="justify-between">
-        <h1 className="text-xl">{environment?.name ?? 'Base Environment'}</h1>
+        <h1 className="text-xl">{environment?.name ?? 'Global Environment'}</h1>
         {items != null && (
           <Dropdown items={items}>
             <IconButton
@@ -220,7 +223,7 @@ function SidebarButton({
   onClick,
 }: {
   className?: string;
-  children: string;
+  children: ReactNode;
   active: boolean;
   onClick: () => void;
 }) {