Rework Action Buttons into new Action Framework

Author: camielvs

src/components/PipelineRun/RunDetails.tsx

@@ -1,42 +1,26 @@
-import { useState } from "react";
-
 import { CopyText } from "@/components/shared/CopyText/CopyText";
-import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { Paragraph, Text } from "@/components/ui/typography";
-import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
-import { useUserDetails } from "@/hooks/useUserDetails";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
-import {
-  countTaskStatuses,
-  getRunStatus,
-  isStatusComplete,
-  isStatusInProgress,
-} from "@/services/executionService";
+import { countTaskStatuses, getRunStatus } from "@/services/executionService";
 import { componentSpecToText } from "@/utils/yaml";
 
-import TooltipButton from "../shared/Buttons/TooltipButton";
 import { CodeViewer } from "../shared/CodeViewer";
-import {
-  ActionBlock,
-  type ActionOrReactNode,
-} from "../shared/ContextPanel/Blocks/ActionBlock";
+import { ActionBlock } from "../shared/ContextPanel/Blocks/ActionBlock";
 import { ContentBlock } from "../shared/ContextPanel/Blocks/ContentBlock";
 import { ListBlock } from "../shared/ContextPanel/Blocks/ListBlock";
 import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
 import PipelineIO from "../shared/Execution/PipelineIO";
 import { InfoBox } from "../shared/InfoBox";
 import { StatusBar, StatusText } from "../shared/Status";
-import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
-import { ClonePipelineButton } from "./components/ClonePipelineButton";
-import { InspectPipelineButton } from "./components/InspectPipelineButton";
-import { RerunPipelineButton } from "./components/RerunPipelineButton";
+import { useRunActions } from "./useRunActions";
 
 export const RunDetails = () => {
   const { configured } = useBackend();
+
   const { componentSpec } = useComponentSpec();
   const {
     rootDetails: details,
@@ -46,21 +30,16 @@ export const RunDetails = () => {
     isLoading,
     error,
   } = useExecutionData();
-  const { data: currentUserDetails } = useUserDetails();
-
-  const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
 
-  const editorRoute = componentSpec.name
-    ? `/editor/${encodeURIComponent(componentSpec.name)}`
-    : "";
-
-  const canAccessEditorSpec = useCheckComponentSpecFromPath(
-    editorRoute,
-    !componentSpec.name,
-  );
+  const statusCounts = countTaskStatuses(details, state);
+  const runStatus = getRunStatus(statusCounts);
 
-  const isRunCreator =
-    currentUserDetails?.id && metadata?.created_by === currentUserDetails.id;
+  const { actions, isYamlFullscreen, handleCloseYaml } = useRunActions({
+    componentSpec,
+    runId,
+    createdBy: metadata?.created_by,
+    statusCounts,
+  });
 
   if (error || !details || !state || !componentSpec) {
     return (
@@ -91,46 +70,8 @@ export const RunDetails = () => {
     );
   }
 
-  const statusCounts = countTaskStatuses(details, state);
-  const runStatus = getRunStatus(statusCounts);
-  const hasRunningTasks = statusCounts.running > 0;
-  const isInProgress = isStatusInProgress(runStatus) || hasRunningTasks;
-  const isComplete = isStatusComplete(runStatus);
-
   const annotations = componentSpec.metadata?.annotations || {};
 
-  const actions: ActionOrReactNode[] = [];
-
-  actions.push(
-    <TooltipButton
-      variant="outline"
-      tooltip="View YAML"
-      onClick={() => setIsYamlFullscreen(true)}
-    >
-      <Icon name="FileCodeCorner" />
-    </TooltipButton>,
-  );
-
-  if (canAccessEditorSpec && componentSpec.name) {
-    actions.push(
-      <InspectPipelineButton key="inspect" pipelineName={componentSpec.name} />,
-    );
-  }
-
-  actions.push(
-    <ClonePipelineButton key="clone" componentSpec={componentSpec} />,
-  );
-
-  if (isInProgress && isRunCreator) {
-    actions.push(<CancelPipelineRunButton key="cancel" runId={runId} />);
-  }
-
-  if (isComplete) {
-    actions.push(
-      <RerunPipelineButton key="rerun" componentSpec={componentSpec} />,
-    );
-  }
-
   return (
     <>
       <BlockStack gap="6" className="p-2 h-full">
@@ -191,7 +132,7 @@ export const RunDetails = () => {
           language="yaml"
           filename={componentSpec.name ?? "pipeline.yaml"}
           isFullscreen={isYamlFullscreen}
-          onClose={() => setIsYamlFullscreen(false)}
+          onClose={handleCloseYaml}
         />
       )}
     </>