Change innodb_flush_neighbors type to number with min/max constraints (#33)

* Change innodb_flush_neighbors type to number with min/max constraints

* Refactor input change handling to check for null or undefined values instead of empty strings

* Fix ConfigField value handling to check for undefined and null values

Author: jkpe

src/artifacts/index.tsx

@@ -22,7 +22,7 @@ const ConfigField = ({ name, field, onChange, value }) => {
 
         {field.type === 'select' ? (
           <select
-            value={value || ''}
+            value={value !== undefined && value !== null ? value : ''}
             onChange={(e) => onChange(name, e.target.value)}
             className="w-full p-2 border border-gray-300 rounded-md bg-white text-black"
           >
@@ -44,7 +44,7 @@ const ConfigField = ({ name, field, onChange, value }) => {
         ) : (
           <input
             type={field.type}
-            value={value || ''}
+            value={value !== undefined && value !== null ? value : ''}
             min={field.min}
             max={field.max}
             pattern={field.pattern}
@@ -333,9 +333,11 @@ const MySQLConfigForm = ({ databaseId, onDatabaseIdChange }) => {
       example: 25
     },
     innodb_flush_neighbors: {
-      type: 'select',
-      options: [0, 1, 2],
+      type: 'number',
+      min: 0,
+      max: 2,
       description: 'Specifies whether flushing a page from the InnoDB buffer pool also flushes other dirty pages in the same extent. 0: disables this functionality, 1: flushes contiguous dirty pages, 2: flushes dirty pages in the same extent.',
+      example: 1
     },
     innodb_read_io_threads: {
       type: 'number',
@@ -374,7 +376,7 @@ const MySQLConfigForm = ({ databaseId, onDatabaseIdChange }) => {
 
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -856,7 +858,7 @@ const PostgreSQLConfigForm = ({ databaseId, onDatabaseIdChange }) => {
 
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -1011,7 +1013,7 @@ volatile-ttl: Evict keys with expiration only, shortest time-to-live (TTL) first
   };
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -1086,7 +1088,7 @@ const MongoConfigForm = ({ databaseId, onDatabaseIdChange }) => {
 
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -1376,7 +1378,7 @@ const OpenSearchConfigForm = ({ databaseId, onDatabaseIdChange }) => {
 
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -1683,7 +1685,7 @@ const KafkaConfigForm = ({ databaseId, onDatabaseIdChange }) => {
 
 
   const handleInputChange = (name, value) => {
-    if (value === '') {
+    if (value === null || value === undefined) {
       const newConfig = { ...config };
       delete newConfig[name];
       setConfig(newConfig);
@@ -1827,7 +1829,7 @@ const DatabaseConfigApp = () => {
         {/* Footer */}
         <div className="text-center text-gray-600 py-8">
           <p className="text-sm">
-            Thoughtfully crafted by DigitalOcean’s Solutions Architects team. We hope you found it useful.{' '}
+            Thoughtfully crafted by DigitalOcean's Solutions Architects team. We hope you found it useful. {' '}
             <span role="img" aria-label="heart" className="text-red-500">❤️</span>
           </p>
           <p className="text-sm mt-2">