fix: custom versin configs

src/pages/backends/forms/built-in-versions.tsx

@@ -8,13 +8,13 @@ const ItemWrapper = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
+  width: 100%;
   .title {
     width: 100%;
     justify-content: space-between;
     display: flex;
     align-items: center;
     font-weight: 600;
-    margin-bottom: 8px;
   }
 `;
 
@@ -35,7 +35,8 @@ const RowWrapper = styled.div`
 
 interface VersionItemProps {
   data: {
-    backend_list: string[];
+    build_in_frameworks: string[];
+    custom_framework: string;
     version_no: string;
     image_name: string;
     run_command: string;
@@ -44,20 +45,24 @@ interface VersionItemProps {
   };
 }
 
-const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
+export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
   return (
     <ItemWrapper>
       <div className="title">
         <span>{data.version_no}</span>
         {data.is_default && (
-          <ThemeTag color="geekblue" className="font-400">
+          <ThemeTag
+            color="geekblue"
+            className="font-400"
+            style={{ marginRight: 0 }}
+          >
             Default
           </ThemeTag>
         )}
       </div>
       <RowWrapper>
         <span className="text drivers">
-          {data.backend_list?.map((item) => {
+          {data.build_in_frameworks?.map((item) => {
             return (
               <ThemeTag
                 key={item}

src/pages/backends/forms/index.tsx

@@ -1,11 +1,9 @@
 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';
-import BuiltInVersionsForm from './built-in-versions';
 import VersionsForm from './versions-config';
 
 type AddModalProps = {
@@ -22,19 +20,17 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
     const onFinishFailed = (errorInfo: any) => {
       const errorFields = errorInfo.errorFields || [];
       if (errorFields.length > 0) {
-        const hasVersionsError = errorFields.some((field: any) =>
+        const versionError = errorFields.find((field: any) =>
           field.name.includes('version_configs')
         );
-        if (hasVersionsError) {
-          setActiveKey([...new Set([...activeKey, 'version_configs'])]);
+        if (versionError) {
+          setActiveKey([...new Set([versionError.name[1]])]);
+        } else {
+          setActiveKey([]);
         }
       }
     };
 
-    const handleOnCollapseChange = (keys: string | string[]) => {
-      setActiveKey(Array.isArray(keys) ? keys : [keys]);
-    };
-
     useEffect(() => {
       if (currentData) {
         console.log('currentData:', currentData);
@@ -71,25 +67,11 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         onFinishFailed={onFinishFailed}
       >
         <BasicForm action={action}></BasicForm>
-
-        <CollapsePanel
+        <VersionsForm
+          action={action}
+          currentData={currentData}
           activeKey={activeKey}
-          accordion={false}
-          onChange={handleOnCollapseChange}
-          items={[
-            ...(currentData?.is_build_in
-              ? [
-                  {
-                    key: 'builtin_version_configs',
-                    label: 'Built-in Versions',
-                    forceRender: true,
-                    children: <BuiltInVersionsForm></BuiltInVersionsForm>
-                  }
-                ]
-              : [])
-          ]}
-        ></CollapsePanel>
-        <VersionsForm action={action} currentData={currentData}></VersionsForm>
+        ></VersionsForm>
       </Form>
     );
   }

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

@@ -1,25 +1,36 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import CollapsibleContainer from '@/components/collapse-container';
 import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Form, Radio } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { frameworks } from '../config';
 import { ListItem } from '../config/types';
+import { VersionItem } from './built-in-versions';
 
 const Box = styled.div`
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 150px 1fr;
   gap: 16px;
   align-items: center;
 `;
 
-const ActionWrapper = styled.div`
+const Label = styled.span`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-top: 24px;
+  gap: 4px;
+  color: var(--ant-color-text-secondary);
+`;
+
+const ImageInner = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 20px;
 `;
 
 const Title = styled.div`
@@ -30,23 +41,33 @@ const Title = styled.div`
   margin-bottom: 8px;
 `;
 
-const Label = styled.div`
-  line-height: 1;
-  color: var(--ant-color-text-tertiary);
-  margin-bottom: 20px;
-  font-size: var(--font-size-base);
+const VersionItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 16px;
+  border-radius: var(--ant-border-radius);
+  background-color: var(--ant-color-fill-quaternary);
+  width: 100%;
 `;
 
-const ItemWrapper = styled.div``;
-
 type AddModalProps = {
   action: PageActionType;
   currentData?: ListItem;
+  activeKey?: number[];
 };
-const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
+const VersionsForm: React.FC<AddModalProps> = ({
+  action,
+  currentData,
+  activeKey
+}) => {
+  const defaultCollapseKey =
+    action === 'edit' ? new Set<number>() : new Set([0]);
   const form = Form.useFormInstance();
   const version_configs = Form.useWatch('version_configs', form);
-  const [collapseKey, setCollapseKey] = React.useState<string[]>(['0']);
+  const buildInVersionConfigs = Form.useWatch('build_in_version_configs', form);
+  const [collapseKey, setCollapseKey] =
+    React.useState<Set<number>>(defaultCollapseKey);
   const versionList = [
     {
       version_no: '',
@@ -86,154 +107,204 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
     }
   };
 
-  const onToggle = (open: boolean, key: string) => {
-    setCollapseKey(open ? [key] : []);
+  const onToggle = (open: boolean, key: number) => {
+    setCollapseKey(open ? new Set([key]) : new Set());
   };
 
-  const handleAdd = async (add: (defaultValue?: any) => void) => {
+  const add = () => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const newVersion = {
+      version_no: '',
+      image_name: '',
+      run_command: '',
+      isBuiltin: false,
+      is_default: false
+    };
+    form.setFieldValue('version_configs', [...versions, newVersion]);
+  };
+
+  const remove = (versions: any[], index: number) => {
+    const updatedVersions = versions.filter(
+      (_: any, idx: number) => idx !== index
+    );
+    // If the removed version was the default, set the first version as default
+    if (versions[index].is_default && updatedVersions.length > 0) {
+      updatedVersions[0].is_default = true;
+    }
+    form.setFieldValue('version_configs', updatedVersions);
+  };
+
+  const handleAdd = async () => {
     try {
       const isValid = await form.validateFields(['version_configs'], {
         recursive: true
       });
-      console.log('isValid:', isValid);
+      console.log('isValid:', isValid, version_configs);
       if (isValid) {
         add();
+        setTimeout(() => {
+          setCollapseKey(new Set([version_configs?.length]));
+        }, 100);
       }
     } catch (error) {
-      console.log('Validation failed:', error);
+      const errorKey = (error as any).errorFields?.[0]?.name?.[1];
+      if (typeof errorKey === 'number') {
+        setCollapseKey(new Set([errorKey]));
+      }
     }
   };
 
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
-    console.log('versions:', versions);
+
     if (Array.isArray(versions) && versions.length === 0) {
       form.setFieldValue('version_configs', versionList);
     }
   }, []);
 
+  useEffect(() => {
+    if (activeKey && activeKey.length > 0) {
+      setCollapseKey(new Set(activeKey));
+    }
+  }, [activeKey]);
+
   return (
-    <Form.List name="version_configs">
-      {(fields, { add, remove }) => {
-        return (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              marginBottom: '24px'
-            }}
-          >
-            <Title>
-              <span>Version Configurations</span>
-              <Button
-                onClick={() => handleAdd(add)}
-                variant="filled"
-                color="default"
-              >
-                <PlusOutlined /> Add Version
-              </Button>
-            </Title>
-            {fields.map(({ key, name, ...restField }, index) => (
-              <>
-                <CollapsibleContainer
-                  collapsible={true}
-                  key={key}
-                  defaultOpen
-                  open={collapseKey.includes(String(key))}
-                  title={<span>{version_configs[name]?.version_no}</span>}
-                  subtitle={
-                    version_configs[name]?.image_name && (
-                      <span style={{ marginLeft: 20 }}>
-                        {version_configs[name]?.image_name}
-                      </span>
-                    )
-                  }
-                  onToggle={(open) => onToggle(open, key + '')}
-                  deleteBtn={false}
-                  right={
-                    <div className="flex-center gap-8">
-                      <span
-                        className="flex-center"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        {!currentData?.is_build_in && (
-                          <Form.Item
-                            {...restField}
-                            name={[name, 'is_default']}
-                            valuePropName="checked"
-                            initialValue={false}
-                            noStyle
-                          >
-                            <Radio
-                              onChange={(e: any) =>
-                                handleSetDefaultVersion(e, index)
-                              }
-                            >
-                              Default Version
-                            </Radio>
-                          </Form.Item>
-                        )}
-                      </span>
-                      {(fields.length > 1 || currentData?.is_build_in) && (
-                        <Button
-                          size="small"
-                          onClick={() => remove(name)}
-                          shape="circle"
-                        >
-                          <MinusOutlined />
-                        </Button>
-                      )}
-                    </div>
-                  }
-                >
-                  <Box>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'version_no']}
-                      rules={[
-                        { required: true, message: 'Version is required' }
-                      ]}
-                    >
-                      <SealInput.Input
-                        trim
-                        label="Version"
-                        required
-                      ></SealInput.Input>
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'image_name']}
-                      rules={[
-                        { required: true, message: 'Image Name is required' }
-                      ]}
-                    >
-                      <SealInput.Input
-                        trim
-                        label="Image Name"
-                        required
-                      ></SealInput.Input>
-                    </Form.Item>
-                  </Box>
-                  <Form.Item
-                    name={[name, 'run_command']}
-                    {...restField}
-                    noStyle
+    <>
+      <Form.Item name="version_configs" hidden></Form.Item>
+      <Form.Item name="build_in_version_configs" hidden></Form.Item>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          marginBottom: '24px'
+        }}
+      >
+        <Title>
+          <span>Versions Config</span>
+          <Button onClick={handleAdd} variant="filled" color="default">
+            <PlusOutlined /> Add Version
+          </Button>
+        </Title>
+        {buildInVersionConfigs?.map((item: any, index: number) => (
+          <>
+            <VersionItemWrapper>
+              <VersionItem data={item} />
+            </VersionItemWrapper>
+            <Divider
+              className="divider"
+              style={{
+                borderTop: '1px  dashed var(--ant-color-border)'
+              }}
+            />
+          </>
+        ))}
+        {version_configs?.map((item: any, index: number) => (
+          <>
+            <CollapsibleContainer
+              collapsible={true}
+              showExpandIcon={true}
+              key={index}
+              defaultOpen
+              open={collapseKey.has(index)}
+              title={
+                <Label>
+                  <span>Version:</span>
+                  <span>{item.version_no}</span>
+                </Label>
+              }
+              subtitle={
+                item.image_name && (
+                  <ImageInner>
+                    <span>Image:</span>
+                    <AutoTooltip ghost maxWidth={280}>
+                      {item.image_name}
+                    </AutoTooltip>
+                  </ImageInner>
+                )
+              }
+              onToggle={(open) => onToggle(open, index)}
+              deleteBtn={false}
+              right={
+                <div className="flex-center gap-8">
+                  <span
+                    className="flex-center"
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
-                  </Form.Item>
-                </CollapsibleContainer>
-                {index < fields.length - 1 && (
-                  <Divider
-                    className="divider"
-                    style={{ borderTop: '1px  dashed var(--ant-color-border)' }}
-                  />
-                )}
-              </>
-            ))}
-          </div>
-        );
-      }}
-    </Form.List>
+                    {!currentData?.is_build_in && (
+                      <Form.Item
+                        name={['version_configs', index, 'is_default']}
+                        valuePropName="checked"
+                        initialValue={false}
+                        noStyle
+                      >
+                        <Radio
+                          onChange={(e: any) =>
+                            handleSetDefaultVersion(e, index)
+                          }
+                        >
+                          Default Version
+                        </Radio>
+                      </Form.Item>
+                    )}
+                  </span>
+                  {(version_configs.length > 1 || currentData?.is_build_in) && (
+                    <Button
+                      size="small"
+                      shape="circle"
+                      onClick={() => remove(version_configs, index)}
+                    >
+                      <MinusOutlined />
+                    </Button>
+                  )}
+                </div>
+              }
+            >
+              <Box>
+                <Form.Item
+                  name={['version_configs', index, 'version_no']}
+                  rules={[{ required: true, message: 'Version is required' }]}
+                >
+                  <SealInput.Input
+                    trim
+                    label="Version"
+                    required
+                  ></SealInput.Input>
+                </Form.Item>
+                <Form.Item
+                  name={['version_configs', index, 'image_name']}
+                  rules={[
+                    { required: true, message: 'Image Name is required' }
+                  ]}
+                >
+                  <SealInput.Input
+                    trim
+                    label="Image Name"
+                    required
+                  ></SealInput.Input>
+                </Form.Item>
+              </Box>
+              <Form.Item name={['version_configs', index, 'run_command']}>
+                <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
+              </Form.Item>
+              <Form.Item
+                name={['version_configs', index, 'custom_framework']}
+                style={{ marginBottom: 0 }}
+              >
+                <SealSelect label="Framework" options={frameworks} />
+              </Form.Item>
+            </CollapsibleContainer>
+            {index < version_configs.length - 1 && (
+              <Divider
+                className="divider"
+                style={{
+                  borderTop: '1px  dashed var(--ant-color-border)'
+                }}
+              />
+            )}
+          </>
+        ))}
+      </div>
+    </>
   );
 };
 

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

@@ -1,11 +0,0 @@
-import { Form } from 'antd';
-import React from 'react';
-import VersionsField from './versions-config';
-
-const VersionsForm: React.FC = () => {
-  return (
-    <Form>
-      <VersionsField />
-    </Form>
-  );
-};