feat: add home icon in left bottom

Signed-off-by: SuZhou-Joe <[email protected]>

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx

@@ -435,6 +435,7 @@ export function CollapsibleNavGroupEnabled({
         <div
           className={classNames({
             'bottom-container': true,
+            'eui-xScroll': true,
             'bottom-container-collapsed': !isNavOpen,
             'bottom-container-expanded': isNavOpen,
           })}

src/plugins/home/public/application/components/home_icon.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { HomeIcon } from './home_icon';
+import { coreMock } from '../../../../../core/public/mocks';
+
+describe('<HomeIcon />', () => {
+  it('should call chrome.navGroup.setCurrentNavGroup and application.navigateToApp methods from core service when click', () => {
+    const coreStartMock = coreMock.createStart();
+    const { container } = render(<HomeIcon core={coreStartMock} appId="foo" />);
+    const component = container.children[0];
+    fireEvent.click(component);
+    expect(coreStartMock.application.navigateToApp).toBeCalledWith('foo');
+  });
+});

src/plugins/home/public/application/components/home_icon.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButtonIcon } from '@elastic/eui';
+import { CoreStart } from 'opensearch-dashboards/public';
+
+export function HomeIcon({ core, appId }: { core: CoreStart; appId: string }) {
+  return (
+    <EuiButtonIcon
+      aria-label="go-to-home"
+      iconType="home"
+      onClick={() => {
+        core.application.navigateToApp(appId);
+      }}
+    />
+  );
+}

src/plugins/home/public/plugin.ts

@@ -37,6 +37,7 @@ import {
 } from 'opensearch-dashboards/public';
 import { i18n } from '@osd/i18n';
 import { first } from 'rxjs/operators';
+import React from 'react';
 
 import { Branding } from 'src/core/types';
 import {
@@ -70,6 +71,8 @@ import {
   ContentManagementPluginStart,
 } from '../../content_management/public';
 import { initHome, setupHome } from './application/home_render';
+import { toMountPoint } from '../../opensearch_dashboards_react/public';
+import { HomeIcon } from './application/components/home_icon';
 
 export interface HomePluginStartDependencies {
   data: DataPublicPluginStart;
@@ -255,6 +258,18 @@ export class HomePublicPlugin
       });
     }
 
+    if (core.chrome.navGroup.getNavGroupEnabled()) {
+      core.chrome.navControls.registerLeftBottom({
+        order: 0,
+        mount: toMountPoint(
+          React.createElement(HomeIcon, {
+            core,
+            appId: PLUGIN_ID,
+          })
+        ),
+      });
+    }
+
     return {
       featureCatalogue: this.featuresCatalogueRegistry,
       getSavedHomepageLoader: () => this.sectionTypeService.getSavedHomepageLoader(),