Rework Pipeline Action Buttons into Action Framework

Author: camielvs

src/components/Editor/Context/PipelineDetails.tsx

@@ -1,36 +1,53 @@
+import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 
 import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
-import TooltipButton from "@/components/shared/Buttons/TooltipButton";
 import { CodeViewer } from "@/components/shared/CodeViewer";
-import { ActionBlock } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
+import {
+  type Action,
+  ActionBlock,
+} from "@/components/shared/ContextPanel/Blocks/ActionBlock";
 import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
 import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
 import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
-import { Icon } from "@/components/ui/icon";
+import { PipelineNameDialog } from "@/components/shared/Dialogs";
 import { BlockStack } from "@/components/ui/layout";
+import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
-import { getComponentFileFromList } from "@/utils/componentStore";
+import { APP_ROUTES } from "@/routes/router";
+import {
+  getComponentFileFromList,
+  renameComponentFileInList,
+} from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 import { componentSpecToText } from "@/utils/yaml";
 
 import PipelineIO from "../../shared/Execution/PipelineIO";
 import { PipelineValidationList } from "./PipelineValidationList";
-import RenamePipeline from "./RenamePipeline";
 
 const PipelineDetails = () => {
   const {
     componentSpec,
     digest,
     isComponentTreeValid,
     globalValidationIssues,
+    saveComponentSpec,
   } = useComponentSpec();
 
+  const notify = useToastNotification();
+  const navigate = useNavigate();
+
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  const title = componentSpec?.name;
+
   const { handleIssueClick, groupedIssues } = useValidationIssueNavigation(
     globalValidationIssues,
   );
 
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
 
   // State for file metadata
@@ -40,6 +57,31 @@ const PipelineDetails = () => {
     createdBy?: string;
   }>({});
 
+  const isSubmitDisabled = (name: string) => {
+    return name === title;
+  };
+
+  const handleTitleUpdate = async (name: string) => {
+    if (!componentSpec) {
+      notify("Update failed: ComponentSpec not found", "error");
+      return;
+    }
+
+    await renameComponentFileInList(
+      USER_PIPELINES_LIST_NAME,
+      title ?? "",
+      name,
+      pathname,
+    );
+
+    await saveComponentSpec(name);
+
+    const urlName = encodeURIComponent(name);
+    const url = APP_ROUTES.PIPELINE_EDITOR.replace("$name", urlName);
+
+    navigate({ to: url });
+  };
+
   // Fetch file metadata on mount or when componentSpec.name changes
   useEffect(() => {
     const fetchMeta = async () => {
@@ -78,16 +120,17 @@ const PipelineDetails = () => {
     componentSpec.metadata?.annotations || {},
   ).map(([key, value]) => ({ label: key, value: String(value) }));
 
-  const actions = [
-    <RenamePipeline key="rename-pipeline-action" />,
-    <TooltipButton
-      variant="outline"
-      tooltip="View YAML"
-      onClick={() => setIsYamlFullscreen(true)}
-      key="view-yaml-action"
-    >
-      <Icon name="FileCodeCorner" />
-    </TooltipButton>,
+  const actions: Action[] = [
+    {
+      label: "Rename Pipeline",
+      icon: "PencilLine",
+      onClick: () => setIsRenameDialogOpen(true),
+    },
+    {
+      label: "View YAML",
+      icon: "FileCodeCorner",
+      onClick: () => setIsYamlFullscreen(true),
+    },
   ];
 
   return (
@@ -143,6 +186,16 @@ const PipelineDetails = () => {
           onClose={() => setIsYamlFullscreen(false)}
         />
       )}
+      <PipelineNameDialog
+        open={isRenameDialogOpen}
+        onOpenChange={setIsRenameDialogOpen}
+        title="Name Pipeline"
+        description="Unsaved pipeline changes will be lost."
+        initialName={title ?? ""}
+        onSubmit={handleTitleUpdate}
+        submitButtonText="Update Title"
+        isSubmitDisabled={isSubmitDisabled}
+      />
     </>
   );
 };

src/components/Editor/Context/RenamePipeline.tsx

@@ -99,34 +99,6 @@ describe("<ActionBlock />", () => {
       expect(screen.getByTestId("action-Action 2")).toBeInTheDocument();
       expect(screen.getByTestId("action-Action 3")).toBeInTheDocument();
     });
-
-    test("renders ReactNode as action (backward compatibility)", () => {
-      const actions = [
-        { label: "Action 1", icon: "Copy" as const, onClick: vi.fn() },
-        <button key="custom" data-testid="custom-button">
-          Custom Button
-        </button>,
-      ];
-
-      render(<ActionBlock actions={actions} />);
-
-      expect(screen.getByTestId("action-Action 1")).toBeInTheDocument();
-      expect(screen.getByTestId("custom-button")).toBeInTheDocument();
-    });
-
-    test("handles null or undefined actions gracefully", () => {
-      const actions = [
-        { label: "Action 1", icon: "Copy" as const, onClick: vi.fn() },
-        null,
-        undefined,
-        { label: "Action 2", icon: "Download" as const, onClick: vi.fn() },
-      ];
-
-      render(<ActionBlock actions={actions} />);
-
-      expect(screen.getByTestId("action-Action 1")).toBeInTheDocument();
-      expect(screen.getByTestId("action-Action 2")).toBeInTheDocument();
-    });
   });
 
   describe("action variants", () => {

src/components/shared/ContextPanel/Blocks/ActionBlock.test.tsx

@@ -20,12 +20,9 @@ export type Action = {
   | { content: ReactNode; icon?: never }
 );
 
-// Temporary: ReactNode included for backward compatibility with some existing buttons. In the long-term we should strive for only Action types.
-export type ActionOrReactNode = Action | ReactNode;
-
 interface ActionBlockProps {
   title?: string;
-  actions: ActionOrReactNode[];
+  actions: Action[];
   className?: string;
 }
 
@@ -60,11 +57,7 @@ export const ActionBlock = ({
       <BlockStack className={className}>
         {title && <Heading level={3}>{title}</Heading>}
         <InlineStack gap="2">
-          {actions.map((action, index) => {
-            if (!action || typeof action !== "object" || !("label" in action)) {
-              return <div key={index}>{action}</div>;
-            }
-
+          {actions.map((action) => {
             if (action.hidden) {
               return null;
             }