style: cluster creation steps

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

@@ -1,4 +1,5 @@
 import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons';
+import { Steps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -14,6 +15,12 @@ const Box = styled.div`
     font-size: 14px;
     margin-bottom: 24px;
   }
+  .ant-steps {
+    --steps-title-font-size: 14px;
+    .ant-steps-item {
+      --steps-item-base-width: 20px;
+    }
+  }
 `;
 
 const StepItemWrapper = styled.div`
@@ -86,19 +93,30 @@ const ClusterSteps: React.FC<{
 }> = (props) => {
   const { steps, currentStep = 0, onChange } = props;
 
+  const visibleSteps = steps.filter((step) => !step.hideInSteps);
   return (
     <Box>
-      <div className="indicates">
-        STEP {currentStep + 1} OF {steps.length}
-      </div>
       <Wrapper>
-        {steps.map((item, index) => (
+        {/* {visibleSteps.map((item, index) => (
           <StepsItem
             key={index}
             active={currentStep === index}
             item={item}
           ></StepsItem>
-        ))}
+        ))} */}
+        <Steps
+          current={currentStep}
+          items={visibleSteps}
+          type="panel"
+          styles={{
+            item: {
+              paddingBlock: 0
+            },
+            itemRail: {
+              borderColor: 'var(--ant-color-split)'
+            }
+          }}
+        ></Steps>
       </Wrapper>
     </Box>
   );

src/pages/cluster-management/components/footer-buttons.tsx

@@ -58,7 +58,7 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
             <ArrowRightOutlined />
           </Button>
         )}
-        {showButtons.skip && (
+        {showButtons.done && (
           <Button type="primary" onClick={handleCancel}>
             {intl.formatMessage({ id: 'common.button.done' })}
           </Button>
@@ -70,8 +70,7 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
             style={{ minWidth: 88 }}
             loading={loading}
           >
-            {/* {intl.formatMessage({ id: 'common.button.save' })} */}
-            Create & Continue
+            {intl.formatMessage({ id: 'common.button.save' })}
           </Button>
         )}
       </div>

src/pages/cluster-management/components/success-result.tsx

@@ -0,0 +1,54 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Button, Flex, Result } from 'antd';
+import React from 'react';
+import { ProviderValueMap } from '../config';
+
+const SuccessResult: React.FC<{
+  provider: string;
+  onSkip: () => void;
+  onAddWorker: () => void;
+}> = ({ provider, onSkip, onAddWorker }) => {
+  const k8sTips =
+    'Next, register this Kubernetes cluster. You can also skip this step and register it later from the cluster list.';
+  const dockerTips = (
+    <div className="flex-column">
+      <span>Next, add worker to this cluster.</span>
+      <span>
+        You can also skip this step and add them later from the cluster list.
+      </span>
+    </div>
+  );
+
+  return (
+    <Result
+      styles={{
+        title: {
+          fontSize: 16,
+          fontWeight: 500
+        }
+      }}
+      icon={
+        <CheckCircleFilled
+          style={{ color: 'var(--ant-color-success)', fontSize: 42 }}
+        />
+      }
+      status="success"
+      title="Cluster Created Successfully!"
+      subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips}
+      extra={[
+        <Flex gap={16} justify="center" key="buttons">
+          <Button key="buy" onClick={onSkip}>
+            Skip for now
+          </Button>
+          <Button type="primary" key="console" onClick={onAddWorker}>
+            {provider === ProviderValueMap.Kubernetes
+              ? 'Register Cluster'
+              : 'Add Worker'}
+          </Button>
+        </Flex>
+      ]}
+    />
+  );
+};
+
+export default SuccessResult;

src/pages/cluster-management/components/support-gpus.tsx

@@ -44,7 +44,6 @@ const Box = styled.div`
       font-size: 10px;
       font-weight: 400;
       background-color: var(--ant-blue-1);
-      color: var(--ant-color-info);
     }
   }
 `;