From 1bccc0a43aff7ce78c873911e433b5c570b40873 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Tue, 9 Dec 2025 10:37:48 -0800
Subject: [PATCH] Cleanup RunDetails

---
 .../Editor/Context/PipelineDetails.tsx        |   2 +-
 .../PipelineRun/RunDetails.test.tsx           |   6 +-
 src/components/PipelineRun/RunDetails.tsx     | 204 +++++++-----------
 .../shared/ArtifactsList/ArtifactsList.tsx    | 103 ---------
 .../PipelineIO.tsx                            |   0
 5 files changed, 88 insertions(+), 227 deletions(-)
 delete mode 100644 src/components/shared/ArtifactsList/ArtifactsList.tsx
 rename src/components/shared/{ArtifactsList => Execution}/PipelineIO.tsx (100%)

diff --git a/src/components/Editor/Context/PipelineDetails.tsx b/src/components/Editor/Context/PipelineDetails.tsx
index 20aecef28..9bcc91417 100644
--- a/src/components/Editor/Context/PipelineDetails.tsx
+++ b/src/components/Editor/Context/PipelineDetails.tsx
@@ -13,7 +13,7 @@ import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { getComponentFileFromList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
-import PipelineIO from "../../shared/ArtifactsList/PipelineIO";
+import PipelineIO from "../../shared/Execution/PipelineIO";
 import { PipelineValidationList } from "./PipelineValidationList";
 import RenamePipeline from "./RenamePipeline";
 
diff --git a/src/components/PipelineRun/RunDetails.test.tsx b/src/components/PipelineRun/RunDetails.test.tsx
index 19b33c511..8c82c7b23 100644
--- a/src/components/PipelineRun/RunDetails.test.tsx
+++ b/src/components/PipelineRun/RunDetails.test.tsx
@@ -17,6 +17,8 @@ import * as executionService from "@/services/executionService";
 import type { ComponentSpec } from "@/utils/componentSpec";
 
 import { RunDetails } from "./RunDetails";
+import { ContextPanelProvider } from "@/providers/ContextPanelProvider";
+import { ReactFlowProvider } from "@xyflow/react";
 
 // Mock the hooks and services
 vi.mock("@tanstack/react-router", async (importOriginal) => {
@@ -181,7 +183,9 @@ describe("<RunDetails/>", () => {
         <ComponentSpecProvider spec={mockComponentSpec}>
           <QueryClientProvider client={queryClient}>
             <ExecutionDataProvider pipelineRunId="123">
-              {children}
+              <ReactFlowProvider>
+                <ContextPanelProvider>{children}</ContextPanelProvider>
+              </ReactFlowProvider>
             </ExecutionDataProvider>
           </QueryClientProvider>
         </ComponentSpecProvider>
diff --git a/src/components/PipelineRun/RunDetails.tsx b/src/components/PipelineRun/RunDetails.tsx
index 5fe164ad7..9e7cc0a5d 100644
--- a/src/components/PipelineRun/RunDetails.tsx
+++ b/src/components/PipelineRun/RunDetails.tsx
@@ -1,9 +1,5 @@
-import { Frown } from "lucide-react";
-
-import { ArtifactsList } from "@/components/shared/ArtifactsList/ArtifactsList";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/typography";
 import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
 import { useUserDetails } from "@/hooks/useUserDetails";
@@ -17,7 +13,16 @@ import {
   isStatusInProgress,
 } from "@/services/executionService";
 
+import {
+  ActionBlock,
+  type ActionOrReactNode,
+} 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 { LoadingScreen } from "../shared/LoadingScreen";
 import { StatusBar, StatusText } from "../shared/Status";
 import { TaskImplementation } from "../shared/TaskDetails";
 import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
@@ -52,29 +57,25 @@ export const RunDetails = () => {
 
   if (error || !details || !state || !componentSpec) {
     return (
-      <div className="flex flex-col gap-8 items-center justify-center h-full">
-        <Frown className="w-12 h-12 text-secondary-foreground" />
-        <div className="text-secondary-foreground">
-          Error loading run details.
-        </div>
-      </div>
+      <BlockStack fill>
+        <InfoBox title="Error" variant="error">
+          Pipeline Run could not be loaded.
+        </InfoBox>
+      </BlockStack>
     );
   }
 
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <Spinner className="mr-2" />
-        <p className="text-secondary-foreground">Loading run details...</p>
-      </div>
-    );
+    return <LoadingScreen message="Loading run details..." />;
   }
 
   if (!configured) {
     return (
-      <InfoBox title="Backend not configured" variant="warning">
-        Configure a backend to view execution artifacts.
-      </InfoBox>
+      <BlockStack fill>
+        <InfoBox title="Backend not configured" variant="warning">
+          Configure a backend to view execution artifacts.
+        </InfoBox>
+      </BlockStack>
     );
   }
 
@@ -86,93 +87,71 @@ export const RunDetails = () => {
 
   const annotations = componentSpec.metadata?.annotations || {};
 
+  const actions: ActionOrReactNode[] = [];
+
+  actions.push(
+    <TaskImplementation
+      displayName={componentSpec.name ?? "Pipeline"}
+      componentSpec={componentSpec}
+      showInlineContent={false}
+    />,
+  );
+
+  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">
       <CopyText className="text-lg font-semibold">
         {componentSpec.name ?? "Unnamed Pipeline"}
       </CopyText>
 
-      <InlineStack gap="2">
-        <TaskImplementation
-          displayName={componentSpec.name ?? "Pipeline"}
-          componentSpec={componentSpec}
-          showInlineContent={false}
-        />
-        {canAccessEditorSpec && componentSpec.name && (
-          <InspectPipelineButton pipelineName={componentSpec.name} />
-        )}
-        <ClonePipelineButton componentSpec={componentSpec} runId={runId} />
-        {isInProgress && isRunCreator && (
-          <CancelPipelineRunButton runId={runId} />
-        )}
-        {isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
-      </InlineStack>
+      <ActionBlock actions={actions} />
 
       {metadata && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Run Info
-          </Text>
-          <dl className="flex flex-col gap-1 text-xs text-secondary-foreground">
-            {metadata.id && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold" className="shrink-0">
-                  Run Id:
-                </Text>
-                <dd>
-                  <CopyText className="font-mono truncate max-w-[180px]">
-                    {metadata.id}
-                  </CopyText>
-                </dd>
-              </InlineStack>
-            )}
-            {metadata.root_execution_id && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold" className="shrink-0">
-                  Execution Id:
-                </Text>
-                <dd>
-                  <CopyText className="font-mono truncate max-w-[180px]">
-                    {metadata.root_execution_id}
-                  </CopyText>
-                </dd>
-              </InlineStack>
-            )}
-            {metadata.created_by && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold">
-                  Created by:
-                </Text>
-                <dd>{metadata.created_by}</dd>
-              </InlineStack>
-            )}
-            {metadata.created_at && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold">
-                  Created at:
-                </Text>
-                <dd>{new Date(metadata.created_at).toLocaleString()}</dd>
-              </InlineStack>
-            )}
-          </dl>
-        </BlockStack>
+        <ListBlock
+          title="Run Info"
+          items={[
+            { label: "Run Id", value: metadata.id },
+            { label: "Execution Id", value: metadata.root_execution_id },
+            { label: "Created by", value: metadata.created_by ?? undefined },
+            {
+              label: "Created at",
+              value: metadata.created_at
+                ? new Date(metadata.created_at).toLocaleString()
+                : undefined,
+            },
+          ]}
+          marker="none"
+        />
       )}
 
       {componentSpec.description && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Description
-          </Text>
-          <Text as="p" size="sm" className="whitespace-pre-line">
-            {componentSpec.description}
-          </Text>
-        </BlockStack>
+        <TextBlock title="Description" text={componentSpec.description} />
       )}
 
-      <BlockStack>
-        <Text as="h3" size="md" weight="semibold" className="mb-1">
-          Status
-        </Text>
+      <ContentBlock title="Status">
         <InlineStack gap="2" blockAlign="center" className="mb-1">
           <Text size="sm" weight="semibold">
             {runStatus}
@@ -180,39 +159,20 @@ export const RunDetails = () => {
           <StatusText statusCounts={statusCounts} />
         </InlineStack>
         <StatusBar statusCounts={statusCounts} />
-      </BlockStack>
+      </ContentBlock>
 
       {Object.keys(annotations).length > 0 && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Annotations
-          </Text>
-          <ul className="text-xs text-secondary-foreground">
-            {Object.entries(annotations).map(([key, value]) => (
-              <li key={key}>
-                <Text as="span" weight="semibold">
-                  {key}:
-                </Text>{" "}
-                <Text as="span" className="break-all">
-                  {String(value)}
-                </Text>
-              </li>
-            ))}
-          </ul>
-        </BlockStack>
+        <ListBlock
+          title="Annotations"
+          items={Object.entries(annotations).map(([key, value]) => ({
+            label: key,
+            value: String(value),
+          }))}
+          marker="none"
+        />
       )}
 
-      <ArtifactsList
-        inputs={(componentSpec.inputs ?? []).map((input) => ({
-          name: input.name,
-          type: typeof input.type === "string" ? input.type : "object",
-          value: input.value ?? input.default,
-        }))}
-        outputs={(componentSpec.outputs ?? []).map((output) => ({
-          name: output.name,
-          type: typeof output.type === "string" ? output.type : "object",
-        }))}
-      />
+      <PipelineIO readOnly />
     </BlockStack>
   );
 };
diff --git a/src/components/shared/ArtifactsList/ArtifactsList.tsx b/src/components/shared/ArtifactsList/ArtifactsList.tsx
deleted file mode 100644
index 726ad4e64..000000000
--- a/src/components/shared/ArtifactsList/ArtifactsList.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { type ReactNode } from "react";
-
-import { CopyText } from "@/components/shared/CopyText/CopyText";
-import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
-
-interface ArtifactItem {
-  name: string;
-  type: string;
-  value?: string;
-  actions?: ReactNode;
-}
-
-interface ArtifactsSectionProps {
-  title: string;
-  items: ArtifactItem[];
-  emptyMessage?: string;
-  disableCopy?: boolean;
-}
-
-const ArtifactsSection = ({
-  title,
-  items,
-  emptyMessage = "None",
-  disableCopy = false,
-}: ArtifactsSectionProps) => (
-  <BlockStack className="w-full">
-    <Text as="h4" size="sm" weight="semibold" className="mb-1">
-      {title}
-    </Text>
-    {items.length > 0 ? (
-      <BlockStack className="w-full">
-        {items.map((item) => (
-          <InlineStack
-            key={item.name}
-            gap="2"
-            align="space-between"
-            className="even:bg-white odd:bg-gray-100 p-2 rounded-xs w-full"
-          >
-            <InlineStack
-              gap="1"
-              wrap="nowrap"
-              className="flex-1 min-w-0 text-xs"
-            >
-              <Text as="span" weight="semibold" className="shrink-0">
-                {item.name}:
-              </Text>
-              {item.value !== undefined ? (
-                !disableCopy ? (
-                  <CopyText className="truncate">
-                    {item.value || "No value"}
-                  </CopyText>
-                ) : (
-                  <Text as="span" className="truncate">
-                    {item.value || "No value"}
-                  </Text>
-                )
-              ) : (
-                <Text as="span" tone="subdued">
-                  —
-                </Text>
-              )}
-            </InlineStack>
-            <Text size="xs" tone="subdued" className="shrink-0">
-              {item.type}
-            </Text>
-            {item.actions}
-          </InlineStack>
-        ))}
-      </BlockStack>
-    ) : (
-      <Text size="xs" tone="subdued">
-        {emptyMessage}
-      </Text>
-    )}
-  </BlockStack>
-);
-
-interface ArtifactsListProps {
-  inputs: ArtifactItem[];
-  outputs: ArtifactItem[];
-}
-
-export const ArtifactsList = ({ inputs, outputs }: ArtifactsListProps) => (
-  <BlockStack className="w-full">
-    <Text as="h3" size="md" weight="semibold" className="mb-1">
-      Artifacts
-    </Text>
-    <BlockStack gap="4" className="w-full">
-      <ArtifactsSection
-        title="Inputs"
-        items={inputs}
-        emptyMessage="No inputs"
-      />
-      <ArtifactsSection
-        title="Outputs"
-        items={outputs}
-        emptyMessage="No outputs"
-        disableCopy
-      />
-    </BlockStack>
-  </BlockStack>
-);
diff --git a/src/components/shared/ArtifactsList/PipelineIO.tsx b/src/components/shared/Execution/PipelineIO.tsx
similarity index 100%
rename from src/components/shared/ArtifactsList/PipelineIO.tsx
rename to src/components/shared/Execution/PipelineIO.tsx