fix: cluster worker config issues

src/pages/cluster-management/components/add-cluster.tsx

@@ -56,6 +56,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
+      centered={true}
       width={680}
       footer={
         <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>

src/pages/cluster-management/components/add-worker/add-worker-step.tsx

@@ -30,7 +30,7 @@ const Container = styled.div`
  * clusterList and onClusterChange are only required when from worker page.
  */
 type AddWorkerProps = {
-  isModal?: boolean;
+  actionSource?: 'modal' | 'page';
   provider: ProviderType;
   clusterList?: Global.BaseOption<number, ClusterListItem>[];
   clusterLoading?: boolean;
@@ -51,7 +51,7 @@ type AddWorkerProps = {
  */
 const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
   const {
-    isModal = false,
+    actionSource,
     registrationInfo,
     provider,
     clusterList,
@@ -81,10 +81,12 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
   }, [stepList]);
 
   React.useEffect(() => {
-    if (!isModal) {
+    // this effect is only triggered when used in cluster create page
+    console.log('actionSource:', actionSource);
+    if (actionSource === 'page') {
       createModelsChunkRequest();
     }
-  }, [isModal]);
+  }, [actionSource]);
 
   return (
     <AddWorkerContext.Provider

src/pages/cluster-management/components/add-worker/index.tsx

@@ -141,7 +141,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
       }
     >
       <AddWorkerStep
-        isModal={true}
+        actionSource={'modal'}
         stepList={stepList}
         provider={provider}
         clusterList={clusterList}

src/pages/cluster-management/components/cloud-provider-form.tsx

@@ -193,6 +193,9 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         ]}
       >
         <SealInput.Input
+          description={intl.formatMessage({
+            id: 'clusters.form.serverUrl.tips'
+          })}
           label={intl.formatMessage({ id: 'clusters.create.serverUrl' })}
           required={true}
           trim={true}

src/pages/cluster-management/components/cluster-form.tsx

@@ -1,3 +1,4 @@
+import { useScrollerContext } from '@/components/scroller-modal/use-scroller-context';
 import SealInput from '@/components/seal-form/seal-input';
 import SealTextArea from '@/components/seal-form/seal-textarea';
 import { PageActionType } from '@/config/types';
@@ -24,21 +25,41 @@ type AddModalProps = {
 };
 const ClusterForm: React.FC<AddModalProps> = forwardRef(
   ({ action, provider, currentData, credentialList, onFinish }, ref) => {
+    const { scrollToBottom } = useScrollerContext();
     const [form] = Form.useForm();
     const intl = useIntl();
     const [activeKey, setActiveKey] = React.useState<string[]>([]);
     const advanceConfigRef = React.useRef<any>(null);
 
-    const handleOnCollapseChange = (keys: string | string[]) => {
+    const handleOnCollapseChange = async (keys: string | string[]) => {
       setActiveKey(Array.isArray(keys) ? keys : [keys]);
-      if (currentData && advanceConfigRef.current) {
+      if (keys?.includes?.('advanceConfig')) {
+        await new Promise((resolve) => {
+          setTimeout(resolve, 500);
+        });
+        scrollToBottom();
       }
     };
 
+    const handleOnFinish = (values: FormData) => {
+      const workerConfig = yaml2Json(advanceConfigRef.current?.getYamlValue());
+
+      onFinish({
+        ...values,
+        worker_config: {
+          ...workerConfig
+        }
+      });
+    };
+
     useEffect(() => {
       if (currentData) {
         form.setFieldsValue(currentData);
+      }
+    }, [currentData]);
 
+    useEffect(() => {
+      if (currentData) {
         if (advanceConfigRef.current) {
           const workerConfigYaml = json2Yaml(currentData.worker_config || {});
           advanceConfigRef.current?.setYamlValue(workerConfigYaml);
@@ -78,7 +99,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
       <Form
         name="clusterForm"
         form={form}
-        onFinish={onFinish}
+        onFinish={handleOnFinish}
         preserve={false}
         scrollToFirstError={true}
         initialValues={currentData}
@@ -113,7 +134,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
         )}
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealTextArea
-            autoSize={{ minRows: 4, maxRows: 6 }}
+            autoSize={{ minRows: 2, maxRows: 4 }}
             label={intl.formatMessage({ id: 'common.table.description' })}
           ></SealTextArea>
         </Form.Item>