Skip to content
Snippets Groups Projects
Unverified Commit f49c703d authored by Oisin Coveney's avatar Oisin Coveney Committed by GitHub
Browse files

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

parent 290165d9
No related branches found
No related tags found
No related merge requests found
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,
});
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();
});
});
});
export * from "./MultiStepPopover";
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment