fix: using select handler for provider hint

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

@@ -1,13 +1,18 @@
-import { Steps } from 'antd';
+import { Steps, Typography } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { ProviderType } from '../config';
 
-// `description` is intentionally omitted: the upstream step list ships
-// hardcoded English copy that isn't translated. Keeping it would cause the
-// step to render both the localized title and the English description side
-// by side. Same reason we don't surface `subTitle`.
-const ANTD_STEP_KEYS = ['title', 'icon', 'status', 'disabled'] as const;
+const { Text } = Typography;
+
+const ANTD_STEP_KEYS = [
+  'title',
+  'icon',
+  'status',
+  'disabled',
+  'subTitle'
+] as const;
 
 const Wrapper = styled.div`
   display: flex;
@@ -31,6 +36,11 @@ const Box = styled.div`
     .ant-steps-item-rail-wait {
       --steps-item-solid-line-color: var(--ant-color-split);
     }
+    .ant-steps-item-subtitle {
+      margin-left: 6px;
+      font-size: 13px;
+      color: var(--ant-color-text-tertiary);
+    }
     &:not(.ant-steps-panel) {
       .ant-steps-item-finish {
         --steps-item-icon-bg-color: var(--ant-color-primary);
@@ -43,17 +53,18 @@ const ClusterSteps: React.FC<{
   currentStep: number;
   onChange?: (step: number) => void;
   steps: any[];
+  selectedProvider?: ProviderType;
 }> = (props) => {
   const { steps, currentStep = 0, onChange } = props;
 
-  // Pick only props antd's Step accepts — the upstream step objects carry
-  // custom keys (showModules/showForms/showButtons/...) that would otherwise
-  // be forwarded to the DOM and trigger "React does not recognize the X
-  // prop on a DOM element" warnings. _.pick keeps missing keys missing
-  // (rather than explicitly `undefined`) so antd's defaults still kick in.
   const visibleSteps = steps
     .filter((step) => !step.hideInSteps)
-    .map((step) => _.pick(step, ANTD_STEP_KEYS));
+    .map((step, index) => {
+      return {
+        ..._.pick(step, ANTD_STEP_KEYS),
+        subTitle: index === 0 ? <span>[{props.selectedProvider}]</span> : ''
+      };
+    });
 
   const styles: Record<string, any> = {
     root: {