From 2849019a0a5272944be9fb9eeeec413d636e61e6 Mon Sep 17 00:00:00 2001
From: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com>
Date: Thu, 15 Aug 2024 12:22:40 -0700
Subject: [PATCH] Side Nav Redesign (#263)

* Side Nav Redesign

Signed-off-by: saimedhi <saimedhi@amazon.com>

* Side Nav Redesign

Signed-off-by: saimedhi <saimedhi@amazon.com>

---------

Signed-off-by: saimedhi <saimedhi@amazon.com>
Signed-off-by: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com>
(cherry picked from commit f0552d740e6551f79284c9350da2f5b156907993)
---
 public/app.tsx        |  9 +++++++--
 public/plugin.ts      | 13 ++++++++++++-
 public/render_app.tsx |  7 ++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/public/app.tsx b/public/app.tsx
index 78e29ef1..b5acf359 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -34,15 +34,20 @@ import './global-styles.scss';
 
 interface Props extends RouteComponentProps {
   setHeaderActionMenu: (menuMount?: MountPoint) => void;
+  hideInAppSideNavBar: boolean;
 }
 
 export const FlowFrameworkDashboardsApp = (props: Props) => {
-  const { setHeaderActionMenu } = props;
+  const { setHeaderActionMenu, hideInAppSideNavBar } = props;
   const location = useLocation();
   const queryParams = getDataSourceFromURL(location);
   const dataSourceId = queryParams.dataSourceId;
   const sidebar = (
-    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
+    <EuiPageSideBar
+      style={{ minWidth: 190 }}
+      hidden={hideInAppSideNavBar}
+      paddingSize="l"
+    >
       <EuiSideNav
         style={{ width: 190 }}
         items={[
diff --git a/public/plugin.ts b/public/plugin.ts
index f8c406ff..fd67a6c6 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -6,6 +6,8 @@
 import {
   AppMountParameters,
   CoreSetup,
+  DEFAULT_NAV_GROUPS,
+  DEFAULT_APP_CATEGORIES,
   CoreStart,
   Plugin,
 } from '../../../src/core/public';
@@ -34,6 +36,7 @@ export class FlowFrameworkDashboardsPlugin
     core: CoreSetup,
     plugins: any
   ): FlowFrameworkDashboardsPluginSetup {
+    const hideInAppSideNavBar = core.chrome.navGroup.getNavGroupEnabled();
     // Register the plugin in the side navigation
     core.application.register({
       id: PLUGIN_ID,
@@ -52,9 +55,17 @@ export class FlowFrameworkDashboardsPlugin
         const routeServices = configureRoutes(coreStart);
         setCore(coreStart);
         setRouteService(routeServices);
-        return renderApp(coreStart, params);
+        return renderApp(coreStart, params, hideInAppSideNavBar);
       },
     });
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.search, [
+      {
+        id: PLUGIN_ID,
+        title: 'Search Studio',
+        category: DEFAULT_APP_CATEGORIES.configure,
+        showInAllNavGroup: true,
+      },
+    ]);
     setDataSourceManagementPlugin(plugins.dataSourceManagement);
     const enabled = !!plugins.dataSource;
     setDataSourceEnabled({ enabled });
diff --git a/public/render_app.tsx b/public/render_app.tsx
index b1c03d88..c642c6bc 100644
--- a/public/render_app.tsx
+++ b/public/render_app.tsx
@@ -14,7 +14,11 @@ import { store } from './store';
 // styling
 import './global-styles.scss';
 
-export const renderApp = (coreStart: CoreStart, params: AppMountParameters) => {
+export const renderApp = (
+  coreStart: CoreStart,
+  params: AppMountParameters,
+  hideInAppSideNavBar: boolean
+) => {
   // This is so our base element stretches to fit the entire webpage
   params.element.className = 'stretch-absolute';
   ReactDOM.render(
@@ -24,6 +28,7 @@ export const renderApp = (coreStart: CoreStart, params: AppMountParameters) => {
           render={(props) => (
             <FlowFrameworkDashboardsApp
               setHeaderActionMenu={params.setHeaderActionMenu}
+              hideInAppSideNavBar={hideInAppSideNavBar}
               {...props}
             />
           )}