From 2190f884f66155f56d24ba7392b235e5e6d9f2a1 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Wed, 28 Jun 2023 08:56:30 +0200
Subject: [PATCH] feat(SendMessage): Add suggestions for header's name input in
 send view

---
 .../src/plugins/camel/endpoints/SendMessage.tsx  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx b/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx
index ef80dd9f9..bee178571 100644
--- a/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx
+++ b/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx
@@ -21,6 +21,8 @@ import { CodeEditor, Language } from '@patternfly/react-code-editor'
 import { doSendMessage } from '@hawtiosrc/plugins/camel/endpoints/endpoints-service'
 import { eventService, NotificationType } from '@hawtiosrc/core'
 import { SelectOptionObject } from '@patternfly/react-core/src/components/Select/SelectOption'
+import { headers as exchangeHeaders } from '@hawtio/camel-model'
+import { InputWithSuggestions } from './InputWithSuggestions'
 
 type SendBodyMessageProps = {
   onBodyChange: (body: string) => void
@@ -104,10 +106,11 @@ type MessageHeadersProps = {
 }
 const MessageHeaders: React.FunctionComponent<MessageHeadersProps> = props => {
   const [headers, setHeaders] = useState<Array<{ name: string; value: string }>>([])
+  const headersSuggestions = Object.keys(exchangeHeaders.headers as Record<string, { type: string }>)
 
-  const handleInputChange = (index: number, newValue: string, event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (index: number, newValue: string, headerName: string) => {
     const updatedHeaders = [...headers]
-    updatedHeaders[index] = { ...updatedHeaders[index], [event.currentTarget.name]: newValue }
+    updatedHeaders[index] = { ...updatedHeaders[index], [headerName]: newValue }
     setHeaders(updatedHeaders)
     props.onHeadersChange(updatedHeaders)
   }
@@ -145,12 +148,11 @@ const MessageHeaders: React.FunctionComponent<MessageHeadersProps> = props => {
           headers.map((header, index) => (
             <Flex key={index}>
               <FlexItem flex={{ default: 'flexNone', md: 'flex_2' }}>
-                <TextInput
-                  type='text'
+                <InputWithSuggestions
                   aria-label={'name-input-' + index}
-                  name='name'
+                  suggestions={headersSuggestions}
                   value={header.name}
-                  onChange={(newValue, event) => handleInputChange(index, newValue, event)}
+                  onChange={newValue => handleInputChange(index, newValue, 'name')}
                 />
               </FlexItem>
               <FlexItem flex={{ default: 'flexNone', md: 'flex_2' }}>
@@ -159,7 +161,7 @@ const MessageHeaders: React.FunctionComponent<MessageHeadersProps> = props => {
                   name='value'
                   aria-label={'value-input-' + index}
                   value={header.value}
-                  onChange={(newValue, event) => handleInputChange(index, newValue, event)}
+                  onChange={(newValue, event) => handleInputChange(index, newValue, 'value')}
                 />
               </FlexItem>
               <FlexItem flex={{ default: 'flexNone', md: 'flex_1' }} span={4}>