refactoring: consolidate componentspec yaml parse load utils (#1466)

## Description

Moved YAML-related utility functions from `componentStore.ts` to `yaml.ts` to better organize code by functionality. Specifically, relocated `componentSpecToYaml` and `componentSpecToText` functions to the appropriate YAML utilities file and updated all imports across the codebase.

## Type of Change

- [x] Cleanup/Refactor

## Checklist

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

## Test Instructions

1. No functional changes to the app
2. No regression should be found across the app

Author: maxy-shpfy

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,