feat(console): progress bar on cloud page (#3139)

packages/console/src/pages/Cloud/components/ActionBar/index.module.scss

@@ -1,11 +1,15 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  height: 92px;
+  height: 80px;
-  background-color: var(--color-layer-1);
+
-  padding: 0 _.unit(17);
+  .actions {
-  display: flex;
+    height: 100%;
-  align-items: center;
+    background-color: var(--color-layer-1);
-  flex-direction: row-reverse;
+    padding: 0 _.unit(17);
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
 }

packages/console/src/pages/Cloud/components/ActionBar/index.tsx

@@ -1,11 +1,20 @@
 import type { ReactNode } from 'react';
 
+import ProgressBar from '../ProgressBar';
 import * as styles from './index.module.scss';
 
 type Props = {
+  step: number;
   children: ReactNode;
 };
 
-const ActionBar = ({ children }: Props) => <div className={styles.container}>{children}</div>;
+const totalSteps = 4;
+
+const ActionBar = ({ step, children }: Props) => (
+  <div className={styles.container}>
+    <ProgressBar currentStep={step} totalSteps={totalSteps} />
+    <div className={styles.actions}>{children}</div>
+  </div>
+);
 
 export default ActionBar;

packages/console/src/pages/Cloud/components/ProgressBar/index.module.scss

@@ -0,0 +1,16 @@
+@use '@/scss/underscore' as _;
+
+.progressBar {
+  display: flex;
+  gap: _.unit(1);
+
+  .stepIndicator {
+    height: 4px;
+    background-color: var(--color-neutral-variant-80);
+    flex: 1;
+
+    &.active {
+      background-color: var(--color-text-link);
+    }
+  }
+}

packages/console/src/pages/Cloud/components/ProgressBar/index.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  currentStep: number;
+  totalSteps: number;
+};
+
+const ProgressBar = ({ currentStep, totalSteps }: Props) => (
+  <div className={styles.progressBar}>
+    {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (
+      <div
+        key={step}
+        className={classNames(styles.stepIndicator, step <= currentStep && styles.active)}
+      />
+    ))}
+  </div>
+);
+
+export default ProgressBar;

packages/console/src/pages/Cloud/pages/About/index.tsx

@@ -101,7 +101,7 @@ const About = () => {
           </form>
         </div>
       </OverlayScrollbar>
-      <ActionBar>
+      <ActionBar step={2}>
         <Button title="general.next" type="primary" onClick={onNext} />
         <Button title="general.back" onClick={onBack} />
       </ActionBar>

packages/console/src/pages/Cloud/pages/Congrats/index.tsx

@@ -74,7 +74,7 @@ const Congrats = () => {
           </div>
         </div>
       </OverlayScrollbar>
-      <ActionBar>
+      <ActionBar step={4}>
         <Button
           type="primary"
           title="cloud.congrats.enter_admin_console"

packages/console/src/pages/Cloud/pages/Welcome/index.tsx

@@ -83,7 +83,7 @@ const Welcome = () => {
           </form>
         </div>
       </OverlayScrollbar>
-      <ActionBar>
+      <ActionBar step={1}>
         <Button
           title="general.next"
           type="primary"