chore: providers ux

src/pages/model-access/forms/index.tsx

@@ -1,17 +1,68 @@
+import IconFont from '@/components/icon-font';
 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 } from 'react';
-import { MaasProviderItem as ListItem } from '../config/types';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { maasProviderType } from '../config';
+import { AccessItem as ListItem } from '../config/types';
+import Basic from './basic';
+import Endpoints from './endpoints';
+import MetaData from './meta-data';
 
 interface ProviderFormProps {
   ref?: any;
   action: PageActionType;
+  provider?: maasProviderType;
   currentData?: ListItem; // Used when action is EDIT
   onFinish: (values: FormData) => void;
 }
 
+const TABKeysMap = {
+  BASIC: 'basic',
+  METADATA: 'metadata',
+  ENDPOINTS: 'endpoints',
+  ADVANCED: 'advanced'
+};
+
 const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
+  const { action, provider, currentData, onFinish } = props;
+  const intl = useIntl();
+  const { getScrollElementScrollableHeight } = useWrapperContext();
+  const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
   const [form] = Form.useForm();
+  const scrollTabsRef = useRef<any>(null);
+
+  const segmentOptions = [
+    {
+      value: TABKeysMap.BASIC,
+      label: 'Basic',
+      icon: <IconFont type="icon-basic" />,
+      field: 'name'
+    },
+    {
+      value: TABKeysMap.METADATA,
+      label: 'Metadata',
+      icon: <IconFont type="icon-speed" />,
+      field: 'metadata'
+    },
+    {
+      value: TABKeysMap.ENDPOINTS,
+      label: 'Endpoints',
+      icon: <IconFont type="icon-settings" />,
+      field: 'endpoints'
+    }
+  ];
+
+  const handleActiveChange = (key: string[]) => {
+    setActiveKey(key);
+  };
+
+  const handleOnCollapseChange = (keys: string | string[]) => {
+    setActiveKey(Array.isArray(keys) ? keys : [keys]);
+  };
 
   useImperativeHandle(ref, () => ({
     submit: () => {
@@ -23,9 +74,43 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   }));
 
   return (
-    <Form form={form} layout="vertical">
-      {/* Form fields go here */}
-    </Form>
+    <ScrollSpyTabs
+      ref={scrollTabsRef}
+      defaultTarget="basic"
+      segmentOptions={segmentOptions}
+      activeKey={activeKey}
+      setActiveKey={handleActiveChange}
+      segmentedTop={{
+        top: 0,
+        offsetTop: 96
+      }}
+      getScrollElementScrollableHeight={getScrollElementScrollableHeight}
+    >
+      <Form form={form}>
+        <Basic />
+        <CollapsePanel
+          activeKey={activeKey}
+          accordion={false}
+          onChange={handleOnCollapseChange}
+          items={[
+            {
+              key: TABKeysMap.METADATA,
+              label: 'Metadata',
+              forceRender: true,
+              children: <MetaData></MetaData>
+            },
+            {
+              key: TABKeysMap.ENDPOINTS,
+              label: 'Endpoints',
+              forceRender: true,
+              children: (
+                <Endpoints action={action} provider={provider}></Endpoints>
+              )
+            }
+          ]}
+        ></CollapsePanel>
+      </Form>
+    </ScrollSpyTabs>
   );
 });