Skip to content

Commit 5fe4a59

Browse files
camielvscamielvs
committed
Rework CodeViewer Implementation
1 parent 6d6c600 commit 5fe4a59

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,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 & 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 { Text } from "@/components/ui/typography";
47
import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
@@ -12,7 +15,10 @@ import {
1215
isStatusComplete,
1316
isStatusInProgress,
1417
} from "@/services/executionService";
18+
import { componentSpecToText } from "@/utils/yaml";
1519

20+
import TooltipButton from "../shared/Buttons/TooltipButton";
21+
import { CodeViewer } from "../shared/CodeViewer";
1622
import {
1723
ActionBlock,
1824
type ActionOrReactNode,
@@ -24,7 +30,6 @@ import PipelineIO from "../shared/Execution/PipelineIO";
2430
import { InfoBox } from "../shared/InfoBox";
2531
import { LoadingScreen } from "../shared/LoadingScreen";
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
: "";
@@ -90,11 +97,13 @@ export const RunDetails = () => {
9097
const actions: ActionOrReactNode[] = [];
9198

9299
actions.push(
93-
<TaskImplementation
94-
displayName={componentSpec.name ?? "Pipeline"}
95-
componentSpec={componentSpec}
96-
showInlineContent={false}
97-
/>,
100+
<TooltipButton
101+
variant="outline"
102+
tooltip="View YAML"
103+
onClick={() => setIsYamlFullscreen(true)}
104+
>
105+
<Icon name="FileCodeCorner" />
106+
</TooltipButton>,
98107
);
99108

100109
if (canAccessEditorSpec && componentSpec.name) {
@@ -122,57 +131,68 @@ export const RunDetails = () => {
122131
}
123132

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

0 commit comments

Comments
 (0)