Support the radio config item type (#2441)

* Support the radio config item type

* remove log

Author: sgalsaleh

web/src/components/common/Input.tsx

@@ -16,6 +16,7 @@ interface InputProps {
   className?: string;
   labelClassName?: string;
   icon?: React.ReactNode;
+  dataTestId?: string;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -33,6 +34,7 @@ const Input: React.FC<InputProps> = ({
   className = '',
   labelClassName = '',
   icon,
+  dataTestId,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -67,6 +69,7 @@ const Input: React.FC<InputProps> = ({
             '--tw-ring-color': themeColor,
             '--tw-ring-offset-color': themeColor,
           } as React.CSSProperties}
+          data-testid={dataTestId}
         />
       </div>
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}

web/src/components/wizard/config/ConfigurationStep.tsx

@@ -130,45 +130,80 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
     updateConfigValue(id, checked ? '1' : '0');
   };
 
-  const renderConfigItem = (item: AppConfigItem) => {
-    const key = item.name;
-    const value = item.value || item.default || '';
-
-    const commonProps = {
-      id: key,
-      label: item.title,
-      value: value.toString(),
-    };
+  const handleRadioChange = (parentId: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, checked } = e.target;
+    if (!checked) return;
+    updateConfigValue(parentId, id);
+  };
 
+  const renderConfigItem = (item: AppConfigItem) => {
     switch (item.type) {
       case 'text':
         return (
           <Input
-            {...commonProps}
+            id={item.name}
+            label={item.title}
+            value={item.value || ''}
+            placeholder={item.default}
             onChange={handleInputChange}
-            placeholder={item.default?.toString() || ''}
+            dataTestId={`text-input-${item.name}`}
           />
         );
 
       case 'bool':
         return (
           <div className="flex items-center space-x-3">
             <input
-              id={key}
+              id={item.name}
               type="checkbox"
-              checked={value === '1'}
+              checked={(item.value || item.default) === '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={key} className="text-sm text-gray-700">
+            <label htmlFor={item.name} className="text-sm text-gray-700">
               {item.title}
             </label>
           </div>
         );
+
+      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={(item.value || item.default) === 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>
+          );
+        }
+        return null;
     }
   };