Skip to content

Commit 5b89d37

Browse files
camielvscamielvs
committed
Rework CodeViewer Implementation
1 parent 7617cac commit 5b89d37

File tree

7 files changed

+319
-276
lines changed

7 files changed

+319
-276
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: 75 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
isStatusComplete,
1414
isStatusInProgress,
1515
} from "@/services/executionService";
16-
1716
import {
1817
ActionBlock,
1918
type ActionOrReactNode,
@@ -24,11 +23,15 @@ import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
2423
import PipelineIO from "../shared/Execution/PipelineIO";
2524
import { InfoBox } from "../shared/InfoBox";
2625
import { StatusBar, StatusText } from "../shared/Status";
27-
import { TaskImplementation } from "../shared/TaskDetails";
2826
import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
2927
import { ClonePipelineButton } from "./components/ClonePipelineButton";
3028
import { InspectPipelineButton } from "./components/InspectPipelineButton";
3129
import { RerunPipelineButton } from "./components/RerunPipelineButton";
30+
import { useState } from "react";
31+
import { componentSpecToText } from "@/utils/yaml";
32+
import { CodeViewer } from "../shared/CodeViewer";
33+
import TooltipButton from "../shared/Buttons/TooltipButton";
34+
import { Icon } from "../ui/icon";
3235

3336
export const RunDetails = () => {
3437
const { configured } = useBackend();
@@ -43,6 +46,8 @@ export const RunDetails = () => {
4346
} = useExecutionData();
4447
const { data: currentUserDetails } = useUserDetails();
4548

49+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
50+
4651
const editorRoute = componentSpec.name
4752
? `/editor/${encodeURIComponent(componentSpec.name)}`
4853
: "";
@@ -95,11 +100,13 @@ export const RunDetails = () => {
95100
const actions: ActionOrReactNode[] = [];
96101

97102
actions.push(
98-
<TaskImplementation
99-
displayName={componentSpec.name ?? "Pipeline"}
100-
componentSpec={componentSpec}
101-
showInlineContent={false}
102-
/>,
103+
<TooltipButton
104+
variant="outline"
105+
tooltip="View YAML"
106+
onClick={() => setIsYamlFullscreen(true)}
107+
>
108+
<Icon name="FileCodeCorner" />
109+
</TooltipButton>,
103110
);
104111

105112
if (canAccessEditorSpec && componentSpec.name) {
@@ -123,57 +130,68 @@ export const RunDetails = () => {
123130
}
124131

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

0 commit comments

Comments
 (0)