component editor - meta editor for python components (#1173)

## Description

Closes #1111

Closes #1110

Closes #1109

Enhanced the Python Component Editor with a new metadata tab that allows users to configure container settings. This update enables users to:

1. Specify a custom base image for the container
2. Add Python packages to be installed in the container
3. Define custom annotations for the component

The PR also adds functionality to parse and preserve existing metadata when editing Python components, ensuring that previously configured settings are maintained.

## Type of Change

- [x] New feature
- [x] Improvement

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [x] I have tested the changes on staging

## Test Instructions

[Screen Recording 2025-10-21 at 7.19.00 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/dd65e1e9-8961-4ba0-b2c1-3ea0ade47e45.mov" />](https://app.graphite.dev/user-attachments/video/dd65e1e9-8961-4ba0-b2c1-3ea0ade47e45.mov)

1. Open the Component Editor for a Python component
2. Switch to the "Metadata" tab
3. Verify you can set a custom container image
4. Add Python packages to be installed
5. Add custom annotations
6. Save the component and verify the settings are preserved

Author: maxy-shpfy

src/components/shared/ComponentEditor/ComponentEditorDialog.tsx

@@ -10,13 +10,14 @@ import { Heading, Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
 import { hydrateComponentReference } from "@/services/componentService";
+import { isContainerImplementation } from "@/utils/componentSpec";
 import { saveComponent } from "@/utils/localforage";
 
 import { FullscreenElement } from "../FullscreenElement";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
 import { PythonComponentEditor } from "./components/PythonComponentEditor";
 import { YamlComponentEditor } from "./components/YamlComponentEditor";
-import type { SupportedTemplate } from "./types";
+import type { SupportedTemplate, YamlGeneratorOptions } from "./types";
 import { useTemplateCodeByName } from "./useTemplateCodeByName";
 
 const ComponentEditorDialogSkeleton = () => {
@@ -58,7 +59,11 @@ const ComponentEditorDialogSkeleton = () => {
 };
 
 type PythonCodeDetection =
-  | { isPython: true; pythonOriginalCode: string }
+  | {
+      isPython: true;
+      pythonOriginalCode: string;
+      options: YamlGeneratorOptions;
+    }
   | { isPython: false };
 
 export const ComponentEditorDialog = withSuspenseWrapper(
@@ -86,7 +91,14 @@ export const ComponentEditorDialog = withSuspenseWrapper(
             text,
           });
 
-          const pythonOriginalCode = hydratedComponent?.spec?.metadata
+          if (
+            !hydratedComponent ||
+            !isContainerImplementation(hydratedComponent.spec.implementation)
+          ) {
+            return { isPython: false };
+          }
+
+          const pythonOriginalCode = hydratedComponent.spec.metadata
             ?.annotations?.python_original_code as string;
 
           if (!pythonOriginalCode) {
@@ -96,6 +108,25 @@ export const ComponentEditorDialog = withSuspenseWrapper(
           return {
             isPython: true,
             pythonOriginalCode,
+            options: {
+              baseImage:
+                hydratedComponent.spec.implementation.container.image ??
+                "python:3.12",
+              packagesToInstall: parsePythonDependencies(
+                hydratedComponent.spec.metadata?.annotations
+                  ?.python_dependencies,
+              ),
+              annotations: Object.fromEntries(
+                Object.entries(
+                  (hydratedComponent.spec.metadata?.annotations ??
+                    {}) as Record<string, string>,
+                ).filter(
+                  ([key]) =>
+                    key !== "python_original_code" &&
+                    key !== "python_dependencies",
+                ),
+              ),
+            },
           };
         }
 
@@ -110,6 +141,7 @@ export const ComponentEditorDialog = withSuspenseWrapper(
         return {
           isPython: true,
           pythonOriginalCode: defaultPythonFunctionText,
+          options: {},
         };
       },
     });
@@ -184,6 +216,7 @@ export const ComponentEditorDialog = withSuspenseWrapper(
           {pythonCodeDetection?.isPython ? (
             <PythonComponentEditor
               text={pythonCodeDetection.pythonOriginalCode}
+              options={pythonCodeDetection.options}
               onComponentTextChange={handleComponentTextChange}
               onErrorsChange={setErrors}
             />
@@ -200,3 +233,13 @@ export const ComponentEditorDialog = withSuspenseWrapper(
   },
   ComponentEditorDialogSkeleton,
 );
+
+function parsePythonDependencies(dependencies: unknown | undefined): string[] {
+  try {
+    return (
+      JSON.parse(typeof dependencies === "string" ? dependencies : "[]") ?? []
+    );
+  } catch {
+    return [];
+  }
+}

src/components/shared/ComponentEditor/components/PythonComponentEditor.tsx

@@ -4,13 +4,15 @@ import { useCallback, useEffect, useState } from "react";
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Text } from "@/components/ui/typography";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { DEFAULT_MONACO_OPTIONS } from "../constants";
 import { usePythonYamlGenerator } from "../generators/python";
+import type { YamlGeneratorOptions } from "../types";
 import { ComponentSpecErrorsList } from "./ComponentSpecErrorsList";
 import { PreviewTaskNodeCard } from "./PreviewTaskNodeCard";
 import { TogglePreview } from "./TogglePreview";
+import { YamlGeneratorOptionsEditor } from "./YamlGeneratorOptionsEditor";
 
 const PythonComponentEditorSkeleton = () => {
   return (
@@ -43,22 +45,26 @@ const PythonComponentEditorSkeleton = () => {
 export const PythonComponentEditor = withSuspenseWrapper(
   ({
     text,
+    options,
     onComponentTextChange,
     onErrorsChange,
   }: {
     text: string;
+    options: YamlGeneratorOptions;
     onComponentTextChange: (yaml: string) => void;
     onErrorsChange: (errors: string[]) => void;
   }) => {
     const [componentText, setComponentText] = useState("");
     const [validationErrors, setValidationErrors] = useState<string[]>([]);
     const [showPreview, setShowPreview] = useState(true);
+    const [yamlGeneratorOptions, setYamlGeneratorOptions] = useState(options);
+
     const yamlGenerator = usePythonYamlGenerator();
 
     const handleFunctionTextChange = useCallback(
       async (value: string | undefined) => {
         try {
-          const yaml = await yamlGenerator(value ?? "");
+          const yaml = await yamlGenerator(value ?? "", yamlGeneratorOptions);
           setComponentText(yaml);
           onComponentTextChange(yaml);
           setValidationErrors([]);
@@ -71,7 +77,7 @@ export const PythonComponentEditor = withSuspenseWrapper(
           setValidationErrors(errors);
         }
       },
-      [yamlGenerator, onComponentTextChange],
+      [yamlGenerator, onComponentTextChange, yamlGeneratorOptions],
     );
 
     useEffect(() => {
@@ -82,21 +88,40 @@ export const PythonComponentEditor = withSuspenseWrapper(
     return (
       <InlineStack className="w-full h-full" gap="4">
         <BlockStack className="flex-1 h-full" data-testid="python-editor">
-          <InlineStack className="h-10 py-2">
-            <Text>Python Code</Text>
-          </InlineStack>
-          <BlockStack className="flex-1 relative">
-            <div className="absolute inset-0">
-              <MonacoEditor
-                defaultLanguage="python"
-                theme="vs-dark"
-                value={text}
-                onChange={handleFunctionTextChange}
-                options={DEFAULT_MONACO_OPTIONS}
+          <Tabs defaultValue="python" className="w-full flex-1 pt-1">
+            <TabsList>
+              <TabsTrigger value="python">Python Code</TabsTrigger>
+              <TabsTrigger value="metadata">Configuration</TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value="python"
+              className="flex flex-col flex-1 relative"
+            >
+              <BlockStack className="flex-1 relative">
+                <div className="absolute inset-0">
+                  <MonacoEditor
+                    defaultLanguage="python"
+                    theme="vs-dark"
+                    value={text}
+                    onChange={handleFunctionTextChange}
+                    options={DEFAULT_MONACO_OPTIONS}
+                  />
+                </div>
+              </BlockStack>
+              <ComponentSpecErrorsList validationErrors={validationErrors} />
+            </TabsContent>
+
+            <TabsContent
+              value="metadata"
+              className="flex flex-col flex-1 relative"
+            >
+              <YamlGeneratorOptionsEditor
+                initialOptions={yamlGeneratorOptions}
+                onChange={setYamlGeneratorOptions}
               />
-            </div>
-          </BlockStack>
-          <ComponentSpecErrorsList validationErrors={validationErrors} />
+            </TabsContent>
+          </Tabs>
         </BlockStack>
 
         <BlockStack className="flex-1 h-full">