Cleanup RunDetails

Author: camielvs

src/components/Editor/Context/PipelineIO.tsx

@@ -15,7 +15,7 @@ import { InputValueEditor } from "../IOEditor/InputValueEditor";
 import { OutputNameEditor } from "../IOEditor/OutputNameEditor";
 import { getOutputConnectedDetails } from "../utils/getOutputConnectedDetails";
 
-const PipelineIO = () => {
+const PipelineIO = ({ readOnly }: { readOnly?: boolean }) => {
   const { setContent } = useContextPanel();
   const { componentSpec, graphSpec } = useComponentSpec();
 
@@ -37,6 +37,23 @@ const PipelineIO = () => {
     );
   };
 
+  const inputActions: IORowAction[] = [];
+  const outputActions: IORowAction[] = [];
+
+  if (!readOnly) {
+    inputActions.push({
+      label: "Edit",
+      icon: <Icon name="Pencil" size="sm" />,
+      onClick: () => handleInputEdit,
+    });
+
+    outputActions.push({
+      label: "Edit",
+      icon: <Icon name="Pencil" size="sm" />,
+      onClick: () => handleOutputEdit,
+    });
+  }
+
   return (
     <BlockStack gap="4">
       <ContentBlock title="Inputs">
@@ -48,13 +65,7 @@ const PipelineIO = () => {
                 name={input.name}
                 value={input.value || input.default || "No value"}
                 type={typeSpecToString(input?.type)}
-                actions={[
-                  {
-                    label: "Edit",
-                    icon: <Icon name="Pencil" size="sm" />,
-                    onClick: () => handleInputEdit(input),
-                  },
-                ]}
+                actions={inputActions}
               />
             ))}
           </BlockStack>
@@ -79,12 +90,7 @@ const PipelineIO = () => {
                   name={output.name}
                   value={connectedOutput.outputName ?? "No value"}
                   type={typeSpecToString(connectedOutput.outputType)}
-                  actions={[
-                    {
-                      label: "Edit",
-                      onClick: () => handleOutputEdit(output),
-                    },
-                  ]}
+                  actions={outputActions}
                 />
               );
             })}
@@ -101,11 +107,17 @@ const PipelineIO = () => {
 
 export default PipelineIO;
 
+type IORowAction = {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+};
+
 interface IORowProps {
   name: string;
   value: string;
   type: string;
-  actions?: { label: string; icon?: ReactNode; onClick: () => void }[];
+  actions?: IORowAction[];
 }
 
 function IORow({ name, value, type, actions }: IORowProps) {

src/components/PipelineRun/RunDetails.tsx

@@ -1,10 +1,7 @@
-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 { Paragraph, Text } from "@/components/ui/typography";
 import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
 import { useUserDetails } from "@/hooks/useUserDetails";
 import { useBackend } from "@/providers/BackendProvider";
@@ -17,6 +14,10 @@ import {
   isStatusInProgress,
 } from "@/services/executionService";
 
+import PipelineIO from "../Editor/context/PipelineIO";
+import { ContentBlock } from "../shared/ContextPanel/Blocks/ContentBlock";
+import { ListBlock } from "../shared/ContextPanel/Blocks/ListBlock";
+import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
 import { InfoBox } from "../shared/InfoBox";
 import { StatusBar, StatusText } from "../shared/Status";
 import { TaskImplementation } from "../shared/TaskDetails";
@@ -52,29 +53,30 @@ 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 align="center" inlineAlign="center" className="h-full">
+        <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">
+      <InlineStack align="center" blockAlign="center" className="h-full">
         <Spinner className="mr-2" />
-        <p className="text-secondary-foreground">Loading run details...</p>
-      </div>
+        <Paragraph tone="subdued">Loading run details...</Paragraph>
+      </InlineStack>
     );
   }
 
   if (!configured) {
     return (
-      <InfoBox title="Backend not configured" variant="warning">
-        Configure a backend to view execution artifacts.
-      </InfoBox>
+      <BlockStack align="center" inlineAlign="center" className="h-full">
+        <InfoBox title="Backend not configured" variant="warning">
+          Configure a backend to view execution artifacts.
+        </InfoBox>
+      </BlockStack>
     );
   }
 
@@ -109,110 +111,49 @@ export const RunDetails = () => {
       </InlineStack>
 
       {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}
           </Text>
           <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>
   );
 };