refactor forms to not use ant Form component; split server and instance details forms into their own components

web/pages/components/config/form-toggleswitch.tsx

@@ -1,18 +1,13 @@
 import React, { useState, useContext } from 'react';
-import { Form, Switch } from 'antd';
+import { Switch } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
-import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
+import { RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
 
 import { ToggleSwitchProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import InfoTip from '../info-tip';
 
-export const TEXTFIELD_TYPE_TEXT = 'default';
-export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
-export const TEXTFIELD_TYPE_NUMBER = 'numeric';
-export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
-
 
 export default function ToggleSwitch(props: ToggleSwitchProps) {
   const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
@@ -24,35 +19,28 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   const { setFieldInConfigState } = serverStatusData || {};
   
   const {
-    fieldName,
-    initialValues = {},
+    apiPath,
+    checked,
     configPath = '',
     disabled = false,
+    fieldName,
+    label,
+    tip,
   } = props;
 
-  const initialValue = initialValues[fieldName] || false;
-  
-  const defaultDetails =  TEXTFIELD_DEFAULTS[configPath] || TEXTFIELD_DEFAULTS;
-
-  const {
-    apiPath = '',
-    label = '',
-    tip = '',
-  } = defaultDetails[fieldName] || {};
-
   const resetStates = () => {
     setSubmitStatus('');
     clearTimeout(resetTimer);
     resetTimer = null;
   }
 
-  const handleChange = async checked => {
+  const handleChange = async isChecked => {
     setSubmitStatus('validating');
     await postConfigUpdateToAPI({
       apiPath,
-      data: { value: checked },
+      data: { value: isChecked },
       onSuccess: () => {
-        setFieldInConfigState({ fieldName, value: checked, path: configPath });
+        setFieldInConfigState({ fieldName, value: isChecked, path: configPath });
         setSubmitStatus('success');
       },
       onError: (message: string) => {
@@ -71,23 +59,17 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   return (
     <div className="toggleswitch-container">
       <div className="toggleswitch">
-        <Form.Item
-          name={fieldName}
-          validateStatus={submitStatus}
-        >
-          <Switch
-            className={`switch field-${fieldName}`}
-            loading={submitStatus === 'validating'}
-            onChange={handleChange}
-            checked={initialValue}
-            checkedChildren="ON"  
-            unCheckedChildren="OFF"
-            disabled={disabled}
-          />
-        </Form.Item>
-
+        <Switch
+          className={`switch field-${fieldName}`}
+          loading={submitStatus === 'validating'}
+          onChange={handleChange}
+          defaultChecked={checked}
+          checkedChildren="ON"  
+          unCheckedChildren="OFF"
+          disabled={disabled}
+        />
         <span className="label">{label} <InfoTip tip={tip} /></span>
-        
+        {submitStatus}
       </div>
       <div className={`status-message ${submitStatus || ''}`}>
         {newStatusIcon} {newStatusMessage} {submitStatusMessage}