Looks good, please make sure to fix failing tests. Some comments below.
Diff comments:
> diff --git a/frontend/src/components/NoRegions/NoRegions.tsx
> b/frontend/src/components/NoRegions/NoRegions.tsx
> new file mode 100644
> index 0000000..083e20c
> --- /dev/null
> +++ b/frontend/src/components/NoRegions/NoRegions.tsx
> @@ -0,0 +1,48 @@
> +import { useState } from "react";
> +
> +import { Link } from "react-router-dom";
> +
> +import ExternalLink from "../ExternalLink";
> +import TableCaption from "../TableCaption";
> +
> +import docsUrls from "@/base/docsUrls";
> +import { useRequestsQuery } from "@/hooks/api";
> +
> +const NoRegions = () => {
> + const [size] = useState(50);
> + const [page] = useState(0);
> + const { data, isLoading } = useRequestsQuery({ page: `${page}`, size:
> `${size}` });
> +
> + return (
> + <TableCaption>
> + <TableCaption.Title>No enroled MAAS regions</TableCaption.Title>
> + {!isLoading && 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>
> + <br />
> + <Link className="p-button--positive no-region__action-link"
> 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>
> + <br />
> + <Link className="p-button--positive no-region__action-link"
> to="/tokens">
I'd suggest to use another TableCaption.Description element instead of a custom
className here
<TableCaption>
<TableCaption.Title>No enroled MAAS regions</TableCaption.Title>
<TableCaption.Description>To enrol follow the steps in the Tokens
page...</TableCaption.Description>
<TableCaption.Description><Link className="p-button--positive"
to="/tokens">...</TableCaption.Description>
...
> + Go to Tokens page
> + </Link>
> + </TableCaption.Description>
> + )}
> + </TableCaption>
> + );
> +};
> +
> +export default NoRegions;
> diff --git a/frontend/src/components/NoRegions/_NoRegions.scss
> b/frontend/src/components/NoRegions/_NoRegions.scss
> new file mode 100644
> index 0000000..87b645e
> --- /dev/null
> +++ b/frontend/src/components/NoRegions/_NoRegions.scss
> @@ -0,0 +1,3 @@
> +caption .no-region__action-link {
> + margin-top: $spv--medium;
> +}
This will be no longer necessary once the <TableCaption.Description> element is
used
> \ No newline at end of file
--
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.
--
Mailing list: https://launchpad.net/~sts-sponsors
Post to : [email protected]
Unsubscribe : https://launchpad.net/~sts-sponsors
More help : https://help.launchpad.net/ListHelp
