Feat update nav panel

common/router.ts

@@ -32,7 +32,7 @@ export const ROUTES: RouteConfig[] = [
     path: routerPaths.registerModel,
     label: 'Register Model',
     Component: RegisterModelForm,
-    nav: true,
+    nav: false,
   },
   {
     path: routerPaths.modelList,

public/components/__tests__/nav_panel.test.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { NavPanel } from '../nav_panel';
+import { render, screen } from '../../../test/test_utils';
+
+describe('<NavPanel />', () => {
+  it('should render "Overview" with selected status', () => {
+    render(<NavPanel />, { route: '/overview' });
+
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+    expect(screen.getByText('Overview').closest('a[class*=isSelected]')).toBeInTheDocument();
+  });
+  it('should render "Model Registry" with selected status', () => {
+    render(<NavPanel />, { route: '/model-registry/model-list' });
+
+    expect(screen.getByText('Model Registry')).toBeInTheDocument();
+    expect(screen.getByText('Model Registry').closest('a[class*=isSelected]')).toBeInTheDocument();
+  });
+  it('should render nothing if nav item not exists', () => {
+    const { container } = render(<NavPanel />, { route: '/model-registry/model/123' });
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

public/components/app.tsx

@@ -46,9 +46,7 @@ export const MlCommonsPluginApp = ({
     <I18nProvider>
       <>
         <EuiPage>
-          <EuiPageSideBar>
-            <NavPanel />
-          </EuiPageSideBar>
+          <NavPanel />
           <EuiPageBody component="main">
             <Switch>
               {ROUTES.map(({ path, Component, exact }) => (

public/components/nav_panel.tsx

@@ -4,29 +4,47 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import { EuiSideNav } from '@elastic/eui';
+import { EuiSideNav, EuiPageSideBar, htmlIdGenerator, OuiSideNav } from '@elastic/eui';
 import { generatePath, Link, matchPath, useLocation } from 'react-router-dom';
 
 import { ROUTES } from '../../common/router';
 
 export function NavPanel() {
   const location = useLocation();
   const items = useMemo(
-    () =>
-      ROUTES.filter((item) => !!item.label && item.nav).map((item) => {
-        const href = generatePath(item.path);
-        return {
-          id: href,
-          name: item.label,
-          href,
-          isSelected: matchPath(location.pathname, { path: item.path, exact: item.exact }) !== null,
-        };
-      }),
+    () => [
+      {
+        name: 'Machine Learning',
+        id: htmlIdGenerator('machine-learning')(),
+        items: ROUTES.filter((item) => !!item.label && item.nav).map((item) => {
+          const href = generatePath(item.path);
+          return {
+            id: href,
+            name: item.label,
+            href,
+            isSelected:
+              matchPath(location.pathname, { path: item.path, exact: item.exact }) !== null,
+          };
+        }),
+      },
+    ],
     [location.pathname]
   );
-  const renderItem = useCallback(
-    ({ href, ...restProps }) => <Link to={href!} {...restProps} />,
-    []
+  const renderItem = useCallback((item) => {
+    if (!item.href) {
+      return item.children;
+    }
+    const { href, ...restProps } = item;
+    return <Link to={href!} {...restProps} />;
+  }, []);
+
+  if (items[0].items.every((item) => !item.isSelected)) {
+    return null;
+  }
+
+  return (
+    <EuiPageSideBar>
+      <EuiSideNav items={items} renderItem={renderItem} />
+    </EuiPageSideBar>
   );
-  return <EuiSideNav items={items} renderItem={renderItem} />;
 }