Started on environment edit dialog

src-web/components/WorkspaceHeader.tsx

@@ -9,17 +9,13 @@ import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
 import { Button } from './core/Button';
 import { useDialog } from './DialogContext';
-import { useEnvironments } from '../hooks/useEnvironments';
-import type { Environment } from '../lib/models';
-import { Editor } from './core/Editor';
-import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
+import { EnvironmentEditDialog } from './EnvironmentEditDialog';
 
 interface Props {
   className?: string;
 }
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
-  const environments = useEnvironments();
   const activeRequest = useActiveRequest();
   const dialog = useDialog();
 
@@ -35,14 +31,8 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <Button onClick={() => {
           dialog.show({
             title: 'Environments',
-            render: () => <div>
-              {environments.map(e => (
-                <EnvironmentList
-                  key={e.id}
-                  environment={e}
-                />
-              ))}
-            </div>
+            size: 'full',
+            render: () => <EnvironmentEditDialog />,
           })
         }}>
           Environments
@@ -66,28 +56,3 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
     </HStack>
   );
 });
-
-interface EnvironmentListProps {
-  environment: Environment;
-}
-
-const EnvironmentList = function({ environment }: EnvironmentListProps) {
-  const updateEnvironment = useUpdateEnvironment(environment.id)
-  return (
-    <div>
-      <h1>{environment.name}</h1>
-      <Editor
-        contentType="application/json"
-        className='w-full h-[400px] !bg-gray-50'
-        defaultValue={JSON.stringify(environment.data, null, 2)}
-        onChange={data => {
-          try {
-            updateEnvironment.mutate({ data: JSON.parse(data) });
-          } catch (err) {
-            // That's okay
-          }
-        }}
-      />
-    </div>
-  );
-};