BIT-13129 fix render md

Author: Olerinskaia

src/components/StarterQueriesPanel.js

@@ -14,39 +14,70 @@ const STARTER_SUBSCRIPTIONS_URL =
 
 function parseMarkdownHeadings(md) {
     const tree = [];
-    let currentSection = null;
+
+    let currentH2 = null;
+    let currentH3 = null;
     let currentItem = null;
     let readingDescription = false;
 
-    md.split('\n').forEach(line => {
+    const isIgnoredSection = title =>
+        title === 'Table of Contents' || title === 'More APIs' || title === 'More on Streams';
+
+    md.split('\n').forEach(rawLine => {
+        const line = rawLine.trimEnd();
+
         if (line.startsWith('## ')) {
             const sectionTitle = line.slice(3).trim();
-            if (
-                sectionTitle !== 'Table of Contents' &&
-                sectionTitle !== 'More APIs' &&
-                sectionTitle !== 'More on Streams'
-            ) {
-                currentSection = { title: sectionTitle, children: [] };
-                tree.push(currentSection);
-            } else currentSection = null;
+            if (!isIgnoredSection(sectionTitle)) {
+                currentH2 = { title: sectionTitle, children: [] };
+                tree.push(currentH2);
+            } else {
+                currentH2 = null;
+            }
+            currentH3 = null;
+            currentItem = null;
             readingDescription = false;
+            return;
+        }
+
+        if (!currentH2) return;
+
+        if (line.startsWith('### ')) {
+            const subsectionTitle = line.slice(4).trim();
+            currentH3 = { title: subsectionTitle, children: [] };
+            currentH2.children.push(currentH3);
             currentItem = null;
-        } else if (currentSection && line.startsWith('### ')) {
-            currentItem = { title: line.slice(4).trim(), description: '', url: '' };
-            currentSection.children.push(currentItem);
+            readingDescription = false;
+            return;
+        }
+
+        if (line.startsWith('#### ')) {
+            const itemTitle = line.slice(5).trim();
+            const parent = currentH3 || currentH2;
+            if (!parent) return;
+
+            currentItem = { title: itemTitle, description: '', url: '' };
+            if (!parent.children) parent.children = [];
+            parent.children.push(currentItem);
             readingDescription = true;
-        } else if (readingDescription && currentItem) {
+            return;
+        }
+
+        if (readingDescription && currentItem) {
             const text = line.trim();
+            if (!text) return;
+
             if (/^[▶►]/.test(text)) {
                 const match = text.match(/\[(.+?)\]\((.+?)\)/);
                 if (match) currentItem.url = match[2];
                 readingDescription = false;
                 currentItem = null;
-            } else if (text) {
+            } else {
                 currentItem.description += (currentItem.description ? ' ' : '') + text;
             }
         }
     });
+
     return tree;
 }
 
@@ -72,12 +103,19 @@ const StarterQueriesPanel = observer(({ type }) => {
     const { user } = UserStore;
     const url = type === 'queries' ? STARTER_QUERIES_URL : STARTER_SUBSCRIPTIONS_URL;
     const tree = useMarkdownTree(url);
-    const [expandedKey, setExpandedKey] = useState(null);
+    const [expandedKeys, setExpandedKeys] = useState(() => new Set());
 
-    const toggleSection = useCallback((index) => {
-        const key = `${type}-${index}`;
-        setExpandedKey(prev => (prev === key ? null : key));
-    }, [type]);
+    const toggleNode = useCallback((key) => {
+        setExpandedKeys(prev => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            } else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
 
     const extractId = url => url.split('/').pop();
 
@@ -107,43 +145,45 @@ const StarterQueriesPanel = observer(({ type }) => {
         [history, updateQuery, index, user, query, setQuery]
     );
 
-    const renderTree = (treeToRender) => (
-        <ul className="tree-root">
-            {treeToRender.map((section, idx) => {
-                const key = `${type}-${idx}`;
-                const isOpen = expandedKey === key;
-                return (
-                    <li key={key} className="tree-section">
-                        <div className={`tree-node ${isOpen ? 'node-open' : ''}`} onClick={() => toggleSection(idx)}>
-                            {section.children.length > 0 && (
+    const renderTree = (nodes, parentKey = '') => (
+        <ul className={parentKey ? 'tree-children' : 'tree-root'}>
+            {nodes.map((node, idx) => {
+                const key = parentKey ? `${parentKey}-${idx}` : `${type}-${idx}`;
+                const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+
+                if (hasChildren) {
+                    const isOpen = expandedKeys.has(key);
+                    return (
+                        <li key={key} className="tree-section">
+                            <div
+                                className={`tree-node ${isOpen ? 'node-open' : ''}`}
+                                onClick={() => toggleNode(key)}
+                            >
                                 <span className="tree-toggle">{isOpen ? '▾' : '▸'}</span>
-                            )}
-                            {section.title}
-                        </div>
-                        {isOpen && (
-                            <ul className="tree-children">
-                                {section.children.map((item, j) => {
-                                    const tipId = `tooltip-${type}-${idx}-${j}`;
-                                    return (
-                                        <li key={`${key}-${j}`} className="tree-child"
-                                            onClick={() => handleItemClick(item.url, item.title)}
-                                        >
-                                            <OverlayTrigger
-                                                placement="bottom"
-                                                delay={{ show: 250, hide: 100 }}
-                                                overlay={<Tooltip id={tipId}>{item.description}</Tooltip>}
-                                            >
-                        <span
-                            className="child-link"
-                        ><i className="bi bi-terminal me-2"></i>
-                            {item.title}
-                        </span>
-                                            </OverlayTrigger>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        )}
+                                {node.title}
+                            </div>
+                            {isOpen && renderTree(node.children, key)}
+                        </li>
+                    );
+                }
+
+                const tipId = `tooltip-${key}`;
+                return (
+                    <li
+                        key={key}
+                        className="tree-child"
+                        onClick={() => handleItemClick(node.url, node.title)}
+                    >
+                        <OverlayTrigger
+                            placement="bottom"
+                            delay={{ show: 250, hide: 100 }}
+                            overlay={<Tooltip id={tipId}>{node.description}</Tooltip>}
+                        >
+                            <span className="child-link">
+                                <i className="bi bi-terminal me-2"></i>
+                                {node.title}
+                            </span>
+                        </OverlayTrigger>
                     </li>
                 );
             })}

src/components/modal/StartersQueriesComponents.scss

@@ -2,7 +2,7 @@
   color: $base-font-color;
   // max-height: 70vh;
   overflow-y: auto;
-  padding: 1rem;
+  padding: 0.3rem 0.5rem;
 }
 
 .tree-root {
@@ -68,12 +68,16 @@
 
 .tree-children {
   list-style: none;
-  padding-left: 1.8rem;
+  padding-left: 1.4rem;
   margin: 0;
 
 
 }
 
+.tree-children .tree-children {
+  padding-left: 0.8rem;
+}
+
 .tree-child {
   margin: 0.25rem 0;
   cursor:pointer;