feat: clone pipeline from run with arguments

Author: maxy-shpfy

src/components/PipelineRun/RunDetails.test.tsx

@@ -213,6 +213,19 @@ describe("<RunDetails/>", () => {
         expect(cloneButton).toBeInTheDocument();
       });
     });
+
+    test("should render clone button with arguments", async () => {
+      // act
+      renderWithProviders(<RunDetails />);
+
+      // assert
+      await waitFor(() => {
+        const cloneButton = screen.getByTestId(
+          "clone-pipeline-run-with-arguments-button",
+        );
+        expect(cloneButton).toBeInTheDocument();
+      });
+    });
   });
 
   describe("Cancel Pipeline Run Button", () => {

src/components/PipelineRun/RunDetails.tsx

@@ -27,7 +27,10 @@ import {
 } from "@/utils/executionStatus";
 
 import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
-import { ClonePipelineButton } from "./components/ClonePipelineButton";
+import {
+  ClonePipelineButton,
+  ClonePipelineButtonWithArguments,
+} from "./components/ClonePipelineButton";
 import { InspectPipelineButton } from "./components/InspectPipelineButton";
 import { RerunPipelineButton } from "./components/RerunPipelineButton";
 
@@ -117,6 +120,14 @@ export const RunDetails = () => {
     />,
   );
 
+  actions.push(
+    <ClonePipelineButtonWithArguments
+      key="clone-with-arguments"
+      componentSpec={componentSpec}
+      runId={runId}
+    />,
+  );
+
   if (isInProgress && isRunCreator) {
     actions.push(<CancelPipelineRunButton key="cancel" runId={runId} />);
   }

src/components/PipelineRun/components/ClonePipelineButton.test.tsx

@@ -4,9 +4,13 @@ import { act, fireEvent, render } from "@testing-library/react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import useToastNotification from "@/hooks/useToastNotification";
+import * as ExecutionDataProvider from "@/providers/ExecutionDataProvider";
 import * as pipelineRunService from "@/services/pipelineRunService";
 
-import { ClonePipelineButton } from "./ClonePipelineButton";
+import {
+  ClonePipelineButton,
+  ClonePipelineButtonWithArguments,
+} from "./ClonePipelineButton";
 
 vi.mock("@tanstack/react-router", async (importOriginal) => ({
   ...(await importOriginal()),
@@ -21,6 +25,7 @@ describe("<ClonePipelineButton/>", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.restoreAllMocks();
     vi.mocked(useToastNotification).mockReturnValue(mockNotify);
     vi.mocked(pipelineRunService.copyRunToPipeline).mockResolvedValue({
       url: "/editor/cloned-pipeline",
@@ -37,25 +42,81 @@ describe("<ClonePipelineButton/>", () => {
       </QueryClientProvider>,
     );
 
-  test("renders clone button", () => {
-    renderWithClient(<ClonePipelineButton componentSpec={componentSpec} />);
-    expect(
-      screen.queryByTestId("clone-pipeline-run-button"),
-    ).toBeInTheDocument();
-  });
+  describe("Clone Pipeline Button", () => {
+    test("renders clone button", () => {
+      renderWithClient(<ClonePipelineButton componentSpec={componentSpec} />);
+      expect(
+        screen.queryByTestId("clone-pipeline-run-button"),
+      ).toBeInTheDocument();
+    });
 
-  test("calls copyRunToPipeline and navigate on click", async () => {
-    renderWithClient(<ClonePipelineButton componentSpec={componentSpec} />);
-    const cloneButton = screen.getByTestId("clone-pipeline-run-button");
-    act(() => fireEvent.click(cloneButton));
+    test("calls copyRunToPipeline and navigate on click", async () => {
+      renderWithClient(<ClonePipelineButton componentSpec={componentSpec} />);
+      const cloneButton = screen.getByTestId("clone-pipeline-run-button");
+      act(() => fireEvent.click(cloneButton));
 
-    await waitFor(() => {
-      expect(pipelineRunService.copyRunToPipeline).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(pipelineRunService.copyRunToPipeline).toHaveBeenCalled();
+      });
+
+      expect(mockNotify).toHaveBeenCalledWith(
+        expect.stringContaining("cloned"),
+        "success",
+      );
     });
+  });
 
-    expect(mockNotify).toHaveBeenCalledWith(
-      expect.stringContaining("cloned"),
-      "success",
-    );
+  describe("Clone Pipeline Button With Arguments", () => {
+    test("renders clone button with arguments", () => {
+      renderWithClient(
+        <ClonePipelineButtonWithArguments componentSpec={componentSpec} />,
+      );
+      expect(
+        screen.queryByTestId("clone-pipeline-run-with-arguments-button"),
+      ).toBeInTheDocument();
+    });
+
+    test("calls copyRunToPipeline and navigate on click with arguments", async () => {
+      const mockTaskArguments = {
+        input_param: "input_value",
+        another_param: "another_value",
+      };
+
+      vi.spyOn(
+        ExecutionDataProvider,
+        "useExecutionDataOptional",
+      ).mockReturnValue({
+        rootDetails: {
+          task_spec: {
+            arguments: mockTaskArguments,
+          },
+        },
+      } as unknown as ReturnType<
+        typeof ExecutionDataProvider.useExecutionDataOptional
+      >);
+
+      renderWithClient(
+        <ClonePipelineButtonWithArguments componentSpec={componentSpec} />,
+      );
+
+      const cloneButton = screen.getByTestId(
+        "clone-pipeline-run-with-arguments-button",
+      );
+      act(() => fireEvent.click(cloneButton));
+
+      await waitFor(() => {
+        expect(pipelineRunService.copyRunToPipeline).toHaveBeenCalledWith(
+          componentSpec,
+          undefined,
+          expect.stringContaining("Test Pipeline"),
+          mockTaskArguments,
+        );
+      });
+
+      expect(mockNotify).toHaveBeenCalledWith(
+        expect.stringContaining("cloned"),
+        "success",
+      );
+    });
   });
 });

src/components/PipelineRun/components/ClonePipelineButton.tsx

@@ -1,30 +1,50 @@
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { CopyPlus } from "lucide-react";
-import { useCallback } from "react";
+import {
+  type ComponentProps,
+  type PropsWithChildren,
+  useCallback,
+} from "react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { Icon } from "@/components/ui/icon";
 import useToastNotification from "@/hooks/useToastNotification";
+import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
 import { copyRunToPipeline } from "@/services/pipelineRunService";
 import type { ComponentSpec } from "@/utils/componentSpec";
 import { getInitialName } from "@/utils/getComponentName";
+import { extractTaskArguments } from "@/utils/nodes/taskArguments";
 
 type ClonePipelineButtonProps = {
   componentSpec: ComponentSpec;
   runId?: string | null;
+  tooltip?: string;
+  withArguments?: boolean;
 };
 
-export const ClonePipelineButton = ({
+const BaseClonePipelineButton = ({
   componentSpec,
   runId,
-}: ClonePipelineButtonProps) => {
+  tooltip,
+  children,
+  withArguments = false,
+  ...tooltipButtonProps
+}: PropsWithChildren<
+  ClonePipelineButtonProps & ComponentProps<typeof TooltipButton>
+>) => {
   const navigate = useNavigate();
   const notify = useToastNotification();
+  const runDetails = useExecutionDataOptional();
 
   const { isPending, mutate: clonePipeline } = useMutation({
-    mutationFn: async () => {
+    mutationFn: async ({
+      taskArguments,
+    }: {
+      taskArguments?: Record<string, string>;
+    }) => {
       const name = getInitialName(componentSpec);
-      return copyRunToPipeline(componentSpec, runId, name);
+
+      return copyRunToPipeline(componentSpec, runId, name, taskArguments);
     },
     onSuccess: (result) => {
       if (result?.url) {
@@ -36,19 +56,58 @@ export const ClonePipelineButton = ({
       notify(`Error cloning pipeline: ${error}`, "error");
     },
   });
+
   const handleClone = useCallback(() => {
-    clonePipeline();
-  }, [clonePipeline]);
+    const taskArguments = withArguments
+      ? extractTaskArguments(runDetails?.rootDetails?.task_spec.arguments)
+      : undefined;
+
+    clonePipeline({ taskArguments });
+  }, [clonePipeline, withArguments, runDetails]);
 
   return (
     <TooltipButton
       variant="outline"
       onClick={handleClone}
-      tooltip="Clone pipeline"
+      tooltip={tooltip}
       disabled={isPending}
-      data-testid="clone-pipeline-run-button"
+      {...tooltipButtonProps}
     >
-      <CopyPlus className="w-4 h-4" />
+      {children}
     </TooltipButton>
   );
 };
+
+export const ClonePipelineButton = ({
+  componentSpec,
+  runId,
+}: Pick<ClonePipelineButtonProps, "componentSpec" | "runId">) => {
+  return (
+    <BaseClonePipelineButton
+      componentSpec={componentSpec}
+      runId={runId}
+      withArguments={false}
+      tooltip="Clone pipeline"
+      data-testid="clone-pipeline-run-button"
+    >
+      <Icon name="CopyPlus" />
+    </BaseClonePipelineButton>
+  );
+};
+
+export const ClonePipelineButtonWithArguments = ({
+  componentSpec,
+  runId,
+}: Pick<ClonePipelineButtonProps, "componentSpec" | "runId">) => {
+  return (
+    <BaseClonePipelineButton
+      componentSpec={componentSpec}
+      runId={runId}
+      withArguments={true}
+      tooltip="Clone pipeline with arguments"
+      data-testid="clone-pipeline-run-with-arguments-button"
+    >
+      <Icon name="CopySlash" />
+    </BaseClonePipelineButton>
+  );
+};

src/services/pipelineRunService.ts

@@ -77,6 +77,7 @@ export const copyRunToPipeline = async (
   componentSpec: ComponentSpec,
   runId?: string | null,
   name?: string,
+  taskArguments?: Record<string, string>,
 ) => {
   if (!componentSpec) {
     console.error("No component spec found to copy");
@@ -100,6 +101,15 @@ export const copyRunToPipeline = async (
       cleanComponentSpec.metadata.annotations["cloned_from_run_id"] = runId;
     }
 
+    if (taskArguments) {
+      // update all  values of inputs with the task arguments
+      cleanComponentSpec.inputs?.forEach((input) => {
+        if (taskArguments[input.name]) {
+          input.value = taskArguments[input.name];
+        }
+      });
+    }
+
     // Remove caching strategy from all tasks
     if (isGraphImplementation(cleanComponentSpec.implementation)) {
       const tasks = cleanComponentSpec.implementation.graph.tasks;

src/utils/nodes/taskArguments.ts

@@ -22,3 +22,19 @@ export function getArgumentValue(
 
   return undefined;
 }
+
+/**
+ * Returns a record of task arguments with the value as a string.
+ *
+ * @param taskArguments
+ * @returns
+ */
+export function extractTaskArguments(
+  taskArguments: TaskSpecOutput["arguments"],
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(taskArguments ?? {})
+      .map(([key, _]) => [key, getArgumentValue(taskArguments, key)])
+      .filter((entry) => entry[1] !== undefined) ?? [],
+  );
+}

src/utils/submitPipeline.ts

@@ -10,7 +10,7 @@ import {
 import type { PipelineRun } from "@/types/pipelineRun";
 
 import type { ComponentReference, ComponentSpec } from "./componentSpec";
-import { getArgumentValue } from "./nodes/taskArguments";
+import { extractTaskArguments } from "./nodes/taskArguments";
 import { componentSpecFromYaml } from "./yaml";
 
 export async function submitPipelineRun(
@@ -37,12 +37,7 @@ export async function submitPipelineRun(
     );
     const argumentsFromInputs = getArgumentsFromInputs(fullyLoadedSpec);
     const normalizedTaskArguments = options?.taskArguments
-      ? Object.fromEntries(
-          Object.entries(options.taskArguments).map(([key, _]) => [
-            key,
-            getArgumentValue(options.taskArguments, key),
-          ]),
-        )
+      ? extractTaskArguments(options.taskArguments)
       : {};
     const payloadArguments = {
       ...argumentsFromInputs,