chore: test by api

src/pages/backends/forms/basic.tsx

@@ -1,6 +1,5 @@
-import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
@@ -28,43 +27,23 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
         ]}
       >
         <SealInput.Input
+          trim
+          disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'common.table.name' })}
           required
         ></SealInput.Input>
       </Form.Item>
-
       <Form.Item<FormData>
-        name="compatibility_type"
-        rules={[
-          {
-            required: true,
-            message: getRuleMessage('select', 'template', false)
-          }
-        ]}
-      >
-        <SealSelect
-          label={'Compatibility Template'}
-          required
-          options={[
-            { label: 'Template 1', value: 'tensorflow' },
-            { label: 'Template 2', value: 'torchserve' }
-          ]}
-        ></SealSelect>
-      </Form.Item>
-
-      <Form.Item<FormData>
-        name="allowed_proxy_uris"
+        name="health_check_path"
         rules={[{ required: false }]}
       >
-        <ListInput
-          dataList={form.getFieldValue('allowed_proxy_uris') || []}
-          onChange={(data: string[]) => {
-            form.setFieldValue('allowed_proxy_uris', data);
-          }}
-          btnText={'Add Allowed Proxy URI'}
-          label={'Proxy URI'}
-        ></ListInput>
+        <SealInput.Input trim label={'Health Check Path'}></SealInput.Input>
       </Form.Item>
+
+      <Form.Item name="default_run_command">
+        <SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
+      </Form.Item>
+
       <Form.Item<FormData> name="description" rules={[{ required: false }]}>
         <SealInput.TextArea
           label={intl.formatMessage({ id: 'common.table.description' })}

src/pages/backends/forms/index.tsx

@@ -1,6 +1,7 @@
 import { PageActionType } from '@/config/types';
 import CollapsePanel from '@/pages/_components/collapse-panel';
 import { Form } from 'antd';
+import _ from 'lodash';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { FormData, ListItem } from '../config/types';
 import BasicForm from './basic';
@@ -9,16 +10,34 @@ import VersionsForm from './versions-config';
 
 type AddModalProps = {
   action: PageActionType;
-  currentData?: ListItem; // Used when action is EDIT
+  currentData?: ListItem;
   onFinish: (values: FormData) => void;
   ref?: any;
 };
 const BackendForm: React.FC<AddModalProps> = forwardRef(
   ({ action, currentData, onFinish }, ref) => {
     const [form] = Form.useForm();
+    const [activeKey, setActiveKey] = React.useState<string[]>([]);
+
+    const onFinishFailed = (errorInfo: any) => {
+      const errorFields = errorInfo.errorFields || [];
+      if (errorFields.length > 0) {
+        const hasVersionsError = errorFields.some((field: any) =>
+          field.name.includes('version_configs')
+        );
+        if (hasVersionsError) {
+          setActiveKey([...new Set([...activeKey, 'version_configs'])]);
+        }
+      }
+    };
+
+    const handleOnCollapseChange = (keys: string | string[]) => {
+      setActiveKey(Array.isArray(keys) ? keys : [keys]);
+    };
 
     useEffect(() => {
       if (currentData) {
+        console.log('currentData:', currentData);
         form.setFieldsValue(currentData);
       }
     }, [currentData]);
@@ -48,15 +67,25 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         onFinish={onFinish}
         preserve={false}
         scrollToFirstError={true}
-        initialValues={currentData}
+        initialValues={_.omit(currentData, ['version_configs'])}
+        onFinishFailed={onFinishFailed}
       >
         <BasicForm action={action}></BasicForm>
         <CollapsePanel
+          activeKey={activeKey}
+          accordion={false}
+          onChange={handleOnCollapseChange}
           items={[
             {
-              key: 'versions',
+              key: 'version_configs',
               label: 'Versions',
-              children: <VersionsForm action={action}></VersionsForm>
+              forceRender: true,
+              children: (
+                <VersionsForm
+                  action={action}
+                  currentData={currentData}
+                ></VersionsForm>
+              )
             },
             {
               key: 'parameters',

src/pages/backends/forms/versions-config.tsx

@@ -1,9 +1,10 @@
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Divider, Form } from 'antd';
+import { Button, Checkbox, Divider, Form, Radio } from 'antd';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { ListItem } from '../config/types';
 
 const Box = styled.div`
   display: grid;
@@ -12,36 +13,36 @@ const Box = styled.div`
   align-items: center;
 `;
 
-const ItemWrapper = styled.div`
-  &:hover {
-    .divider {
-      border-top: 1px dashed var(--ant-color-primary) !important;
-    }
-  }
-`;
-
-const Label = styled.div`
-  color: var(--ant-color-text-tertiary);
-  font-size: var(--font-size-base);
-  margin-bottom: 10px;
-`;
+const ItemWrapper = styled.div``;
 
 type AddModalProps = {
   action: PageActionType;
+  currentData?: ListItem;
 };
-const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
+const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const versionList = [
     {
       version_no: '',
       image_name: '',
       run_command: '',
-      is_default: false
+      isBuiltin: false,
+      is_default: true
     }
   ];
 
+  const handleSetDefaultVersion = (e: any, index: number) => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const updatedVersions = versions.map((version: any, idx: number) => ({
+      ...version,
+      is_default: idx === index
+    }));
+    form.setFieldValue('version_configs', updatedVersions);
+  };
+
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
+    console.log('versions:', versions);
     if (Array.isArray(versions) && versions.length === 0) {
       form.setFieldValue('version_configs', versionList);
     }
@@ -64,12 +65,11 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                   <Form.Item
                     {...restField}
                     name={[name, 'version_no']}
-                    rules={[
-                      { required: true, message: 'Version No. is required' }
-                    ]}
+                    rules={[{ required: true, message: 'Version is required' }]}
                   >
                     <SealInput.Input
-                      label="Version No."
+                      trim
+                      label="Version"
                       required
                     ></SealInput.Input>
                   </Form.Item>
@@ -81,6 +81,7 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                     ]}
                   >
                     <SealInput.Input
+                      trim
                       label="Image Name"
                       required
                     ></SealInput.Input>
@@ -89,29 +90,42 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                 <Form.Item name={[name, 'run_command']} {...restField}>
                   <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
                 </Form.Item>
+                <Form.Item name={[name, 'isBuiltin']} {...restField} hidden>
+                  <Checkbox></Checkbox>
+                </Form.Item>
                 <div className="flex justify-between items-center">
                   <span className="flex-center">
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'is_default']}
-                      valuePropName="checked"
-                      initialValue={false}
-                      noStyle
-                    >
-                      <Checkbox>Set as Default Version</Checkbox>
-                    </Form.Item>
-                  </span>
-                  <div className="flex-center gap-16">
-                    {fields.length > 1 && (
-                      <Button
-                        size="small"
-                        onClick={() => remove(name)}
-                        shape="circle"
+                    {!currentData?.is_build_in && (
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'is_default']}
+                        valuePropName="checked"
+                        initialValue={false}
+                        noStyle
                       >
-                        <MinusOutlined />
-                      </Button>
+                        <Radio
+                          onChange={(e: any) =>
+                            handleSetDefaultVersion(e, index)
+                          }
+                        >
+                          Set as Default Version
+                        </Radio>
+                      </Form.Item>
                     )}
-                  </div>
+                  </span>
+                  {
+                    <div className="flex-center gap-16">
+                      {fields.length > 1 && (
+                        <Button
+                          size="small"
+                          onClick={() => remove(name)}
+                          shape="circle"
+                        >
+                          <MinusOutlined />
+                        </Button>
+                      )}
+                    </div>
+                  }
                 </div>
                 <Divider
                   className="divider"