Add type badges to ConfigField component (#52)

* Add type badges to ConfigField component for better field type visibility

* Add configuration option counts for each database type in DatabaseConfigApp

* Update type badges in ConfigField component for improved visibility

* Update ConfigField interface to include 'integer' type and adjust related descriptions in MySQL configuration

* Update config forms to handle 'integer' type in value processing

* Update Kafka configuration fields to use 'integer' type for numeric values

* Update MongoDB configuration fields to use 'integer' type for numeric values

* Update OpenSearch configuration fields to use 'integer' type for numeric values

* Update configuration fields to use 'integer' type for numeric values across all services

* Update Redis configuration fields to use 'integer' type for numeric values

Author: jkpe

src/components/ConfigField.tsx

@@ -30,9 +30,33 @@ const ConfigField = ({ name, field, onChange, value }: ConfigFieldProps) => {
   return (
     <div className="p-4 bg-white rounded-lg border border-gray-200">
       <div className="space-y-2">
-        <label className="block font-medium text-lg text-black" htmlFor={name}>
-          {name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
-        </label>
+        <div className="flex items-center space-x-2">
+          <label className="block font-medium text-lg text-black" htmlFor={name}>
+            {name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+          </label>
+          
+          {/* Type badge */}
+          <div className="inline-flex items-center">
+            {field.type === 'boolean' && (
+              <span className="px-2 py-1 text-xs rounded bg-purple-100 text-purple-800 font-medium">boolean</span>
+            )}
+            {field.type === 'integer' && (
+              <span className="px-2 py-1 text-xs rounded bg-green-100 text-green-800 font-medium">integer</span>
+            )}
+            {field.type === 'number' && (
+              <span className="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800 font-medium">number</span>
+            )}
+            {(field.type === 'string' || field.type === 'text') && (
+              <span className="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-medium">string</span>
+            )}
+            {field.type === 'select' && (
+              <span className="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-medium">string</span>
+            )}
+            {field.type === 'checkbox' && (
+              <span className="px-2 py-1 text-xs rounded bg-purple-100 text-purple-800 font-medium">boolean</span>
+            )}
+          </div>
+        </div>
 
         {field.type === 'select' ? (
           <select

src/components/DatabaseConfigApp.tsx

@@ -5,6 +5,25 @@ import RedisConfigForm from './forms/RedisConfigForm';
 import MongoConfigForm from './forms/MongoConfigForm';
 import KafkaConfigForm from './forms/KafkaConfigForm';
 import OpenSearchConfigForm from './forms/OpenSearchConfigForm';
+import { 
+  mysqlConfigFields, 
+  postgresConfigFields, 
+  redisConfigFields, 
+  mongoConfigFields, 
+  kafkaConfigFields, 
+  openSearchConfigFields 
+} from '../config';
+
+// Calculate configuration option counts for each database type
+const configCounts = {
+  mysql: Object.keys(mysqlConfigFields).length,
+  postgres: Object.values(postgresConfigFields).reduce((count, section) => 
+    count + Object.keys(section.fields).length, 0),
+  redis: Object.keys(redisConfigFields).length,
+  mongodb: Object.keys(mongoConfigFields).length,
+  kafka: Object.keys(kafkaConfigFields).length,
+  opensearch: Object.keys(openSearchConfigFields).length
+};
 
 const DatabaseConfigApp = () => {
   const [activeTab, setActiveTab] = useState('mysql');
@@ -19,6 +38,11 @@ const DatabaseConfigApp = () => {
     { id: 'opensearch', name: 'OpenSearch' }
   ];
 
+  const getFormattedDatabaseName = () => {
+    const tab = tabs.find(tab => tab.id === activeTab);
+    return tab ? tab.name : activeTab.charAt(0).toUpperCase() + activeTab.slice(1);
+  };
+
   return (
     <div className="min-h-screen bg-gray-50 text-black p-6">
       <div className="max-w-7xl mx-auto space-y-6">
@@ -71,6 +95,18 @@ const DatabaseConfigApp = () => {
           </div>
 
           <div className="p-6">
+            {/* Configuration options heading with count */}
+            <div className="mb-8">
+              <div className="flex items-center mb-6">
+                <h2 className="text-xl font-semibold text-gray-800">
+                  {getFormattedDatabaseName()} Configuration Options
+                </h2>
+                <div className="ml-4 px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
+                  {configCounts[activeTab]} options
+                </div>
+              </div>
+            </div>
+
             {activeTab === 'mysql' && (
               <MySQLConfigForm 
                 databaseId={databaseId}

src/components/forms/KafkaConfigForm.tsx

@@ -20,7 +20,7 @@ const KafkaConfigForm = ({ databaseId, onDatabaseIdChange }: KafkaConfigFormProp
       setConfig(newConfig);
     } else {
       const field = kafkaConfigFields[name as keyof typeof kafkaConfigFields];
-      const processedValue = field.type === 'number' ? Number(value) : value;
+      const processedValue = (field.type === 'number' || field.type === 'integer') ? Number(value) : value;
       setConfig((prev: KafkaConfig) => ({
         ...prev,
         [name]: processedValue

src/components/forms/MongoConfigForm.tsx

@@ -20,7 +20,7 @@ const MongoConfigForm = ({ databaseId, onDatabaseIdChange }: MongoConfigFormProp
       setConfig(newConfig);
     } else {
       const field = mongoConfigFields[name as keyof typeof mongoConfigFields];
-      const processedValue = field.type === 'number' ? Number(value) : value;
+      const processedValue = (field.type === 'number' || field.type === 'integer') ? Number(value) : value;
       setConfig((prev: MongoConfig) => ({
         ...prev,
         [name]: processedValue

src/components/forms/MySQLConfigForm.tsx

@@ -20,7 +20,7 @@ const MySQLConfigForm = ({ databaseId, onDatabaseIdChange }: MySQLConfigFormProp
     } else {
       // Convert string values to numbers for numeric fields
       const field = mysqlConfigFields[name as keyof typeof mysqlConfigFields];
-      const processedValue = field.type === 'number' ? Number(value) : value;
+      const processedValue = (field.type === 'number' || field.type === 'integer') ? Number(value) : value;
       setConfig(prev => ({
         ...prev,
         [name]: processedValue

src/components/forms/OpenSearchConfigForm.tsx

@@ -20,7 +20,7 @@ const OpenSearchConfigForm = ({ databaseId, onDatabaseIdChange }: OpenSearchConf
       setConfig(newConfig);
     } else {
       const field = openSearchConfigFields[name as keyof typeof openSearchConfigFields];
-      const processedValue = field.type === 'number' ? Number(value) : value;
+      const processedValue = (field.type === 'number' || field.type === 'integer') ? Number(value) : value;
       setConfig((prev: OpenSearchConfig) => ({
         ...prev,
         [name]: processedValue

src/components/forms/PostgreSQLConfigForm.tsx

@@ -24,7 +24,7 @@ const PostgreSQLConfigForm = ({ databaseId, onDatabaseIdChange }: PostgreSQLConf
       )?.[1];
 
       const field = section?.fields?.[name];
-      const processedValue = field?.type === 'number' ? Number(value) : value;
+      const processedValue = (field?.type === 'number' || field?.type === 'integer') ? Number(value) : value;
       setConfig(prev => ({
         ...prev,
         [name]: processedValue

src/components/forms/RedisConfigForm.tsx

@@ -19,7 +19,7 @@ const RedisConfigForm = ({ databaseId, onDatabaseIdChange }: RedisConfigFormProp
       setConfig(newConfig);
     } else {
       const field = redisConfigFields[name as keyof typeof redisConfigFields];
-      const processedValue = field.type === 'number' ? Number(value) : value;
+      const processedValue = (field.type === 'number' || field.type === 'integer') ? Number(value) : value;
       setConfig((prev: RedisConfig) => ({
         ...prev,
         [name]: processedValue