fix(styles): providers access token

src/pages/maas-provider/forms/access-token.tsx

@@ -1,4 +1,5 @@
-import ListInput from '@/components/list-input';
+import MetadataList from '@/components/metadata-list';
+import SealInput from '@/components/seal-form/seal-input';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
@@ -10,17 +11,37 @@ const AccessToken = () => {
   const form = Form.useFormInstance<FormData>();
   const tokenList = Form.useWatch('api_tokens', form) || [];
 
-  const handleOnChange = (values: string[]) => {
-    form.setFieldValue('api_tokens', values);
+  const onAdd = () => {
+    const newList = [...tokenList];
+    newList.push('');
+    form.setFieldValue('api_tokens', newList);
+  };
+
+  const onDelete = (index: number) => {
+    const newList = [...tokenList];
+    newList.splice(index, 1);
+    form.setFieldValue('api_tokens', newList);
+  };
+
+  const handleInputChange = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const newList = [...tokenList];
+    newList[index] = e.target.value;
+    form.setFieldValue('api_tokens', newList);
   };
 
   return (
     <>
       <Form.Item
         name="api_tokens"
+        style={{
+          marginBottom: 8
+        }}
         rules={[
           {
-            required: true,
+            required: false,
             message: getRuleMessage(
               'input',
               intl.formatMessage({ id: 'providers.form.tokens.title' })
@@ -28,13 +49,22 @@ const AccessToken = () => {
           }
         ]}
       >
-        <ListInput
-          required={true}
-          btnText={intl.formatMessage({ id: 'providers.form.tokens.add' })}
-          label={intl.formatMessage({ id: 'providers.form.tokens.title' })}
+        <MetadataList
           dataList={tokenList}
-          onChange={handleOnChange}
-        ></ListInput>
+          btnText={intl.formatMessage({ id: 'providers.form.tokens.add' })}
+          label={intl.formatMessage({ id: 'providers.form.fallback.token' })}
+          onAdd={onAdd}
+          onDelete={onDelete}
+        >
+          {(item, index) => (
+            <div style={{ width: '100%' }} key={index}>
+              <SealInput.Password
+                value={item}
+                onChange={(e) => handleInputChange(index, e)}
+              ></SealInput.Password>
+            </div>
+          )}
+        </MetadataList>
       </Form.Item>
     </>
   );

src/pages/maas-provider/forms/advance-config.tsx

@@ -4,6 +4,7 @@ import YamlEditor from '@/pages/_components/yaml-editor';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
+import AccessToken from './access-token';
 import ProxyConfig from './proxy-config';
 
 const AdvanceConfig: React.FC<{
@@ -28,6 +29,7 @@ const AdvanceConfig: React.FC<{
   return (
     <>
       <div data-field="advanceConfig"></div>
+      <AccessToken></AccessToken>
       <ProxyConfig></ProxyConfig>
       <Form.Item
         hidden

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

@@ -54,6 +54,22 @@ const Basic = () => {
           })}
         />
       </Form.Item>
+      <Form.Item<FormData>
+        name="api_key"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'providers.form.tokens.title')
+          }
+        ]}
+      >
+        <SealInput.Password
+          required
+          label={intl.formatMessage({
+            id: 'providers.form.tokens.title'
+          })}
+        />
+      </Form.Item>
       <Form.Item<FormData> name="description">
         <SealInput.TextArea
           scaleSize={true}

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

@@ -6,6 +6,7 @@ import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrappe
 import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import {
   forwardRef,
   useEffect,
@@ -15,7 +16,6 @@ import {
 } from 'react';
 import FormContext from '../config/form-context';
 import { FormData, MaasProviderItem as ListItem } from '../config/types';
-import AccessToken from './access-token';
 import AdvanceConfig from './advance-config';
 import Basic from './basic';
 import SupportedModels from './supported-models';
@@ -63,6 +63,17 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     }
   ];
 
+  const handleOnFinish = (values: FormData) => {
+    const apiTokens = values.api_tokens?.filter?.(
+      (item) => item && item.trim() !== ''
+    );
+    const data = {
+      ..._.omit(values, ['api_key']),
+      api_tokens: _.concat([], values.api_key, apiTokens || [])
+    };
+    onFinish(data);
+  };
+
   const handleActiveChange = (key: string[]) => {
     setActiveKey(key);
   };
@@ -87,6 +98,8 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     ) {
       form.setFieldsValue({
         ...currentData,
+        api_key: currentData.api_tokens?.[0] || '',
+        api_tokens: currentData.api_tokens?.slice(1) || [],
         proxy_enabled: !!currentData.proxy_url
       });
     }
@@ -108,7 +121,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       <FormContext.Provider value={{ action }}>
         <Form
           form={form}
-          onFinish={onFinish}
+          onFinish={handleOnFinish}
           initialValues={{
             proxy_enabled: false,
             proxy_url: '',
@@ -116,7 +129,6 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
           }}
         >
           <Basic />
-          <AccessToken />
           <CollapsePanel
             activeKey={activeKey}
             accordion={false}

src/pages/maas-provider/forms/model-item.tsx

@@ -48,7 +48,7 @@ const ModelItem: React.FC<ModelItemProps> = ({
     const res = await runTestModel({
       data: {
         model_name: item.name,
-        api_token: form.getFieldValue('api_tokens')?.[0] || '',
+        api_token: form.getFieldValue('api_key') || '',
         config: {
           type: form.getFieldValue(['config', 'type']) || ''
         }

src/pages/maas-provider/forms/supported-models.tsx

@@ -14,12 +14,12 @@ const SupportedModels = () => {
 
   const handleOpenChange = async (open: boolean) => {
     try {
-      await form.validateFields(['api_tokens', ['config', 'type']]);
+      await form.validateFields(['api_key']);
 
       if (open && providerModelList.length === 0) {
         fetchProviderModels({
           data: {
-            api_token: form.getFieldValue('api_tokens')?.[0] || '',
+            api_token: form.getFieldValue('api_key') || '',
             config: {
               type: form.getFieldValue(['config', 'type']) || ''
             }