🪟 🎨 Use StepIndicator for connection setup steps

airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss

@@ -0,0 +1,31 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.steps {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-md;
+}
+
+.tooltip {
+  display: flex;
+}
+
+.step {
+  display: inline-block;
+  width: 35px;
+  height: 4px;
+  border-radius: 3px;
+  background-color: colors.$grey-300;
+
+  // Give the element a bit larger hover area for the tooltip to show
+  margin: 8px 0;
+
+  &.completed {
+    background-color: colors.$blue-200;
+  }
+
+  &.current {
+    background-color: colors.$blue;
+  }
+}

airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx

@@ -0,0 +1,51 @@
+import classNames from "classnames";
+import { FormattedMessage } from "react-intl";
+
+import { Tooltip } from "components/ui/Tooltip";
+
+import styles from "./StepsIndicator.module.scss";
+
+interface Step {
+  id: string;
+  name: string;
+}
+
+interface StepIndicatorProps {
+  step: Step;
+  isCurrent: boolean;
+  isCompleted: boolean;
+}
+
+interface StepsIndicatorProps {
+  steps: Step[];
+  activeStep: string;
+  className?: string;
+}
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ step, isCurrent, isCompleted }) => {
+  return (
+    <Tooltip
+      containerClassName={styles.tooltip}
+      control={
+        <span
+          aria-label={step.name}
+          aria-current={isCurrent ? "step" : undefined}
+          className={classNames(styles.step, { [styles.current]: isCurrent, [styles.completed]: isCompleted })}
+        />
+      }
+    >
+      {step.name} {isCurrent && <FormattedMessage id="ui.stepIndicator.currentStep" />}
+    </Tooltip>
+  );
+};
+
+export const StepsIndicator: React.FC<StepsIndicatorProps> = ({ className, steps, activeStep }) => {
+  const activeIndex = steps.findIndex((step) => step.id === activeStep);
+  return (
+    <div className={classNames(className, styles.steps)}>
+      {steps.map((step, index) => (
+        <StepIndicator step={step} isCurrent={activeStep === step.id} isCompleted={index < activeIndex} />
+      ))}
+    </div>
+  );
+};

airbyte-webapp/src/components/ui/StepsIndicator/index.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { StepsIndicator } from "./StepsIndicator";
+
+export default {
+  title: "UI/StepsIndicator",
+  component: StepsIndicator,
+  argTypes: {},
+} as ComponentMeta<typeof StepsIndicator>;
+
+const Template: ComponentStory<typeof StepsIndicator> = (args) => <StepsIndicator {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  steps: [
+    {
+      id: "source",
+      name: "Create source",
+    },
+    {
+      id: "destination",
+      name: "Create destination",
+    },
+    {
+      id: "connection",
+      name: "Create connection",
+    },
+  ],
+  activeStep: "destination",
+};

airbyte-webapp/src/components/ui/StepsIndicator/index.ts

@@ -0,0 +1 @@
+export { StepsIndicator } from "./StepsIndicator";

airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx

@@ -20,7 +20,16 @@ const FLOATING_OPTIONS: UseFloatingProps = {
 };
 
 export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = (props) => {
-  const { children, control, className, disabled, cursor, theme = "dark", placement = "bottom" } = props;
+  const {
+    children,
+    control,
+    className,
+    containerClassName,
+    disabled,
+    cursor,
+    theme = "dark",
+    placement = "bottom",
+  } = props;
 
   const [isMouseOver, setIsMouseOver] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -59,7 +68,7 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = (props)
     <>
       <div
         ref={reference}
-        className={styles.container}
+        className={classNames(styles.container, containerClassName)}
         style={disabled ? undefined : { cursor }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}

airbyte-webapp/src/components/ui/Tooltip/types.ts

@@ -6,6 +6,7 @@ export type TooltipTheme = "dark" | "light";
 export interface TooltipProps {
   control: React.ReactNode;
   className?: string;
+  containerClassName?: string;
   disabled?: boolean;
   cursor?: TooltipCursor;
   theme?: TooltipTheme;

airbyte-webapp/src/locales/en.json

@@ -580,6 +580,7 @@
   "ui.keyValuePairV3": "{key}, {value}",
   "ui.learnMore": "Learn more",
   "ui.secretTextArea.hidden": "Contents hidden. Click to show.",
+  "ui.stepIndicator.currentStep": "(current step)",
 
   "airbyte.datatype.string": "String",
   "airbyte.datatype.date": "Date",

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { LoadingPage } from "components";
@@ -9,7 +9,7 @@ import ConnectionBlock from "components/ConnectionBlock";
 import { FormPageContent } from "components/ConnectorBlocks";
 import { CreateConnectionForm } from "components/CreateConnection/CreateConnectionForm";
 import { PageHeader } from "components/ui/PageHeader";
-import { StepsMenu } from "components/ui/StepsMenu";
+import { StepsIndicator } from "components/ui/StepsIndicator";
 
 import {
   DestinationDefinitionRead,
@@ -75,6 +75,7 @@ function usePreloadData(): {
 export const CreationFormPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.CONNECTIONS_NEW);
   const location = useLocation();
+  const { formatMessage } = useIntl();
 
   // exp-signup-selected-source-definition
   const state = useLocationState<{ sourceDefinitionId?: string }>();
@@ -185,30 +186,28 @@ export const CreationFormPage: React.FC = () => {
       ? [
           {
             id: StepsTypes.CREATE_ENTITY,
-            name: <FormattedMessage id="onboarding.createSource" />,
+            name: formatMessage({ id: "onboarding.createSource" }),
           },
           {
             id: StepsTypes.CREATE_CONNECTOR,
-            name: <FormattedMessage id="onboarding.createDestination" />,
+            name: formatMessage({ id: "onboarding.createDestination" }),
           },
           {
             id: StepsTypes.CREATE_CONNECTION,
-            name: <FormattedMessage id="onboarding.setUpConnection" />,
+            name: formatMessage({ id: "onboarding.setUpConnection" }),
           },
         ]
       : [
           {
             id: StepsTypes.CREATE_ENTITY,
             name:
-              type === "destination" ? (
-                <FormattedMessage id="onboarding.createDestination" />
-              ) : (
-                <FormattedMessage id="onboarding.createSource" />
-              ),
+              type === "destination"
+                ? formatMessage({ id: "onboarding.createDestination" })
+                : formatMessage({ id: "onboarding.createSource" }),
           },
           {
             id: StepsTypes.CREATE_CONNECTION,
-            name: <FormattedMessage id="onboarding.setUpConnection" />,
+            name: formatMessage({ id: "onboarding.setUpConnection" }),
           },
         ];
 
@@ -226,7 +225,7 @@ export const CreationFormPage: React.FC = () => {
       <ConnectorDocumentationWrapper>
         <PageHeader
           title={<FormattedMessage id={titleId} />}
-          middleComponent={<StepsMenu lightMode data={steps} activeStep={currentStep} />}
+          middleComponent={<StepsIndicator steps={steps} activeStep={currentStep} />}
         />
         <FormPageContent big={currentStep === StepsTypes.CREATE_CONNECTION}>
           {currentStep !== StepsTypes.CREATE_CONNECTION && (!!source || !!destination) && (