add sidenav highlight support for children of features (#51569)

web/packages/teleport/src/Login/useLogin.ts

@@ -205,7 +205,6 @@ export type State = ReturnType<typeof useLogin> & {
  * moveToFront returns a copy of an array with the element that matches the condition to the front of it.
  */
 function moveToFront<T>(arr: T[], condition: (item: T) => boolean): T[] {
-  console.log(arr);
   const copy = [...arr];
   const index = copy.findIndex(condition);
 

web/packages/teleport/src/Navigation/Navigation.tsx

@@ -188,7 +188,7 @@ function getNavSubsectionForRoute(
   features: TeleportFeature[],
   route: history.Location<unknown> | Location
 ): NavigationSubsection {
-  const feature = features
+  let feature = features
     .filter(feature => Boolean(feature.route))
     .find(feature =>
       matchPath(route.pathname, {
@@ -197,6 +197,13 @@ function getNavSubsectionForRoute(
       })
     );
 
+  // If this is a child feature, use its parent as the subsection instead.
+  // We do this because children of features don't appear as subsections in the sidenav, but we want to highlight
+  // their parent's subsection as active.
+  if (feature?.parent) {
+    feature = features.find(f => f instanceof feature.parent);
+  }
+
   if (
     !feature ||
     (!feature.category && !feature.topMenuItem && !feature.navigationItem)