Skip to content

Commit a243c75

Browse files
camielvscamielvs
committed
Rework CodeViewer Implementation
1 parent 73c5435 commit a243c75

File tree

7 files changed

+315
-275
lines changed

7 files changed

+315
-275
lines changed

‎src/components/Editor/Context/PipelineDetails.tsx‎

Lines changed: 64 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlo
66
import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
77
import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
88
import { CopyText } from "@/components/shared/CopyText/CopyText";
9-
import { TaskImplementation } from "@/components/shared/TaskDetails";
109
import { BlockStack } from "@/components/ui/layout";
1110
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1211
import { getComponentFileFromList } from "@/utils/componentStore";
@@ -15,6 +14,10 @@ import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
1514
import PipelineIO from "../../shared/Execution/PipelineIO";
1615
import { PipelineValidationList } from "./PipelineValidationList";
1716
import RenamePipeline from "./RenamePipeline";
17+
import TooltipButton from "@/components/shared/Buttons/TooltipButton";
18+
import { Icon } from "@/components/ui/icon";
19+
import { componentSpecToText } from "@/utils/yaml";
20+
import { CodeViewer } from "@/components/shared/CodeViewer";
1821

1922
const PipelineDetails = () => {
2023
const {
@@ -28,6 +31,8 @@ const PipelineDetails = () => {
2831
globalValidationIssues,
2932
);
3033

34+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
35+
3136
// State for file metadata
3237
const [fileMeta, setFileMeta] = useState<{
3338
creationTime?: Date;
@@ -75,57 +80,69 @@ const PipelineDetails = () => {
7580

7681
const actions = [
7782
<RenamePipeline key="rename-pipeline-action" />,
78-
<TaskImplementation
79-
key="pipeline-implementation-action"
80-
displayName={componentSpec.name ?? "Pipeline"}
81-
componentSpec={componentSpec}
82-
showInlineContent={false}
83-
/>,
83+
<TooltipButton
84+
variant="outline"
85+
tooltip="View YAML"
86+
onClick={() => setIsYamlFullscreen(true)}
87+
>
88+
<Icon name="FileCodeCorner" />
89+
</TooltipButton>,
8490
];
8591

8692
return (
87-
<BlockStack
88-
gap="4"
89-
className="h-full px-2"
90-
data-context-panel="pipeline-details"
91-
>
92-
<CopyText className="text-lg font-semibold">
93-
{componentSpec.name ?? "Unnamed Pipeline"}
94-
</CopyText>
95-
96-
<ActionBlock actions={actions} />
97-
98-
<ListBlock items={metadata} marker="none" />
99-
100-
{componentSpec.description && (
101-
<TextBlock title="Description" text={componentSpec.description} />
102-
)}
103-
104-
{digest && (
105-
<TextBlock
106-
title="Digest"
107-
text={digest}
108-
copyable
109-
className="bg-secondary p-2 rounded-md border"
110-
mono
93+
<>
94+
<BlockStack
95+
gap="4"
96+
className="h-full px-2"
97+
data-context-panel="pipeline-details"
98+
>
99+
<CopyText className="text-lg font-semibold">
100+
{componentSpec.name ?? "Unnamed Pipeline"}
101+
</CopyText>
102+
103+
<ActionBlock actions={actions} />
104+
105+
<ListBlock items={metadata} marker="none" />
106+
107+
{componentSpec.description && (
108+
<TextBlock title="Description" text={componentSpec.description} />
109+
)}
110+
111+
{digest && (
112+
<TextBlock
113+
title="Digest"
114+
text={digest}
115+
copyable
116+
className="bg-secondary p-2 rounded-md border"
117+
mono
118+
/>
119+
)}
120+
121+
{annotations.length > 0 && (
122+
<ListBlock title="Annotations" items={annotations} marker="none" />
123+
)}
124+
125+
<PipelineIO />
126+
127+
<ContentBlock title="Validations">
128+
<PipelineValidationList
129+
isComponentTreeValid={isComponentTreeValid}
130+
groupedIssues={groupedIssues}
131+
totalIssueCount={globalValidationIssues.length}
132+
onIssueSelect={handleIssueClick}
133+
/>
134+
</ContentBlock>
135+
</BlockStack>
136+
{isYamlFullscreen && (
137+
<CodeViewer
138+
code={componentSpecToText(componentSpec)}
139+
language="yaml"
140+
filename={componentSpec.name ?? "pipeline.yaml"}
141+
isFullscreen={isYamlFullscreen}
142+
onClose={() => setIsYamlFullscreen(false)}
111143
/>
112144
)}
113-
114-
{annotations.length > 0 && (
115-
<ListBlock title="Annotations" items={annotations} marker="none" />
116-
)}
117-
118-
<PipelineIO />
119-
120-
<ContentBlock title="Validations">
121-
<PipelineValidationList
122-
isComponentTreeValid={isComponentTreeValid}
123-
groupedIssues={groupedIssues}
124-
totalIssueCount={globalValidationIssues.length}
125-
onIssueSelect={handleIssueClick}
126-
/>
127-
</ContentBlock>
128-
</BlockStack>
145+
</>
129146
);
130147
};
131148

‎src/components/PipelineRun/RunDetails.tsx‎

Lines changed: 71 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useMutation } from "@tanstack/react-query";
22
import { useNavigate } from "@tanstack/react-router";
3+
import { useState } from "react";
34

45
import { CopyText } from "@/components/shared/CopyText/CopyText";
56
import { BlockStack, InlineStack } from "@/components/ui/layout";
@@ -25,10 +26,12 @@ import {
2526
import type { PipelineRun } from "@/types/pipelineRun";
2627
import { getInitialName } from "@/utils/getComponentName";
2728
import { submitPipelineRun } from "@/utils/submitPipeline";
29+
import { componentSpecToText } from "@/utils/yaml";
2830

2931
import { isAuthorizationRequired } from "../shared/Authentication/helpers";
3032
import { useAuthLocalStorage } from "../shared/Authentication/useAuthLocalStorage";
3133
import { useAwaitAuthorization } from "../shared/Authentication/useAwaitAuthorization";
34+
import { CodeViewer } from "../shared/CodeViewer";
3235
import {
3336
ActionBlock,
3437
type ActionOrReactNode,
@@ -39,7 +42,6 @@ import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
3942
import PipelineIO from "../shared/Execution/PipelineIO";
4043
import { InfoBox } from "../shared/InfoBox";
4144
import { StatusBar, StatusText } from "../shared/Status";
42-
import { TaskImplementation } from "../shared/TaskDetails";
4345

4446
export const RunDetails = () => {
4547
const navigate = useNavigate();
@@ -129,6 +131,8 @@ export const RunDetails = () => {
129131
onError,
130132
});
131133

134+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
135+
132136
const editorRoute = componentSpec.name
133137
? `/editor/${encodeURIComponent(componentSpec.name)}`
134138
: "";
@@ -209,11 +213,11 @@ export const RunDetails = () => {
209213
const annotations = componentSpec.metadata?.annotations || {};
210214

211215
const actions: ActionOrReactNode[] = [
212-
<TaskImplementation
213-
displayName={componentSpec.name ?? "Pipeline"}
214-
componentSpec={componentSpec}
215-
showInlineContent={false}
216-
/>,
216+
{
217+
label: "View YAML",
218+
icon: "FileCodeCorner",
219+
onClick: () => setIsYamlFullscreen(true),
220+
},
217221
{
218222
label: "Inspect Pipeline",
219223
icon: "SquareMousePointer",
@@ -247,57 +251,68 @@ export const RunDetails = () => {
247251
];
248252

249253
return (
250-
<BlockStack gap="6" className="p-2 h-full">
251-
<CopyText className="text-lg font-semibold">
252-
{componentSpec.name ?? "Unnamed Pipeline"}
253-
</CopyText>
254-
255-
<ActionBlock actions={actions} />
256-
257-
{metadata && (
258-
<ListBlock
259-
title="Run Info"
260-
items={[
261-
{ label: "Run Id", value: metadata.id },
262-
{ label: "Execution Id", value: metadata.root_execution_id },
263-
{ label: "Created by", value: metadata.created_by ?? undefined },
264-
{
265-
label: "Created at",
266-
value: metadata.created_at
267-
? new Date(metadata.created_at).toLocaleString()
268-
: undefined,
269-
},
270-
]}
271-
marker="none"
272-
/>
273-
)}
274-
275-
{componentSpec.description && (
276-
<TextBlock title="Description" text={componentSpec.description} />
277-
)}
278-
279-
<ContentBlock title="Status">
280-
<InlineStack gap="2" blockAlign="center" className="mb-1">
281-
<Text size="sm" weight="semibold">
282-
{runStatus}
283-
</Text>
284-
<StatusText statusCounts={statusCounts} />
285-
</InlineStack>
286-
<StatusBar statusCounts={statusCounts} />
287-
</ContentBlock>
288-
289-
{Object.keys(annotations).length > 0 && (
290-
<ListBlock
291-
title="Annotations"
292-
items={Object.entries(annotations).map(([key, value]) => ({
293-
label: key,
294-
value: String(value),
295-
}))}
296-
marker="none"
254+
<>
255+
<BlockStack gap="6" className="p-2 h-full">
256+
<CopyText className="text-lg font-semibold">
257+
{componentSpec.name ?? "Unnamed Pipeline"}
258+
</CopyText>
259+
260+
<ActionBlock actions={actions} />
261+
262+
{metadata && (
263+
<ListBlock
264+
title="Run Info"
265+
items={[
266+
{ label: "Run Id", value: metadata.id },
267+
{ label: "Execution Id", value: metadata.root_execution_id },
268+
{ label: "Created by", value: metadata.created_by ?? undefined },
269+
{
270+
label: "Created at",
271+
value: metadata.created_at
272+
? new Date(metadata.created_at).toLocaleString()
273+
: undefined,
274+
},
275+
]}
276+
marker="none"
277+
/>
278+
)}
279+
280+
{componentSpec.description && (
281+
<TextBlock title="Description" text={componentSpec.description} />
282+
)}
283+
284+
<ContentBlock title="Status">
285+
<InlineStack gap="2" blockAlign="center" className="mb-1">
286+
<Text size="sm" weight="semibold">
287+
{runStatus}
288+
</Text>
289+
<StatusText statusCounts={statusCounts} />
290+
</InlineStack>
291+
<StatusBar statusCounts={statusCounts} />
292+
</ContentBlock>
293+
294+
{Object.keys(annotations).length > 0 && (
295+
<ListBlock
296+
title="Annotations"
297+
items={Object.entries(annotations).map(([key, value]) => ({
298+
label: key,
299+
value: String(value),
300+
}))}
301+
marker="none"
302+
/>
303+
)}
304+
305+
<PipelineIO readOnly />
306+
</BlockStack>
307+
{isYamlFullscreen && (
308+
<CodeViewer
309+
code={componentSpecToText(componentSpec)}
310+
language="yaml"
311+
filename={componentSpec.name ?? "pipeline.yaml"}
312+
isFullscreen={isYamlFullscreen}
313+
onClose={() => setIsYamlFullscreen(false)}
297314
/>
298315
)}
299-
300-
<PipelineIO readOnly />
301-
</BlockStack>
316+
</>
302317
);
303318
};

0 commit comments

Comments
 (0)