sts-sponsors team mailing list archive

[Peter Makowski <mp+440258@xxxxxxxxxxxxxxxxxx>]

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.