From 28eaa2652118a172b02e103b43b156b3e788aa78 Mon Sep 17 00:00:00 2001
From: Steven Crespo <screswk@gmail.com>
Date: Thu, 10 Jul 2025 16:52:52 -0700
Subject: [PATCH 1/5] add checkbox and radio components

---
 web/src/components/common/Checkbox.tsx        | 58 +++++++++++++++
 web/src/components/common/Radio.tsx           | 70 +++++++++++++++++++
 .../wizard/config/ConfigurationStep.tsx       | 64 ++++++-----------
 3 files changed, 148 insertions(+), 44 deletions(-)
 create mode 100644 web/src/components/common/Checkbox.tsx
 create mode 100644 web/src/components/common/Radio.tsx

diff --git a/web/src/components/common/Checkbox.tsx b/web/src/components/common/Checkbox.tsx
new file mode 100644
index 000000000..4c027d53d
--- /dev/null
+++ b/web/src/components/common/Checkbox.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface CheckboxProps {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  error,
+  helpText,
+  className = '',
+  labelClassName = '',
+  dataTestId,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <div className="flex items-center space-x-3">
+        <input
+          id={id}
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className={`h-4 w-4 focus:ring-offset-2 border-gray-300 rounded ${className}`}
+          data-testid={dataTestId}
+          style={{
+            color: themeColor,
+            '--tw-ring-color': themeColor,
+          } as React.CSSProperties}
+        />
+        <label htmlFor={id} className={`text-sm text-gray-700 ${labelClassName}`}>
+          {label}
+        </label>
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/web/src/components/common/Radio.tsx b/web/src/components/common/Radio.tsx
new file mode 100644
index 000000000..b7deb7def
--- /dev/null
+++ b/web/src/components/common/Radio.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+import { AppConfigChildItem } from '../../types';
+
+interface RadioProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  options: AppConfigChildItem[];
+  disabled?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Radio: React.FC<RadioProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  error,
+  helpText,
+  className = '',
+  labelClassName = '',
+  dataTestId,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <label className={`block text-sm font-medium text-gray-700 mb-2 ${labelClassName}`}>
+        {label}
+      </label>
+      <div className="space-y-2">
+        {options.map(option => (
+          <div key={option.name} className="flex items-center">
+            <input
+              type="radio"
+              id={option.name}
+              name={id}
+              value={option.name}
+              checked={value === option.name}
+              onChange={onChange}
+              disabled={disabled}
+              className={`h-4 w-4 focus:ring-offset-2 border-gray-300 ${className}`}
+              data-testid={dataTestId ? `${dataTestId}-${option.name}` : undefined}
+              style={{
+                color: themeColor,
+                '--tw-ring-color': themeColor,
+              } as React.CSSProperties}
+            />
+            <label htmlFor={option.name} className="ml-3 text-sm text-gray-700">
+              {option.title}
+            </label>
+          </div>
+        ))}
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Radio;
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
index 07301883b..66f829fe6 100644
--- a/web/src/components/wizard/config/ConfigurationStep.tsx
+++ b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -4,6 +4,8 @@ import Card from '../../common/Card';
 import Button from '../../common/Button';
 import Input from '../../common/Input';
 import Textarea from '../../common/Textarea';
+import Checkbox from '../../common/Checkbox';
+import Radio from '../../common/Radio';
 import { useWizard } from '../../../contexts/WizardModeContext';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useSettings } from '../../../contexts/SettingsContext';
@@ -182,60 +184,34 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
             value={getDisplayValue(item)}
             onChange={handleInputChange}
             dataTestId={`textarea-input-${item.name}`}
+            helpText={item.help_text}
           />
         );
 
       case 'bool':
         return (
-          <div className="flex items-center space-x-3">
-            <input
-              id={item.name}
-              type="checkbox"
-              checked={getEffectiveValue(item) === '1'}
-              onChange={handleCheckboxChange}
-              className="h-4 w-4 focus:ring-offset-2 border-gray-300 rounded"
-              data-testid={`bool-input-${item.name}`}
-              style={{
-                color: themeColor,
-                '--tw-ring-color': themeColor,
-              } as React.CSSProperties}
-            />
-            <label htmlFor={item.name} className="text-sm text-gray-700">
-              {item.title}
-            </label>
-          </div>
+          <Checkbox
+            id={item.name}
+            label={item.title}
+            checked={getEffectiveValue(item) === '1'}
+            onChange={handleCheckboxChange}
+            dataTestId={`bool-input-${item.name}`}
+            helpText={item.help_text}
+          />
         );
 
       case 'radio':
         if (item.items) {
           return (
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                {item.title}
-              </label>
-              <div className="space-y-2">
-                {item.items.map(child => (
-                  <div key={child.name} className="flex items-center">
-                    <input
-                      type="radio"
-                      id={child.name}
-                      value={child.name}
-                      checked={getEffectiveValue(item) === child.name}
-                      onChange={e => handleRadioChange(item.name, e)}
-                      className="h-4 w-4 focus:ring-offset-2 border-gray-300"
-                      data-testid={`radio-input-${child.name}`}
-                      style={{
-                        color: themeColor,
-                        '--tw-ring-color': themeColor,
-                      } as React.CSSProperties}
-                    />
-                    <label htmlFor={child.name} className="ml-3 text-sm text-gray-700">
-                      {child.title}
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <Radio
+              id={item.name}
+              label={item.title}
+              value={getEffectiveValue(item)}
+              onChange={e => handleRadioChange(item.name, e)}
+              options={item.items}
+              dataTestId={`radio-input-${item.name}`}
+              helpText={item.help_text}
+            />
           );
         }
         return null;

From 45cd8c522bdaac37d581993ca5aa3ec1f1743a3c Mon Sep 17 00:00:00 2001
From: Steven Crespo <screswk@gmail.com>
Date: Fri, 11 Jul 2025 08:38:24 -0700
Subject: [PATCH 2/5] f

---
 web/src/components/common/ConfigItem.tsx      | 52 +++++++++++++++++++
 .../wizard/config/ConfigurationStep.tsx       | 24 ++++-----
 2 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/common/ConfigItem.tsx

diff --git a/web/src/components/common/ConfigItem.tsx b/web/src/components/common/ConfigItem.tsx
new file mode 100644
index 000000000..ab74da9db
--- /dev/null
+++ b/web/src/components/common/ConfigItem.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface ConfigItemProps {
+  id: string;
+  label: string;
+  dataTestId?: string;
+  helpText?: string;
+  children: React.ReactElement;
+}
+
+const ConfigItem: React.FC<ConfigItemProps> = ({
+  id,
+  label,
+  dataTestId,
+  helpText,
+  children,
+}) => {
+  // Clone the child element and inject the common props
+  const enhancedChild = React.cloneElement(children, {
+    id,
+    label,
+    dataTestId,
+    helpText,
+  } as any);
+
+  return (
+    <div className="mb-4">
+      {enhancedChild}
+    </div>
+  );
+};
+
+// Helper function to create a ConfigItem-wrapped component
+export const withConfigItem = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) => {
+  return React.forwardRef<any, P & Omit<ConfigItemProps, 'children'>>((props, ref) => {
+    const { id, label, dataTestId, helpText, ...wrappedComponentProps } = props;
+    return (
+      <ConfigItem
+        id={id}
+        label={label}
+        dataTestId={dataTestId}
+        helpText={helpText}
+      >
+        <WrappedComponent {...(wrappedComponentProps as P)} ref={ref} />
+      </ConfigItem>
+    );
+  });
+};
+
+export default ConfigItem;
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
index 66f829fe6..ca0993740 100644
--- a/web/src/components/wizard/config/ConfigurationStep.tsx
+++ b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -163,40 +163,40 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
   };
 
   const renderConfigItem = (item: AppConfigItem) => {
+    const sharedProps = {
+      id: item.name,
+      label: item.title,
+      helpText: item.help_text,
+    }
+
     switch (item.type) {
       case 'text':
         return (
           <Input
-            id={item.name}
-            label={item.title}
+            {...sharedProps}
             value={getDisplayValue(item)}
             onChange={handleInputChange}
             dataTestId={`text-input-${item.name}`}
-            helpText={item.help_text}
           />
         );
 
       case 'textarea':
         return (
           <Textarea
-            id={item.name}
-            label={item.title}
+            {...sharedProps}
             value={getDisplayValue(item)}
             onChange={handleInputChange}
             dataTestId={`textarea-input-${item.name}`}
-            helpText={item.help_text}
           />
         );
 
       case 'bool':
         return (
           <Checkbox
-            id={item.name}
-            label={item.title}
+            {...sharedProps}
             checked={getEffectiveValue(item) === '1'}
             onChange={handleCheckboxChange}
             dataTestId={`bool-input-${item.name}`}
-            helpText={item.help_text}
           />
         );
 
@@ -204,13 +204,11 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
         if (item.items) {
           return (
             <Radio
-              id={item.name}
-              label={item.title}
+              {...sharedProps}
               value={getEffectiveValue(item)}
-              onChange={e => handleRadioChange(item.name, e)}
               options={item.items}
+              onChange={e => handleRadioChange(item.name, e)}
               dataTestId={`radio-input-${item.name}`}
-              helpText={item.help_text}
             />
           );
         }

From ed994284a57f48d70a9330d7de2a166c6cb8d854 Mon Sep 17 00:00:00 2001
From: Steven Crespo <screswk@gmail.com>
Date: Fri, 11 Jul 2025 10:37:43 -0700
Subject: [PATCH 3/5] f

---
 web/src/components/common/Checkbox.tsx        | 15 ++--
 web/src/components/common/ConfigItem.tsx      |  9 ++-
 web/src/components/common/Input.tsx           | 26 +++----
 web/src/components/common/Radio.tsx           | 33 +++++----
 web/src/components/common/Textarea.tsx        | 18 ++---
 .../wizard/config/ConfigurationStep.tsx       | 72 +++++++++----------
 6 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/web/src/components/common/Checkbox.tsx b/web/src/components/common/Checkbox.tsx
index 4c027d53d..0af777228 100644
--- a/web/src/components/common/Checkbox.tsx
+++ b/web/src/components/common/Checkbox.tsx
@@ -2,29 +2,31 @@ import React from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface CheckboxProps {
-  id: string;
-  label: string;
   checked: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Checkbox: React.FC<CheckboxProps> = ({
-  id,
-  label,
   checked,
   onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
+  id,
+  label,
   dataTestId,
+  helpText,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -43,6 +45,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
           style={{
             color: themeColor,
             '--tw-ring-color': themeColor,
+            accentColor: themeColor,
           } as React.CSSProperties}
         />
         <label htmlFor={id} className={`text-sm text-gray-700 ${labelClassName}`}>
diff --git a/web/src/components/common/ConfigItem.tsx b/web/src/components/common/ConfigItem.tsx
index ab74da9db..3f078d30e 100644
--- a/web/src/components/common/ConfigItem.tsx
+++ b/web/src/components/common/ConfigItem.tsx
@@ -11,7 +11,6 @@ interface ConfigItemProps {
 const ConfigItem: React.FC<ConfigItemProps> = ({
   id,
   label,
-  dataTestId,
   helpText,
   children,
 }) => {
@@ -19,13 +18,14 @@ const ConfigItem: React.FC<ConfigItemProps> = ({
   const enhancedChild = React.cloneElement(children, {
     id,
     label,
-    dataTestId,
     helpText,
   } as any);
 
   return (
-    <div className="mb-4">
-      {enhancedChild}
+    <div key={id} data-testid={`config-item-${id}`}>
+      <div className="mb-4">
+        {enhancedChild}
+      </div>
     </div>
   );
 };
@@ -40,7 +40,6 @@ export const withConfigItem = <P extends object>(
       <ConfigItem
         id={id}
         label={label}
-        dataTestId={dataTestId}
         helpText={helpText}
       >
         <WrappedComponent {...(wrappedComponentProps as P)} ref={ref} />
diff --git a/web/src/components/common/Input.tsx b/web/src/components/common/Input.tsx
index c8561dcfb..2e5c69a71 100644
--- a/web/src/components/common/Input.tsx
+++ b/web/src/components/common/Input.tsx
@@ -2,39 +2,41 @@ import React from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface InputProps {
-  id: string;
-  label: string;
   type?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
+  icon?: React.ReactNode;
   placeholder?: string;
   required?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
-  icon?: React.ReactNode;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Input: React.FC<InputProps> = ({
-  id,
-  label,
   type = 'text',
   value,
-  onChange,
-  onKeyDown,
+  icon,
   placeholder = '',
   required = false,
+  onKeyDown,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
-  icon,
+  id,
+  label,
   dataTestId,
+  helpText,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
diff --git a/web/src/components/common/Radio.tsx b/web/src/components/common/Radio.tsx
index b7deb7def..cb2e04c14 100644
--- a/web/src/components/common/Radio.tsx
+++ b/web/src/components/common/Radio.tsx
@@ -3,31 +3,33 @@ import { useSettings } from '../../contexts/SettingsContext';
 import { AppConfigChildItem } from '../../types';
 
 interface RadioProps {
-  id: string;
-  label: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   options: AppConfigChildItem[];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Radio: React.FC<RadioProps> = ({
-  id,
-  label,
-  value,
-  onChange,
-  options,
-  disabled = false,
-  error,
-  helpText,
-  className = '',
-  labelClassName = '',
-  dataTestId,
+   value,
+   options,
+   onChange,
+   disabled = false,
+   error,
+   className = '',
+   labelClassName = '',
+   id,
+   label,
+   dataTestId,
+   helpText,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -53,6 +55,7 @@ const Radio: React.FC<RadioProps> = ({
               style={{
                 color: themeColor,
                 '--tw-ring-color': themeColor,
+                accentColor: themeColor,
               } as React.CSSProperties}
             />
             <label htmlFor={option.name} className="ml-3 text-sm text-gray-700">
diff --git a/web/src/components/common/Textarea.tsx b/web/src/components/common/Textarea.tsx
index d5d244e54..71100b1f7 100644
--- a/web/src/components/common/Textarea.tsx
+++ b/web/src/components/common/Textarea.tsx
@@ -2,35 +2,37 @@ import { ChangeEvent, CSSProperties } from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface TextareaProps {
-  id: string;
-  label: string;
   value: string;
-  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   rows?: number;
   placeholder?: string;
   required?: boolean;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Textarea = ({
-  id,
-  label,
   value,
-  onChange,
   rows = 4,
   placeholder = '',
   required = false,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
+  id,
+  label,
   dataTestId,
+  helpText,
 }: TextareaProps) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
index ca0993740..a7517c7e4 100644
--- a/web/src/components/wizard/config/ConfigurationStep.tsx
+++ b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -6,6 +6,7 @@ import Input from '../../common/Input';
 import Textarea from '../../common/Textarea';
 import Checkbox from '../../common/Checkbox';
 import Radio from '../../common/Radio';
+import ConfigItem from '../../common/ConfigItem';
 import { useWizard } from '../../../contexts/WizardModeContext';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useSettings } from '../../../contexts/SettingsContext';
@@ -163,53 +164,44 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
   };
 
   const renderConfigItem = (item: AppConfigItem) => {
-    const sharedProps = {
-      id: item.name,
-      label: item.title,
-      helpText: item.help_text,
-    }
-
     switch (item.type) {
       case 'text':
         return (
-          <Input
-            {...sharedProps}
-            value={getDisplayValue(item)}
-            onChange={handleInputChange}
-            dataTestId={`text-input-${item.name}`}
-          />
+            <Input
+              value={getDisplayValue(item)}
+              onChange={handleInputChange}
+              dataTestId={`text-input-${item.name}`}
+            />
         );
 
       case 'textarea':
         return (
-          <Textarea
-            {...sharedProps}
-            value={getDisplayValue(item)}
-            onChange={handleInputChange}
-            dataTestId={`textarea-input-${item.name}`}
-          />
+            <Textarea
+              value={getDisplayValue(item)}
+              onChange={handleInputChange}
+              dataTestId={`textarea-input-${item.name}`}
+            />
+
         );
 
       case 'bool':
         return (
-          <Checkbox
-            {...sharedProps}
-            checked={getEffectiveValue(item) === '1'}
-            onChange={handleCheckboxChange}
-            dataTestId={`bool-input-${item.name}`}
-          />
+            <Checkbox
+              checked={getEffectiveValue(item) === '1'}
+              onChange={handleCheckboxChange}
+              dataTestId={`bool-input-${item.name}`}
+            />
         );
 
       case 'radio':
         if (item.items) {
           return (
-            <Radio
-              {...sharedProps}
-              value={getEffectiveValue(item)}
-              options={item.items}
-              onChange={e => handleRadioChange(item.name, e)}
-              dataTestId={`radio-input-${item.name}`}
-            />
+              <Radio
+                value={getEffectiveValue(item)}
+                options={item.items}
+                onChange={e => handleRadioChange(item.name, e)}
+                dataTestId={`radio-input-${item.name}`}
+              />
           );
         }
         return null;
@@ -227,11 +219,19 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
         {group.description && (
           <p className="text-gray-600 mb-4">{group.description}</p>
         )}
-        {group.items.map(item => (
-          <div key={item.name} data-testid={`config-item-${item.name}`}>
-            {renderConfigItem(item)}
-          </div>
-        ))}
+          {group.items.map(item => {
+            const renderedItem = renderConfigItem(item);
+            if (!renderedItem) return null;
+            return (
+              <ConfigItem
+                id={item.name}
+                label={item.title}
+                helpText={item.help_text}
+              >
+                {renderedItem}
+              </ConfigItem>
+            );
+          })}
       </div>
     );
   };

From 0dd56eaf26a86c6e6dcd0e362d0a11442dc844cf Mon Sep 17 00:00:00 2001
From: Steven Crespo <screswk@gmail.com>
Date: Fri, 11 Jul 2025 11:14:40 -0700
Subject: [PATCH 4/5] f

---
 web/src/components/common/Checkbox.tsx        |  3 +-
 web/src/components/common/Input.tsx           |  3 +-
 web/src/components/common/Radio.tsx           |  3 +-
 web/src/components/common/Textarea.tsx        |  3 +-
 .../wizard/config/ConfigurationStep.tsx       | 65 +++++++++----------
 5 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/web/src/components/common/Checkbox.tsx b/web/src/components/common/Checkbox.tsx
index 0af777228..2f1cb65a8 100644
--- a/web/src/components/common/Checkbox.tsx
+++ b/web/src/components/common/Checkbox.tsx
@@ -25,7 +25,6 @@ const Checkbox: React.FC<CheckboxProps> = ({
   labelClassName = '',
   id,
   label,
-  dataTestId,
   helpText,
 }) => {
   const { settings } = useSettings();
@@ -41,7 +40,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
           onChange={onChange}
           disabled={disabled}
           className={`h-4 w-4 focus:ring-offset-2 border-gray-300 rounded ${className}`}
-          data-testid={dataTestId}
+          data-testid={`bool-input-${id}`}
           style={{
             color: themeColor,
             '--tw-ring-color': themeColor,
diff --git a/web/src/components/common/Input.tsx b/web/src/components/common/Input.tsx
index 2e5c69a71..74bc47982 100644
--- a/web/src/components/common/Input.tsx
+++ b/web/src/components/common/Input.tsx
@@ -35,7 +35,6 @@ const Input: React.FC<InputProps> = ({
   labelClassName = '',
   id,
   label,
-  dataTestId,
   helpText,
 }) => {
   const { settings } = useSettings();
@@ -71,7 +70,7 @@ const Input: React.FC<InputProps> = ({
             '--tw-ring-color': themeColor,
             '--tw-ring-offset-color': themeColor,
           } as React.CSSProperties}
-          data-testid={dataTestId}
+          data-testid={`text-input-${id}`}
         />
       </div>
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
diff --git a/web/src/components/common/Radio.tsx b/web/src/components/common/Radio.tsx
index cb2e04c14..968cb1c84 100644
--- a/web/src/components/common/Radio.tsx
+++ b/web/src/components/common/Radio.tsx
@@ -28,7 +28,6 @@ const Radio: React.FC<RadioProps> = ({
    labelClassName = '',
    id,
    label,
-   dataTestId,
    helpText,
 }) => {
   const { settings } = useSettings();
@@ -51,7 +50,7 @@ const Radio: React.FC<RadioProps> = ({
               onChange={onChange}
               disabled={disabled}
               className={`h-4 w-4 focus:ring-offset-2 border-gray-300 ${className}`}
-              data-testid={dataTestId ? `${dataTestId}-${option.name}` : undefined}
+              data-testid={`radio-input-${option.name}`}
               style={{
                 color: themeColor,
                 '--tw-ring-color': themeColor,
diff --git a/web/src/components/common/Textarea.tsx b/web/src/components/common/Textarea.tsx
index 71100b1f7..5bc562d55 100644
--- a/web/src/components/common/Textarea.tsx
+++ b/web/src/components/common/Textarea.tsx
@@ -31,7 +31,6 @@ const Textarea = ({
   labelClassName = '',
   id,
   label,
-  dataTestId,
   helpText,
 }: TextareaProps) => {
   const { settings } = useSettings();
@@ -60,7 +59,7 @@ const Textarea = ({
           '--tw-ring-color': themeColor,
           '--tw-ring-offset-color': themeColor,
         } as CSSProperties}
-        data-testid={dataTestId}
+        data-testid={`textarea-input-${id}`}
       />
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
       {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
index a7517c7e4..dd93f8c29 100644
--- a/web/src/components/wizard/config/ConfigurationStep.tsx
+++ b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -167,41 +167,36 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
     switch (item.type) {
       case 'text':
         return (
-            <Input
-              value={getDisplayValue(item)}
-              onChange={handleInputChange}
-              dataTestId={`text-input-${item.name}`}
-            />
+          <Input
+            value={getDisplayValue(item)}
+            onChange={handleInputChange}
+          />
         );
 
       case 'textarea':
         return (
-            <Textarea
-              value={getDisplayValue(item)}
-              onChange={handleInputChange}
-              dataTestId={`textarea-input-${item.name}`}
-            />
-
+          <Textarea
+            value={getDisplayValue(item)}
+            onChange={handleInputChange}
+          />
         );
 
       case 'bool':
         return (
-            <Checkbox
-              checked={getEffectiveValue(item) === '1'}
-              onChange={handleCheckboxChange}
-              dataTestId={`bool-input-${item.name}`}
-            />
+          <Checkbox
+            checked={getEffectiveValue(item) === '1'}
+            onChange={handleCheckboxChange}
+          />
         );
 
       case 'radio':
         if (item.items) {
           return (
-              <Radio
-                value={getEffectiveValue(item)}
-                options={item.items}
-                onChange={e => handleRadioChange(item.name, e)}
-                dataTestId={`radio-input-${item.name}`}
-              />
+            <Radio
+              value={getEffectiveValue(item)}
+              options={item.items}
+              onChange={e => handleRadioChange(item.name, e)}
+            />
           );
         }
         return null;
@@ -219,19 +214,19 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
         {group.description && (
           <p className="text-gray-600 mb-4">{group.description}</p>
         )}
-          {group.items.map(item => {
-            const renderedItem = renderConfigItem(item);
-            if (!renderedItem) return null;
-            return (
-              <ConfigItem
-                id={item.name}
-                label={item.title}
-                helpText={item.help_text}
-              >
-                {renderedItem}
-              </ConfigItem>
-            );
-          })}
+        {group.items.map(item => {
+          const renderedItem = renderConfigItem(item);
+          if (!renderedItem) return null;
+          return (
+            <ConfigItem
+              id={item.name}
+              label={item.title}
+              helpText={item.help_text}
+            >
+              {renderedItem}
+            </ConfigItem>
+          );
+        })}
       </div>
     );
   };

From 9b5d86ad66289ae616d4cef6585c100f6d1ca8ed Mon Sep 17 00:00:00 2001
From: Steven Crespo <screswk@gmail.com>
Date: Fri, 11 Jul 2025 11:56:34 -0700
Subject: [PATCH 5/5] fix lint errors

---
 web/src/components/common/ConfigItem.tsx | 43 ++++++++++++++----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/web/src/components/common/ConfigItem.tsx b/web/src/components/common/ConfigItem.tsx
index 3f078d30e..b0528abfe 100644
--- a/web/src/components/common/ConfigItem.tsx
+++ b/web/src/components/common/ConfigItem.tsx
@@ -8,6 +8,30 @@ interface ConfigItemProps {
   children: React.ReactElement;
 }
 
+/**
+ * A wrapper component that provides consistent styling and layout for configuration form elements
+ *
+ * Props:
+ * @param {string} id - Unique identifier for the form element
+ * @param {string} label - Label text to display above the input
+ * @param {string} [dataTestId] - Optional test ID for e2e testing
+ * @param {string} [helpText] - Optional help text displayed below the input
+ * @param {React.ReactElement} children - The form input component to wrap
+ *
+ * The component clones the child element and injects common props (id, label, helpText)
+ * to ensure consistent behavior across different input types.
+ *
+ * Example:
+ * ```tsx
+ * <ConfigItem
+ *   id="hostname"
+ *   label="Hostname"
+ *   helpText="Enter the server hostname"
+ * >
+ *   <Input />
+ * </ConfigItem>
+ * ```
+ */
 const ConfigItem: React.FC<ConfigItemProps> = ({
   id,
   label,
@@ -19,7 +43,7 @@ const ConfigItem: React.FC<ConfigItemProps> = ({
     id,
     label,
     helpText,
-  } as any);
+  } as React.HTMLAttributes<HTMLElement>);
 
   return (
     <div key={id} data-testid={`config-item-${id}`}>
@@ -30,22 +54,5 @@ const ConfigItem: React.FC<ConfigItemProps> = ({
   );
 };
 
-// Helper function to create a ConfigItem-wrapped component
-export const withConfigItem = <P extends object>(
-  WrappedComponent: React.ComponentType<P>
-) => {
-  return React.forwardRef<any, P & Omit<ConfigItemProps, 'children'>>((props, ref) => {
-    const { id, label, dataTestId, helpText, ...wrappedComponentProps } = props;
-    return (
-      <ConfigItem
-        id={id}
-        label={label}
-        helpText={helpText}
-      >
-        <WrappedComponent {...(wrappedComponentProps as P)} ref={ref} />
-      </ConfigItem>
-    );
-  });
-};
 
 export default ConfigItem;