sts-sponsors team mailing list archive

[Peter Makowski <mp+441186@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:qa-fixes into maas-site-manager:main.

Commit message:
qa fixes
- fix URL styling MAASENG-1558
- fix region dialogue pluralization


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441186
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:qa-fixes into maas-site-manager:main.

diff --git a/frontend/src/components/RemoveRegions/RemoveRegions.tsx b/frontend/src/components/RemoveRegions/RemoveRegions.tsx
index d4fcaa8..5644e03 100644
--- a/frontend/src/components/RemoveRegions/RemoveRegions.tsx
+++ b/frontend/src/components/RemoveRegions/RemoveRegions.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 
 import { Button, Icon, Input, useId } from "@canonical/react-components";
 import { Field, Form, Formik } from "formik";
+import pluralize from "pluralize";
 import * as Yup from "yup";
 
 import { useAppContext } from "@/context";
@@ -41,7 +42,8 @@ const RemoveRegions = () => {
   const id = useId();
   const confirmTextId = `confirm-text-${id}`;
   const headingId = `heading-${id}`;
-  const expectedConfirmTextValue = `remove ${regionsCount} regions`;
+  const regionsCountText = pluralize("regions", regionsCount || 0, !!regionsCount);
+  const expectedConfirmTextValue = `remove ${regionsCountText}`;
   const handleSubmit = () => {
     // TODO: integrate with delete regions endpoint
   };
@@ -63,21 +65,21 @@ const RemoveRegions = () => {
         <Form aria-labelledby={headingId} className="tokens-create" noValidate>
           <div className="tokens-create">
             <h3 className="tokens-create__heading p-heading--4" id={headingId}>
-              Remove <strong> {regionsCount} regions</strong> from Site Manager
+              Remove <strong> {regionsCountText}</strong> from Site Manager
             </h3>
             <p>
               The deletion of data is irreversible. You can re-enrol the MAAS region again through the enrolment
               process.
             </p>
             <p id={confirmTextId}>
-              Type <strong>remove {regionsCount} regions</strong> to confirm.
+              Type <strong>remove {regionsCountText}</strong> to confirm.
             </p>
             <Field
               aria-labelledby={confirmTextId}
               as={Input}
               error={touched.confirmText && errors.confirmText}
               name="confirmText"
-              placeholder={`remove ${regionsCount} regions`}
+              placeholder={`remove ${regionsCountText}`}
               type="text"
             />
             <Button onClick={() => setSidebar(null)} type="button">
diff --git a/frontend/src/components/SitesList/SitesList.test.tsx b/frontend/src/components/SitesList/SitesList.test.tsx
index 477c817..06f4ab7 100644
--- a/frontend/src/components/SitesList/SitesList.test.tsx
+++ b/frontend/src/components/SitesList/SitesList.test.tsx
@@ -4,7 +4,7 @@ import urls from "@/api/urls";
 import { siteFactory } from "@/mocks/factories";
 import { createMockSitesResolver } from "@/mocks/resolvers";
 import { createMockGetServer } from "@/mocks/server";
-import { render, renderWithMemoryRouter, screen, userEvent, waitFor, within } from "@/test-utils";
+import { renderWithMemoryRouter, screen, userEvent, waitFor, within } from "@/test-utils";
 
 const sites = siteFactory.buildList(2);
 const mockServer = createMockGetServer(urls.sites, createMockSitesResolver(sites));
@@ -20,13 +20,13 @@ afterAll(() => {
 });
 
 it("displays loading text", () => {
-  render(<SitesList />);
+  renderWithMemoryRouter(<SitesList />);
 
   expect(within(screen.getByRole("table", { name: /sites/i })).getByText(/loading/i)).toBeInTheDocument();
 });
 
 it("displays populated sites table", async () => {
-  render(<SitesList />);
+  renderWithMemoryRouter(<SitesList />);
 
   expect(screen.getByRole("table", { name: /sites/i })).toBeInTheDocument();
 
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTable.test.tsx b/frontend/src/components/SitesList/SitesTable/SitesTable.test.tsx
index 6c4db25..f8e3468 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTable.test.tsx
+++ b/frontend/src/components/SitesList/SitesTable/SitesTable.test.tsx
@@ -6,7 +6,7 @@ import urls from "@/api/urls";
 import { enrollmentRequestFactory, siteFactory, sitesQueryResultFactory } from "@/mocks/factories";
 import { createMockGetEnrollmentRequestsResolver } from "@/mocks/resolvers";
 import { createMockGetServer } from "@/mocks/server";
-import { render, renderWithMemoryRouter, screen, within } from "@/test-utils";
+import { renderWithMemoryRouter, screen, within } from "@/test-utils";
 
 const enrollmentRequests = enrollmentRequestFactory.buildList(2);
 const mockServer = createMockGetServer(
@@ -45,7 +45,7 @@ it("displays an empty sites table", () => {
 
 it("displays rows with details for each site", () => {
   const items = siteFactory.buildList(1);
-  render(
+  renderWithMemoryRouter(
     <SitesTable
       data={sitesQueryResultFactory.build({ items, total: 1, page: 1, size: 1 })}
       isFetchedAfterMount={true}
@@ -66,7 +66,7 @@ it("displays rows with details for each site", () => {
 it("displays correctly paginated results", () => {
   const pageLength = 50;
   const items = siteFactory.buildList(pageLength);
-  render(
+  renderWithMemoryRouter(
     <SitesTable
       data={sitesQueryResultFactory.build({ items, total: 100, page: 1, size: pageLength })}
       isFetchedAfterMount={true}
@@ -84,7 +84,7 @@ it("displays correct local time", () => {
   vi.setSystemTime(date);
 
   const item = siteFactory.build({ timezone: 1 });
-  render(
+  renderWithMemoryRouter(
     <SitesTable
       data={sitesQueryResultFactory.build({ items: [item], total: 1, page: 1, size: 1 })}
       isFetchedAfterMount={true}
@@ -99,7 +99,7 @@ it("displays correct local time", () => {
 
 it("displays full name of the country", () => {
   const item = siteFactory.build({ address: { countrycode: "GB" } });
-  render(
+  renderWithMemoryRouter(
     <SitesTable
       data={sitesQueryResultFactory.build({ items: [item], total: 1, page: 1, size: 1 })}
       isFetchedAfterMount={true}
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTable.tsx b/frontend/src/components/SitesList/SitesTable/SitesTable.tsx
index e73b97a..0190168 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTable.tsx
+++ b/frontend/src/components/SitesList/SitesTable/SitesTable.tsx
@@ -9,6 +9,7 @@ import ConnectionInfo from "./ConnectionInfo/ConnectionInfo";
 import SitesTableControls from "./SitesTableControls/SitesTableControls";
 
 import type { SitesQueryResult } from "@/api/types";
+import ExternalLink from "@/components/ExternalLink";
 import NoRegions from "@/components/NoRegions";
 import { isDev } from "@/constants";
 import { useAppContext } from "@/context";
@@ -96,7 +97,7 @@ const SitesTable = ({
         cell: ({ getValue }) => (
           <>
             <div>{getValue().name}</div>
-            <div className="u-text--muted">{getValue().url}</div>
+            <ExternalLink to={getValue().url || ""}>{getValue().url}</ExternalLink>
           </>
         ),
       },