sts-sponsors team mailing list archive

[Peter Makowski <mp+440258@xxxxxxxxxxxxxxxxxx>]

Looks good, just one small thing to fix.

Diff comments:

> diff --git a/frontend/src/components/NoRegions/NoRegions.tsx b/frontend/src/components/NoRegions/NoRegions.tsx
> new file mode 100644
> index 0000000..e51b2bb
> --- /dev/null
> +++ b/frontend/src/components/NoRegions/NoRegions.tsx
> @@ -0,0 +1,50 @@
> +import { Link } from "react-router-dom";
> +
> +import ExternalLink from "../ExternalLink";
> +import TableCaption from "../TableCaption";
> +
> +import docsUrls from "@/base/docsUrls";
> +import { useRequestsCountQuery } from "@/hooks/api";
> +
> +const NoRegions = () => {
> +  const { data } = useRequestsCountQuery();
> +
> +  return (
> +    <TableCaption>
> +      <TableCaption.Title>No enroled MAAS regions</TableCaption.Title>
> +      {typeof data !== "undefined" && data.total > 0 ? (

No need to check for the data directly, that's what the `isSuccess` boolean is for. You can rewrite this to `{isSuccess && data.total > 0 ? (`

> +        <>
> +          <TableCaption.Description>
> +            You have <strong>{data?.total} open enrolment requests, </strong>inspect them in the Requests page.
> +            <br />
> +            <ExternalLink to={docsUrls.enrollmentRequest}>
> +              Learn more about the enrolment process in the documentation.
> +            </ExternalLink>
> +          </TableCaption.Description>
> +          <TableCaption.Description>
> +            <Link className="p-button--positive" to="/requests">
> +              Go to Requests Page
> +            </Link>
> +          </TableCaption.Description>
> +        </>
> +      ) : (
> +        <>
> +          <TableCaption.Description>
> +            To enrol follow the steps in the Tokens page.
> +            <br />
> +            <ExternalLink to={docsUrls.enrollmentRequest}>
> +              Learn more about the enrolment process in the documentation.
> +            </ExternalLink>
> +          </TableCaption.Description>
> +          <TableCaption.Description>
> +            <Link className="p-button--positive" to="/tokens">
> +              Go to Tokens page
> +            </Link>
> +          </TableCaption.Description>
> +        </>
> +      )}
> +    </TableCaption>
> +  );
> +};
> +
> +export default NoRegions;
> diff --git a/frontend/src/test-utils.tsx b/frontend/src/test-utils.tsx
> index f949896..f349edc 100644
> --- a/frontend/src/test-utils.tsx
> +++ b/frontend/src/test-utils.tsx
> @@ -46,9 +46,29 @@ const renderWithMemoryRouter = (ui: ReactElement, options?: MemoryRenderOptions)
>    return render(ui, { wrapper: Providers, ...options });
>  };
>  
> +const getByTextContent = (text: string | RegExp) => {

Glad you managed to figure out a way of doing this!

> +  return screen.getByText((_, element) => {
> +    const hasText = (element: Element | null) => {
> +      if (element) {
> +        if (text instanceof RegExp && element.textContent) {
> +          return text.test(element.textContent);
> +        } else {
> +          return element.textContent === text;
> +        }
> +      } else {
> +        return false;
> +      }
> +    };
> +    const elementHasText = hasText(element);
> +    const childrenDontHaveText = Array.from(element?.children || []).every((child) => !hasText(child));
> +    return elementHasText && childrenDontHaveText;
> +  });
> +};
> +
>  export { screen, within, waitFor } from "@testing-library/react";
>  export { customRender as render };
>  export { renderHook } from "@testing-library/react-hooks";
>  export { default as userEvent } from "@testing-library/user-event";
>  export { renderWithMemoryRouter };
>  export { Providers };
> +export { getByTextContent };


-- 
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/440258
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1526-add-empty-states-to-regions-table into maas-site-manager:main.