Skip to content

Commit cccef3b

Browse files
steverydzsteverydz
committed
chore: Remove sorting and filtering from remodels table
1 parent 9eda2bc commit cccef3b

5 files changed

Lines changed: 13 additions & 156 deletions

File tree

‎static/js/publisher/pages/Remodel/Remodel.tsx‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
import { useEffect, useState } from "react";
22
import { useAtomValue, useSetAtom } from "jotai";
3-
import {
4-
useParams,
5-
useSearchParams,
6-
Link,
7-
useNavigate,
8-
} from "react-router-dom";
3+
import { useParams, Link, useNavigate } from "react-router-dom";
94
import { Notification, Icon, Row, Col } from "@canonical/react-components";
105

116
import { useRemodels } from "../../hooks";
12-
import {
13-
remodelsListFilterState,
14-
remodelsListState,
15-
} from "../../state/remodelsState";
7+
import { remodelsListState } from "../../state/remodelsState";
168
import { brandIdState, brandStoreState } from "../../state/brandStoreState";
179
import { setPageTitle, isClosedPanel } from "../../utils";
1810
import { PortalEntrance } from "../Portals/Portals";
1911

20-
import Filter from "../../components/Filter";
2112
import RemodelTable from "./RemodelTable";
2213
import ConfigureRemodelForm from "./ConfigureRemodelForm";
2314

@@ -38,12 +29,10 @@ function Remodel(): React.JSX.Element {
3829
modelId,
3930
);
4031
const setRemodels = useSetAtom(remodelsListState);
41-
const setFilter = useSetAtom(remodelsListFilterState);
4232
const [showNotification, setShowNotification] = useState(false);
4333
const [showErrorNotification, setShowErrorNotification] = useState(false);
4434
const [errorMessage, setErrorMessage] = useState("");
4535
const brandStore = useAtomValue(brandStoreState(id));
46-
const [searchParams] = useSearchParams();
4736
const navigate = useNavigate();
4837

4938
brandStore
@@ -53,9 +42,8 @@ function Remodel(): React.JSX.Element {
5342
useEffect(() => {
5443
if (!isLoading && !isError && data) {
5544
setRemodels(data.data?.allowlist || []);
56-
setFilter(searchParams.get("filter") || "");
5745
}
58-
}, [isLoading, error, data, brandId, id]);
46+
}, [isLoading, isError, data]);
5947

6048
return (
6149
<>
@@ -77,14 +65,7 @@ function Remodel(): React.JSX.Element {
7765
) : (
7866
<>
7967
<Row>
80-
<Col size={6}>
81-
<Filter
82-
state={remodelsListFilterState}
83-
label="Search remodels"
84-
placeholder="Search remodels"
85-
/>
86-
</Col>
87-
<Col size={6} className="u-align--right">
68+
<Col size={12} className="u-align--right">
8869
<Link
8970
className={`p-button--positive ${isError && !data ? "is-disabled" : ""}`}
9071
to={`/admin/${id}/models/${modelId}/remodel/configure`}

‎static/js/publisher/pages/Remodel/RemodelTable.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@ import { useAtomValue } from "jotai";
22
import { MainTable, TablePagination } from "@canonical/react-components";
33
import { format } from "date-fns";
44

5-
import { filteredRemodelsListState } from "../../state/remodelsState";
6-
import { useSortTableData } from "../../hooks";
5+
import { remodelsListState } from "../../state/remodelsState";
76

87
import type { Remodel } from "../../types/shared";
98

109
function RemodelTable(): React.JSX.Element {
11-
const remodels = useAtomValue(filteredRemodelsListState);
10+
const remodels = useAtomValue(remodelsListState);
1211

1312
const headers = [
14-
{ content: "Target model", sortKey: "to-model", style: { width: "250px" } },
13+
{
14+
content: "Target model",
15+
style: { width: "250px" },
16+
},
1517
{
1618
content: "Original model",
17-
sortKey: "from-model",
1819
style: { width: "250px" },
1920
},
2021
{ content: "Serial" },
2122
{
2223
content: "Created date",
2324
className: "u-align--right",
24-
sortKey: "created-at",
2525
style: { width: "130px" },
2626
},
2727
{ content: "Note" },
@@ -42,28 +42,19 @@ function RemodelTable(): React.JSX.Element {
4242
},
4343
{ content: remodel["description"] },
4444
],
45-
sortData: {
46-
"to-model": remodel["to-model"],
47-
"from-model": remodel["from-model"],
48-
"created-at": remodel["created-at"],
49-
},
5045
};
5146
});
5247

53-
const { rows: sortedRows, updateSort } = useSortTableData({ rows });
54-
5548
return (
5649
<TablePagination
57-
data={sortedRows}
50+
data={rows}
5851
pageLimits={[25, 50, 100, 200]}
5952
position="below"
6053
>
6154
<MainTable
6255
data-testid="remodel-table"
63-
sortable
64-
emptyStateMsg="No remodels match this filter"
56+
emptyStateMsg="No remodels found"
6557
headers={headers}
66-
onUpdateSort={updateSort}
6758
/>
6859
</TablePagination>
6960
);

‎static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,6 @@ describe("Remodel", () => {
9494
).toBeInTheDocument();
9595
});
9696

97-
it("doesn't display filter if user has no remodels access", () => {
98-
mockUseRemodels.mockReturnValue(useRemodelsNoPermissions);
99-
renderComponent();
100-
expect(screen.queryByLabelText("Search remodels")).not.toBeInTheDocument();
101-
});
102-
10397
it("doesn't display table if user has no remodels access", () => {
10498
mockUseRemodels.mockReturnValue(useRemodelsNoPermissions);
10599
renderComponent();
@@ -122,12 +116,6 @@ describe("Remodel", () => {
122116
).not.toBeInTheDocument();
123117
});
124118

125-
it("displays filter if user has remodels access", () => {
126-
mockUseRemodels.mockReturnValue(useRemodelsPermissions);
127-
renderComponent();
128-
expect(screen.getByLabelText("Search remodels")).toBeInTheDocument();
129-
});
130-
131119
it("displays table if user has remodels access", () => {
132120
mockUseRemodels.mockReturnValue(useRemodelsPermissions);
133121
renderComponent();

‎static/js/publisher/pages/Remodel/__tests__/RemodelTable.test.tsx‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { BrowserRouter } from "react-router-dom";
22
import { QueryClientProvider, QueryClient } from "react-query";
33
import { render, screen } from "@testing-library/react";
4-
import userEvent from "@testing-library/user-event";
54
import "@testing-library/jest-dom";
65

76
import RemodelTable from "../RemodelTable";
@@ -54,73 +53,4 @@ describe("RemodelTable", () => {
5453
screen.getByRole("columnheader", { name: "Note" }),
5554
).toBeInTheDocument();
5655
});
57-
58-
it("sorts the 'Target model' column when clicking the column header", async () => {
59-
renderComponent();
60-
61-
const user = userEvent.setup();
62-
const columnHeader = screen.getByRole("columnheader", {
63-
name: "Target model",
64-
});
65-
const columnHeaderBtn = screen.getByRole("button", {
66-
name: "Target model",
67-
});
68-
69-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
70-
71-
await user.click(columnHeaderBtn);
72-
expect(columnHeader.getAttribute("aria-sort")).toBe("ascending");
73-
74-
await user.click(columnHeaderBtn);
75-
expect(columnHeader.getAttribute("aria-sort")).toBe("descending");
76-
77-
await user.click(columnHeaderBtn);
78-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
79-
});
80-
81-
it("sorts the 'Original model' column when clicking the column header", async () => {
82-
renderComponent();
83-
84-
const user = userEvent.setup();
85-
const columnHeader = screen.getByRole("columnheader", {
86-
name: "Original model",
87-
});
88-
const columnHeaderBtn = screen.getByRole("button", {
89-
name: "Original model",
90-
});
91-
92-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
93-
94-
await user.click(columnHeaderBtn);
95-
expect(columnHeader.getAttribute("aria-sort")).toBe("ascending");
96-
97-
await user.click(columnHeaderBtn);
98-
expect(columnHeader.getAttribute("aria-sort")).toBe("descending");
99-
100-
await user.click(columnHeaderBtn);
101-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
102-
});
103-
104-
it("sorts the 'Created date' column when clicking the column header", async () => {
105-
renderComponent();
106-
107-
const user = userEvent.setup();
108-
const columnHeader = screen.getByRole("columnheader", {
109-
name: "Created date",
110-
});
111-
const columnHeaderBtn = screen.getByRole("button", {
112-
name: "Created date",
113-
});
114-
115-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
116-
117-
await user.click(columnHeaderBtn);
118-
expect(columnHeader.getAttribute("aria-sort")).toBe("ascending");
119-
120-
await user.click(columnHeaderBtn);
121-
expect(columnHeader.getAttribute("aria-sort")).toBe("descending");
122-
123-
await user.click(columnHeaderBtn);
124-
expect(columnHeader.getAttribute("aria-sort")).toBe("none");
125-
});
12656
});

‎static/js/publisher/state/remodelsState.ts‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,4 @@ import type { Remodel } from "../types/shared";
44

55
const remodelsListState = atom([] as Remodel[]);
66

7-
const remodelsListFilterState = atom("" as string);
8-
9-
function getFilteredRemodels(
10-
remodels: Array<Remodel>,
11-
filterQuery?: string | null,
12-
) {
13-
if (!filterQuery) {
14-
return remodels;
15-
}
16-
17-
return remodels.filter((remodel: Remodel) => {
18-
if (
19-
(remodel["from-model"] && remodel["from-model"].includes(filterQuery)) ||
20-
(remodel["to-model"] && remodel["to-model"].includes(filterQuery))
21-
) {
22-
return true;
23-
}
24-
25-
return false;
26-
});
27-
}
28-
29-
const filteredRemodelsListState = atom<Array<Remodel>>((get) => {
30-
const filter = get(remodelsListFilterState);
31-
const remodels = get(remodelsListState);
32-
33-
return getFilteredRemodels(remodels, filter);
34-
});
35-
36-
export {
37-
remodelsListState,
38-
remodelsListFilterState,
39-
filteredRemodelsListState,
40-
};
7+
export { remodelsListState };

0 commit comments

Comments
 (0)
⚡