refactor(cdk-explorer): remove non-functional collapse from template view

The gutter fold markers were computed but never wired into CodeViewer, so collapsing never worked. Removes the collapse state, Collapse/Expand All buttons, collapseContent, and the line-adjustment helpers; the YAML/JSON toggle stays.

Author: megha-narayanan

packages/@aws-cdk/cdk-explorer/frontend/components/TemplateViewer.tsx

@@ -29,7 +29,6 @@ export function TemplateViewer({
   onResourceDoubleClick,
 }: TemplateViewerProps): JSX.Element {
   const [format, setFormat] = React.useState<Format>('yaml');
-  const [collapsedResources, setCollapsedResources] = React.useState<Set<string>>(new Set());
 
   const { displayContent, displayResources, sections } = React.useMemo(() => {
     if (format === 'json') {
@@ -42,71 +41,23 @@ export function TemplateViewer({
     return jsonToYaml(jsonContent);
   }, [jsonContent, resources, format]);
 
-  const filteredContent = React.useMemo(() => {
-    if (collapsedResources.size === 0) return displayContent;
-    return collapseContent(displayContent, sections, collapsedResources);
-  }, [displayContent, sections, collapsedResources]);
-
   // Resolve the highlight from the rendered format's own ranges (JSON block in
-  // JSON view, YAML block in YAML view), so the highlight is always in the
-  // coordinate system actually on screen. Derived, so toggling format re-resolves.
-  const adjustedHighlight = React.useMemo(() => {
+  // JSON view, YAML block in YAML view), so it is always in the coordinate
+  // system on screen. Derived, so toggling format re-resolves.
+  const highlight = React.useMemo(() => {
     const block = highlightLogicalId ? displayResources[highlightLogicalId]?.block : undefined;
-    if (!block) return undefined;
-    if (collapsedResources.size === 0) return { start: block.startLine, end: block.endLine };
-    return adjustLineNumbers(block.startLine, block.endLine, sections, collapsedResources);
-  }, [highlightLogicalId, displayResources, sections, collapsedResources]);
-
-  const toggleResource = React.useCallback((logicalId: string) => {
-    setCollapsedResources((prev) => {
-      const next = new Set(prev);
-      if (next.has(logicalId)) {
-        next.delete(logicalId);
-      } else {
-        next.add(logicalId);
-      }
-      return next;
-    });
-  }, []);
+    return block ? { start: block.startLine, end: block.endLine } : undefined;
+  }, [highlightLogicalId, displayResources]);
 
   const handleDoubleClick = React.useCallback((line: number) => {
-    const originalLine = collapsedResources.size === 0
-      ? line
-      : reverseAdjustLine(line, sections, collapsedResources);
-
-    // Check if the user double-clicked a collapse placeholder
-    const lines = filteredContent.split('\n');
-    const clickedLine = lines[line - 1] ?? '';
-    if (clickedLine.includes('▸') && clickedLine.includes('(collapsed)')) {
-      const match = clickedLine.match(/▸\s+(\S+)/);
-      if (match) {
-        toggleResource(match[1]);
-        return;
-      }
-    }
-
-    if (onResourceDoubleClick) {
-      // Map the clicked line back to the resource that owns it (display-coordinate
-      // sections), so the reverse jump is identity-based like the forward one.
-      const section = sections.find((s) => originalLine >= s.startLine && originalLine <= s.endLine);
-      if (section) {
-        onResourceDoubleClick(section.logicalId);
-      }
-    }
-  }, [filteredContent, sections, collapsedResources, onResourceDoubleClick, toggleResource]);
-
-  const gutterDecorations = React.useMemo(() => {
-    const decorations = new Map<number, { icon: string; logicalId: string }>();
-    for (const section of sections) {
-      const adjustedLine = collapsedResources.size === 0
-        ? section.startLine
-        : adjustSingleLine(section.startLine, sections, collapsedResources);
-      if (adjustedLine !== undefined && !collapsedResources.has(section.logicalId)) {
-        decorations.set(adjustedLine, { icon: '▾', logicalId: section.logicalId });
-      }
+    if (!onResourceDoubleClick) return;
+    // Map the clicked line back to the resource that owns it, so the reverse
+    // jump is identity-based like the forward one.
+    const section = sections.find((s) => line >= s.startLine && line <= s.endLine);
+    if (section) {
+      onResourceDoubleClick(section.logicalId);
     }
-    return decorations;
-  }, [sections, collapsedResources]);
+  }, [sections, onResourceDoubleClick]);
 
   return (
     <div style={WRAPPER_STYLE}>
@@ -121,26 +72,15 @@ export function TemplateViewer({
           style={format === 'json' ? TOGGLE_ACTIVE_STYLE : TOGGLE_STYLE}
           onClick={() => setFormat('json')}
         >JSON</button>
-        {sections.length > 0 && (
-          <>
-            <span style={SEPARATOR_STYLE}>|</span>
-            <button type="button" style={TOGGLE_STYLE} onClick={() => setCollapsedResources(new Set(sections.map((s) => s.logicalId)))}>
-              Collapse All
-            </button>
-            <button type="button" style={TOGGLE_STYLE} onClick={() => setCollapsedResources(new Set())}>
-              Expand All
-            </button>
-          </>
-        )}
       </div>
       <CodeViewer
-        content={filteredContent}
+        content={displayContent}
         language={format}
-        highlightStart={adjustedHighlight?.start}
-        highlightEnd={adjustedHighlight?.end}
+        highlightStart={highlight?.start}
+        highlightEnd={highlight?.end}
         highlightColor={highlightColor}
         navCounter={navCounter}
-        scrollToLine={adjustedHighlight?.start}
+        scrollToLine={highlight?.start}
         onLineDoubleClick={handleDoubleClick}
       />
     </div>
@@ -195,76 +135,6 @@ function jsonToYaml(jsonContent: string): YamlResult {
   return { displayContent, displayResources, sections: buildSections(displayResources) };
 }
 
-function collapseContent(content: string, sections: ResourceSection[], collapsed: Set<string>): string {
-  const lines = content.split('\n');
-  const result: string[] = [];
-  let i = 0;
-
-  const sortedSections = [...sections].sort((a, b) => a.startLine - b.startLine);
-
-  while (i < lines.length) {
-    const lineNum = i + 1;
-    const section = sortedSections.find((s) => lineNum === s.startLine && collapsed.has(s.logicalId));
-    if (section) {
-      result.push(lines[i]);
-      result.push(`    ▸ ${section.logicalId} (collapsed — double-click to expand)`);
-      i = section.endLine;
-    } else {
-      result.push(lines[i]);
-      i++;
-    }
-  }
-
-  return result.join('\n');
-}
-
-function adjustLineNumbers(
-  start: number,
-  end: number,
-  sections: ResourceSection[],
-  collapsed: Set<string>,
-): { start: number; end: number } | undefined {
-  const adjustedStart = adjustSingleLine(start, sections, collapsed);
-  const adjustedEnd = adjustSingleLine(end, sections, collapsed);
-  if (adjustedStart === undefined || adjustedEnd === undefined) return undefined;
-  return { start: adjustedStart, end: adjustedEnd };
-}
-
-function adjustSingleLine(
-  line: number,
-  sections: ResourceSection[],
-  collapsed: Set<string>,
-): number | undefined {
-  let offset = 0;
-  for (const section of [...sections].sort((a, b) => a.startLine - b.startLine)) {
-    if (!collapsed.has(section.logicalId)) continue;
-    const collapsedLines = section.endLine - section.startLine - 1;
-    if (line > section.startLine && line <= section.endLine) {
-      return undefined;
-    }
-    if (line > section.endLine) {
-      offset += collapsedLines - 1;
-    }
-  }
-  return line - offset;
-}
-
-function reverseAdjustLine(
-  displayLine: number,
-  sections: ResourceSection[],
-  collapsed: Set<string>,
-): number {
-  let offset = 0;
-  for (const section of [...sections].sort((a, b) => a.startLine - b.startLine)) {
-    if (!collapsed.has(section.logicalId)) continue;
-    const collapsedLines = section.endLine - section.startLine - 1;
-    if (displayLine > section.startLine - offset) {
-      offset += collapsedLines - 1;
-    }
-  }
-  return displayLine + offset;
-}
-
 const WRAPPER_STYLE: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
@@ -297,8 +167,3 @@ const TOGGLE_ACTIVE_STYLE: React.CSSProperties = {
   color: '#ffffff',
   borderColor: '#0972d3',
 };
-
-const SEPARATOR_STYLE: React.CSSProperties = {
-  color: '#d1d5db',
-  margin: '0 4px',
-};