From f1f06eec803f85e0563dd2c88186b63e9d70dd60 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Thu, 22 Aug 2024 14:42:04 +0800
Subject: [PATCH] feat: add home icon in left bottom

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../header/collapsible_nav_group_enabled.tsx  |  1 +
 .../application/components/home_icon.test.tsx | 19 ++++++++++++++++++
 .../application/components/home_icon.tsx      | 20 +++++++++++++++++++
 src/plugins/home/public/plugin.ts             | 15 ++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/plugins/home/public/application/components/home_icon.test.tsx
 create mode 100644 src/plugins/home/public/application/components/home_icon.tsx

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index af67974ecb9d..d196e760e43b 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/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,
           })}
diff --git a/src/plugins/home/public/application/components/home_icon.test.tsx b/src/plugins/home/public/application/components/home_icon.test.tsx
new file mode 100644
index 000000000000..2b51c58019c4
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/src/plugins/home/public/application/components/home_icon.tsx b/src/plugins/home/public/application/components/home_icon.tsx
new file mode 100644
index 000000000000..705b89df9bab
--- /dev/null
+++ b/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);
+      }}
+    />
+  );
+}
diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts
index fe1099a8e635..2711db1a9033 100644
--- a/src/plugins/home/public/plugin.ts
+++ b/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(),