Fixes #37025 - Navigation should only have 1 item expended

Author: MariaAga

webpack/assets/javascripts/react_app/components/Layout/Navigation.js

@@ -82,6 +82,14 @@ const Navigation = ({
     [items.length, currentPath]
   );
 
+  const [currentExpanded, setCurrentExpanded] = useState(
+    subItemToItemMap[pathFragment(getCurrentPath())]
+  );
+  useEffect(() => {
+    setCurrentExpanded(subItemToItemMap[pathFragment(getCurrentPath())]);
+    // we only want to run this when we get new items from the API to set the default expanded item, which is the current location
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items.length]);
   if (!items.length) return null;
 
   const clickAndNavigate = (_onClick, href, event) => {
@@ -104,18 +112,22 @@ const Navigation = ({
             <NavExpandable
               ouiaId={`nav-expandable-${index}`}
               title={titleWithIcon(title, iconClass)}
-              groupId="nav-expandable-group-1"
+              groupId={`nav-expandable-group-${title}`}
               isActive={
                 subItemToItemMap[pathFragment(getCurrentPath())] === title
               }
-              isExpanded={
-                subItemToItemMap[pathFragment(getCurrentPath())] === title
-              }
+              isExpanded={currentExpanded === title}
               className={className}
               onClick={() => onMouseOver(index)}
               onFocus={() => {
                 onMouseOver(index);
               }}
+              onExpand={() => {
+                // if the current expanded item is the same as the clicked item, collapse it
+                const isExpanded = currentExpanded === title;
+                // only have 1 item expanded at a time
+                setCurrentExpanded(isExpanded ? null : title);
+              }}
             >
               {groups.map((group, groupIndex) =>
                 groupIndex === 0 ? (

webpack/assets/javascripts/react_app/components/Layout/__tests__/Layout.test.js

@@ -28,7 +28,8 @@ describe('Layout', () => {
     await act(async () => {
       await fireEvent.click(screen.getByText('Hosts'));
     });
+    expect(screen.getByText('Monitor')).toBeVisible();
+    expect(screen.getByText('Dashboard')).not.toBeVisible();
     expect(screen.getByText('All Hosts')).toBeVisible();
-    expect(screen.getByText('Dashboard')).toBeVisible();
   });
 });