f

Author: screspod

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;

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

@@ -163,54 +163,52 @@ 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}
           />
         );
 
       case 'radio':
         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}
             />
           );
         }