Updates correct python component (#1424)

## Description

Implemented component name preservation in the Python component editor. When editing a component using the Python editor, the original component name is now preserved even when the YAML is regenerated from the Python code. This prevents unintended name changes during component editing.

## Type of Change

- [x] Bug fix
- [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

1. Create a new python component (use default `Filter text` for now)
2. Edit the component
3. Confirm you are able to edit PYTHON in the editor
4. Save the component and import as new (new name `Filter text two` or something)
5. Edit the new component, Filter text two,  and replace the existing component
6. Confirm the component being replaced is `Filter text two` and not `Filter text`
7. Do the same steps but for JS (or something else) and confirm you can replace or import as new

Author: Mbeaulne

src/components/shared/ComponentEditor/ComponentEditorDialog.tsx

@@ -63,6 +63,7 @@ type PythonCodeDetection =
       isPython: true;
       pythonOriginalCode: string;
       options: YamlGeneratorOptions;
+      componentName?: string;
     }
   | { isPython: false };
 
@@ -108,6 +109,7 @@ export const ComponentEditorDialog = withSuspenseWrapper(
           return {
             isPython: true,
             pythonOriginalCode,
+            componentName: hydratedComponent.name,
             options: {
               baseImage:
                 hydratedComponent.spec.implementation.container.image ??
@@ -219,6 +221,7 @@ export const ComponentEditorDialog = withSuspenseWrapper(
               options={pythonCodeDetection.options}
               onComponentTextChange={handleComponentTextChange}
               onErrorsChange={setErrors}
+              preserveComponentName={pythonCodeDetection.componentName}
             />
           ) : (
             <YamlComponentEditor

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

@@ -1,5 +1,5 @@
 import MonacoEditor from "@monaco-editor/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
@@ -9,6 +9,7 @@ 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 { preserveComponentName } from "../utils/preserveComponentName";
 import { ComponentSpecErrorsList } from "./ComponentSpecErrorsList";
 import { PreviewTaskNodeCard } from "./PreviewTaskNodeCard";
 import { TogglePreview } from "./TogglePreview";
@@ -48,25 +49,36 @@ export const PythonComponentEditor = withSuspenseWrapper(
     options,
     onComponentTextChange,
     onErrorsChange,
+    preserveComponentName: initialComponentName,
   }: {
     text: string;
     options: YamlGeneratorOptions;
     onComponentTextChange: (yaml: string) => void;
     onErrorsChange: (errors: string[]) => void;
+    preserveComponentName?: string;
   }) => {
     const [componentText, setComponentText] = useState("");
     const [validationErrors, setValidationErrors] = useState<string[]>([]);
     const [showPreview, setShowPreview] = useState(true);
     const [yamlGeneratorOptions, setYamlGeneratorOptions] = useState(options);
 
     const yamlGenerator = usePythonYamlGenerator();
+    const preservedNameRef = useRef(initialComponentName);
+
+    useEffect(() => {
+      preservedNameRef.current = initialComponentName;
+    }, [initialComponentName]);
 
     const handleFunctionTextChange = useCallback(
       async (value: string | undefined) => {
         try {
           const yaml = await yamlGenerator(value ?? "", yamlGeneratorOptions);
-          setComponentText(yaml);
-          onComponentTextChange(yaml);
+          const yamlWithPreservedName = preserveComponentName(
+            yaml,
+            preservedNameRef.current,
+          );
+          setComponentText(yamlWithPreservedName);
+          onComponentTextChange(yamlWithPreservedName);
           setValidationErrors([]);
           onErrorsChange([]);
         } catch (error) {

src/components/shared/ComponentEditor/utils/preserveComponentName.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+
+import { preserveComponentName } from "./preserveComponentName";
+
+describe("preserveComponentName", () => {
+  const baseYaml = `name: Original Name
+description: Sample
+implementation:
+  container:
+    image: python:3.12
+`;
+
+  it("returns original yaml when no name provided", () => {
+    expect(preserveComponentName(baseYaml)).toBe(baseYaml);
+    expect(preserveComponentName(baseYaml, "")).toBe(baseYaml);
+  });
+
+  it("replaces the name when provided", () => {
+    const result = preserveComponentName(baseYaml, "Preserved Name");
+
+    expect(result).toContain("name: Preserved Name");
+  });
+
+  it("falls back to original yaml on parse errors", () => {
+    const malformedYaml = ":- invalid";
+
+    expect(preserveComponentName(malformedYaml, "New Name")).toBe(
+      malformedYaml,
+    );
+  });
+});

src/components/shared/ComponentEditor/utils/preserveComponentName.ts

@@ -0,0 +1,30 @@
+import yaml from "js-yaml";
+
+import type { ComponentSpec } from "@/utils/componentSpec";
+import { isValidComponentSpec } from "@/utils/componentSpec";
+
+export const preserveComponentName = (
+  yamlText: string,
+  preservedName?: string,
+): string => {
+  if (!preservedName || !preservedName.trim()) {
+    return yamlText;
+  }
+
+  try {
+    const parsed = yaml.load(yamlText);
+
+    if (isValidComponentSpec(parsed)) {
+      const updatedSpec: ComponentSpec = {
+        ...parsed,
+        name: preservedName,
+      };
+
+      return yaml.dump(updatedSpec, { lineWidth: 10000 });
+    }
+  } catch (error) {
+    console.error("Failed to preserve component name:", error);
+  }
+
+  return yamlText;
+};

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.test.tsx

@@ -381,7 +381,7 @@ describe("ComponentLibraryProvider - Component Management", () => {
 
       const consoleSpy = vi
         .spyOn(console, "error")
-        .mockImplementation(() => { });
+        .mockImplementation(() => {});
 
       const { result } = renderHook(() => useComponentLibrary(), {
         wrapper: createWrapper,
@@ -414,7 +414,7 @@ describe("ComponentLibraryProvider - Component Management", () => {
       mockDeleteComponentFileFromList.mockRejectedValue(error);
       const consoleSpy = vi
         .spyOn(console, "error")
-        .mockImplementation(() => { });
+        .mockImplementation(() => {});
 
       const { result } = renderHook(() => useComponentLibrary(), {
         wrapper: createWrapper,

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -264,7 +264,8 @@ export const ComponentLibraryProvider = ({
           });
         } else {
           console.warn(
-            `Component "${component.name
+            `Component "${
+              component.name
             }" does not have spec or text, cannot favorite.`,
           );
         }
@@ -450,8 +451,8 @@ export const ComponentLibraryProvider = ({
     async (component: ComponentReference) => {
       const duplicate = userComponentsFolder
         ? flattenFolders(userComponentsFolder).find(
-          (c) => getComponentName(c) === getComponentName(component),
-        )
+            (c) => getComponentName(c) === getComponentName(component),
+          )
         : undefined;
 
       if (duplicate?.name) {
@@ -463,14 +464,13 @@ export const ComponentLibraryProvider = ({
         return;
       }
 
-      await importComponent(component)
-        .then(async () => {
-          await refreshComponentLibrary();
-          await refreshUserComponents();
-        })
-        .catch((error) => {
-          console.error("Error adding component to library:", error);
-        });
+      try {
+        await importComponent(component);
+        await refreshComponentLibrary();
+        await refreshUserComponents();
+      } catch (error) {
+        console.error("Error adding component to library:", error);
+      }
     },
     [
       userComponentsFolder,

src/services/componentService.ts

@@ -408,7 +408,7 @@ async function hydrateFromContentfulComponentReference(
 
   const digest = await generateDigest(text);
   // we always want to have a name, so we generate a default one if it is not provided
-  const name = component.name ?? spec.name ?? `component-${digest.slice(0, 8)}`;
+  const name = spec.name ?? component.name ?? `component-${digest.slice(0, 8)}`;
 
   return {
     ...component,

src/services/hydrateComponentReference.test.ts

@@ -910,6 +910,22 @@ describe("hydrateComponentReference()", () => {
         expect(result?.text).toBe(yaml.dump(componentSpec)); // Text regenerated from spec
       });
 
+      it("should prefer YAML spec name over provided component name", async () => {
+        const { text: componentText, spec: componentSpec } =
+          prepareComponentContent("Filter text two", "filter:v2");
+
+        const contentfulRef = {
+          text: componentText,
+          spec: componentSpec,
+          name: "Filter text",
+        };
+
+        const result = await hydrateComponentReference(contentfulRef);
+
+        expect(result).not.toBeNull();
+        expect(result?.name).toBe("Filter text two");
+      });
+
       it("should preserve URL when provided with text and spec", async () => {
         // Arrange
         const testUrl = "https://example.com/contentful.yaml";