From 3d4b3627a2a4bd67462ad0853a65283a1fa12908 Mon Sep 17 00:00:00 2001
From: Rodney Norris <rodney.norris@elastic.co>
Date: Fri, 13 Sep 2024 11:22:38 -0500
Subject: [PATCH] [Search][App Search] support engine name in solution nav
 (#192781)

## Summary

Updated how we build the app search side items for the solution nav to
remove the renderItem handler and place all the engine links under the
engine name. This will only be used for the Search solution nav so we
are accepting the trade-off of losing the engine badges in the side nav
when using the solution nav.

### Screenshots
Engine page w/ Solution Nav
<img width="1482" alt="image"
src="https://github.com/user-attachments/assets/a7c88e82-2482-430a-9106-0708d152c903">
Engine Page w/ Classic Nav
<img width="1482" alt="image"
src="https://github.com/user-attachments/assets/c7cdac9e-97ff-4e58-849f-595da880e7db">
---
 .../app_search/components/layout/nav.tsx        | 17 +++++++++++++++++
 .../components/layout/page_template.tsx         | 10 +++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
index 20bbfe38e5f39..c70971ebc6ece 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
@@ -65,3 +65,20 @@ export const useAppSearchNav = () => {
   // to cause all our navItems to properly render as nav links.
   return [{ id: '', name: '', items: navItems }];
 };
+
+// Process App Search side nav items for use in the new Solution Nav
+export const cleanAppSearchNavItems = (
+  items: Array<EuiSideNavItemType<unknown>>
+): Array<EuiSideNavItemType<unknown>> => {
+  const enginesItem = items.find((item) => item.id === 'engines');
+  if (enginesItem && enginesItem.items && enginesItem.items.length > 0) {
+    const engineChildren = enginesItem.items;
+    const engineNameItem = engineChildren.find((item) => item.id === 'engineName');
+    if (engineNameItem && engineNameItem.renderItem) {
+      delete engineNameItem.renderItem;
+      engineNameItem.items = engineChildren.filter((item) => item.id !== 'engineName');
+      enginesItem.items = [engineNameItem];
+    }
+  }
+  return items;
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
index 7e4d72c232b33..35792e2d0cbf9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
@@ -16,7 +16,7 @@ import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplateWrapper, PageTemplateProps } from '../../../shared/layout';
 import { SendAppSearchTelemetry } from '../../../shared/telemetry';
 
-import { useAppSearchNav } from './nav';
+import { useAppSearchNav, cleanAppSearchNavItems } from './nav';
 
 export const AppSearchPageTemplate: React.FC<
   Omit<PageTemplateProps, 'useEndpointHeaderActions'>
@@ -27,14 +27,14 @@ export const AppSearchPageTemplate: React.FC<
 
   React.useEffect(() => {
     if (chromeStyle === 'classic') return;
+    const appSearch = cleanAppSearchNavItems(navItems?.[0]?.items);
     // We update the new side nav definition with the selected app items
-    updateSideNavDefinition({ appSearch: navItems?.[0]?.items });
-  }, [chromeStyle, navItems, updateSideNavDefinition]);
-  React.useEffect(() => {
+    updateSideNavDefinition({ appSearch });
+
     return () => {
       updateSideNavDefinition({ appSearch: undefined });
     };
-  }, [updateSideNavDefinition]);
+  }, [chromeStyle, navItems, updateSideNavDefinition]);
 
   return (
     <EnterpriseSearchPageTemplateWrapper