Skip to content

Commit d5fc138

Browse files
MbeaulneMbeaulne
committed
cleans up pipelineDetails v2
1 parent 97d6e17 commit d5fc138

File tree

5 files changed

+203
-112
lines changed

5 files changed

+203
-112
lines changed

‎.cursorrules‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,30 @@ This is a React + TypeScript application for building and running Machine Learni
5555
- Common spacing/layout patterns → Suggest utility classes or component abstractions
5656
- Similar form field styling → Create form field components
5757

58+
### UI Primitives (Prefer Over Raw HTML)
59+
60+
**Always prefer our UI primitives over raw HTML elements:**
61+
62+
- **Layout**: Use `BlockStack` and `InlineStack` from `@/components/ui/layout` instead of `<div className="flex ...">`
63+
- `BlockStack` = vertical flex (`flex-col`)
64+
- `InlineStack` = horizontal flex (`flex-row`)
65+
- Both support `gap`, `align`, `blockAlign` props
66+
- Use `as` prop for semantic elements: `<BlockStack as="ul">`, `<InlineStack as="li">`
67+
68+
- **Typography**: Use `Text` from `@/components/ui/typography` instead of raw `<h1-h6>`, `<p>`, `<span>`, `<dt>`, `<dd>`
69+
- `<Text as="h3" size="md" weight="semibold">` instead of `<h3 className="text-md font-semibold">`
70+
- `<Text as="dt" weight="semibold">` instead of `<dt className="font-semibold">`
71+
- `<Text as="p" size="sm">` instead of `<p className="text-sm">`
72+
- Supports: `as`, `size`, `weight`, `tone`, `font` props
73+
74+
- **Buttons**: Use `Button` from `@/components/ui/button`
75+
- **Icons**: Use `Icon` from `@/components/ui/icon`
76+
77+
**When raw HTML is acceptable:**
78+
- Semantic elements not supported by primitives (e.g., `<dl>`, `<ul>`, `<ol>`, `<table>`)
79+
- Complex layouts where primitives don't fit
80+
- Performance-critical sections where abstraction overhead matters
81+
5882
### State Management
5983

6084
- Use Tanstack Query for server state
@@ -202,6 +226,7 @@ export const useContext = () => {
202226
- Don't create side effects in render functions
203227
- Don't use barrel exports
204228
- Don't modify componentSpec structure without express permission
229+
- Don't use raw HTML elements when UI primitives exist (use `Text`, `BlockStack`, `InlineStack`, etc.)
205230

206231
## Other rules
207232

‎src/components/Editor/PipelineDetails.tsx‎

Lines changed: 88 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { CopyText } from "@/components/shared/CopyText/CopyText";
77
import { Button } from "@/components/ui/button";
88
import { Icon } from "@/components/ui/icon";
99
import { BlockStack, InlineStack } from "@/components/ui/layout";
10+
import { Text } from "@/components/ui/typography";
1011
import useToastNotification from "@/hooks/useToastNotification";
1112
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1213
import { useContextPanel } from "@/providers/ContextPanelProvider";
@@ -128,10 +129,11 @@ const PipelineDetails = () => {
128129
const annotations = componentSpec.metadata?.annotations || {};
129130

130131
return (
131-
<BlockStack gap="6" className="p-2 h-full"
132+
<BlockStack
133+
gap="6"
134+
className="p-2 h-full"
132135
data-context-panel="pipeline-details"
133136
>
134-
135137
<CopyText className="text-lg font-semibold" showButton={false}>
136138
{componentSpec.name ?? "Unnamed Pipeline"}
137139
</CopyText>
@@ -144,85 +146,108 @@ const PipelineDetails = () => {
144146
/>
145147
</InlineStack>
146148

147-
{/* General Metadata */}
148-
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
149-
<div className="flex flex-wrap gap-6">
150-
{fileMeta.createdBy && (
151-
<div>
152-
<span className="font-semibold">Created by:</span>{" "}
153-
{fileMeta.createdBy}
154-
</div>
155-
)}
156-
</div>
157-
<div className="flex flex-wrap gap-x-6">
158-
{fileMeta.creationTime && (
159-
<div>
160-
<span className="font-semibold">Created at:</span>{" "}
161-
{new Date(fileMeta.creationTime).toLocaleString()}
162-
</div>
163-
)}
164-
{fileMeta.modificationTime && (
165-
<div>
166-
<span className="font-semibold">Last updated:</span>{" "}
167-
{new Date(fileMeta.modificationTime).toLocaleString()}
168-
</div>
169-
)}
170-
</div>
171-
</div>
149+
{(fileMeta.createdBy ||
150+
fileMeta.creationTime ||
151+
fileMeta.modificationTime) && (
152+
<BlockStack>
153+
<Text as="h3" size="md" weight="semibold" className="mb-1">
154+
Pipeline Info
155+
</Text>
156+
<dl className="flex flex-col gap-1 text-xs text-secondary-foreground">
157+
{fileMeta.createdBy && (
158+
<InlineStack as="div" gap="1" blockAlign="center">
159+
<Text as="dt" weight="semibold">
160+
Created by:
161+
</Text>
162+
<dd>{fileMeta.createdBy}</dd>
163+
</InlineStack>
164+
)}
165+
{fileMeta.creationTime && (
166+
<InlineStack as="div" gap="1" blockAlign="center">
167+
<Text as="dt" weight="semibold">
168+
Created at:
169+
</Text>
170+
<dd>{new Date(fileMeta.creationTime).toLocaleString()}</dd>
171+
</InlineStack>
172+
)}
173+
{fileMeta.modificationTime && (
174+
<InlineStack as="div" gap="1" blockAlign="center">
175+
<Text as="dt" weight="semibold">
176+
Last updated:
177+
</Text>
178+
<dd>{new Date(fileMeta.modificationTime).toLocaleString()}</dd>
179+
</InlineStack>
180+
)}
181+
</dl>
182+
</BlockStack>
183+
)}
172184

173-
{/* Description */}
174185
{componentSpec.description && (
175-
<div>
176-
<h3 className="text-md font-medium mb-1">Description</h3>
177-
<div className="text-sm whitespace-pre-line">
186+
<BlockStack>
187+
<Text as="h3" size="md" weight="semibold" className="mb-1">
188+
Description
189+
</Text>
190+
<Text as="p" size="sm" className="whitespace-pre-line">
178191
{componentSpec.description}
179-
</div>
180-
</div>
192+
</Text>
193+
</BlockStack>
181194
)}
182195

183196
{/* Component Digest */}
184197
{digest && (
185-
<div className="mb-2">
186-
<h3 className="text-md font-medium mb-1">Digest</h3>
198+
<BlockStack>
199+
<Text as="h3" size="md" weight="semibold" className="mb-1">
200+
Digest
201+
</Text>
187202
<Button
188203
className="bg-gray-100 border border-gray-300 rounded p-2 h-fit text-xs w-full text-left hover:bg-gray-200 active:bg-gray-300 transition cursor-pointer"
189204
onClick={handleDigestCopy}
190205
variant="ghost"
191206
>
192-
<span className="font-mono break-all w-full text-wrap">
207+
<Text as="span" font="mono" className="break-all w-full text-wrap">
193208
{digest}
194-
</span>
209+
</Text>
195210
</Button>
196-
</div>
211+
</BlockStack>
197212
)}
198213

199214
{/* Annotations */}
200215
{Object.keys(annotations).length > 0 && (
201-
<div>
202-
<h3 className="text-md font-medium mb-1">Annotations</h3>
216+
<BlockStack>
217+
<Text as="h3" size="md" weight="semibold" className="mb-1">
218+
Annotations
219+
</Text>
203220
<ul className="text-xs text-secondary-foreground">
204221
{Object.entries(annotations).map(([key, value]) => (
205222
<li key={key}>
206-
<span className="font-semibold">{key}:</span>{" "}
207-
<span className="break-all">{String(value)}</span>
223+
<Text as="span" weight="semibold">
224+
{key}:
225+
</Text>{" "}
226+
<Text as="span" className="break-all">
227+
{String(value)}
228+
</Text>
208229
</li>
209230
))}
210231
</ul>
211-
</div>
232+
</BlockStack>
212233
)}
213234

214235
{/* Artifacts (Inputs & Outputs) */}
215-
<div>
216-
<h3 className="text-md font-medium mb-1">Artifacts</h3>
217-
<div className="flex gap-4 flex-col">
218-
<div className="flex-1">
219-
<h4 className="text-sm font-semibold mb-1">Inputs</h4>
236+
<BlockStack>
237+
<Text as="h3" size="md" weight="semibold" className="mb-1">
238+
Artifacts
239+
</Text>
240+
<BlockStack gap="4">
241+
<BlockStack>
242+
<Text as="h4" size="sm" weight="semibold" className="mb-1">
243+
Inputs
244+
</Text>
220245
{componentSpec.inputs && componentSpec.inputs.length > 0 ? (
221246
<div className="flex flex-col">
222247
{componentSpec.inputs.map((input) => {
223248
return (
224249
<div
225-
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-0 rounded-xs items-center"
250+
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center"
226251
key={input.name}
227252
>
228253
<div className="text-xs flex-1 truncate max-w-[200px]">
@@ -266,14 +291,16 @@ const PipelineDetails = () => {
266291
) : (
267292
<div className="text-xs text-muted-foreground">No inputs</div>
268293
)}
269-
</div>
270-
<div className="flex-1">
271-
<h4 className="text-sm font-semibold mb-1">Outputs</h4>
294+
</BlockStack>
295+
<BlockStack>
296+
<Text as="h4" size="sm" weight="semibold" className="mb-1">
297+
Outputs
298+
</Text>
272299
{componentSpec.outputs && componentSpec.outputs.length > 0 ? (
273300
<div className="flex flex-col">
274301
{componentSpec.outputs.map((output) => (
275302
<div
276-
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-0 rounded-xs items-center"
303+
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center"
277304
key={output.name}
278305
>
279306
<div className="text-xs flex-1 truncate max-w-[200px]">
@@ -308,20 +335,22 @@ const PipelineDetails = () => {
308335
) : (
309336
<div className="text-xs text-muted-foreground">No outputs</div>
310337
)}
311-
</div>
312-
</div>
313-
</div>
338+
</BlockStack>
339+
</BlockStack>
340+
</BlockStack>
314341

315342
{/* Validations */}
316-
<div className="mt-2">
317-
<h3 className="text-md font-medium mb-1">Validations</h3>
343+
<BlockStack>
344+
<Text as="h3" size="md" weight="semibold" className="mb-1">
345+
Validations
346+
</Text>
318347
<PipelineValidationList
319348
isComponentTreeValid={isComponentTreeValid}
320349
groupedIssues={groupedIssues}
321350
totalIssueCount={globalValidationIssues.length}
322351
onIssueSelect={handleIssueClick}
323352
/>
324-
</div>
353+
</BlockStack>
325354
</BlockStack>
326355
);
327356
};

0 commit comments

Comments
 (0)