diff --git a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx
index a5df4c90af..71daf387ab 100644
--- a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx
+++ b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx
@@ -12,10 +12,12 @@ interface EcrPaginationWrapperProps {
interface UserPreferences {
itemsPerPage: number;
+ page: number;
}
const defaultPreferences = {
itemsPerPage: 25,
+ page: 1,
};
/**
@@ -47,6 +49,7 @@ const EcrPaginationWrapper = ({
useEffect(() => {
const current = new URLSearchParams(Array.from(searchParams.entries()));
current.set("itemsPerPage", userPreferences.itemsPerPage.toString());
+ current.set("page", userPreferences.page.toString());
const search = current.toString();
const query = search ? `?${search}` : "";
router.push(`${pathname}${query}`);
@@ -76,6 +79,17 @@ const EcrPaginationWrapper = ({
maxSlots={6}
pathname={""}
className={"flex-1"}
+ onClickPageNumber={(e, page) => {
+ const updatedUserPreferences: UserPreferences = {
+ ...userPreferences,
+ page,
+ };
+ setUserPreferences(updatedUserPreferences);
+ localStorage.setItem(
+ "userPreferences",
+ JSON.stringify(updatedUserPreferences),
+ );
+ }}
/>
{
,
);
- expect(mockPush).toHaveBeenCalledExactlyOnceWith("?itemsPerPage=25");
+ expect(mockPush).toHaveBeenCalledExactlyOnceWith("?itemsPerPage=25&page=1");
});
it("should display 50 per page when items per page is set to 50", async () => {
@@ -78,7 +78,7 @@ describe("Pagination for EcrPaginationWrapper", () => {
expect(screen.getByText("1"));
expect(screen.getByText("2"));
expect(screen.getByText("Showing 1-50 of 100 eCRs"));
- expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50");
+ expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50&page=1");
});
it("should update local storage when items per page is set to 50", async () => {
@@ -93,14 +93,14 @@ describe("Pagination for EcrPaginationWrapper", () => {
expect(localStorage.setItem).toHaveBeenCalledWith(
"userPreferences",
- JSON.stringify({ itemsPerPage: 50 }),
+ JSON.stringify({ itemsPerPage: 50, page: 1 }),
);
});
it("should load 50 items per page if 50 was previously set", () => {
const spyLocalStorage = jest.spyOn(Storage.prototype, "getItem");
spyLocalStorage.mockImplementationOnce(() =>
- JSON.stringify({ itemsPerPage: 50 }),
+ JSON.stringify({ itemsPerPage: 50, page: 1 }),
);
render(
@@ -109,7 +109,7 @@ describe("Pagination for EcrPaginationWrapper", () => {
);
expect(screen.getByText("Showing 1-50 of 100 eCRs")).toBeInTheDocument();
- expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50");
+ expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50&page=1");
});
it("should display 51-51 on third page", async () => {
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap
index c3b324a21d..3a7533bb4b 100644
--- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap
+++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap
@@ -60,47 +60,51 @@ exports[`EcrPaginationWrapper should match snapshot 1`] = `