Skip to content

Commit 4c3fa9a

Browse files
camielvscamielvs
committed
Rework CodeViewer Implementation
1 parent 2fc0aeb commit 4c3fa9a

File tree

7 files changed

+323
-274
lines changed

7 files changed

+323
-274
lines changed

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

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
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 { useComponentSpec } from "@/providers/ComponentSpecProvider";
1214
import { getComponentFileFromList } from "@/utils/componentStore";
1315
import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
16+
import { componentSpecToText } from "@/utils/yaml";
1417

1518
import PipelineIO from "../../shared/Execution/PipelineIO";
1619
import { PipelineValidationList } from "./PipelineValidationList";
@@ -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,70 @@ 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+
key="view-yaml-action"
88+
>
89+
<Icon name="FileCodeCorner" />
90+
</TooltipButton>,
8491
];
8592

8693
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
94+
<>
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
119+
/>
120+
)}
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>
137+
{isYamlFullscreen && (
138+
<CodeViewer
139+
code={componentSpecToText(componentSpec)}
140+
language="yaml"
141+
filename={componentSpec.name ?? "pipeline.yaml"}
142+
isFullscreen={isYamlFullscreen}
143+
onClose={() => setIsYamlFullscreen(false)}
111144
/>
112145
)}
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>
146+
</>
129147
);
130148
};
131149

‎src/components/PipelineRun/RunDetails.tsx‎

Lines changed: 76 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import { useState } from "react";
2+
13
import { CopyText } from "@/components/shared/CopyText/CopyText";
4+
import { Icon } from "@/components/ui/icon";
25
import { BlockStack, InlineStack } from "@/components/ui/layout";
36
import { Spinner } from "@/components/ui/spinner";
47
import { Paragraph, Text } from "@/components/ui/typography";
@@ -13,7 +16,10 @@ import {
1316
isStatusComplete,
1417
isStatusInProgress,
1518
} from "@/services/executionService";
19+
import { componentSpecToText } from "@/utils/yaml";
1620

21+
import TooltipButton from "../shared/Buttons/TooltipButton";
22+
import { CodeViewer } from "../shared/CodeViewer";
1723
import {
1824
ActionBlock,
1925
type ActionOrReactNode,
@@ -24,7 +30,6 @@ import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
2430
import PipelineIO from "../shared/Execution/PipelineIO";
2531
import { InfoBox } from "../shared/InfoBox";
2632
import { StatusBar, StatusText } from "../shared/Status";
27-
import { TaskImplementation } from "../shared/TaskDetails";
2833
import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
2934
import { ClonePipelineButton } from "./components/ClonePipelineButton";
3035
import { InspectPipelineButton } from "./components/InspectPipelineButton";
@@ -43,6 +48,8 @@ export const RunDetails = () => {
4348
} = useExecutionData();
4449
const { data: currentUserDetails } = useUserDetails();
4550

51+
const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
52+
4653
const editorRoute = componentSpec.name
4754
? `/editor/${encodeURIComponent(componentSpec.name)}`
4855
: "";
@@ -95,11 +102,13 @@ export const RunDetails = () => {
95102
const actions: ActionOrReactNode[] = [];
96103

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

105114
if (canAccessEditorSpec && componentSpec.name) {
@@ -123,57 +132,68 @@ export const RunDetails = () => {
123132
}
124133

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

0 commit comments

Comments
 (0)