Rework Action Buttons into new Action Framework

Author: camielvs

src/components/PipelineRun/RunDetails.tsx

@@ -1,7 +1,4 @@
-import {
-  ActionBlock,
-  type ActionOrReactNode,
-} from "@/components/shared/ContextPanel/Blocks/ActionBlock";
+import { 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";
@@ -10,35 +7,26 @@ import PipelineIO from "@/components/shared/Execution/PipelineIO";
 import { InfoBox } from "@/components/shared/InfoBox";
 import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import { StatusBar } from "@/components/shared/Status";
-import { useState } from "react";
 
-import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { 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 {
-  countInProgressFromStats,
   flattenExecutionStatusStats,
   getExecutionStatusLabel,
   getOverallExecutionStatusFromStats,
-  isExecutionComplete,
 } from "@/utils/executionStatus";
 
 import { componentSpecToText } from "@/utils/yaml";
 
-import TooltipButton from "../shared/Buttons/TooltipButton";
 import { CodeViewer } from "../shared/CodeViewer";
-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,
@@ -48,21 +36,17 @@ 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 executionStatusStats =
+    metadata?.execution_status_stats ??
+    flattenExecutionStatusStats(state?.child_execution_status_stats);
 
-  const isRunCreator =
-    currentUserDetails?.id && metadata?.created_by === currentUserDetails.id;
+  const { actions, isYamlFullscreen, handleCloseYaml } = useRunActions({
+    componentSpec,
+    runId,
+    createdBy: metadata?.created_by,
+    statusCounts: executionStatusStats,
+  });
 
   if (error || !details || !state || !componentSpec) {
     return (
@@ -88,55 +72,12 @@ export const RunDetails = () => {
     );
   }
 
-  const executionStatusStats =
-    metadata?.execution_status_stats ??
-    flattenExecutionStatusStats(state.child_execution_status_stats);
-
   const overallStatus =
     getOverallExecutionStatusFromStats(executionStatusStats);
   const statusLabel = getExecutionStatusLabel(overallStatus);
 
-  const isInProgress = countInProgressFromStats(executionStatusStats) > 0;
-  const isComplete = isExecutionComplete(executionStatusStats);
-
   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}
-      runId={runId}
-    />,
-  );
-
-  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">
@@ -196,7 +137,7 @@ export const RunDetails = () => {
           language="yaml"
           filename={componentSpec.name ?? "pipeline.yaml"}
           isFullscreen={isYamlFullscreen}
-          onClose={() => setIsYamlFullscreen(false)}
+          onClose={handleCloseYaml}
         />
       )}
     </>