Environment dropdown and actions

src-web/components/EnvironmentActionsDropdown.tsx

@@ -0,0 +1,129 @@
+import classnames from 'classnames';
+import { memo, useMemo } from 'react';
+import { Button } from './core/Button';
+import type { DropdownItem } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { InlineCode } from './core/InlineCode';
+import { useEnvironments } from '../hooks/useEnvironments';
+import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
+import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
+import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
+import { usePrompt } from '../hooks/usePrompt';
+import { useDialog } from './DialogContext';
+import { EnvironmentEditDialog } from './EnvironmentEditDialog';
+
+type Props = {
+  className?: string;
+};
+
+export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdown({
+  className,
+}: Props) {
+  const environments = useEnvironments();
+  const [activeEnvironment, setActiveEnvironment] = useActiveEnvironment();
+  const updateEnvironment = useUpdateEnvironment(activeEnvironment?.id ?? null);
+  const createEnvironment = useCreateEnvironment();
+  const prompt = usePrompt();
+  const dialog = useDialog();
+
+  const items: DropdownItem[] = useMemo(() => {
+    const environmentItems = environments.map(
+      (e) => ({
+        key: e.id,
+        label: e.name,
+        onSelect: async () => {
+          setActiveEnvironment(e);
+        },
+      }),
+      [],
+    );
+    const activeEnvironmentItems: DropdownItem[] =
+      environments.length <= 1
+        ? []
+        : [
+            ...environmentItems,
+            {
+              type: 'separator',
+              label: activeEnvironment?.name,
+            },
+          ];
+
+    return [
+      ...activeEnvironmentItems,
+      {
+        key: 'edit',
+        label: 'Edit',
+        leftSlot: <Icon icon="sun" />,
+        onSelect: async () => {
+          dialog.show({
+            title: 'Environments',
+            render: () => <EnvironmentEditDialog />,
+          });
+        },
+      },
+      {
+        key: 'rename',
+        label: 'Rename',
+        leftSlot: <Icon icon="pencil" />,
+        onSelect: async () => {
+          const name = await prompt({
+            title: 'Rename Environment',
+            description: (
+              <>
+                Enter a new name for <InlineCode>{activeEnvironment?.name}</InlineCode>
+              </>
+            ),
+            name: 'name',
+            label: 'Name',
+            defaultValue: activeEnvironment?.name,
+          });
+          updateEnvironment.mutate({ name });
+        },
+      },
+      // {
+      //   key: 'delete',
+      //   label: 'Delete',
+      //   leftSlot: <Icon icon="trash" />,
+      //   onSelect: deleteEnv.mutate,
+      //   variant: 'danger',
+      // },
+      { type: 'separator' },
+      {
+        key: 'create-environment',
+        label: 'Create Environment',
+        leftSlot: <Icon icon="plus" />,
+        onSelect: async () => {
+          const name = await prompt({
+            name: 'name',
+            label: 'Name',
+            defaultValue: '',
+            description: 'Enter a name for the new environment',
+            title: 'Create Environment',
+          });
+          createEnvironment.mutate({ name });
+        },
+      },
+    ];
+  }, [
+    environments,
+    activeEnvironment?.name,
+    // deleteEnvironment.mutate,
+    dialog,
+    prompt,
+    updateEnvironment,
+    createEnvironment,
+  ]);
+
+  return (
+    <Dropdown items={items}>
+      <Button
+        size="sm"
+        className={classnames(className, 'text-gray-800 !px-2 truncate')}
+        forDropdown
+      >
+        {activeEnvironment?.name ?? 'No Env'}
+      </Button>
+    </Dropdown>
+  );
+});

src-web/components/EnvironmentEditDialog.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
 import { usePrompt } from '../hooks/usePrompt';
@@ -7,19 +6,24 @@ import type { Environment } from '../lib/models';
 import { Button } from './core/Button';
 import { Editor } from './core/Editor';
 import classnames from 'classnames';
+import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 
-export const EnvironmentEditDialog = function () {
+export const EnvironmentEditDialog = function() {
   const prompt = usePrompt();
   const environments = useEnvironments();
   const createEnvironment = useCreateEnvironment();
-  const [activeEnvironment, setActiveEnvironment] = useState<Environment | null>(null);
+  const [activeEnvironment, setActiveEnvironment] = useActiveEnvironment();
 
   return (
     <div className="h-full grid gap-3 grid-cols-[auto_minmax(0,1fr)]">
-      <aside className="h-full min-w-[120px] pr-3 border-r border-gray-200">
+      <aside className="relative h-full min-w-[200px] pr-3 border-r border-gray-200">
         {environments.map((e) => (
           <Button
-            className={classnames('w-full', activeEnvironment?.id === e.id && 'bg-highlight')}
+            size="sm"
+            className={classnames(
+              'w-full',
+              activeEnvironment?.id === e.id && 'bg-gray-100 text-gray-1000',
+            )}
             justify="start"
             key={e.id}
             onClick={() => {
@@ -30,6 +34,8 @@ export const EnvironmentEditDialog = function () {
           </Button>
         ))}
         <Button
+          size="sm"
+          className="mr-5 absolute bottom-0 left-0 right-0"
           color="gray"
           onClick={async () => {
             const name = await prompt({
@@ -41,7 +47,7 @@ export const EnvironmentEditDialog = function () {
             createEnvironment.mutate({ name });
           }}
         >
-          Create Environment
+          New Environment
         </Button>
       </aside>
       {activeEnvironment != null && <EnvironmentEditor environment={activeEnvironment} />}
@@ -49,7 +55,7 @@ export const EnvironmentEditDialog = function () {
   );
 };
 
-const EnvironmentEditor = function ({ environment }: { environment: Environment }) {
+const EnvironmentEditor = function({ environment }: { environment: Environment }) {
   const updateEnvironment = useUpdateEnvironment(environment.id);
   return (
     <Editor

src-web/components/WorkspaceActionsDropdown.tsx

@@ -20,7 +20,7 @@ type Props = {
   className?: string;
 };
 
-export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ className }: Props) {
+export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({ className }: Props) {
   const workspaces = useWorkspaces();
   const activeWorkspace = useActiveWorkspace();
   const activeWorkspaceId = activeWorkspace?.id ?? null;

src-web/components/WorkspaceHeader.tsx

@@ -7,9 +7,7 @@ import { RecentRequestsDropdown } from './RecentRequestsDropdown';
 import { RequestActionsDropdown } from './RequestActionsDropdown';
 import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
-import { Button } from './core/Button';
-import { useDialog } from './DialogContext';
-import { EnvironmentEditDialog } from './EnvironmentEditDialog';
+import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
 
 interface Props {
   className?: string;
@@ -17,7 +15,6 @@ interface Props {
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
   const activeRequest = useActiveRequest();
-  const dialog = useDialog();
 
   return (
     <HStack
@@ -28,15 +25,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
       <HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center">
         <SidebarActions />
         <WorkspaceActionsDropdown className="pointer-events-auto" />
-        <Button onClick={() => {
-          dialog.show({
-            title: 'Environments',
-            size: 'full',
-            render: () => <EnvironmentEditDialog />,
-          })
-        }}>
-          Environments
-        </Button>
+        <EnvironmentActionsDropdown className="pointer-events-auto" />
       </HStack>
       <div className="pointer-events-none">
         <RecentRequestsDropdown />

src-web/components/core/Dialog.tsx

@@ -53,6 +53,7 @@ export function Dialog({
             animate={{ top: 0, scale: 1 }}
             className={classnames(
               className,
+              'h-full gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
               'relative bg-gray-50 pointer-events-auto',
               'p-5 rounded-lg overflow-auto',
               'dark:border border-highlight shadow shadow-black/10',
@@ -66,8 +67,7 @@ export function Dialog({
               {title}
             </Heading>
             {description && <p id={descriptionId}>{description}</p>}
-            <div className="h-full w-full mt-4">{children}</div>
-
+            <div className="h-full w-full">{children}</div>
             {/*Put close at the end so that it's the last thing to be tabbed to*/}
             {!hideX && (
               <IconButton