Added id to top and second level items

Author: fhlavac

app/javascript/components/main-menu/second-level.jsx

@@ -13,7 +13,7 @@ const SecondLevel = ({
   type,
   active,
 }) => (
-  <li className={`menu-list-group-item ${items.length > 0 ? 'tertiary-nav-item-pf' : ''} ${active ? 'active' : ''}`} data-target={`#menu-${id}`}>
+  <li className={`menu-list-group-item ${items.length > 0 ? 'tertiary-nav-item-pf' : ''} ${active ? 'active' : ''}`} data-target={`#menu-${id}`} id={`menu_item_${id}`}>
     <a
       href={getHrefByType(type, href, id)}
       onClick={(event) => {

app/javascript/components/main-menu/top-level.jsx

@@ -4,8 +4,6 @@ import { MenuItem } from './main-menu';
 import { menuProps, RecursiveMenuProps } from './recursive-props';
 import { getHrefByType, getTargetByType, handleUnsavedChanges } from './helpers';
 
-console.log('top level');
-
 const TopLevel = ({
   level,
   id,
@@ -16,36 +14,51 @@ const TopLevel = ({
   items,
   type,
 }) => (
-  <li className={`${active ? 'active' : ''} menu-list-group-item secondary-nav-item-pf`} data-target={`#menu-${id}`}>
-    <a
-      onClick={(event) => {
-        if (handleUnsavedChanges(type) === false) {
-          event.preventDefault();
-        }
-        return false;
-      }}
-      href={getHrefByType(type, href, id)}
-      target={getTargetByType(type)}
-      className="top-level"
-    >
-      <span className={iconClass} />
-      <span className="list-group-item-value">{title}</span>
-    </a>
-    {items.length > 0 && (
-    <React.Fragment>
-      <div className="nav-pf-secondary-nav" id={`menu-${id}`}>
-        <div className="nav-item-pf-header">
-          <a className="secondary-collapse-toggle-pf top-level" data-toggle="collapse-secondary-nav" >
-            <span>{title}</span>
-          </a>
+  items.length > 0 ? (
+    <li className={`${active ? 'active' : ''} menu-list-group-item secondary-nav-item-pf`} data-target={`#menu-${id}`} id={`menu_item_${id}`}>
+      <a
+        onClick={(event) => {
+          if (handleUnsavedChanges(type) === false) {
+            event.preventDefault();
+          }
+          return false;
+        }}
+        href={getHrefByType(type, href, id)}
+        target={getTargetByType(type)}
+        className="top-level"
+      >
+        <span className={iconClass} />
+        <span className="list-group-item-value">{title}</span>
+      </a>
+      <React.Fragment>
+        <div className="nav-pf-secondary-nav" id={`menu-${id}`}>
+          <div className="nav-item-pf-header">
+            <a className="secondary-collapse-toggle-pf top-level" data-toggle="collapse-secondary-nav" >
+              <span>{title}</span>
+            </a>
+          </div>
+          <ul className="list-group">
+            {items.map(props => <MenuItem key={props.id} level={level + 1} {...props} />)}
+          </ul>
         </div>
-        <ul className="list-group">
-          {items.map(props => <MenuItem key={props.id} level={level + 1} {...props} />)}
-        </ul>
-      </div>
-    </React.Fragment>
-    )}
-  </li>
+      </React.Fragment>
+    </li>
+  ) : (
+    <li className="menu-list-group-item" id={`menu_item_${id}`}>
+      <a
+        onClick={(event) => {
+          if (handleUnsavedChanges(type) === false) {
+            event.preventDefault();
+          }
+          return false;
+        }}
+        href={getHrefByType(type, href, id)}
+      >
+        <span className={iconClass} />
+        <span className="list-group-item-value">{title}</span>
+      </a>
+    </li>
+  )
 );
 
 TopLevel.propTypes = {