diff --git a/static/js/publisher/pages/Remodel/Remodel.tsx b/static/js/publisher/pages/Remodel/Remodel.tsx index 618f6738c5..806666a722 100644 --- a/static/js/publisher/pages/Remodel/Remodel.tsx +++ b/static/js/publisher/pages/Remodel/Remodel.tsx @@ -1,23 +1,14 @@ import { useEffect, useState } from "react"; import { useAtomValue, useSetAtom } from "jotai"; -import { - useParams, - useSearchParams, - Link, - useNavigate, -} from "react-router-dom"; +import { useParams, Link, useNavigate, useLocation } from "react-router-dom"; import { Notification, Icon, Row, Col } from "@canonical/react-components"; import { useRemodels } from "../../hooks"; -import { - remodelsListFilterState, - remodelsListState, -} from "../../state/remodelsState"; +import { remodelsListState } from "../../state/remodelsState"; import { brandIdState, brandStoreState } from "../../state/brandStoreState"; import { setPageTitle, isClosedPanel } from "../../utils"; import { PortalEntrance } from "../Portals/Portals"; -import Filter from "../../components/Filter"; import RemodelTable from "./RemodelTable"; import ConfigureRemodelForm from "./ConfigureRemodelForm"; @@ -26,6 +17,7 @@ import type { Remodel, RemodelResponse, ApiResponse } from "../../types/shared"; function Remodel(): React.JSX.Element { const { id, modelId } = useParams(); + const location = useLocation(); const brandId = useAtomValue(brandIdState); const { isLoading, @@ -38,12 +30,10 @@ function Remodel(): React.JSX.Element { modelId, ); const setRemodels = useSetAtom(remodelsListState); - const setFilter = useSetAtom(remodelsListFilterState); const [showNotification, setShowNotification] = useState(false); const [showErrorNotification, setShowErrorNotification] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const brandStore = useAtomValue(brandStoreState(id)); - const [searchParams] = useSearchParams(); const navigate = useNavigate(); brandStore @@ -53,9 +43,8 @@ function Remodel(): React.JSX.Element { useEffect(() => { if (!isLoading && !isError && data) { setRemodels(data.data?.allowlist || []); - setFilter(searchParams.get("filter") || ""); } - }, [isLoading, error, data, brandId, id]); + }, [isLoading, isError, data, brandId, id]); return ( <> @@ -77,14 +66,7 @@ function Remodel(): React.JSX.Element { ) : ( <> - - - - + ); diff --git a/static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx b/static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx index 26075f31e7..f364990852 100644 --- a/static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx +++ b/static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx @@ -94,12 +94,6 @@ describe("Remodel", () => { ).toBeInTheDocument(); }); - it("doesn't display filter if user has no remodels access", () => { - mockUseRemodels.mockReturnValue(useRemodelsNoPermissions); - renderComponent(); - expect(screen.queryByLabelText("Search remodels")).not.toBeInTheDocument(); - }); - it("doesn't display table if user has no remodels access", () => { mockUseRemodels.mockReturnValue(useRemodelsNoPermissions); renderComponent(); @@ -122,12 +116,6 @@ describe("Remodel", () => { ).not.toBeInTheDocument(); }); - it("displays filter if user has remodels access", () => { - mockUseRemodels.mockReturnValue(useRemodelsPermissions); - renderComponent(); - expect(screen.getByLabelText("Search remodels")).toBeInTheDocument(); - }); - it("displays table if user has remodels access", () => { mockUseRemodels.mockReturnValue(useRemodelsPermissions); renderComponent(); diff --git a/static/js/publisher/pages/Remodel/__tests__/RemodelTable.test.tsx b/static/js/publisher/pages/Remodel/__tests__/RemodelTable.test.tsx index 39650b0c00..07e4bbba8f 100644 --- a/static/js/publisher/pages/Remodel/__tests__/RemodelTable.test.tsx +++ b/static/js/publisher/pages/Remodel/__tests__/RemodelTable.test.tsx @@ -1,7 +1,6 @@ import { BrowserRouter } from "react-router-dom"; import { QueryClientProvider, QueryClient } from "react-query"; import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; import "@testing-library/jest-dom"; import RemodelTable from "../RemodelTable"; @@ -54,73 +53,4 @@ describe("RemodelTable", () => { screen.getByRole("columnheader", { name: "Note" }), ).toBeInTheDocument(); }); - - it("sorts the 'Target model' column when clicking the column header", async () => { - renderComponent(); - - const user = userEvent.setup(); - const columnHeader = screen.getByRole("columnheader", { - name: "Target model", - }); - const columnHeaderBtn = screen.getByRole("button", { - name: "Target model", - }); - - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("ascending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("descending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - }); - - it("sorts the 'Original model' column when clicking the column header", async () => { - renderComponent(); - - const user = userEvent.setup(); - const columnHeader = screen.getByRole("columnheader", { - name: "Original model", - }); - const columnHeaderBtn = screen.getByRole("button", { - name: "Original model", - }); - - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("ascending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("descending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - }); - - it("sorts the 'Created date' column when clicking the column header", async () => { - renderComponent(); - - const user = userEvent.setup(); - const columnHeader = screen.getByRole("columnheader", { - name: "Created date", - }); - const columnHeaderBtn = screen.getByRole("button", { - name: "Created date", - }); - - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("ascending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("descending"); - - await user.click(columnHeaderBtn); - expect(columnHeader.getAttribute("aria-sort")).toBe("none"); - }); }); diff --git a/static/js/publisher/state/remodelsState.ts b/static/js/publisher/state/remodelsState.ts index 596f9bed72..616300aae7 100644 --- a/static/js/publisher/state/remodelsState.ts +++ b/static/js/publisher/state/remodelsState.ts @@ -4,37 +4,4 @@ import type { Remodel } from "../types/shared"; const remodelsListState = atom([] as Remodel[]); -const remodelsListFilterState = atom("" as string); - -function getFilteredRemodels( - remodels: Array, - filterQuery?: string | null, -) { - if (!filterQuery) { - return remodels; - } - - return remodels.filter((remodel: Remodel) => { - if ( - (remodel["from-model"] && remodel["from-model"].includes(filterQuery)) || - (remodel["to-model"] && remodel["to-model"].includes(filterQuery)) - ) { - return true; - } - - return false; - }); -} - -const filteredRemodelsListState = atom>((get) => { - const filter = get(remodelsListFilterState); - const remodels = get(remodelsListState); - - return getFilteredRemodels(remodels, filter); -}); - -export { - remodelsListState, - remodelsListFilterState, - filteredRemodelsListState, -}; +export { remodelsListState };