[chat]Expand chat entry point to all pages (#10878)

wanglam · opensearch-changeset-bot[bot] · web-flow · commit 12f0b2349e4a · 2025-11-07T08:45:08.000-08:00
* Fix primary right position Signed-off-by: Lin Wang <wonglam@amazon.com> * Make chatbot available on all pages Signed-off-by: Lin Wang <wonglam@amazon.com> * Changeset file for PR #10878 created/updated * Changeset file for PR #10878 created/updated * Changeset file for PR #10878 created/updated * Fix unit tests Signed-off-by: Lin Wang <wonglam@amazon.com> * Remove comment code Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
diff --git a/changelogs/fragments/10878.yml b/changelogs/fragments/10878.yml
@@ -0,0 +1,5 @@
+fix:
+- PrimaryHeaderRight not in correct position ([#10878](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10878))
+
+feat:
+- [chat]Expand chat entry point to all pages ([#10878](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10878))
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -597,7 +597,7 @@ export function Header({
         <EuiHeaderSection grow={false}>{renderRecentItems()}</EuiHeaderSection>
 
         {renderBreadcrumbs(false, false)}
-
+        <EuiHeaderSection grow={true} />
         {renderPrimaryHeaderRight()}
       </EuiHeader>
 
diff --git a/src/plugins/chat/public/components/chat_header_button.tsx b/src/plugins/chat/public/components/chat_header_button.tsx
@@ -5,12 +5,16 @@
 
 import React, { useCallback, useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { CoreStart, MountPoint, SIDECAR_DOCKED_MODE } from '../../../../core/public';
+import { useUnmount } from 'react-use';
+import { CoreStart, SIDECAR_DOCKED_MODE } from '../../../../core/public';
 import { ChatWindow, ChatWindowInstance } from './chat_window';
 import { ChatProvider } from '../contexts/chat_context';
 import { ChatService } from '../services/chat_service';
 import { GlobalAssistantProvider } from '../../../context_provider/public';
-import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+import {
+  MountPointPortal,
+  OpenSearchDashboardsContextProvider,
+} from '../../../opensearch_dashboards_react/public';
 import { ContextProviderStart, TextSelectionMonitor } from '../../../context_provider/public';
 import './chat_header_button.scss';
 import { SuggestedActionsService } from '../services/suggested_action';
@@ -38,8 +42,12 @@ export const ChatHeaderButton = React.forwardRef<ChatHeaderButtonInstance, ChatH
     const [isOpen, setIsOpen] = useState<boolean>(chatService.isWindowOpen());
     const [layoutMode, setLayoutMode] = useState<ChatLayoutMode>(chatService.getWindowMode());
     const sideCarRef = useRef<{ close: () => void }>();
-    const mountPointRef = useRef<HTMLDivElement>(null);
     const chatWindowRef = useRef<ChatWindowInstance>(null);
+    const flyoutMountPoint = useRef(null);
+
+    const setMountPoint = useCallback((mountPoint) => {
+      flyoutMountPoint.current = mountPoint;
+    }, []);
 
     // Register ChatWindow ref with ChatService for external access
     useEffect(() => {
@@ -50,18 +58,7 @@ export const ChatHeaderButton = React.forwardRef<ChatHeaderButtonInstance, ChatH
     }, [chatService]);
 
     const openSidecar = useCallback(() => {
-      if (!mountPointRef.current) return;
-
-      const mountPoint: MountPoint = (element) => {
-        if (mountPointRef.current) {
-          element.appendChild(mountPointRef.current);
-        }
-        return () => {
-          if (mountPointRef.current && element.contains(mountPointRef.current)) {
-            element.removeChild(mountPointRef.current);
-          }
-        };
-      };
+      if (!flyoutMountPoint.current) return;
 
       const sidecarConfig =
         layoutMode === ChatLayoutMode.FULLSCREEN
@@ -76,7 +73,7 @@ export const ChatHeaderButton = React.forwardRef<ChatHeaderButtonInstance, ChatH
               isHidden: false,
             };
 
-      sideCarRef.current = core.overlays.sidecar.open(mountPoint, {
+      sideCarRef.current = core.overlays.sidecar.open(flyoutMountPoint.current, {
         className: `chat-sidecar chat-sidecar--${layoutMode}`,
         config: sidecarConfig,
       });
@@ -172,13 +169,12 @@ export const ChatHeaderButton = React.forwardRef<ChatHeaderButtonInstance, ChatH
     }, [chatService, isOpen, openSidecar, closeSidecar]);
 
     // Cleanup on unmount
-    useEffect(() => {
-      return () => {
-        if (sideCarRef.current) {
-          sideCarRef.current.close();
-        }
-      };
-    }, []);
+    useUnmount(() => {
+      if (sideCarRef.current) {
+        chatService.setWindowState(false);
+        sideCarRef.current.close();
+      }
+    });
 
     return (
       <>
@@ -197,35 +193,36 @@ export const ChatHeaderButton = React.forwardRef<ChatHeaderButtonInstance, ChatH
         </EuiToolTip>
 
         {/* Mount point for sidecar content */}
-        <div
-          ref={mountPointRef}
-          className={`chatHeaderButton__mountPoint ${
-            isOpen
-              ? 'chatHeaderButton__mountPoint--visible'
-              : 'chatHeaderButton__mountPoint--hidden'
-          }`}
-        >
-          <div className="chatHeaderButton__content">
-            <OpenSearchDashboardsContextProvider services={{ core, contextProvider, charts }}>
-              <GlobalAssistantProvider
-                onToolsUpdated={(tools) => {
-                  // Tools updated in chat
-                }}
-              >
-                <ChatProvider
-                  chatService={chatService}
-                  suggestedActionsService={suggestedActionsService}
+        <MountPointPortal setMountPoint={setMountPoint}>
+          <div
+            className={`chatHeaderButton__mountPoint ${
+              isOpen
+                ? 'chatHeaderButton__mountPoint--visible'
+                : 'chatHeaderButton__mountPoint--hidden'
+            }`}
+          >
+            <div className="chatHeaderButton__content">
+              <OpenSearchDashboardsContextProvider services={{ core, contextProvider, charts }}>
+                <GlobalAssistantProvider
+                  onToolsUpdated={(tools) => {
+                    // Tools updated in chat
+                  }}
                 >
-                  <ChatWindow
-                    layoutMode={layoutMode}
-                    onToggleLayout={toggleLayoutMode}
-                    ref={chatWindowRef}
-                  />
-                </ChatProvider>
-              </GlobalAssistantProvider>
-            </OpenSearchDashboardsContextProvider>
+                  <ChatProvider
+                    chatService={chatService}
+                    suggestedActionsService={suggestedActionsService}
+                  >
+                    <ChatWindow
+                      layoutMode={layoutMode}
+                      onToggleLayout={toggleLayoutMode}
+                      ref={chatWindowRef}
+                    />
+                  </ChatProvider>
+                </GlobalAssistantProvider>
+              </OpenSearchDashboardsContextProvider>
+            </div>
           </div>
-        </div>
+        </MountPointPortal>
       </>
     );
   }
diff --git a/src/plugins/chat/public/plugin.test.ts b/src/plugins/chat/public/plugin.test.ts
@@ -42,7 +42,7 @@ describe('ChatPlugin', () => {
       },
       chrome: {
         navControls: {
-          registerRight: jest.fn(),
+          registerPrimaryHeaderRight: jest.fn(),
         },
         globalSearch: {
           registerSearchCommand: jest.fn(),
@@ -88,7 +88,7 @@ describe('ChatPlugin', () => {
     it('should register chat button in header nav controls', () => {
       plugin.start(mockCoreStart, mockDeps);
 
-      expect(mockCoreStart.chrome.navControls.registerRight).toHaveBeenCalledWith({
+      expect(mockCoreStart.chrome.navControls.registerPrimaryHeaderRight).toHaveBeenCalledWith({
         order: 1000,
         mount: expect.any(Function),
       });
@@ -111,7 +111,7 @@ describe('ChatPlugin', () => {
       // ChatService should still be created (uses proxy endpoint)
       expect(ChatService).toHaveBeenCalledWith();
       expect(startContract.chatService).toBeInstanceOf(ChatService);
-      expect(mockCoreStart.chrome.navControls.registerRight).toHaveBeenCalled();
+      expect(mockCoreStart.chrome.navControls.registerPrimaryHeaderRight).toHaveBeenCalled();
     });
 
     it('should not initialize when plugin is disabled', () => {
@@ -124,7 +124,7 @@ describe('ChatPlugin', () => {
 
       expect(ChatService).not.toHaveBeenCalled();
       expect(startContract.chatService).toBeUndefined();
-      expect(mockCoreStart.chrome.navControls.registerRight).not.toHaveBeenCalled();
+      expect(mockCoreStart.chrome.navControls.registerPrimaryHeaderRight).not.toHaveBeenCalled();
     });
 
     it('should not initialize when enabled is missing (defaults to false)', () => {
@@ -136,7 +136,7 @@ describe('ChatPlugin', () => {
 
       expect(ChatService).not.toHaveBeenCalled();
       expect(startContract.chatService).toBeUndefined();
-      expect(mockCoreStart.chrome.navControls.registerRight).not.toHaveBeenCalled();
+      expect(mockCoreStart.chrome.navControls.registerPrimaryHeaderRight).not.toHaveBeenCalled();
     });
   });
 
@@ -147,12 +147,12 @@ describe('ChatPlugin', () => {
       plugin.start(mockCoreStart, mockDeps);
 
       // Get the mount function that was registered
-      const registerCall = (mockCoreStart.chrome.navControls.registerRight as jest.Mock).mock
-        .calls[0];
+      const registerCall = (mockCoreStart.chrome.navControls
+        .registerPrimaryHeaderRight as jest.Mock).mock.calls[0];
       mountFunction = registerCall[0].mount;
     });
 
-    it('should show chat button when app starts with "explore"', () => {
+    it('should show chat button', () => {
       const mockElement = document.createElement('div');
       const mockUnmount = jest.fn();
       (toMountPoint as jest.Mock).mockReturnValue(jest.fn().mockReturnValue(mockUnmount));
@@ -167,101 +167,6 @@ describe('ChatPlugin', () => {
       // Cleanup
       cleanup();
     });
-
-    it('should hide chat button when app does not start with "explore"', () => {
-      const mockElement = document.createElement('div');
-      const mockUnmount = jest.fn();
-      (toMountPoint as jest.Mock).mockReturnValue(jest.fn().mockReturnValue(mockUnmount));
-
-      // Reset the mock to clear previous calls
-      (toMountPoint as jest.Mock).mockClear();
-
-      // Start with a fresh BehaviorSubject for non-explore app
-      const nonExploreAppId$ = new BehaviorSubject<string | undefined>('dashboard');
-      mockCoreStart.application.currentAppId$ = nonExploreAppId$;
-
-      // Re-register the plugin with the new app ID
-      plugin.start(mockCoreStart, mockDeps);
-      const registerCall = (mockCoreStart.chrome.navControls.registerRight as jest.Mock).mock
-        .calls[1];
-      const newMountFunction = registerCall[0].mount;
-
-      const cleanup = newMountFunction(mockElement);
-
-      // Should not mount the component for non-explore apps
-      expect(toMountPoint).not.toHaveBeenCalled();
-
-      // Cleanup
-      cleanup();
-    });
-
-    it('should handle app changes from explore to non-explore', () => {
-      const mockElement = document.createElement('div');
-      const mockUnmount = jest.fn();
-      (toMountPoint as jest.Mock).mockReturnValue(jest.fn().mockReturnValue(mockUnmount));
-
-      const cleanup = mountFunction(mockElement);
-
-      // Start with explore app
-      mockCurrentAppId$.next('explore-metrics');
-      expect(toMountPoint).toHaveBeenCalled();
-
-      // Change to non-explore app
-      mockCurrentAppId$.next('discover');
-      expect(mockUnmount).toHaveBeenCalled();
-
-      // Cleanup
-      cleanup();
-    });
-
-    it('should handle undefined app id', () => {
-      const mockElement = document.createElement('div');
-
-      // Reset the mock to clear previous calls
-      (toMountPoint as jest.Mock).mockClear();
-
-      // Create a new plugin instance for this test
-      const testPlugin = new ChatPlugin(mockInitializerContext);
-
-      // Start with a fresh BehaviorSubject for undefined app
-      const undefinedAppId$ = new BehaviorSubject<string | undefined>(undefined);
-      const testCoreStart = {
-        ...mockCoreStart,
-        application: {
-          currentAppId$: undefinedAppId$,
-        },
-      };
-
-      // Start the plugin with undefined app ID
-      testPlugin.start(testCoreStart, mockDeps);
-      const registerCall = (testCoreStart.chrome.navControls.registerRight as jest.Mock).mock
-        .calls[0];
-      const newMountFunction = registerCall[0].mount;
-
-      const cleanup = newMountFunction(mockElement);
-
-      expect(toMountPoint).not.toHaveBeenCalled();
-
-      // Cleanup
-      cleanup();
-    });
-
-    it('should cleanup subscription on unmount', () => {
-      const mockElement = document.createElement('div');
-      const mockSubscription = {
-        unsubscribe: jest.fn(),
-      };
-
-      // Mock the subscription
-      jest.spyOn(mockCurrentAppId$, 'subscribe').mockReturnValue(mockSubscription as any);
-
-      const cleanup = mountFunction(mockElement);
-
-      // Call cleanup
-      cleanup();
-
-      expect(mockSubscription.unsubscribe).toHaveBeenCalled();
-    });
   });
 
   describe('stop', () => {
@@ -301,8 +206,8 @@ describe('ChatPlugin', () => {
     it('should pass correct props to ChatHeaderButton', () => {
       plugin.start(mockCoreStart, mockDeps);
 
-      const registerCall = (mockCoreStart.chrome.navControls.registerRight as jest.Mock).mock
-        .calls[0];
+      const registerCall = (mockCoreStart.chrome.navControls
+        .registerPrimaryHeaderRight as jest.Mock).mock.calls[0];
       const mountFunction = registerCall[0].mount;
       const mockElement = document.createElement('div');
 
diff --git a/src/plugins/chat/public/plugin.ts b/src/plugins/chat/public/plugin.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +fix:
 +- PrimaryHeaderRight not in correct position ([#10878](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10878))
++
 +feat:
 +- [chat]Expand chat entry point to all pages ([#10878](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10878))