Skip to content

Commit 44eb3d3

Browse files
MbeaulneMbeaulne
committed
cleans up pipelineDetails v1
1 parent 1198e72 commit 44eb3d3

File tree

4 files changed

+79
-93
lines changed

4 files changed

+79
-93
lines changed

‎src/components/Editor/PipelineDetails.tsx‎

Lines changed: 9 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,21 @@ 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 gap="6" className="p-2 h-full"
133132
data-context-panel="pipeline-details"
134133
>
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>
140-
<RenamePipeline />
141-
</div>
142134

143-
<div className="flex gap-2 flex-wrap items-center">
135+
<CopyText className="text-lg font-semibold" showButton={false}>
136+
{componentSpec.name ?? "Unnamed Pipeline"}
137+
</CopyText>
138+
<InlineStack gap="2">
139+
<RenamePipeline />
144140
<TaskImplementation
145141
displayName={componentSpec.name ?? "Pipeline"}
146142
componentSpec={componentSpec}
147143
showInlineContent={false}
148144
/>
149-
</div>
145+
</InlineStack>
150146

151147
{/* General Metadata */}
152148
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
@@ -326,7 +322,7 @@ const PipelineDetails = () => {
326322
onIssueSelect={handleIssueClick}
327323
/>
328324
</div>
329-
</div>
325+
</BlockStack>
330326
);
331327
};
332328

‎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: 60 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" showButton={false}>
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,13 @@ 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">Status: {runStatus}</Text>
157154
<StatusText statusCounts={statusCounts} />
158-
</div>
159-
<div className="flex flex-col gap-2">
160-
<StatusBar statusCounts={statusCounts} />
161-
</div>
162-
</div>
155+
</InlineStack>
156+
<StatusBar statusCounts={statusCounts} />
157+
</BlockStack>
163158

164159
{Object.keys(annotations).length > 0 && (
165160
<div>
@@ -175,65 +170,55 @@ export const RunDetails = () => {
175170
</div>
176171
)}
177172

178-
<div>
173+
<div className="w-full">
179174
<h3 className="text-md font-medium mb-1">Artifacts</h3>
180-
<div className="flex gap-4">
181-
<div className="flex-1">
175+
<div className="flex gap-4 flex-col w-full">
176+
<div className="w-full">
182177
<h4 className="text-sm font-semibold mb-1">Inputs</h4>
183178
{componentSpec.inputs && componentSpec.inputs.length > 0 ? (
184-
<ul className="list-disc list-inside text-sm text-secondary-foreground">
179+
<div className="flex flex-col w-full">
185180
{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>
181+
<div
182+
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"
183+
key={input.name}
184+
>
185+
<div className="text-xs flex-1 truncate">
186+
<span className="font-semibold">{input.name}</span>
187+
</div>
188+
<div className="text-xs text-muted-foreground">
189+
{typeof input.type === "string" ? input.type : "object"}
190+
</div>
191+
</div>
201192
))}
202-
</ul>
193+
</div>
203194
) : (
204195
<div className="text-xs text-muted-foreground">No inputs</div>
205196
)}
206197
</div>
207-
<div className="flex-1">
198+
<div className="w-full">
208199
<h4 className="text-sm font-semibold mb-1">Outputs</h4>
209200
{componentSpec.outputs && componentSpec.outputs.length > 0 ? (
210-
<ul className="list-disc list-inside text-sm text-secondary-foreground">
201+
<div className="flex flex-col w-full">
211202
{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>
203+
<div
204+
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"
205+
key={output.name}
206+
>
207+
<div className="text-xs flex-1 truncate">
208+
<span className="font-semibold">{output.name}</span>
209+
</div>
210+
<div className="text-xs text-muted-foreground">
211+
{typeof output.type === "string" ? output.type : "object"}
212+
</div>
213+
</div>
229214
))}
230-
</ul>
215+
</div>
231216
) : (
232217
<div className="text-xs text-muted-foreground">No outputs</div>
233218
)}
234219
</div>
235220
</div>
236221
</div>
237-
</div>
222+
</BlockStack>
238223
);
239224
};

‎src/components/ui/layout.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,16 @@ 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
},
3840
});
3941

4042
interface BlockStackProps
4143
extends AriaAttributes,
42-
VariantProps<typeof blockStackVariants> {
44+
VariantProps<typeof blockStackVariants> {
4345
/** HTML Element type
4446
* @default 'div'
4547
*/
@@ -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",
@@ -111,7 +116,7 @@ const inlineStackVariants = cva("flex flex-row", {
111116

112117
interface InlineStackProps
113118
extends AriaAttributes,
114-
VariantProps<typeof inlineStackVariants> {
119+
VariantProps<typeof inlineStackVariants> {
115120
/** HTML Element type
116121
* @default 'div'
117122
*/

0 commit comments

Comments
 (0)