chore: providers ux

src/pages/maas-provider/forms/index.tsx

@@ -1,12 +1,20 @@
 import IconFont from '@/components/icon-font';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import CollapsePanel from '@/pages/_components/collapse-panel';
 import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
 import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
 import { maasProviderType } from '../config';
+import FormContext from '../config/form-context';
 import { MaasProviderItem as ListItem } from '../config/types';
 import AccessToken from './access-token';
 import AdvanceConfig from './advance-config';
@@ -31,9 +39,9 @@ const TABKeysMap = {
 const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   const { action, provider, currentData, onFinish } = props;
   const intl = useIntl();
+  const [form] = Form.useForm();
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
-  const [form] = Form.useForm();
   const scrollTabsRef = useRef<any>(null);
 
   const segmentOptions = [
@@ -50,17 +58,11 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       field: 'supportedModels'
     },
     {
-      value: TABKeysMap.CUSTOMCONFIG,
-      label: 'Custom Config',
+      value: TABKeysMap.ADVANCED,
+      label: intl.formatMessage({ id: 'resources.form.advanced' }),
       icon: <IconFont type="icon-settings" />,
-      field: 'customConfig'
+      field: 'advanceConfig'
     }
-    // {
-    //   value: TABKeysMap.ADVANCED,
-    //   label: intl.formatMessage({ id: 'resources.form.advanced' }),
-    //   icon: <IconFont type="icon-settings" />,
-    //   field: 'categories'
-    // }
   ];
 
   const handleActiveChange = (key: string[]) => {
@@ -80,6 +82,15 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     }
   }));
 
+  useEffect(() => {
+    if (action === PageAction.EDIT && currentData) {
+      form.setFieldsValue({
+        ...currentData,
+        models: currentData.models || []
+      });
+    }
+  }, [form, currentData, action]);
+
   return (
     <ScrollSpyTabs
       ref={scrollTabsRef}
@@ -93,34 +104,46 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <Form form={form}>
-        <Basic />
-        <AccessToken />
-        <CollapsePanel
-          activeKey={activeKey}
-          accordion={false}
-          onChange={handleOnCollapseChange}
-          items={[
-            {
-              key: TABKeysMap.SUPPORTEDMODELS,
-              label: 'Supported Models',
-              forceRender: true,
-              children: <SupportedModels></SupportedModels>
-            },
-            {
-              key: TABKeysMap.CUSTOMCONFIG,
-              label: 'Custom Config',
-              forceRender: true,
-              children: (
-                <AdvanceConfig
-                  action={action}
-                  provider={provider}
-                ></AdvanceConfig>
-              )
+      <FormContext.Provider value={{ providerType: provider, action }}>
+        <Form
+          form={form}
+          onFinish={onFinish}
+          initialValues={{
+            proxy_config: {
+              enabled: false,
+              url: '',
+              timeout: 30
             }
-          ]}
-        ></CollapsePanel>
-      </Form>
+          }}
+        >
+          <Basic />
+          <AccessToken />
+          <CollapsePanel
+            activeKey={activeKey}
+            accordion={false}
+            onChange={handleOnCollapseChange}
+            items={[
+              {
+                key: TABKeysMap.SUPPORTEDMODELS,
+                label: 'Supported Models',
+                forceRender: true,
+                children: <SupportedModels></SupportedModels>
+              },
+              {
+                key: TABKeysMap.ADVANCED,
+                label: 'Advanced',
+                forceRender: true,
+                children: (
+                  <AdvanceConfig
+                    action={action}
+                    provider={provider}
+                  ></AdvanceConfig>
+                )
+              }
+            ]}
+          ></CollapsePanel>
+        </Form>
+      </FormContext.Provider>
     </ScrollSpyTabs>
   );
 });