Prettier and start of env editor

src-web/components/WorkspaceHeader.tsx

@@ -9,12 +9,16 @@ 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';
 
 interface Props {
   className?: string;
 }
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
+  const environments = useEnvironments();
   const activeRequest = useActiveRequest();
   const dialog = useDialog();
 
@@ -29,8 +33,13 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <WorkspaceActionsDropdown className="pointer-events-auto" />
         <Button onClick={() => {
           dialog.show({
-            title: 'Testing',
-            render: () => <div>These are THE environments</div>
+            title: 'Environments',
+            render: () => <EnvironmentList
+              environments={environments}
+              onChange={data => {
+                console.log('data', data);
+              }}
+            />
           })
         }}>
           Environments
@@ -54,3 +63,27 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
     </HStack>
   );
 });
+
+interface EnvironmentListProps {
+  environments: Environment[];
+  onChange: (data: string) => void;
+}
+
+const EnvironmentList = function({ environments, onChange }: EnvironmentListProps) {
+  // For some reason useActiveWorkspaceId() doesn't work in modals (?)
+  return <ul className="inline">
+    {environments.map(e => (
+      <li key={e.id}>
+        <div>
+          {e.name}
+        </div>
+        <Editor
+          contentType="application/json"
+          className='w-full h-[400px] !bg-gray-50'
+          defaultValue={JSON.stringify(e.data, null, 2)}
+          onChange={onChange}
+        />
+      </li>
+    ))}
+  </ul>
+};