Side Nav Redesign (#263) (#285)

* Side Nav Redesign Signed-off-by: saimedhi <[email protected]> * Side Nav Redesign Signed-off-by: saimedhi <[email protected]> --------- Signed-off-by: saimedhi <[email protected]> Signed-off-by: Sai Medhini Reddy Maryada <[email protected]> (cherry picked from commit f0552d7) Co-authored-by: Sai Medhini Reddy Maryada <[email protected]>
opensearch-project · Aug 15, 2024 · 6f100cf · 6f100cf
1 parent 45240ad
commit 6f100cf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}
             />
           )}