Updates view yaml button (#1434)

Mbeaulne · web-flow · commit 96dcbf7c4c98 · 2025-11-27T10:53:23.000-05:00
## Description Redesigned the YAML viewer component to improve usability across the application. The CodeViewer component now supports a collapsed state with a "View YAML" button that expands to show the full YAML content. This change applies to Pipeline Details, Run Details, and Task Overview sections. Key improvements: - Added a compact "View YAML" button that replaces the previously expanded YAML sections - Removed the collapsible Pipeline YAML section in favor of the new button approach - Improved styling and consistency of the code viewer component - Added proper fullscreen toggle functionality with keyboard support ## Type of Change - [x] Improvement - [x] Cleanup/Refactor ## Checklist - [x] I have tested this does not break current pipelines / runs functionality - [x] I have tested the changes on staging ## Test Instructions 1. Navigate to Pipeline Details, Run Details, or Task Overview sections 2. Verify the new "View YAML" button appears instead of the expanded YAML section 3. Click the button to view the YAML in fullscreen mode 4. Test that ESC key closes the fullscreen view 5. Verify the YAML content is correctly displayed and formatted 6\. Verify logs and component library implimentation are still functionl as they were before [yaml.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/4429657d-b138-4d41-9bff-0558afb322a5.mov" />](https://app.graphite.com/user-attachments/video/4429657d-b138-4d41-9bff-0558afb322a5.mov)
diff --git a/src/components/Editor/PipelineDetails.tsx b/src/components/Editor/PipelineDetails.tsx
@@ -2,11 +2,6 @@ import { Frown, Network } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import { Icon } from "@/components/ui/icon";
 import { InlineStack } from "@/components/ui/layout";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -34,8 +29,6 @@ const PipelineDetails = () => {
 
   const notify = useToastNotification();
 
-  const [isYamlOpen, setIsYamlOpen] = useState(false);
-
   // Utility function to convert TypeSpecType to string
   const typeSpecToString = (typeSpec?: TypeSpecType): string => {
     if (typeSpec === undefined) {
@@ -134,6 +127,14 @@ const PipelineDetails = () => {
         <RenamePipeline />
       </div>
 
+      <div className="flex gap-2 flex-wrap items-center">
+        <TaskImplementation
+          displayName={componentSpec.name ?? "Pipeline"}
+          componentSpec={componentSpec}
+          showInlineContent={false}
+        />
+      </div>
+
       {/* General Metadata */}
       <div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
         <div className="flex flex-wrap gap-6">
@@ -339,30 +340,6 @@ const PipelineDetails = () => {
           </InfoBox>
         )}
       </div>
-
-      {/* Pipeline YAML */}
-      <Collapsible
-        open={isYamlOpen}
-        onOpenChange={setIsYamlOpen}
-        className="h-full"
-      >
-        <CollapsibleTrigger asChild>
-          <InlineStack
-            gap="1"
-            blockAlign="center"
-            className="font-medium text-md cursor-pointer"
-          >
-            <Icon name={isYamlOpen ? "ChevronDown" : "ChevronRight"} />
-            Pipeline YAML
-          </InlineStack>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="mt-1 h-9/10 flex-1 min-h-0">
-          <TaskImplementation
-            displayName={componentSpec.name ?? "Pipeline"}
-            componentSpec={componentSpec}
-          />
-        </CollapsibleContent>
-      </Collapsible>
     </div>
   );
 };
diff --git a/src/components/PipelineRun/RunDetails.tsx b/src/components/PipelineRun/RunDetails.tsx
@@ -125,7 +125,12 @@ export const RunDetails = () => {
       )}
 
       <div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 flex-wrap items-center">
+          <TaskImplementation
+            displayName={componentSpec.name ?? "Pipeline"}
+            componentSpec={componentSpec}
+            showInlineContent={false}
+          />
           {canAccessEditorSpec && componentSpec.name && (
             <InspectPipelineButton pipelineName={componentSpec.name} />
           )}
@@ -229,20 +234,6 @@ export const RunDetails = () => {
           </div>
         </div>
       </div>
-
-      {componentSpec && (
-        <div className="flex flex-col h-full">
-          <div className="font-medium text-md flex items-center gap-1 cursor-pointer">
-            Pipeline YAML
-          </div>
-          <div className="mt-1 h-full min-h-0 flex-1">
-            <TaskImplementation
-              displayName={componentSpec.name ?? "Pipeline"}
-              componentSpec={componentSpec}
-            />
-          </div>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/shared/CodeViewer/CodeViewer.tsx b/src/components/shared/CodeViewer/CodeViewer.tsx
@@ -1,31 +1,48 @@
-import { Maximize2, X as XIcon } from "lucide-react";
+import { FileCode2, Maximize2, X as XIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
+import TooltipButton from "../Buttons/TooltipButton";
 import { FullscreenElement } from "../FullscreenElement";
 import CodeSyntaxHighlighter from "./CodeSyntaxHighlighter";
 
 interface CodeViewerProps {
   code: string;
   language?: string;
-  title?: string;
   filename?: string;
+  showInlineContent?: boolean;
 }
 
-const DEFAULT_HEIGHT = 128;
+const DEFAULT_CODE_VIEWER_HEIGHT = 128;
 
 const CodeViewer = ({
   code,
   language = "yaml",
   filename = "",
+  showInlineContent = true,
 }: CodeViewerProps) => {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const shouldRenderInlineCode = showInlineContent || isFullscreen;
 
   const handleEnterFullscreen = useCallback(() => {
     setIsFullscreen((prev) => !prev);
   }, []);
 
+  const compactButton = (
+    <TooltipButton
+      type="button"
+      variant="outline"
+      size="icon"
+      tooltip="View YAML"
+      onClick={handleEnterFullscreen}
+      aria-label="View YAML"
+    >
+      <FileCode2 className="size-4" />
+    </TooltipButton>
+  );
+
   useEffect(() => {
     const handleEscapeKey = (e: KeyboardEvent) => {
       if (isFullscreen && e.key === "Escape") {
@@ -44,33 +61,46 @@ const CodeViewer = ({
 
   return (
     <FullscreenElement fullscreen={isFullscreen}>
-      <div className="h-full bg-slate-900 flex flex-col">
-        <div className="flex justify-between items-center p-2 sticky top-0 z-10 bg-slate-800">
-          <h3 className="text-secondary font-medium ml-2">
-            {filename} <span className="text-sm">(Read Only)</span>
-          </h3>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={handleEnterFullscreen}
-            className="text-gray-300 hover:text-slate-800"
-            title={isFullscreen ? "Exit fullscreen" : "View fullscreen"}
-          >
-            {isFullscreen ? (
-              <XIcon className="size-4" />
-            ) : (
-              <Maximize2 className="size-4" />
-            )}
-          </Button>
-        </div>
-        <div className="flex-1 relative">
-          <div
-            className="absolute inset-0 overflow-y-auto bg-slate-900"
-            style={{ willChange: "transform", minHeight: DEFAULT_HEIGHT }}
-          >
-            <CodeSyntaxHighlighter code={code} language={language} />
+      <div
+        className={cn(
+          "flex flex-col transition-shadow duration-150",
+          shouldRenderInlineCode ? "bg-slate-900 h-full rounded-md" : "bg-transparent",
+        )}
+      >
+        {shouldRenderInlineCode ? (
+          <div className="flex items-center justify-between gap-2 bg-slate-800 sticky top-0 z-10 rounded-t-md px-3 py-2.5">
+            <div className="flex items-baseline gap-2">
+              <span className="font-semibold text-base text-secondary">{filename}</span>
+              <span className="text-sm text-secondary">(Read Only)</span>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={handleEnterFullscreen}
+              className="text-gray-200 hover:text-white"
+              title={isFullscreen ? "Exit fullscreen" : "View fullscreen"}
+              aria-label={isFullscreen ? "Exit fullscreen" : "View fullscreen"}
+            >
+              {isFullscreen ? <XIcon className="size-4" /> : <Maximize2 className="size-4" />}
+            </Button>
+          </div>
+        ) : (
+          <div className="flex">{compactButton}</div>
+        )}
+        {shouldRenderInlineCode && (
+          <div className="flex-1 relative">
+            <div
+              className="absolute inset-0 overflow-y-auto bg-slate-900"
+              style={{
+                willChange: "transform",
+                minHeight: DEFAULT_CODE_VIEWER_HEIGHT,
+              }}
+            >
+              <CodeSyntaxHighlighter code={code} language={language} />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </FullscreenElement>
   );
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx
@@ -135,7 +135,7 @@ const TaskNodeCard = () => {
               <CopyIcon />
             </div>
           ),
-          variant: "secondary",
+          variant: "outline",
           tooltip: "Duplicate Task",
           onClick: callbacks.onDuplicate,
         },
@@ -145,7 +145,7 @@ const TaskNodeCard = () => {
               <CircleFadingArrowUp />
             </div>
           ),
-          variant: "secondary",
+          variant: "outline",
           className: cn(isCustomComponent && "hidden"),
           tooltip: "Update Task from Source URL",
           onClick: callbacks.onUpgrade,
@@ -160,7 +160,7 @@ const TaskNodeCard = () => {
             <Icon name="Workflow" size="sm" />
           </div>
         ),
-        variant: "secondary",
+        variant: "outline",
         tooltip: `Enter Subgraph: ${subgraphDescription}`,
         onClick: () => navigateToSubgraph(taskId),
       });
@@ -173,7 +173,7 @@ const TaskNodeCard = () => {
             <Icon name="FilePenLine" size="sm" />
           </div>
         ),
-        variant: "secondary",
+        variant: "outline",
         tooltip: "Edit Component Definition",
         onClick: handleEditComponent,
       });
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx
@@ -61,6 +61,18 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
   const executionId = details?.child_task_execution_ids?.[taskId];
   const canRename = !readOnly && isSubgraph;
 
+  const detailActions = [
+    ...(actions?.map((action) => (
+      <TooltipButton {...action} key={action.tooltip?.toString()} />
+    )) ?? []),
+    <TaskImplementation
+      key="task-implementation-action"
+      displayName={name}
+      componentSpec={componentSpec}
+      showInlineContent={false}
+    />,
+  ];
+
   return (
     <BlockStack className="h-full" data-context-panel="task-overview">
       <InlineStack gap="2" blockAlign="center" className="px-2 pb-2">
@@ -118,24 +130,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
               status={status}
               hasDeletionConfirmation={false}
               readOnly={readOnly}
-              additionalSection={[
-                {
-                  title: "Component YAML",
-                  isCollapsed: true,
-                  component: (
-                    <div className="h-[512px]">
-                      <TaskImplementation
-                        key="task-implementation"
-                        displayName={name}
-                        componentSpec={componentSpec}
-                      />
-                    </div>
-                  ),
-                },
-              ]}
-              actions={actions?.map((action) => (
-                <TooltipButton {...action} key={action.tooltip?.toString()} />
-              ))}
+              actions={detailActions}
             />
           </TabsContent>
           <TabsContent value="io">
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
@@ -35,7 +35,6 @@ const LogDisplay = ({
           <CodeViewer
             code={logs.log_text || ""}
             language="text"
-            title="Execution Logs"
             filename="Execution Logs"
           />
         </div>
@@ -45,7 +44,6 @@ const LogDisplay = ({
           <CodeViewer
             code={logs.system_error_exception_full || ""}
             language="text"
-            title="System Error Logs"
             filename="System Error Logs"
           />
         </div>
diff --git a/src/components/shared/TaskDetails/Details.tsx b/src/components/shared/TaskDetails/Details.tsx
@@ -265,10 +265,10 @@ const TaskDetails = ({
           </div>
         ))}
 
-        <div className="px-3 py-2 flex flex-row gap-2" key={0}>
+        <div className="px-3 py-2 flex flex-wrap gap-2" key={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="secondary" onClick={handleDownloadYaml}>
+              <Button variant="outline" onClick={handleDownloadYaml}>
                 <DownloadIcon />
               </Button>
             </TooltipTrigger>
@@ -277,10 +277,7 @@ const TaskDetails = ({
           {pythonOriginalCode && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button
-                  variant="secondary"
-                  onClick={stringToPythonCodeDownload}
-                >
+                <Button variant="outline" onClick={stringToPythonCodeDownload}>
                   <FaPython className="mr-1" />
                 </Button>
               </TooltipTrigger>
@@ -289,7 +286,7 @@ const TaskDetails = ({
           )}
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="secondary" onClick={handleCopyYaml}>
+              <Button variant="outline" onClick={handleCopyYaml}>
                 <ClipboardIcon />
               </Button>
             </TooltipTrigger>
diff --git a/src/components/shared/TaskDetails/Implementation.tsx b/src/components/shared/TaskDetails/Implementation.tsx
@@ -3,19 +3,18 @@ import { useMemo } from "react";
 
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import type { ComponentSpec } from "@/utils/componentSpec";
-import { getComponentFilename } from "@/utils/getComponentFilename";
 
 interface TaskImplementationProps {
   displayName: string;
   componentSpec: ComponentSpec;
+  showInlineContent?: boolean;
 }
 
 const TaskImplementation = ({
   displayName,
   componentSpec,
+  showInlineContent = true,
 }: TaskImplementationProps) => {
-  const filename = getComponentFilename(componentSpec);
-
   const code = useMemo(
     () =>
       yaml.dump(componentSpec, {
@@ -38,8 +37,8 @@ const TaskImplementation = ({
     <CodeViewer
       code={code}
       language="yaml"
-      title={`${displayName} Implementation (read-only)`}
-      filename={filename}
+      filename={displayName}
+      showInlineContent={showInlineContent}
     />
   );
 };
diff --git a/src/utils/getComponentFilename.ts b/src/utils/getComponentFilename.ts
