Dynamic release notes rendering (#1136)

* Dynamic release notes rendering

* feat: style fetched data

* chore: refactor styling

* chore: align text

* feat: add lab version fetching

* fix: version filtering

---------

Co-authored-by: AlexIchenskiy <[email protected]>

Author: katarinasupe

components/release-notes/LabReleasesClient.js

@@ -0,0 +1,75 @@
+import { MDXProvider } from "nextra/mdx";
+import { useEffect, useState } from "react";
+
+const sectionEmojiByType = {
+    'new': '✨',
+    'improvement': '🛠️',
+    'fix': '🐞',
+}
+
+const sectionNameByType = {
+    'new': 'New features',
+    'improvement': 'Improvements',
+    'fix': 'Bug fixes',
+}
+
+// version should be a single string (e.g. '2.1.0', '3.1.2' etc.)
+export default function LabReleasesClient({ version }) {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        // Fetch data from the API
+        const fetchData = async () => {
+            try {
+                const res = await fetch("https://lab.memgraph.com/public/versions");
+                const json = await res.json();
+                setData(json.items || []); // Ensure data is always an array
+            } catch (error) {
+                setData([]);
+                setLoading(false);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    if (loading) {
+        return <p>Loading release notes...</p>;
+    }
+
+    if (!Array.isArray(data) || data.length === 0) {
+        return <>Could not load release notes for version {version}.</>;
+    }
+
+    const filteredDataArray = data.filter(item => item.version === version);
+
+    if (filteredDataArray.length === 0) {
+        return <p>No release notes found for version {version}.</p>;
+    }
+
+    const filteredData = filteredDataArray[0];
+
+    return (
+        <div>
+            {filteredData.sections.map((section, index) => (
+                <div key={index}>
+                    <h4 className="custom-header">{sectionEmojiByType[section.type.toLowerCase()] || ''} {sectionNameByType[section.type.toLowerCase()] || ''}</h4>
+                    <ul className="list-disc ltr:ml-6 rtl:mr-6">
+                        {section.items.map((itemGroup, i) => (
+                            <li className={`my-3 ${i === 0 ? 'mt-6' : ''}`} key={i}>
+                                {itemGroup.map((entry, j) => (
+                                    <span key={j}>
+                                        {entry.type === "code" ? <code>{entry.value}</code> : entry.value}
+                                    </span>
+                                ))}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    );
+}

pages/release-notes.mdx

@@ -5,6 +5,9 @@ description: Stay up-to-date with the latest features and updates within Memgrap
 
 import { Callout } from 'nextra/components'
 import { Cards } from 'nextra/components'
+import { useMemo } from 'react';
+import LabReleasesClient from "/components/release-notes/LabReleasesClient";
+
 
 # Release notes
 
@@ -284,32 +287,7 @@ updated.
 
 ### Lab v3.1.0 - Mar 12th, 2025
 
-{<h4 className="custom-header">✨ New features</h4>}
-
-- The query summary now shows the number of
-  hops in your Cypher query.
-- You can delete all or specific recent
-  connections from the login page.
-
-{<h4 className="custom-header">🛠️ Improvements</h4>}
-
-- Username and password authentication is
-  always visible when connecting to a Memgraph
-  HA cluster.
-- Screenshot size is reduced when saving
-  Graph Style Script (GSS) to remote storage,
-  preventing request and storage limit issues.
-
-{<h4 className="custom-header">🐞 Bug fixes</h4>}
-
-- Vector indexes in `cypherl` import files and
-  multiple queries are now handled correctly in
-  separate transactions.
-- Fixed an issue where Lab couldn't find query
-  module names with mixed case.
-- Fixed an issue where connecting to a custom
-  database in an HA cluster resulted in an "Unknown
-  database name" error.
+<LabReleasesClient version="3.1.0" />
 
 ## Previous releases
 

utils/fetchData.js

@@ -0,0 +1,8 @@
+export async function fetchData() {
+    const res = await fetch("https://lab.memgraph.com/public/versions"); 
+    const json = await res.json();
+  
+    console.log("API Response:", json); // ✅ Debugging API response
+  
+    return json.items || []; // Extract the 'items' array or return an empty array
+  }