refactoring: consolidate componentspec yaml parse load utils

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

@@ -2,7 +2,7 @@ import yaml from "js-yaml";
 
 import type { ComponentSpec } from "@/utils/componentSpec";
 import { isValidComponentSpec } from "@/utils/componentSpec";
-import { componentSpecToYaml } from "@/utils/componentStore";
+import { componentSpecToYaml } from "@/utils/yaml";
 
 export const preserveComponentName = (
   yamlText: string,

src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx

@@ -21,8 +21,8 @@ import { useAutoSaveStatus } from "@/providers/AutoSaveProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { EDITOR_PATH } from "@/routes/router";
 import { getPipelineFile, useSavePipeline } from "@/services/pipelineService";
-import { componentSpecToYaml } from "@/utils/componentStore";
 import { formatRelativeTime } from "@/utils/date";
+import { componentSpecToYaml } from "@/utils/yaml";
 
 const FileActions = ({ isOpen }: { isOpen: boolean }) => {
   const { componentSpec } = useComponentSpec();

src/components/shared/TaskDetails/Implementation.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import type { ComponentSpec } from "@/utils/componentSpec";
-import { componentSpecToText } from "@/utils/componentStore";
+import { componentSpecToText } from "@/utils/yaml";
 
 interface TaskImplementationProps {
   displayName: string;

src/providers/ComponentLibraryProvider/componentLibrary.test.ts

@@ -13,6 +13,7 @@ import type {
 } from "@/utils/componentSpec";
 import * as componentStore from "@/utils/componentStore";
 import * as localforage from "@/utils/localforage";
+import * as yamlUtils from "@/utils/yaml";
 
 import {
   fetchFavoriteComponents,
@@ -35,6 +36,7 @@ const mockLocalforage = vi.mocked(localforage);
 describe("componentLibrary", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.spyOn(yamlUtils, "componentSpecToYaml").mockReturnValue("spec-as-yaml");
   });
 
   afterEach(() => {
@@ -373,7 +375,9 @@ describe("componentLibrary", () => {
       };
 
       // Mock componentSpecToYaml to return predictable text
-      mockComponentStore.componentSpecToYaml.mockReturnValue("spec-as-yaml");
+      vi.spyOn(yamlUtils, "componentSpecToYaml").mockReturnValue(
+        "spec-as-yaml",
+      );
 
       // Act
       const result = await populateComponentRefs(folder);
@@ -388,7 +392,7 @@ describe("componentLibrary", () => {
         },
         text: "spec-as-yaml",
       });
-      expect(mockComponentStore.componentSpecToYaml).toHaveBeenCalledWith(
+      expect(yamlUtils.componentSpecToYaml).toHaveBeenCalledWith(
         componentRef.spec,
       );
       expect(mockComponentStore.generateDigest).toHaveBeenCalledWith(

src/providers/ComponentLibraryProvider/componentLibrary.ts

@@ -9,12 +9,12 @@ import type {
   TaskSpec,
 } from "@/utils/componentSpec";
 import {
-  componentSpecToYaml,
   generateDigest,
   getAllComponentFilesFromList,
 } from "@/utils/componentStore";
 import { USER_COMPONENTS_LIST_NAME } from "@/utils/constants";
 import { getComponentByUrl } from "@/utils/localforage";
+import { componentSpecToYaml } from "@/utils/yaml";
 
 export const fetchUserComponents = async (): Promise<ComponentFolder> => {
   try {

src/providers/ComponentSpecProvider.tsx

@@ -22,6 +22,7 @@ import {
   type ComponentValidationIssue,
   type ValidationError,
 } from "@/utils/validations";
+import { componentSpecToYaml } from "@/utils/yaml";
 
 import {
   createRequiredContext,
@@ -34,7 +35,6 @@ import {
 } from "../utils/componentSpec";
 import {
   type ComponentReferenceWithSpec,
-  componentSpecToYaml,
   generateDigest,
   writeComponentToFileListFromText,
 } from "../utils/componentStore";

src/services/componentService.ts

@@ -25,7 +25,7 @@ import {
   type TaskSpec,
   type UnknownComponentReference,
 } from "@/utils/componentSpec";
-import { componentSpecToYaml, generateDigest } from "@/utils/componentStore";
+import { generateDigest } from "@/utils/componentStore";
 import {
   componentExistsByUrl,
   getAllUserComponents,
@@ -34,6 +34,7 @@ import {
   saveComponent,
   type UserComponent,
 } from "@/utils/localforage";
+import { componentSpecToYaml } from "@/utils/yaml";
 import { componentSpecFromYaml } from "@/utils/yaml";
 
 export interface ExistingAndNewComponent {

src/services/pipelineRunService.ts

@@ -9,7 +9,6 @@ import {
   isGraphImplementation,
 } from "@/utils/componentSpec";
 import {
-  componentSpecToYaml,
   getComponentFileFromList,
   writeComponentToFileListFromText,
 } from "@/utils/componentStore";
@@ -19,6 +18,7 @@ import {
   USER_PIPELINES_LIST_NAME,
 } from "@/utils/constants";
 import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
+import { componentSpecToYaml } from "@/utils/yaml";
 
 export const createPipelineRun = async (
   payload: BodyCreateApiPipelineRunsPost,

src/services/pipelineService.ts

@@ -9,14 +9,14 @@ import {
 } from "@/utils/componentSpec";
 import {
   type ComponentFileEntry,
-  componentSpecToYaml,
   deleteComponentFileFromList,
   fullyLoadComponentRefFromUrl,
   getAllComponentFilesFromList,
   getComponentFileFromList,
   writeComponentToFileListFromText,
 } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
+import { componentSpecToYaml } from "@/utils/yaml";
 import { componentSpecFromYaml } from "@/utils/yaml";
 
 export const deletePipeline = async (name: string, onDelete?: () => void) => {

src/utils/URL.ts

@@ -1,7 +1,7 @@
 import { RUNS_BASE_PATH } from "@/routes/router";
 
 import type { ComponentSpec } from "./componentSpec";
-import { componentSpecToText } from "./componentStore";
+import { componentSpecToText } from "./yaml";
 
 const convertGcsUrlToBrowserUrl = (
   url: string,

src/utils/componentStore.ts

@@ -1,4 +1,3 @@
-import yaml from "js-yaml";
 import localForage from "localforage";
 
 import { fetchComponentTextFromUrl } from "@/services/componentService";
@@ -8,7 +7,7 @@ import { downloadDataWithCache } from "./cache";
 import type { ComponentReference, ComponentSpec } from "./componentSpec";
 import { USER_COMPONENTS_LIST_NAME } from "./constants";
 import { getIdOrTitleFromPath } from "./URL";
-import { componentSpecFromYaml } from "./yaml";
+import { componentSpecFromYaml, componentSpecToYaml } from "./yaml";
 
 // IndexedDB: DB and table names
 const DB_NAME = "components";
@@ -606,18 +605,6 @@ export const deleteComponentFileFromList = async (
   return componentListDb.removeItem(fileName);
 };
 
-export const componentSpecToYaml = (componentSpec: ComponentSpec) => {
-  return yaml.dump(componentSpec, { lineWidth: 10000 });
-};
-
-export const componentSpecToText = (componentSpec: ComponentSpec) => {
-  return yaml.dump(componentSpec, {
-    lineWidth: 80,
-    noRefs: true,
-    indent: 2,
-  });
-};
-
 // TODO: Remove the upgrade code in several weeks.
 const upgradeSingleComponentListDb = async (listName: string) => {
   const componentListVersionKey = "component_list_format_version_" + listName;

src/utils/yaml.ts

@@ -1,7 +1,6 @@
 import yaml from "js-yaml";
 
 import { type ComponentSpec, isValidComponentSpec } from "./componentSpec";
-import { componentSpecToText } from "./componentStore";
 
 const copyToYaml = (
   spec: ComponentSpec,
@@ -50,4 +49,16 @@ export function componentSpecFromYaml(yamlText: string): ComponentSpec {
   return loadedSpec;
 }
 
+export const componentSpecToYaml = (componentSpec: ComponentSpec) => {
+  return yaml.dump(componentSpec, { lineWidth: 10000 });
+};
+
+export const componentSpecToText = (componentSpec: ComponentSpec) => {
+  return yaml.dump(componentSpec, {
+    lineWidth: 80,
+    noRefs: true,
+    indent: 2,
+  });
+};
+
 export default copyToYaml;