fix(ChatbotConversationHistoryNav): Pass search input props (#630)

Allow for controlled inputs and other customizations by passing props down.

Author: rebeccaalpert

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -561,4 +561,20 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByRole('listitem')).toHaveClass('test');
   });
+
+  it('should be able to spread search input props when searchInputProps is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        handleTextInputChange={jest.fn()}
+        searchInputProps={{ value: 'I am a sample search' }}
+      />
+    );
+
+    expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
+  });
 });

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -34,7 +34,8 @@ import {
   Icon,
   MenuProps, // Remove in next breaking change
   TitleProps,
-  ListProps
+  ListProps,
+  SearchInputProps
 } from '@patternfly/react-core';
 
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
@@ -94,6 +95,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   searchInputPlaceholder?: string;
   /** Aria label for search input */
   searchInputAriaLabel?: string;
+  /** Additional props passed to search input */
+  searchInputProps?: SearchInputProps;
   /** A callback for when the input value changes. Omit to hide input field */
   handleTextInputChange?: (value: string) => void;
   /** Display mode of chatbot */
@@ -149,6 +152,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
+  searchInputProps,
   handleTextInputChange,
   displayMode,
   reverseButtonOrder = false,
@@ -292,6 +296,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
                 aria-label={searchInputAriaLabel}
                 onChange={(_event, value) => handleTextInputChange(value)}
                 placeholder={searchInputPlaceholder}
+                {...searchInputProps}
               />
             </div>
           )}