sts-sponsors team mailing list archive

[Jones Ogolo <mp+442449@xxxxxxxxxxxxxxxxxx>]

Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1602-display-token-delete-failure-msg into maas-site-manager:main.

Commit message:
Add error notification when delete fails

Requested reviews:
  MAAS Lander (maas-lander): unittests
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/442449

Q.A:
- Goto `/settings/tokens`
- Select a few tokens
- Goto network tab(dev tools) and block requests to `localhost8000/tokens`
- Click on the delete button on the page
- Ensure you see an error notification
-- 
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1602-display-token-delete-failure-msg into maas-site-manager:main.

diff --git a/frontend/src/components/TokensList/TokensList.tsx b/frontend/src/components/TokensList/TokensList.tsx
index b805a11..3a9d7d5 100644
--- a/frontend/src/components/TokensList/TokensList.tsx
+++ b/frontend/src/components/TokensList/TokensList.tsx
@@ -61,6 +61,17 @@ const TokensList = () => {
           </Col>
         </Row>
       ) : null}
+      {tokensDeleteMutation.isError ? (
+        <Row>
+          <Col size={12}>
+            <Notification severity="negative" title="Error">
+              {tokensDeleteMutation.error instanceof Error
+                ? tokensDeleteMutation.error.message
+                : "An error occured while deleting the tokens"}
+            </Notification>
+          </Col>
+        </Row>
+      ) : null}
       <header className="tokens-list-header" id="tokens-list-header">
         <Row>
           <Col size={12}>
diff --git a/frontend/src/components/TokensList/TokensListDelete.test.tsx b/frontend/src/components/TokensList/TokensListDelete.test.tsx
new file mode 100644
index 0000000..44e5116
--- /dev/null
+++ b/frontend/src/components/TokensList/TokensListDelete.test.tsx
@@ -0,0 +1,53 @@
+import { rest } from "msw";
+import { setupServer } from "msw/node";
+
+import TokensList from "./TokensList";
+
+import urls from "@/api/urls";
+import type * as apiHooks from "@/hooks/react-query";
+import { tokenFactory } from "@/mocks/factories";
+import { createMockGetTokensResolver } from "@/mocks/resolvers";
+import { screen, renderWithMemoryRouter, userEvent } from "@/test-utils";
+
+const tokens = tokenFactory.buildList(2);
+const tokensDeleteMock = vi.fn();
+const errorMsg = "Unable to delete tokens";
+
+const mockServer = setupServer(rest.get(urls.tokens, createMockGetTokensResolver(tokens)));
+
+beforeAll(() => {
+  mockServer.listen();
+});
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+afterAll(() => {
+  mockServer.close();
+});
+
+describe("delete errors", () => {
+  it("displays an error notification when delete fails", async () => {
+    vi.mock("@/hooks/react-query", async (importOriginal) => {
+      const original: typeof apiHooks = await importOriginal();
+      return {
+        ...original,
+        useDeleteTokensMutation: () => ({ mutate: tokensDeleteMock, isError: true, error: new Error(errorMsg) }),
+      };
+    });
+
+    renderWithMemoryRouter(<TokensList />);
+    const checkboxes = screen.getAllByRole("checkbox");
+    await userEvent.click(checkboxes[1]);
+    await userEvent.click(checkboxes[2]);
+    await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+    expect(
+      screen.getByRole("heading", {
+        name: /error/i,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(new RegExp(errorMsg, "i"))).toBeInTheDocument();
+  });
+});