Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 22 Packages Projects Releases Wiki Activity

Fleet UI: Set up flow breadcrumbs refactor (#16905)

Browse Source
This commit is contained in:
RachelElysia
2024-02-21 13:37:29 -05:00
committed by GitHub
parent 58d882b684
commit 0aa187cbca
10 changed files with 107 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/forms/RegistrationForm/RegistrationForm.jsx
+1 -1
View File
@@ -120,7 +120,7 @@ class RegistrationForm extends Component {
<div className={baseClass}>
<div className={formSectionClasses}>
<div className={adminDetailsContainerClass}>
<h2>Setup user</h2>
<h2>Set up user</h2>
<AdminDetails
formData={formData}
handleSubmit={onPageFormSubmit}
frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
+1 -1
View File
@@ -10,7 +10,7 @@ describe("RegistrationForm - component", () => {
expect(
container.querySelectorAll(".user-registration__container--admin").length
).toEqual(1);
expect(screen.getByText("Setup user")).toBeInTheDocument();
expect(screen.getByText("Set up user")).toBeInTheDocument();
});
it("renders OrgDetails on the second page", () => {
frontend/components/forms/RegistrationForm/_styles.scss
+1 -1
View File
@@ -181,7 +181,7 @@
.button {
width: 160px;
margin-top: $pad-xxlarge;
margin-top: $pad-medium; // 40px total (24px gap + 16px more)
}
}
}
frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx
-84
View File
@@ -1,84 +0,0 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
class Breadcrumbs extends Component {
static propTypes = {
onClick: PropTypes.func,
pageProgress: PropTypes.number,
};
static defaultProps = {
pageProgress: 1,
};
onClick = (page) => {
return (evt) => {
evt.preventDefault();
const { onClick: handleClick } = this.props;
return handleClick(page);
};
};
render() {
const { onClick } = this;
const { pageProgress } = this.props;
const baseClass = "registration-breadcrumbs";
const pageBaseClass = `${baseClass}__page`;
const page1ClassName = classnames(
pageBaseClass,
`${pageBaseClass}--1`,
"button--unstyled",
{
[`${pageBaseClass}--active`]: pageProgress === 1,
[`${pageBaseClass}--complete`]: pageProgress > 1,
}
);
const page2TabIndex = pageProgress >= 2 ? 0 : -1;
const page2ClassName = classnames(
pageBaseClass,
`${pageBaseClass}--2`,
"button--unstyled",
{
[`${pageBaseClass}--active`]: pageProgress === 2,
[`${pageBaseClass}--complete`]: pageProgress > 2,
}
);
const page3TabIndex = pageProgress >= 3 ? 0 : -1;
const page3ClassName = classnames(
pageBaseClass,
`${pageBaseClass}--3`,
"button--unstyled",
{
[`${pageBaseClass}--active`]: pageProgress === 3,
[`${pageBaseClass}--complete`]: pageProgress > 3,
}
);
return (
<div className={baseClass}>
<button className={page1ClassName} onClick={onClick(1)}>
Setup user
</button>
<button
className={page2ClassName}
onClick={onClick(2)}
tabIndex={page2TabIndex}
>
Organization details
</button>
<button
className={page3ClassName}
onClick={onClick(3)}
tabIndex={page3TabIndex}
>
Set Fleet URL
</button>
</div>
);
}
}
export default Breadcrumbs;
frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
-60
View File
@@ -1,60 +0,0 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs";
describe("Breadcrumbs - component", () => {
it("renders 3 Button components", () => {
render(<Breadcrumbs page={1} />);
expect(screen.getAllByRole("button").length).toEqual(3);
});
it("renders page 1 Button as active when the page prop is 1", () => {
const { container } = render(<Breadcrumbs page={1} />);
const page1Btn = container.querySelector(
"button.registration-breadcrumbs__page--1"
);
const page2Btn = container.querySelector(
"button.registration-breadcrumbs__page--2"
);
const page3Btn = container.querySelector(
"button.registration-breadcrumbs__page--3"
);
expect(page1Btn.className).toContain(
"registration-breadcrumbs__page--active"
);
expect(page2Btn.className).not.toContain(
"registration-breadcrumbs__page--active"
);
expect(page3Btn.className).not.toContain(
"registration-breadcrumbs__page--active"
);
});
it("calls the onClick prop with the page number when clicked", () => {
const onClickSpy = jest.fn();
const { container } = render(<Breadcrumbs page={1} onClick={onClickSpy} />);
const page1Btn = container.querySelector(
"button.registration-breadcrumbs__page--1"
);
const page2Btn = container.querySelector(
"button.registration-breadcrumbs__page--2"
);
const page3Btn = container.querySelector(
"button.registration-breadcrumbs__page--3"
);
fireEvent.click(page1Btn);
expect(onClickSpy).toHaveBeenCalledWith(1);
fireEvent.click(page2Btn);
expect(onClickSpy).toHaveBeenCalledWith(2);
fireEvent.click(page3Btn);
expect(onClickSpy).toHaveBeenCalledWith(3);
});
});
frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx
+37
View File
@@ -0,0 +1,37 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { noop } from "lodash";
import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs";
describe("Breadcrumbs - component", () => {
it("renders 3 Button components", () => {
render(<Breadcrumbs onSetPage={noop} pageProgress={1} currentPage={1} />);
expect(screen.getAllByRole("button").length).toEqual(3);
});
it("renders page 1 Button as active when the current page prop is 1", () => {
const { container } = render(
<Breadcrumbs onSetPage={noop} pageProgress={1} currentPage={1} />
);
const page1Btn = container.querySelector(
"button.registration-breadcrumbs__page--1"
);
const page2Btn = container.querySelector(
"button.registration-breadcrumbs__page--2"
);
const page3Btn = container.querySelector(
"button.registration-breadcrumbs__page--3"
);
expect(page1Btn?.className).toContain(
"registration-breadcrumbs__page--active"
);
expect(page2Btn?.className).not.toContain(
"registration-breadcrumbs__page--active"
);
expect(page3Btn?.className).not.toContain(
"registration-breadcrumbs__page--active"
);
});
});
frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx
+64
View File
@@ -0,0 +1,64 @@
import React, { MouseEventHandler } from "react";
import classnames from "classnames";
import Button from "components/buttons/Button";
interface IBreadcrumbs {
onSetPage: (page: number) => void;
currentPage: number;
pageProgress: number;
}
const baseClass = "registration-breadcrumbs";
const Breadcrumbs = ({
onSetPage,
currentPage = 1,
pageProgress = 1,
}: IBreadcrumbs): JSX.Element => {
const pageBaseClass = `${baseClass}__page`;
const page1ClassName = classnames(pageBaseClass, `${pageBaseClass}--1`, {
[`${pageBaseClass}--active`]: currentPage === 1,
[`${pageBaseClass}--complete`]: pageProgress > 1,
});
const page2TabIndex = pageProgress >= 2 ? 0 : -1;
const page2ClassName = classnames(pageBaseClass, `${pageBaseClass}--2`, {
[`${pageBaseClass}--active`]: currentPage === 2,
[`${pageBaseClass}--complete`]: pageProgress > 2,
});
const page3TabIndex = pageProgress >= 3 ? 0 : -1;
const page3ClassName = classnames(pageBaseClass, `${pageBaseClass}--3`, {
[`${pageBaseClass}--active`]: currentPage === 3,
[`${pageBaseClass}--complete`]: pageProgress > 3,
});
return (
<div className={baseClass}>
<Button
className={page1ClassName}
onClick={() => onSetPage(1)}
variant="unstyled"
>
Set up user
</Button>
<Button
className={page2ClassName}
onClick={() => onSetPage(2)}
tabIndex={page2TabIndex}
variant="unstyled"
>
Organization details
</Button>
<Button
className={page3ClassName}
onClick={() => onSetPage(3)}
tabIndex={page3TabIndex}
variant="unstyled"
>
Set Fleet URL
</Button>
</div>
);
};
export default Breadcrumbs;
frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+1 -2
View File
@@ -71,7 +71,6 @@
&--active {
font-weight: $bold;
color: $core-white;
}
&--1 {
@@ -97,7 +96,7 @@
&.registration-breadcrumbs__page--complete {
&::before {
background-color: $core-white;
background: $core-white;
background-size: auto;
z-index: 2;
}
frontend/pages/RegistrationPage/Breadcrumbs/index.js → frontend/pages/RegistrationPage/Breadcrumbs/index.ts
View File
frontend/pages/RegistrationPage/RegistrationPage.tsx
+2 -2
View File
@@ -86,8 +86,8 @@ const RegistrationPage = ({ router }: IRegistrationPageProps) => {
className={`${baseClass}__logo`}
/>
<Breadcrumbs
onClick={onSetPage}
page={page}
currentPage={page}
onSetPage={onSetPage}
pageProgress={pageProgress}
/>
<RegistrationForm