"Setup Deployment" clusters listing page size issue fix (#67)

Author: satya-in

apps/cluster-orch/src/components/organism/ClusterList/ClusterList.cy.tsx

@@ -35,4 +35,23 @@ describe("<ClusterList/>", () => {
     cy.get(".spark-pagination-list").contains(2).click();
     pom.waitForApis();
   });
+
+  it("changes page size when onChangePageSize is called", () => {
+    // Intercept API call with different page size
+    pom.interceptApis([pom.api.clusterMockedWithPageSize]);
+    pom.table.root
+      .find("[data-testid='pagination-control-pagesize']")
+      .find(".spark-icon-chevron-down")
+      .click();
+    cy.get(".spark-popover .spark-list-item").contains("100").click();
+    pom.waitForApis();
+
+    // Check api response
+    cy.get(`@${pom.api.clusterMockedWithPageSize}`)
+      .its("request.url")
+      .then((url: string) => {
+        const match = url.match(/pageSize=100/);
+        return expect(match && match.length > 0).to.be.true;
+      });
+  });
 });

apps/cluster-orch/src/components/organism/ClusterList/ClusterList.pom.ts

@@ -16,7 +16,8 @@ type ApiAliases =
   | "clusterMocked"
   | "cluster500"
   | "clusterMockedWithFilter"
-  | "clusterMockedWithOffset";
+  | "clusterMockedWithOffset"
+  | "clusterMockedWithPageSize";
 
 const route = "**/v2/**/clusters**";
 
@@ -51,6 +52,14 @@ const endpoints: CyApiDetails<
       totalElements: 20,
     },
   },
+  clusterMockedWithPageSize: {
+    route: `${route}pageSize=100&offset=0*`,
+    statusCode: 200,
+    response: {
+      clusters: [clusterInfo1, clusterInfo2],
+      totalElements: 100,
+    },
+  },
   cluster500: {
     route,
     statusCode: 500,

apps/cluster-orch/src/components/organism/ClusterList/ClusterList.tsx

@@ -155,6 +155,12 @@ const ClusterList = ({
             return prev;
           });
         }}
+        onChangePageSize={(pageSize: number) => {
+          setSearchParams((prev) => {
+            prev.set("pageSize", pageSize.toString());
+            return prev;
+          });
+        }}
         // Selection feature
         canSelectRows={isForm}
         getRowId={(cluster) => cluster.name!}