chore: create cluster ux

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

@@ -2,15 +2,18 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal/index';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
-import { CloseOutlined } from '@ant-design/icons';
+import ContainerInstall from '@/pages/resources/components/container-install';
+import { CheckCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Form } from 'antd';
-import React from 'react';
+import { Form } from 'antd';
+import React, { useMemo } from 'react';
+import { ProviderValueMap } from '../config';
 import {
   ClusterFormData as FormData,
   ClusterListItem as ListItem
 } from '../config/types';
 import CloudProvider from './cloud-provider-form';
+import RegisterClusterInner from './resiter-cluster-inner';
 
 type AddModalProps = {
   title: string;
@@ -18,7 +21,6 @@ type AddModalProps = {
   open: boolean;
   provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
   onOk: (values: FormData) => void;
-  data?: ListItem;
   onCancel: () => void;
 };
 const AddCluster: React.FC<AddModalProps> = ({
@@ -27,11 +29,14 @@ const AddCluster: React.FC<AddModalProps> = ({
   open,
   provider,
   onOk,
-  data,
   onCancel
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
+  const [submissionStatus, setSubmissionStatus] = React.useState<{
+    success: boolean;
+    data: ListItem;
+  }>({ success: true, data: {} as ListItem });
 
   const handleSubmit = () => {
     form.submit();
@@ -42,56 +47,98 @@ const AddCluster: React.FC<AddModalProps> = ({
     onCancel();
   };
 
+  const renderAddWorkerContent = () => {
+    if (provider === ProviderValueMap.Custom) {
+      return <ContainerInstall token="${token}" />;
+    }
+    if (provider === ProviderValueMap.Kubernetes) {
+      return (
+        <RegisterClusterInner
+          data={submissionStatus.data}
+        ></RegisterClusterInner>
+      );
+    }
+    return null;
+  };
+  const modalTitle = useMemo(() => {
+    if (submissionStatus.success) {
+      return (
+        <div className="flex-center">
+          <CheckCircleFilled
+            className="text-success font-size-20"
+            style={{ marginRight: '8px' }}
+          />
+          <span>Cluster added! Now you can register a worker.</span>
+        </div>
+      );
+    }
+    return title;
+  }, [submissionStatus.success, title]);
+
+  const renderFooter = () => {
+    if (submissionStatus.success) {
+      return (
+        <ModalFooter
+          onOk={onCancel}
+          onCancel={onCancel}
+          showCancelBtn={false}
+          okText="Skip for Now"
+          okBtnProps={{
+            style: {
+              width: 'auto'
+            }
+          }}
+        ></ModalFooter>
+      );
+    }
+    return <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>;
+  };
+
   return (
     <ScrollerModal
-      title={
-        <div className="flex-between flex-center">
-          <span>{title}</span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={modalTitle}
       open={open}
-      onClose={onCancel}
+      onCancel={handleCancel}
       destroyOnClose={true}
-      closeIcon={false}
+      closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={600}
-      footer={
-        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
-      }
+      width={680}
+      footer={renderFooter()}
     >
-      <Form form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData>
-          name="display_name"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({ id: 'common.table.name' })
-                }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'common.table.name' })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-        {provider === 'digitalocean' && (
-          <CloudProvider provider={provider}></CloudProvider>
-        )}
-        <Form.Item<FormData> name="description" rules={[{ required: false }]}>
-          <SealInput.TextArea
-            label={intl.formatMessage({ id: 'common.table.description' })}
-          ></SealInput.TextArea>
-        </Form.Item>
-      </Form>
+      {submissionStatus.success ? (
+        renderAddWorkerContent()
+      ) : (
+        <Form form={form} onFinish={onOk} preserve={false}>
+          <Form.Item<FormData>
+            name="display_name"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  {
+                    name: intl.formatMessage({ id: 'common.table.name' })
+                  }
+                )
+              }
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({ id: 'common.table.name' })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
+          {provider === 'digitalocean' && (
+            <CloudProvider provider={provider}></CloudProvider>
+          )}
+          <Form.Item<FormData> name="description" rules={[{ required: false }]}>
+            <SealInput.TextArea
+              label={intl.formatMessage({ id: 'common.table.description' })}
+            ></SealInput.TextArea>
+          </Form.Item>
+        </Form>
+      )}
     </ScrollerModal>
   );
 };