From ce75b386db704f221dd4599f37861672451e6bb8 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 20 May 2025 11:15:14 -0400
Subject: [PATCH 1/3] Fix(Navigation): Convert nav data from object to array of
 objects

---
 src/components/Navigation.astro              |  7 +-
 src/components/Navigation.tsx                | 14 ++--
 src/components/__tests__/Navigation.test.tsx | 86 +++++++++++---------
 3 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index e302cbf..d3dbc02 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -15,8 +15,7 @@ const collections = await Promise.all(
 )
 
 const navDataRaw = collections.flat();
-const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section));
-const navData: Record<string, TextContentEntry[]> = {};
+const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section as string));
 
 const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
     (acc, section) => {
@@ -37,7 +36,7 @@ const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
   )
 
 const sortedSections = [...orderedSections, ...unorderedSections.sort()]
-sortedSections.map((section) => {
+const navData = sortedSections.map((section) => {
   const entries = navDataRaw
     .filter((entry) => entry.data.section === section)
     .map(entry => ({ id: entry.id, data: { id: entry.data.id, section }} as TextContentEntry))
@@ -61,7 +60,7 @@ sortedSections.map((section) => {
     ]
   }
 
-  navData[section] = navEntries;
+  return { section, navEntries}
 })
 
 ---
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 4218eec..ccb2d9a 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -3,8 +3,12 @@ import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core'
 import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
 
+export interface NavData {
+  section: string
+  navEntries: TextContentEntry[]
+}
 interface NavigationProps {
-  navData: Record<string, TextContentEntry[]>
+  navData: NavData[]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
@@ -29,11 +33,11 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
         <NavList>
-          {Object.entries(navData).map(([key, value], index) => (
+          {navData.map(({ section, navEntries }) => (
             <NavSection
-              key={index}
-              entries={value}
-              sectionId={key}
+              key={section}
+              entries={navEntries}
+              sectionId={section}
               activeItem={activeItem}
             />
           ))}
diff --git a/src/components/__tests__/Navigation.test.tsx b/src/components/__tests__/Navigation.test.tsx
index 05ea5bb..280f597 100644
--- a/src/components/__tests__/Navigation.test.tsx
+++ b/src/components/__tests__/Navigation.test.tsx
@@ -1,46 +1,52 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Navigation } from '../Navigation'
-import { TextContentEntry } from '../NavEntry'
-
-const mockEntries: Record<string, TextContentEntry[]> = {
-  'section one': [
-    {
-      id: 'entry1',
-      data: { id: 'Entry1', section: 'section-one' },
-    },
-    {
-      id: 'entry2',
-      data: { id: 'Entry2', section: 'section-one' },
-    },
-    {
-      id: 'entry3',
-      data: { id: 'Entry3', section: 'section-one' },
-    },
-    {
-      id: 'entry4',
-      data: { id: 'Entry4', section: 'section-one' },
-    },
-    {
-      id: 'entry5',
-      data: { id: 'Entry5', section: 'section-one' },
-    },
-  ],
-  'section two': [
-    {
-      id: 'entry6',
-      data: { id: 'Entry6', section: 'section-two' },
-    },
-    {
-      id: 'entry7',
-      data: { id: 'Entry7', section: 'section-two' },
-    },
-    {
-      id: 'entry8',
-      data: { id: 'Entry8', section: 'section-two' },
-    },
-  ],
-}
+import type { NavData } from '../Navigation'
+
+const mockEntries: NavData[] = [
+  {
+    section: 'section one',
+    navEntries: [
+      {
+        id: 'entry1',
+        data: { id: 'Entry1', section: 'section-one' },
+      },
+      {
+        id: 'entry2',
+        data: { id: 'Entry2', section: 'section-one' },
+      },
+      {
+        id: 'entry3',
+        data: { id: 'Entry3', section: 'section-one' },
+      },
+      {
+        id: 'entry4',
+        data: { id: 'Entry4', section: 'section-one' },
+      },
+      {
+        id: 'entry5',
+        data: { id: 'Entry5', section: 'section-one' },
+      },
+    ],
+  },
+  {
+    section: 'section two',
+    navEntries: [
+      {
+        id: 'entry6',
+        data: { id: 'Entry6', section: 'section-two' },
+      },
+      {
+        id: 'entry7',
+        data: { id: 'Entry7', section: 'section-two' },
+      },
+      {
+        id: 'entry8',
+        data: { id: 'Entry8', section: 'section-two' },
+      },
+    ],
+  },
+]
 
 it('renders without crashing', () => {
   render(<Navigation navData={mockEntries} />)

From 179b2b7a45caf1fd7dc4ed532702cf8fcc27ce1c Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 21 May 2025 11:41:32 -0400
Subject: [PATCH 2/3] Convert navData to array of arrays rather than array of
 objects

---
 src/components/Navigation.tsx                 | 26 +++---
 src/components/__tests__/Navigation.test.tsx  | 84 +++++++++----------
 .../__snapshots__/Navigation.test.tsx.snap    |  8 +-
 3 files changed, 55 insertions(+), 63 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index ccb2d9a..b2e6a9c 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -2,13 +2,8 @@ import { useEffect, useState } from 'react'
 import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core'
 import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
-
-export interface NavData {
-  section: string
-  navEntries: TextContentEntry[]
-}
 interface NavigationProps {
-  navData: NavData[]
+  navData: TextContentEntry[][]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
@@ -33,14 +28,17 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
         <NavList>
-          {navData.map(({ section, navEntries }) => (
-            <NavSection
-              key={section}
-              entries={navEntries}
-              sectionId={section}
-              activeItem={activeItem}
-            />
-          ))}
+          {navData.map((navEntries) => {
+            const { section } = navEntries[0].data
+            return (
+              <NavSection
+                key={section}
+                entries={navEntries}
+                sectionId={section}
+                activeItem={activeItem}
+              />
+            )
+          })}
         </NavList>
       </Nav>
     </PageSidebarBody>
diff --git a/src/components/__tests__/Navigation.test.tsx b/src/components/__tests__/Navigation.test.tsx
index 280f597..24d597d 100644
--- a/src/components/__tests__/Navigation.test.tsx
+++ b/src/components/__tests__/Navigation.test.tsx
@@ -1,51 +1,45 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Navigation } from '../Navigation'
-import type { NavData } from '../Navigation'
-
-const mockEntries: NavData[] = [
-  {
-    section: 'section one',
-    navEntries: [
-      {
-        id: 'entry1',
-        data: { id: 'Entry1', section: 'section-one' },
-      },
-      {
-        id: 'entry2',
-        data: { id: 'Entry2', section: 'section-one' },
-      },
-      {
-        id: 'entry3',
-        data: { id: 'Entry3', section: 'section-one' },
-      },
-      {
-        id: 'entry4',
-        data: { id: 'Entry4', section: 'section-one' },
-      },
-      {
-        id: 'entry5',
-        data: { id: 'Entry5', section: 'section-one' },
-      },
-    ],
-  },
-  {
-    section: 'section two',
-    navEntries: [
-      {
-        id: 'entry6',
-        data: { id: 'Entry6', section: 'section-two' },
-      },
-      {
-        id: 'entry7',
-        data: { id: 'Entry7', section: 'section-two' },
-      },
-      {
-        id: 'entry8',
-        data: { id: 'Entry8', section: 'section-two' },
-      },
-    ],
-  },
+import { type TextContentEntry } from '../NavEntry'
+
+const mockEntries: TextContentEntry[][] = [
+  [
+    {
+      id: 'entry1',
+      data: { id: 'Entry1', section: 'section-one' },
+    },
+    {
+      id: 'entry2',
+      data: { id: 'Entry2', section: 'section-one' },
+    },
+    {
+      id: 'entry3',
+      data: { id: 'Entry3', section: 'section-one' },
+    },
+    {
+      id: 'entry4',
+      data: { id: 'Entry4', section: 'section-one' },
+    },
+    {
+      id: 'entry5',
+      data: { id: 'Entry5', section: 'section-one' },
+    },
+  ],
+  [
+    {
+      id: 'entry6',
+      data: { id: 'Entry6', section: 'section-two' },
+    },
+    {
+      id: 'entry7',
+      data: { id: 'Entry7', section: 'section-two' },
+    },
+    {
+      id: 'entry8',
+      data: { id: 'Entry8', section: 'section-two' },
+    },
+  ],
 ]
 
 it('renders without crashing', () => {
diff --git a/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap b/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap
index 12e78ed..6dae245 100644
--- a/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`matches snapshot 1`] = `
           <button
             aria-expanded="true"
             class="pf-v6-c-nav__link"
-            id="nav-section-section one"
+            id="nav-section-section-one"
           >
             Section one
             <span
@@ -52,7 +52,7 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <section
-            aria-labelledby="nav-section-section one"
+            aria-labelledby="nav-section-section-one"
             class="pf-v6-c-nav__subnav"
           >
             <ul
@@ -162,7 +162,7 @@ exports[`matches snapshot 1`] = `
           <button
             aria-expanded="false"
             class="pf-v6-c-nav__link"
-            id="nav-section-section two"
+            id="nav-section-section-two"
           >
             Section two
             <span
@@ -188,7 +188,7 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <section
-            aria-labelledby="nav-section-section two"
+            aria-labelledby="nav-section-section-two"
             class="pf-v6-c-nav__subnav"
             hidden=""
           >

From 644dfc3b4b10d030acd2549e9c2697a9fe676cab Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 21 May 2025 11:43:14 -0400
Subject: [PATCH 3/3] Add accidentally unsaved change for the last commit

---
 src/components/Navigation.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index d3dbc02..f46334a 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -60,7 +60,7 @@ const navData = sortedSections.map((section) => {
     ]
   }
 
-  return { section, navEntries}
+  return navEntries
 })
 
 ---