Skip to content

Commit 2478ed7

Browse files
camielvscamielvs
committed
Rework CodeViewer Implementation
1 parent 3e88eaf commit 2478ed7

File tree

7 files changed

+331
-285
lines changed

7 files changed

+331
-285
lines changed

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

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import { useEffect, useState } from "react";
22

33
import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
4+
import TooltipButton from "@/components/shared/Buttons/TooltipButton";
5+
import { CodeViewer } from "@/components/shared/CodeViewer";
46
import { ActionBlock } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
57
import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
68
import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
79
import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
810
import { CopyText } from "@/components/shared/CopyText/CopyText";
9-
import { TaskImplementation } from "@/components/shared/TaskDetails";
11+
import { Icon } from "@/components/ui/icon";
1012
import { BlockStack } from "@/components/ui/layout";
1113
import useToastNotification from "@/hooks/useToastNotification";
1214
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1315
import { getComponentFileFromList } from "@/utils/componentStore";
1416
import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
17+
import { componentSpecToText } from "@/utils/yaml";
1518

1619
import PipelineIO from "../../shared/Execution/PipelineIO";
1720
import { PipelineValidationList } from "./PipelineValidationList";
@@ -30,6 +33,8 @@ const PipelineDetails = () => {
3033
globalValidationIssues,
3134
);
3235

36+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
37+
3338
// State for file metadata
3439
const [fileMeta, setFileMeta] = useState<{
3540
creationTime?: Date;
@@ -83,57 +88,70 @@ const PipelineDetails = () => {
8388

8489
const actions = [
8590
<RenamePipeline key="rename-pipeline-action" />,
86-
<TaskImplementation
87-
key="pipeline-implementation-action"
88-
displayName={componentSpec.name ?? "Pipeline"}
89-
componentSpec={componentSpec}
90-
showInlineContent={false}
91-
/>,
91+
<TooltipButton
92+
variant="outline"
93+
tooltip="View YAML"
94+
onClick={() => setIsYamlFullscreen(true)}
95+
key="view-yaml-action"
96+
>
97+
<Icon name="FileCodeCorner" />
98+
</TooltipButton>,
9299
];
93100

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

‎src/components/PipelineRun/RunDetails.tsx‎

Lines changed: 76 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import PipelineIO from "@/components/shared/Execution/PipelineIO";
1010
import { InfoBox } from "@/components/shared/InfoBox";
1111
import { LoadingScreen } from "@/components/shared/LoadingScreen";
1212
import { StatusBar } from "@/components/shared/Status";
13-
import { TaskImplementation } from "@/components/shared/TaskDetails";
13+
import { useState } from "react";
14+
15+
import { Icon } from "@/components/ui/icon";
1416
import { BlockStack, InlineStack } from "@/components/ui/layout";
1517
import { Text } from "@/components/ui/typography";
1618
import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
@@ -26,6 +28,10 @@ import {
2628
isExecutionComplete,
2729
} from "@/utils/executionStatus";
2830

31+
import { componentSpecToText } from "@/utils/yaml";
32+
33+
import TooltipButton from "../shared/Buttons/TooltipButton";
34+
import { CodeViewer } from "../shared/CodeViewer";
2935
import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
3036
import { ClonePipelineButton } from "./components/ClonePipelineButton";
3137
import { InspectPipelineButton } from "./components/InspectPipelineButton";
@@ -44,6 +50,8 @@ export const RunDetails = () => {
4450
} = useExecutionData();
4551
const { data: currentUserDetails } = useUserDetails();
4652

53+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
54+
4755
const editorRoute = componentSpec.name
4856
? `/editor/${encodeURIComponent(componentSpec.name)}`
4957
: "";
@@ -96,11 +104,13 @@ export const RunDetails = () => {
96104
const actions: ActionOrReactNode[] = [];
97105

98106
actions.push(
99-
<TaskImplementation
100-
displayName={componentSpec.name ?? "Pipeline"}
101-
componentSpec={componentSpec}
102-
showInlineContent={false}
103-
/>,
107+
<TooltipButton
108+
variant="outline"
109+
tooltip="View YAML"
110+
onClick={() => setIsYamlFullscreen(true)}
111+
>
112+
<Icon name="FileCodeCorner" />
113+
</TooltipButton>,
104114
);
105115

106116
if (canAccessEditorSpec && componentSpec.name) {
@@ -128,56 +138,67 @@ export const RunDetails = () => {
128138
}
129139

130140
return (
131-
<BlockStack gap="6" className="p-2 h-full">
132-
<CopyText className="text-lg font-semibold">
133-
{componentSpec.name ?? "Unnamed Pipeline"}
134-
</CopyText>
135-
136-
<ActionBlock actions={actions} />
137-
138-
{metadata && (
139-
<ListBlock
140-
title="Run Info"
141-
items={[
142-
{ label: "Run Id", value: metadata.id },
143-
{ label: "Execution Id", value: metadata.root_execution_id },
144-
{ label: "Created by", value: metadata.created_by ?? undefined },
145-
{
146-
label: "Created at",
147-
value: metadata.created_at
148-
? new Date(metadata.created_at).toLocaleString()
149-
: undefined,
150-
},
151-
]}
152-
marker="none"
153-
/>
154-
)}
155-
156-
{componentSpec.description && (
157-
<TextBlock title="Description" text={componentSpec.description} />
158-
)}
159-
160-
<ContentBlock title="Status">
161-
<InlineStack gap="2" blockAlign="center" className="mb-1">
162-
<Text size="sm" weight="semibold">
163-
{statusLabel}
164-
</Text>
165-
</InlineStack>
166-
<StatusBar executionStatusStats={executionStatusStats} />
167-
</ContentBlock>
168-
169-
{Object.keys(annotations).length > 0 && (
170-
<ListBlock
171-
title="Annotations"
172-
items={Object.entries(annotations).map(([key, value]) => ({
173-
label: key,
174-
value: String(value),
175-
}))}
176-
marker="none"
141+
<>
142+
<BlockStack gap="6" className="p-2 h-full">
143+
<CopyText className="text-lg font-semibold">
144+
{componentSpec.name ?? "Unnamed Pipeline"}
145+
</CopyText>
146+
147+
<ActionBlock actions={actions} />
148+
149+
{metadata && (
150+
<ListBlock
151+
title="Run Info"
152+
items={[
153+
{ label: "Run Id", value: metadata.id },
154+
{ label: "Execution Id", value: metadata.root_execution_id },
155+
{ label: "Created by", value: metadata.created_by ?? undefined },
156+
{
157+
label: "Created at",
158+
value: metadata.created_at
159+
? new Date(metadata.created_at).toLocaleString()
160+
: undefined,
161+
},
162+
]}
163+
marker="none"
164+
/>
165+
)}
166+
167+
{componentSpec.description && (
168+
<TextBlock title="Description" text={componentSpec.description} />
169+
)}
170+
171+
<ContentBlock title="Status">
172+
<InlineStack gap="2" blockAlign="center" className="mb-1">
173+
<Text size="sm" weight="semibold">
174+
{statusLabel}
175+
</Text>
176+
</InlineStack>
177+
<StatusBar executionStatusStats={executionStatusStats} />
178+
</ContentBlock>
179+
180+
{Object.keys(annotations).length > 0 && (
181+
<ListBlock
182+
title="Annotations"
183+
items={Object.entries(annotations).map(([key, value]) => ({
184+
label: key,
185+
value: String(value),
186+
}))}
187+
marker="none"
188+
/>
189+
)}
190+
191+
<PipelineIO readOnly />
192+
</BlockStack>
193+
{isYamlFullscreen && (
194+
<CodeViewer
195+
code={componentSpecToText(componentSpec)}
196+
language="yaml"
197+
filename={componentSpec.name ?? "pipeline.yaml"}
198+
isFullscreen={isYamlFullscreen}
199+
onClose={() => setIsYamlFullscreen(false)}
177200
/>
178201
)}
179-
180-
<PipelineIO readOnly />
181-
</BlockStack>
202+
</>
182203
);
183204
};

0 commit comments

Comments
 (0)