From 732cea081e9e2599e9e75eaa93dbdd4aa2e8148b Mon Sep 17 00:00:00 2001 From: Steve Rydz Date: Wed, 2 Aug 2023 10:22:41 +0100 Subject: [PATCH] Fixup --- .../components/Model/PoliciesTable.test.tsx | 22 ----- .../SigningKeys/CreateSigningKeyForm.test.tsx | 63 ------------ .../components/SigningKeys/ModelsModal.tsx | 56 ++--------- .../SigningKeys/SigningKeysFilter.test.tsx | 95 ------------------- .../SigningKeys/SigningKeysTable.tsx | 1 - 5 files changed, 8 insertions(+), 229 deletions(-) delete mode 100644 static/js/brand-store/components/SigningKeys/CreateSigningKeyForm.test.tsx delete mode 100644 static/js/brand-store/components/SigningKeys/SigningKeysFilter.test.tsx diff --git a/static/js/brand-store/components/Model/PoliciesTable.test.tsx b/static/js/brand-store/components/Model/PoliciesTable.test.tsx index 2091128c96..9658e3fa50 100644 --- a/static/js/brand-store/components/Model/PoliciesTable.test.tsx +++ b/static/js/brand-store/components/Model/PoliciesTable.test.tsx @@ -26,10 +26,6 @@ describe("PoliciesTable", () => { it("renders the correct columns", () => { renderComponent(); - expect( - screen.getByRole("columnheader", { name: "Revision" }) - ).toBeInTheDocument(); - expect( screen.getByRole("columnheader", { name: "Signing key" }) ).toBeInTheDocument(); @@ -43,24 +39,6 @@ describe("PoliciesTable", () => { ).toBeInTheDocument(); }); - it("sorts the 'Revision' column when clicking the column header", async () => { - renderComponent(); - - const user = userEvent.setup(); - const columnHeader = screen.getByRole("columnheader", { name: "Revision" }); - - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - - await user.click(columnHeader); - expect(columnHeader.getAttribute("aria-sort")).toBe("ascending"); - - await user.click(columnHeader); - expect(columnHeader.getAttribute("aria-sort")).toBe("descending"); - - await user.click(columnHeader); - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - }); - it("sorts the 'Signing key' column when clicking the column header", async () => { renderComponent(); diff --git a/static/js/brand-store/components/SigningKeys/CreateSigningKeyForm.test.tsx b/static/js/brand-store/components/SigningKeys/CreateSigningKeyForm.test.tsx deleted file mode 100644 index e41f6a16f1..0000000000 --- a/static/js/brand-store/components/SigningKeys/CreateSigningKeyForm.test.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react"; -import { BrowserRouter } from "react-router-dom"; -import { RecoilRoot } from "recoil"; -import { QueryClient, QueryClientProvider } from "react-query"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; - -import "@testing-library/jest-dom"; - -import CreateSigningKeyForm from "./CreateSigningKeyForm"; - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - refetchOnReconnect: false, - }, - }, -}); - -const renderComponent = () => { - return render( - - - - - - - - ); -}; - -describe("CreateSigningKeyForm", () => { - it("disables 'Add model' button if no new model name", async () => { - renderComponent(); - expect(screen.getByRole("button", { name: "Add model" })).toBeDisabled(); - }); - - it("enables 'Add model' button if there is a new model name", async () => { - const user = userEvent.setup(); - renderComponent(); - await user.type( - screen.getByRole("textbox", { name: "Name" }), - "test-model-name" - ); - expect( - screen.getByRole("button", { name: "Add model" }) - ).not.toBeDisabled(); - }); - - it("generates an API key when clicking 'Generate key'", async () => { - const user = userEvent.setup(); - renderComponent(); - await user.click(screen.getByRole("button", { name: "Generate key" })); - const input: HTMLInputElement = screen.getByRole("textbox", { - name: "API key", - }); - expect(input.value.length).toEqual(50); - }); -}); diff --git a/static/js/brand-store/components/SigningKeys/ModelsModal.tsx b/static/js/brand-store/components/SigningKeys/ModelsModal.tsx index 91ff3abf6a..b4c5186fbd 100644 --- a/static/js/brand-store/components/SigningKeys/ModelsModal.tsx +++ b/static/js/brand-store/components/SigningKeys/ModelsModal.tsx @@ -1,44 +1,14 @@ import React from "react"; import { Modal, Icon } from "@canonical/react-components"; -import { useRecoilValue } from "recoil"; -import { - filteredModelsListState, - filteredPoliciesListState, -} from "../../selectors"; - -import type { SigningKey, Model, Policy } from "../../types/shared"; +import type { SigningKey } from "../../types/shared"; type Props = { - modelsModalOpen: boolean; setModelsModalOpen: Function; signingKey: SigningKey; }; -function ModelsModal({ - modelsModalOpen, - setModelsModalOpen, - signingKey, -}: Props) { - const closeHandler = () => setModelsModalOpen(false); - const filteredModels = useRecoilValue>(filteredModelsListState); - const filteredPolicies = useRecoilValue>( - filteredPoliciesListState - ); - - if (!modelsModalOpen) { - return null; - } - - const relatedModels = filteredModels.filter( - (model) => signingKey.models && signingKey.models.includes(model.name) - ); - - const relatedPolicies = filteredPolicies.filter( - (policy) => - signingKey.models && signingKey.models.includes(policy["model-name"]) - ); - +function ModelsModal({ setModelsModalOpen, signingKey }: Props) { return ( } - close={closeHandler} + close={() => { + setModelsModalOpen(false); + }} >

{signingKey.name} is used in :

    - {relatedModels.map((model) => { - const relatedPolicy = relatedPolicies.find( - (policy) => policy["model-name"] === model.name - ); - return ( - -
  • {model.name}
    • -
  • - {relatedPolicy - ? relatedPolicy["created-by"] - : "No policy found"} -
    • -     - ); - })} + {signingKey.models && + signingKey.models.length > 0 && + signingKey.models.map((model) =>
  • {model}
    • )}

You need to update each policy with a new key first to be able to delete diff --git a/static/js/brand-store/components/SigningKeys/SigningKeysFilter.test.tsx b/static/js/brand-store/components/SigningKeys/SigningKeysFilter.test.tsx deleted file mode 100644 index 1d5fe6068c..0000000000 --- a/static/js/brand-store/components/SigningKeys/SigningKeysFilter.test.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useEffect } from "react"; -import { BrowserRouter } from "react-router-dom"; -import { RecoilRoot, useRecoilValue } from "recoil"; -import { QueryClient, QueryClientProvider } from "react-query"; -import { render, screen, fireEvent } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import "@testing-library/jest-dom"; - -import SigningKeysFilter from "./SigningKeysFilter"; -import { signingKeysListFilterState } from "../../atoms"; - -const searchInputLabel = "Search keys"; - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - refetchOnReconnect: false, - }, - }, -}); - -const mockFilterQuery = { filter: "" }; - -jest.mock("react-router-dom", () => ({ - ...jest.requireActual("react-router-dom"), - useSearchParams: () => [new URLSearchParams(mockFilterQuery), jest.fn()], -})); - -export const RecoilObserver = ({ - node, - onChange, -}: { - node: any; - onChange: Function; -}) => { - const value = useRecoilValue(node); - useEffect(() => onChange(value), [onChange, value]); - return null; -}; - -const onChange = jest.fn(); - -const renderComponent = (filterQuery?: string) => { - mockFilterQuery.filter = filterQuery || ""; - - return render( - - - - - - - - - ); -}; - -describe("ModelsFilter", () => { - it("displays a search input", () => { - renderComponent(); - expect(screen.getByLabelText(searchInputLabel)).toBeInTheDocument(); - }); - - it("displays an empty input if there is no filter query", () => { - renderComponent(); - expect(screen.getByLabelText(searchInputLabel)).toHaveValue(""); - }); - - it("displays an input with the filter query value if it exists", () => { - renderComponent("model-name"); - expect(screen.getByLabelText(searchInputLabel)).toHaveValue("model-name"); - }); - - it("calls `setFilter` when the search input changes", () => { - renderComponent(); - fireEvent.change(screen.getByLabelText(searchInputLabel), { - target: { - value: "model-name", - }, - }); - expect(onChange).toHaveBeenCalledWith("model-name"); - }); - - it("clears the filter when the reset button is clicked", async () => { - const user = userEvent.setup(); - renderComponent(); - await user.click(screen.getByRole("button", { name: "Clear filter" })); - expect(onChange).toHaveBeenCalledWith(""); - expect(screen.getByLabelText(searchInputLabel)).toHaveValue(""); - }); -}); diff --git a/static/js/brand-store/components/SigningKeys/SigningKeysTable.tsx b/static/js/brand-store/components/SigningKeys/SigningKeysTable.tsx index 3fa9faa539..a22de567ba 100644 --- a/static/js/brand-store/components/SigningKeys/SigningKeysTable.tsx +++ b/static/js/brand-store/components/SigningKeys/SigningKeysTable.tsx @@ -85,7 +85,6 @@ function SigningKeysTable({ setShowDisableSuccessNotification }: Props) { <> {modelsModalOpen && selectedSigningKey && (