From 46302c5240cd75fbf95ea15490b66ae0571d97e1 Mon Sep 17 00:00:00 2001
From: Tadayoshi Sato <sato.tadayoshi@gmail.com>
Date: Thu, 2 Nov 2023 19:26:47 +0900
Subject: [PATCH] refactor(camel): restructure camel preferences

---
 .../src/plugins/camel/CamelPreferences.tsx    | 62 ++++++++++---------
 .../camel/camel-preferences-service.ts        |  1 +
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/packages/hawtio/src/plugins/camel/CamelPreferences.tsx b/packages/hawtio/src/plugins/camel/CamelPreferences.tsx
index 3754264e..7a5222ce 100644
--- a/packages/hawtio/src/plugins/camel/CamelPreferences.tsx
+++ b/packages/hawtio/src/plugins/camel/CamelPreferences.tsx
@@ -26,36 +26,7 @@ export const CamelPreferences: React.FunctionComponent = () => {
   return (
     <CardBody>
       <Form isHorizontal>
-        <FormSection>
-          <FormGroup
-            hasNoPaddingTop
-            label='Include trace / debug streams'
-            fieldId='camel-form-include-trace-debug-streams'
-            labelIcon={
-              <TooltipHelpIcon tooltip='Whether to include stream based message body when using the tracer and debugger' />
-            }
-          >
-            <Checkbox
-              id='camel-form-include-trace-debug-streams-input'
-              isChecked={options.traceOrDebugIncludeStreams}
-              onChange={updateCheckboxValueFor('traceOrDebugIncludeStreams')}
-            />
-          </FormGroup>
-          <FormGroup
-            hasNoPaddingTop
-            label='Maximum trace / debug body length'
-            fieldId='camel-form-maximum-trace-debug-body-length'
-            labelIcon={
-              <TooltipHelpIcon tooltip='The maximum length of the body before its clipped when using the tracer and debugger' />
-            }
-          >
-            <TextInput
-              id='camel-form-maximum-trace-debug-body-length'
-              type='number'
-              value={options.maximumTraceOrDebugBodyLength}
-              onChange={updateNumberValueFor('maximumTraceOrDebugBodyLength')}
-            />
-          </FormGroup>
+        <FormSection title='Route diagram' titleElement='h2'>
           <FormGroup
             hasNoPaddingTop
             label='Maximum label width'
@@ -98,6 +69,37 @@ export const CamelPreferences: React.FunctionComponent = () => {
             />
           </FormGroup>
         </FormSection>
+        <FormSection title='Trace / debug' titleElement='h2'>
+          <FormGroup
+            hasNoPaddingTop
+            label='Include streams'
+            fieldId='camel-form-include-streams'
+            labelIcon={
+              <TooltipHelpIcon tooltip='Whether to include stream based message body when using the tracer and debugger' />
+            }
+          >
+            <Checkbox
+              id='camel-form-include-streams-input'
+              isChecked={options.traceOrDebugIncludeStreams}
+              onChange={updateCheckboxValueFor('traceOrDebugIncludeStreams')}
+            />
+          </FormGroup>
+          <FormGroup
+            hasNoPaddingTop
+            label='Maximum body length'
+            fieldId='camel-form-maximum-body-length'
+            labelIcon={
+              <TooltipHelpIcon tooltip='The maximum length of the body before its clipped when using the tracer and debugger' />
+            }
+          >
+            <TextInput
+              id='camel-form-maximum-body-length-input'
+              type='number'
+              value={options.maximumTraceOrDebugBodyLength}
+              onChange={updateNumberValueFor('maximumTraceOrDebugBodyLength')}
+            />
+          </FormGroup>
+        </FormSection>
       </Form>
     </CardBody>
   )
diff --git a/packages/hawtio/src/plugins/camel/camel-preferences-service.ts b/packages/hawtio/src/plugins/camel/camel-preferences-service.ts
index 37578359..87191a52 100644
--- a/packages/hawtio/src/plugins/camel/camel-preferences-service.ts
+++ b/packages/hawtio/src/plugins/camel/camel-preferences-service.ts
@@ -3,6 +3,7 @@ export type CamelOptions = {
   ignoreIdForLabel: boolean
   showInflightCounter: boolean // TODO: Not used yet
   maximumLabelWidth: number
+
   // Trace / debug
   maximumTraceOrDebugBodyLength: number
   traceOrDebugIncludeStreams: boolean