chore(ui): Refactor action and connector form fields into single component

webui/react-ui/src/components/actions/TwitterPostAction.jsx

@@ -1,40 +1,38 @@
 import React from 'react';
+import BaseAction from './BaseAction';
 
 /**
  * Twitter Post action component
  */
 const TwitterPostAction = ({ index, onActionConfigChange, getConfigValue }) => {
+  // Field definitions for Twitter Post action
+  const fields = [
+    {
+      name: 'token',
+      label: 'Twitter API Token',
+      type: 'text',
+      defaultValue: '',
+      placeholder: 'Twitter API token',
+      helpText: 'Twitter API token with posting permissions',
+      required: true,
+    },
+    {
+      name: 'noCharacterLimits',
+      label: 'Disable character limit (280 characters)',
+      type: 'checkbox',
+      defaultValue: 'false',
+      helpText: 'Enable to bypass the 280 character limit check',
+      required: false,
+    },
+  ];
+
   return (
-    <div className="twitter-post-action">
-      <div className="form-group mb-3">
-        <label htmlFor={`twitterToken${index}`}>Twitter API Token</label>
-        <input
-          type="text"
-          id={`twitterToken${index}`}
-          value={getConfigValue('token', '')}
-          onChange={(e) => onActionConfigChange('token', e.target.value)}
-          className="form-control"
-          placeholder="Twitter API token"
-        />
-        <small className="form-text text-muted">Twitter API token with posting permissions</small>
-      </div>
-      
-      <div className="form-group mb-3">
-        <div className="form-check">
-          <input
-            type="checkbox"
-            id={`noCharacterLimits${index}`}
-            checked={getConfigValue('noCharacterLimits', '') === 'true'}
-            onChange={(e) => onActionConfigChange('noCharacterLimits', e.target.checked ? 'true' : 'false')}
-            className="form-check-input"
-          />
-          <label className="form-check-label" htmlFor={`noCharacterLimits${index}`}>
-            Disable character limit (280 characters)
-          </label>
-          <small className="form-text text-muted d-block">Enable to bypass the 280 character limit check</small>
-        </div>
-      </div>
-    </div>
+    <BaseAction
+      index={index}
+      onActionConfigChange={onActionConfigChange}
+      getConfigValue={getConfigValue}
+      fields={fields}
+    />
   );
 };