Add multi-step popover for default view components (#50018)

enterprise/frontend/src/embedding-sdk/components/private/util/MultiStepPopover/MultiStepPopover.tsx

+import {
+  Children,
+  type PropsWithChildren,
+  type ReactElement,
+  isValidElement,
+} from "react";
+
+import { Popover, type PopoverProps } from "metabase/ui";
+
+type StepValue = string | number;
+
+type StepProps = PropsWithChildren<{
+  value: StepValue;
+}>;
+
+const Step = ({ children }: PropsWithChildren<StepProps>) => {
+  return children;
+};
+
+const Target = ({ children }: PropsWithChildren) => {
+  return <>{children}</>;
+};
+
+type MultiStepPopoverProps = PropsWithChildren<{
+  currentStep: StepValue;
+}>;
+
+const MultiStepPopoverContent = ({
+  currentStep,
+  children,
+  ...popoverProps
+}: MultiStepPopoverProps & PopoverProps) => {
+  const findChild = <T extends ReactElement>(
+    predicate: (child: ReactElement) => child is T,
+  ): T | null => {
+    const child = Children.toArray(children).find(
+      (child): child is T => isValidElement(child) && predicate(child),
+    );
+    return child || null;
+  };
+
+  const currentStepContent = findChild(
+    (child): child is ReactElement<StepProps> =>
+      child.type === Step && child.props.value === currentStep,
+  )?.props.children;
+
+  const targetElement = findChild(
+    (child): child is ReactElement => child.type === Target,
+  )?.props.children;
+
+  return (
+    <Popover {...popoverProps}>
+      <Popover.Target>{targetElement}</Popover.Target>;
+      <Popover.Dropdown>{currentStepContent}</Popover.Dropdown>;
+    </Popover>
+  );
+};
+
+export const MultiStepPopover = Object.assign(MultiStepPopoverContent, {
+  Step,
+  Target,
+});

enterprise/frontend/src/embedding-sdk/components/private/util/MultiStepPopover/MultiStepPopover.unit.spec.tsx

+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Button } from "metabase/ui";
+
+import { MultiStepPopover } from "./MultiStepPopover";
+
+const setup = (currentStep = "step1") => {
+  return render(
+    <MultiStepPopover currentStep={currentStep}>
+      <MultiStepPopover.Target>
+        <Button>Hello world</Button>
+      </MultiStepPopover.Target>
+      <MultiStepPopover.Step value="step1">
+        Step 1 content
+      </MultiStepPopover.Step>
+      <MultiStepPopover.Step value="step2">
+        Step 2 content
+      </MultiStepPopover.Step>
+      <MultiStepPopover.Step value="step3">
+        Step 3 content
+      </MultiStepPopover.Step>
+    </MultiStepPopover>,
+  );
+};
+
+describe("MultiStepPopover", () => {
+  it("should render the trigger button", () => {
+    setup();
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+  });
+
+  it("should show popover content when button is clicked", async () => {
+    setup();
+    const button = screen.getByText("Hello world");
+    await userEvent.click(button);
+    expect(screen.getByText("Step 1 content")).toBeInTheDocument();
+  });
+
+  it("should render correct step content based on currentStep prop", async () => {
+    setup("step2");
+    const button = screen.getByText("Hello world");
+    await userEvent.click(button);
+    expect(screen.getByText("Step 2 content")).toBeInTheDocument();
+  });
+
+  it("should render nothing in dropdown when invalid step is provided", async () => {
+    setup("invalid-step");
+    const button = screen.getByText("Hello world");
+    await userEvent.click(button);
+    expect(screen.queryByText("Step 1 content")).not.toBeInTheDocument();
+    expect(screen.queryByText("Step 2 content")).not.toBeInTheDocument();
+    expect(screen.queryByText("Step 3 content")).not.toBeInTheDocument();
+  });
+
+  describe("Step component", () => {
+    it("should render children within a Paper component", () => {
+      render(
+        <MultiStepPopover.Step value="test">
+          Test content
+        </MultiStepPopover.Step>,
+      );
+
+      const content = screen.getByText("Test content");
+      expect(content).toBeInTheDocument();
+    });
+  });
+});

enterprise/frontend/src/embedding-sdk/components/private/util/MultiStepPopover/index.ts

+export * from "./MultiStepPopover";