refactor(console): use dynamic step component for connector guide

packages/console/src/pages/Connectors/Guide/Steps.tsx

@@ -0,0 +1,46 @@
+import { type LocalePhrase } from '@logto/phrases';
+import React, { type ReactNode, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+type CanBeArray<T> = T | T[];
+
+type StepProps = {
+  readonly children: ReactNode;
+  readonly index?: number;
+  readonly tKey: keyof LocalePhrase['translation']['admin_console']['connectors']['guide'];
+};
+
+export function Step({ children, index, tKey }: StepProps) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.connectors.guide' });
+
+  return (
+    <div className={styles.block}>
+      <div className={styles.blockTitle}>
+        <div className={styles.number}>{index}</div>
+        <div>{t(tKey)}</div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+type Props = {
+  readonly children: CanBeArray<ReactElement<StepProps, typeof Step> | boolean>;
+};
+
+function Steps({ children }: Props) {
+  return (
+    <>
+      {React.Children.map(children, (child, index) => {
+        return (
+          typeof child !== 'boolean' &&
+          React.cloneElement(child, { key: child.key, index: index + 1 })
+        );
+      })}
+    </>
+  );
+}
+
+export default Steps;

packages/console/src/pages/Connectors/Guide/index.tsx

@@ -33,6 +33,7 @@ import { trySubmitSafe } from '@/utils/form';
 
 import { splitMarkdownByTitle } from '../utils';
 
+import Steps, { Step } from './Steps';
 import * as styles from './index.module.scss';
 
 const targetErrorCode = 'connector.multiple_target_with_same_platform';
@@ -187,44 +188,34 @@ function Guide({ connector, onClose }: Props) {
           <div className={styles.setup}>
             <FormProvider {...methods}>
               <form autoComplete="off" onSubmit={onSubmit}>
+                <Steps>
                   {isSocialConnector && (
-                  <div className={styles.block}>
+                    <Step tKey="general_setting">
-                    <div className={styles.blockTitle}>
-                      <div className={styles.number}>1</div>
-                      <div>{t('connectors.guide.general_setting')}</div>
-                    </div>
                       <BasicForm
                         isAllowEditTarget={isStandard}
                         isStandard={isStandard}
                         conflictConnectorName={conflictConnectorName}
                       />
-                  </div>
+                    </Step>
                   )}
-                <div className={styles.block}>
+                  <Step tKey="parameter_configuration">
-                  <div className={styles.blockTitle}>
-                    <div className={styles.number}>{isSocialConnector ? 2 : 1}</div>
-                    <div>{t('connectors.guide.parameter_configuration')}</div>
-                  </div>
                     <ConfigForm
                       connectorId={callbackConnectorId.current}
                       connectorFactoryId={connectorFactoryId}
                       connectorType={connectorType}
                       formItems={formItems}
                     />
-                </div>
+                  </Step>
                   {!isSocialConnector && (
-                  <div className={styles.block}>
+                    <Step tKey="test_connection">
-                    <div className={styles.blockTitle}>
-                      <div className={styles.number}>2</div>
-                      <div>{t('connectors.guide.test_connection')}</div>
-                    </div>
                       <ConnectorTester
                         connectorFactoryId={connectorId}
                         connectorType={connectorType}
                         parse={() => configParser(watch(), formItems)}
                       />
-                  </div>
+                    </Step>
                   )}
+                </Steps>
                 <div className={styles.footer}>
                   <Button
                     title="connectors.save_and_done"