Skip to content

Commit 4e907d8

Browse files
MbeaulneMbeaulne
committed
cleans up pipelineDetails v1
1 parent cd93061 commit 4e907d8

File tree

4 files changed

+80
-91
lines changed

4 files changed

+80
-91
lines changed

‎src/components/Editor/PipelineDetails.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValid
66
import { CopyText } from "@/components/shared/CopyText/CopyText";
77
import { Button } from "@/components/ui/button";
88
import { Icon } from "@/components/ui/icon";
9-
import { InlineStack } from "@/components/ui/layout";
9+
import { BlockStack, InlineStack } from "@/components/ui/layout";
1010
import useToastNotification from "@/hooks/useToastNotification";
1111
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1212
import { useContextPanel } from "@/providers/ContextPanelProvider";
@@ -128,25 +128,22 @@ const PipelineDetails = () => {
128128
const annotations = componentSpec.metadata?.annotations || {};
129129

130130
return (
131-
<div
132-
className="p-2 flex flex-col gap-6 h-full"
131+
<BlockStack
132+
gap="6"
133+
className="p-2 h-full"
133134
data-context-panel="pipeline-details"
134135
>
135-
{/* Header */}
136-
<div className="flex items-center gap-2 max-w-[90%]">
137-
<CopyText className="text-lg font-semibold" alwaysShowButton>
138-
{componentSpec.name ?? "Unnamed Pipeline"}
139-
</CopyText>
136+
<CopyText className="text-lg font-semibold">
137+
{componentSpec.name ?? "Unnamed Pipeline"}
138+
</CopyText>
139+
<InlineStack gap="2">
140140
<RenamePipeline />
141-
</div>
142-
143-
<div className="flex gap-2 flex-wrap items-center">
144141
<TaskImplementation
145142
displayName={componentSpec.name ?? "Pipeline"}
146143
componentSpec={componentSpec}
147144
showInlineContent={false}
148145
/>
149-
</div>
146+
</InlineStack>
150147

151148
{/* General Metadata */}
152149
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
@@ -326,7 +323,7 @@ const PipelineDetails = () => {
326323
onIssueSelect={handleIssueClick}
327324
/>
328325
</div>
329-
</div>
326+
</BlockStack>
330327
);
331328
};
332329

‎src/components/Editor/RenamePipeline.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useLocation, useNavigate } from "@tanstack/react-router";
22
import { Edit3 } from "lucide-react";
33

4-
import { Button } from "@/components/ui/button";
4+
import TooltipButton from "@/components/shared/Buttons/TooltipButton";
55
import useToastNotification from "@/hooks/useToastNotification";
66
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
77
import { APP_ROUTES } from "@/routes/router";
@@ -48,9 +48,9 @@ const RenamePipeline = () => {
4848
return (
4949
<PipelineNameDialog
5050
trigger={
51-
<Button variant="ghost">
51+
<TooltipButton variant="outline" tooltip="Rename pipeline">
5252
<Edit3 />
53-
</Button>
53+
</TooltipButton>
5454
}
5555
title="Name Pipeline"
5656
description="Unsaved pipeline changes will be lost."

‎src/components/PipelineRun/RunDetails.tsx‎

Lines changed: 62 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Frown } from "lucide-react";
22

33
import { CopyText } from "@/components/shared/CopyText/CopyText";
4+
import { BlockStack, InlineStack } from "@/components/ui/layout";
45
import { Spinner } from "@/components/ui/spinner";
6+
import { Text } from "@/components/ui/typography";
57
import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
68
import { useUserDetails } from "@/hooks/useUserDetails";
79
import { useBackend } from "@/providers/BackendProvider";
@@ -15,7 +17,7 @@ import {
1517
} from "@/services/executionService";
1618

1719
import { InfoBox } from "../shared/InfoBox";
18-
import { StatusBar, StatusIcon, StatusText } from "../shared/Status";
20+
import { StatusBar, StatusText } from "../shared/Status";
1921
import { TaskImplementation } from "../shared/TaskDetails";
2022
import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
2123
import { ClonePipelineButton } from "./components/ClonePipelineButton";
@@ -82,13 +84,26 @@ export const RunDetails = () => {
8284
const annotations = componentSpec.metadata?.annotations || {};
8385

8486
return (
85-
<div className="p-2 flex flex-col gap-6 h-full">
86-
<div className="flex items-center gap-2 max-w-[90%]">
87-
<CopyText className="text-lg font-semibold" alwaysShowButton>
88-
{componentSpec.name ?? "Unnamed Pipeline"}
89-
</CopyText>
90-
<StatusIcon status={runStatus} tooltip />
91-
</div>
87+
<BlockStack gap="6" className="p-2 h-full">
88+
<CopyText className="text-lg font-semibold">
89+
{componentSpec.name ?? "Unnamed Pipeline"}
90+
</CopyText>
91+
92+
<InlineStack gap="2">
93+
<TaskImplementation
94+
displayName={componentSpec.name ?? "Pipeline"}
95+
componentSpec={componentSpec}
96+
showInlineContent={false}
97+
/>
98+
{canAccessEditorSpec && componentSpec.name && (
99+
<InspectPipelineButton pipelineName={componentSpec.name} />
100+
)}
101+
<ClonePipelineButton componentSpec={componentSpec} />
102+
{isInProgress && isRunCreator && (
103+
<CancelPipelineRunButton runId={runId} />
104+
)}
105+
{isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
106+
</InlineStack>
92107

93108
{metadata && (
94109
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
@@ -124,24 +139,6 @@ export const RunDetails = () => {
124139
</div>
125140
)}
126141

127-
<div>
128-
<div className="flex gap-2 flex-wrap items-center">
129-
<TaskImplementation
130-
displayName={componentSpec.name ?? "Pipeline"}
131-
componentSpec={componentSpec}
132-
showInlineContent={false}
133-
/>
134-
{canAccessEditorSpec && componentSpec.name && (
135-
<InspectPipelineButton pipelineName={componentSpec.name} />
136-
)}
137-
<ClonePipelineButton componentSpec={componentSpec} />
138-
{isInProgress && isRunCreator && (
139-
<CancelPipelineRunButton runId={runId} />
140-
)}
141-
{isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
142-
</div>
143-
</div>
144-
145142
{componentSpec.description && (
146143
<div>
147144
<h3 className="text-md font-medium mb-1">Description</h3>
@@ -151,15 +148,15 @@ export const RunDetails = () => {
151148
</div>
152149
)}
153150

154-
<div>
155-
<div className="flex gap-2">
156-
<h3 className="text-md font-medium">Status: {runStatus}</h3>
151+
<BlockStack>
152+
<InlineStack gap="1" blockAlign="center">
153+
<Text size="md" weight="semibold">
154+
Status: {runStatus}
155+
</Text>
157156
<StatusText statusCounts={statusCounts} />
158-
</div>
159-
<div className="flex flex-col gap-2">
160-
<StatusBar statusCounts={statusCounts} />
161-
</div>
162-
</div>
157+
</InlineStack>
158+
<StatusBar statusCounts={statusCounts} />
159+
</BlockStack>
163160

164161
{Object.keys(annotations).length > 0 && (
165162
<div>
@@ -175,65 +172,55 @@ export const RunDetails = () => {
175172
</div>
176173
)}
177174

178-
<div>
175+
<div className="w-full">
179176
<h3 className="text-md font-medium mb-1">Artifacts</h3>
180-
<div className="flex gap-4">
181-
<div className="flex-1">
177+
<div className="flex gap-4 flex-col w-full">
178+
<div className="w-full">
182179
<h4 className="text-sm font-semibold mb-1">Inputs</h4>
183180
{componentSpec.inputs && componentSpec.inputs.length > 0 ? (
184-
<ul className="list-disc list-inside text-sm text-secondary-foreground">
181+
<div className="flex flex-col w-full">
185182
{componentSpec.inputs.map((input) => (
186-
<li key={input.name}>
187-
<span className="font-semibold">{input.name}</span>
188-
{input.type && (
189-
<span className="ml-2 text-muted-foreground">
190-
(
191-
{typeof input.type === "string" ? input.type : "object"}
192-
)
193-
</span>
194-
)}
195-
{input.description && (
196-
<div className="text-xs text-secondary-foreground ml-4">
197-
{input.description}
198-
</div>
199-
)}
200-
</li>
183+
<div
184+
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center w-full"
185+
key={input.name}
186+
>
187+
<div className="text-xs flex-1 truncate">
188+
<span className="font-semibold">{input.name}</span>
189+
</div>
190+
<div className="text-xs text-muted-foreground">
191+
{typeof input.type === "string" ? input.type : "object"}
192+
</div>
193+
</div>
201194
))}
202-
</ul>
195+
</div>
203196
) : (
204197
<div className="text-xs text-muted-foreground">No inputs</div>
205198
)}
206199
</div>
207-
<div className="flex-1">
200+
<div className="w-full">
208201
<h4 className="text-sm font-semibold mb-1">Outputs</h4>
209202
{componentSpec.outputs && componentSpec.outputs.length > 0 ? (
210-
<ul className="list-disc list-inside text-sm text-secondary-foreground">
203+
<div className="flex flex-col w-full">
211204
{componentSpec.outputs.map((output) => (
212-
<li key={output.name}>
213-
<span className="font-semibold">{output.name}</span>
214-
{output.type && (
215-
<span className="ml-2 text-muted-foreground">
216-
(
217-
{typeof output.type === "string"
218-
? output.type
219-
: "object"}
220-
)
221-
</span>
222-
)}
223-
{output.description && (
224-
<div className="text-xs text-secondary-foreground ml-4">
225-
{output.description}
226-
</div>
227-
)}
228-
</li>
205+
<div
206+
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center w-full"
207+
key={output.name}
208+
>
209+
<div className="text-xs flex-1 truncate">
210+
<span className="font-semibold">{output.name}</span>
211+
</div>
212+
<div className="text-xs text-muted-foreground">
213+
{typeof output.type === "string" ? output.type : "object"}
214+
</div>
215+
</div>
229216
))}
230-
</ul>
217+
</div>
231218
) : (
232219
<div className="text-xs text-muted-foreground">No outputs</div>
233220
)}
234221
</div>
235222
</div>
236223
</div>
237-
</div>
224+
</BlockStack>
238225
);
239226
};

‎src/components/ui/layout.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ const blockStackVariants = cva("flex flex-col w-full", {
3232
"2": "gap-2",
3333
"3": "gap-3",
3434
"4": "gap-4",
35+
"5": "gap-5",
36+
"6": "gap-6",
3537
"8": "gap-8",
3638
},
3739
},
@@ -101,6 +103,9 @@ const inlineStackVariants = cva("flex flex-row", {
101103
"2": "gap-2",
102104
"3": "gap-3",
103105
"4": "gap-4",
106+
"5": "gap-5",
107+
"6": "gap-6",
108+
"8": "gap-8",
104109
},
105110
wrap: {
106111
wrap: "flex-wrap",

0 commit comments

Comments
 (0)