Rework Pipeline Action Buttons into Action Framework

Author: camielvs

src/components/Editor/Context/PipelineDetails.tsx

@@ -1,36 +1,53 @@
 import { useEffect, useState } from "react";
 
 import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
-import { ActionBlock } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
+import {
+  ActionBlock,
+  type Action,
+} 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 { BlockStack } from "@/components/ui/layout";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
-import { getComponentFileFromList } from "@/utils/componentStore";
+import {
+  getComponentFileFromList,
+  renameComponentFileInList,
+} from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
 import PipelineIO from "../../shared/Execution/PipelineIO";
 import { PipelineValidationList } from "./PipelineValidationList";
-import RenamePipeline from "./RenamePipeline";
-import TooltipButton from "@/components/shared/Buttons/TooltipButton";
-import { Icon } from "@/components/ui/icon";
 import { componentSpecToText } from "@/utils/yaml";
 import { CodeViewer } from "@/components/shared/CodeViewer";
+import { PipelineNameDialog } from "@/components/shared/Dialogs";
+import { APP_ROUTES } from "@/routes/router";
+import useToastNotification from "@/hooks/useToastNotification";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 
 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,15 +120,19 @@ 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)}
-    >
-      <Icon name="FileCodeCorner" />
-    </TooltipButton>,
+  const actions: Action[] = [
+    {
+      label: "Rename Pipeline",
+      icon: "PencilLine",
+      onClick: () => setIsRenameDialogOpen(true),
+    },
+    {
+      label: "View YAML",
+      icon: "FileCodeCorner",
+      onClick: () => {
+        setIsYamlFullscreen(true);
+      },
+    },
   ];
 
   return (
@@ -142,6 +188,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

@@ -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.
-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;
             }

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

@@ -23,20 +23,33 @@ import { Input } from "@/components/ui/input";
 import { BlockStack } from "@/components/ui/layout";
 import useLoadUserPipelines from "@/hooks/useLoadUserPipelines";
 
-interface PipelineNameDialogProps {
-  trigger: ReactNode;
+type PipelineNameDialogPropsBase = {
   title: string;
   description?: string;
   initialName: string;
   submitButtonText: string;
   submitButtonIcon?: ReactNode;
   onSubmit: (name: string) => void;
   isSubmitDisabled?: (name: string, error: string | null) => boolean;
-  onOpenChange?: (open: boolean) => void;
-}
+};
+
+type PipelineNameDialogProps = PipelineNameDialogPropsBase &
+  (
+    | {
+        trigger: ReactNode;
+        open?: never;
+        onOpenChange?: never;
+      }
+    | {
+        trigger?: never;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+      }
+  );
 
 const PipelineNameDialog = ({
   trigger,
+  open,
   title,
   description = "Please, name your pipeline.",
   initialName,
@@ -78,14 +91,14 @@ const PipelineNameDialog = ({
   );
 
   const handleDialogOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
+    (newOpen: boolean) => {
+      if (!newOpen) {
         setError(null);
       } else {
         setName(initialName);
         refetchUserPipelines();
       }
-      onOpenChange?.(open);
+      onOpenChange?.(newOpen);
     },
     [initialName, onOpenChange, refetchUserPipelines],
   );
@@ -100,43 +113,57 @@ const PipelineNameDialog = ({
     !name ||
     !!isSubmitDisabled?.(name, error);
 
+  const dialogContent = (
+    <DialogContent className="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <BlockStack gap="2">
+        <Input value={name} onChange={handleOnChange} />
+        <Activity mode={error ? "visible" : "hidden"}>
+          <Alert variant="destructive">
+            <Icon name="CircleAlert" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        </Activity>
+      </BlockStack>
+      <DialogFooter className="sm:justify-end">
+        <DialogClose asChild>
+          <Button type="button" variant="secondary">
+            Close
+          </Button>
+        </DialogClose>
+        <DialogClose asChild>
+          <Button
+            type="button"
+            size="sm"
+            className="px-3"
+            onClick={handleSubmit}
+            disabled={isDisabled}
+          >
+            {submitButtonIcon}
+            {submitButtonText}
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  );
+
+  // Controlled mode
+  if (open !== undefined) {
+    return (
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        {dialogContent}
+      </Dialog>
+    );
+  }
+
+  // Uncontrolled mode
   return (
     <Dialog onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-        <BlockStack gap="2">
-          <Input value={name} onChange={handleOnChange} />
-          <Activity mode={error ? "visible" : "hidden"}>
-            <Alert variant="destructive">
-              <Icon name="CircleAlert" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          </Activity>
-        </BlockStack>
-        <DialogFooter className="sm:justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button
-              type="button"
-              size="sm"
-              className="px-3"
-              onClick={handleSubmit}
-              disabled={isDisabled}
-            >
-              {submitButtonIcon}
-              {submitButtonText}
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
+      {dialogContent}
     </Dialog>
   );
 };