Feat add tooltip for chat window header (#124)

* feat: add tooltip to chat widnow header title Signed-off-by: Lin Wang <wonglam@amazon.com> * feat: remove title popover trigger Signed-off-by: Lin Wang <wonglam@amazon.com> * test: add miss unit tests for save to notebook button Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com>
opensearch-project · Feb 4, 2024 · 5e59e02 · 5e59e02
1 parent 00b340e
commit 5e59e02
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 38 deletions.
diff --git a/public/components/__tests__/chat_window_header_title.test.tsx b/public/components/__tests__/chat_window_header_title.test.tsx
@@ -81,7 +81,7 @@ describe('<ChatWindowHeaderTitle />', () => {
   it('should reload history list after edit conversation name', async () => {
     const { renderResult, useCoreMock } = setup();
 
-    fireEvent.click(renderResult.getByText('foo'));
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
     fireEvent.click(renderResult.getByText('Rename conversation'));
     fireEvent.change(renderResult.getByLabelText('Conversation name input'), {
       target: { value: 'bar' },
@@ -108,7 +108,7 @@ describe('<ChatWindowHeaderTitle />', () => {
       renderResult.queryByRole('button', { name: 'Save to notebook' })
     ).not.toBeInTheDocument();
 
-    fireEvent.click(renderResult.getByText('foo'));
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
 
     expect(renderResult.getByRole('button', { name: 'Rename conversation' })).toBeInTheDocument();
     expect(renderResult.getByRole('button', { name: 'New conversation' })).toBeInTheDocument();
@@ -118,7 +118,7 @@ describe('<ChatWindowHeaderTitle />', () => {
   it('should show rename modal and hide rename actions after rename button clicked', async () => {
     const { renderResult } = setup();
 
-    fireEvent.click(renderResult.getByText('foo'));
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
     fireEvent.click(renderResult.getByRole('button', { name: 'Rename conversation' }));
 
     await waitFor(() => {
@@ -132,7 +132,7 @@ describe('<ChatWindowHeaderTitle />', () => {
   it('should call loadChat with undefined, hide actions and show success toasts after new conversation button clicked', async () => {
     const { renderResult, useCoreMock, useChatActionsMock } = setup();
 
-    fireEvent.click(renderResult.getByText('foo'));
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
 
     expect(useChatActionsMock.loadChat).not.toHaveBeenCalled();
     expect(useCoreMock.services.notifications.toasts.addSuccess).not.toHaveBeenCalled();
@@ -151,13 +151,20 @@ describe('<ChatWindowHeaderTitle />', () => {
   });
 
   it('should show save to notebook modal after "Save to notebook" clicked', async () => {
-    const { renderResult } = setup();
+    const { renderResult } = setup({
+      messages: [{ type: 'input', contentType: 'text', content: 'foo' }],
+    });
+
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
+
+    expect(renderResult.getByRole('button', { name: 'Save to notebook' })).not.toBeDisabled();
 
-    fireEvent.click(renderResult.getByText('foo'));
     fireEvent.click(renderResult.getByRole('button', { name: 'Save to notebook' }));
 
     await waitFor(() => {
-      expect(renderResult.queryByText('Save to notebook')).toBeInTheDocument();
+      expect(
+        renderResult.queryByText('Please enter a name for your notebook.')
+      ).toBeInTheDocument();
     });
   });
 
@@ -166,7 +173,7 @@ describe('<ChatWindowHeaderTitle />', () => {
       messages: [{ type: 'output', content: 'bar', contentType: 'markdown' }],
     });
 
-    fireEvent.click(renderResult.getByText('foo'));
+    fireEvent.click(renderResult.getByLabelText('toggle chat context menu'));
 
     expect(renderResult.getByRole('button', { name: 'Save to notebook' })).toBeDisabled();
   });

diff --git a/public/components/chat_window_header_title.tsx b/public/components/chat_window_header_title.tsx
@@ -10,6 +10,7 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiButtonIcon,
+  EuiToolTip,
 } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
 import { useChatContext } from '../contexts';
@@ -28,6 +29,7 @@ export const ChatWindowHeaderTitle = React.memo(() => {
   const [isSaveNotebookModalOpen, setSaveNotebookModalOpen] = useState(false);
   const { chatState } = useChatState();
   const { saveChat } = useSaveChat();
+  const displayTitle = chatContext.conversationId ? chatContext.title : 'OpenSearch Assistant';
 
   const onButtonClick = useCallback(() => {
     setPopoverOpen((flag) => !flag);
@@ -59,27 +61,6 @@ export const ChatWindowHeaderTitle = React.memo(() => {
     setSaveNotebookModalOpen(false);
   };
 
-  const button = (
-    <EuiFlexGroup
-      style={{ maxWidth: '300px', padding: '0 8px' }}
-      gutterSize="xs"
-      alignItems="center"
-      responsive={false}
-    >
-      <EuiFlexItem onClick={onButtonClick} style={{ overflow: 'hidden' }}>
-        <h3 className="eui-textTruncate">
-          {chatContext.conversationId ? chatContext.title : 'OpenSearch Assistant'}
-        </h3>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <ChatExperimentalBadge onClick={closePopover} />
-      </EuiFlexItem>
-      <EuiFlexItem onClick={onButtonClick} grow={false}>
-        <EuiButtonIcon aria-label="toggle chat context menu" color="text" iconType="arrowDown" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-
   const items = [
     <EuiContextMenuItem
       disabled={!chatContext.conversationId}
@@ -121,16 +102,38 @@ export const ChatWindowHeaderTitle = React.memo(() => {
 
   return (
     <>
-      <EuiPopover
-        id="conversationTitle"
-        button={button}
-        isOpen={isPopoverOpen}
-        closePopover={closePopover}
-        panelPaddingSize="none"
-        anchorPosition="downRight"
+      <EuiFlexGroup
+        style={{ maxWidth: '300px', padding: '0 8px' }}
+        gutterSize="xs"
+        alignItems="center"
+        responsive={false}
       >
-        <EuiContextMenuPanel size="m" items={items} />
-      </EuiPopover>
+        <EuiToolTip position="bottom" content={displayTitle}>
+          <h3 className="eui-textTruncate">{displayTitle}</h3>
+        </EuiToolTip>
+        <EuiFlexItem grow={false}>
+          <ChatExperimentalBadge onClick={closePopover} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            id="conversationTitle"
+            button={
+              <EuiButtonIcon
+                onClick={onButtonClick}
+                aria-label="toggle chat context menu"
+                color="text"
+                iconType="arrowDown"
+              />
+            }
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}
+            panelPaddingSize="none"
+            anchorPosition="downCenter"
+          >
+            <EuiContextMenuPanel size="m" items={items} />
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       {isRenameModalOpen && (
         <EditConversationNameModal
           conversationId={chatContext.conversationId!}