Add onPaginationChange hook to DataView (#2365)

DES-6504 Add meta text to DataView (#2348) OKTA-807412 feat: add metaText to DataView fix: remove unnecessary CSS empty check Merge branch 'main' into jk-table-meta feat: add onPaginationChange hook Merge branch '1.23' into jk-expose-pagination-change-on-dataview fix: update tests to work in Bacon fix: update tests to work in Bacon fix: update tests to work in Bacon
okta · Sep 23, 2024 · 07f22a0 · 07f22a0
1 parent e6d68ee
commit 07f22a0
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 36 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx
@@ -76,56 +76,83 @@ describe("DataView", () => {
     });
     expect(rowElements.length).toBe(21);
 
-    fireEvent.click(screen.getByText("Show more"));
-
     waitFor(() => {
+      fireEvent.click(screen.getByText("Show more"));
+
       const loadedRows = within(tableElement).getAllByRole("row", {
         hidden: false,
       });
       expect(loadedRows.length).toBe(41);
     });
   });
-});
-
-it("resets the rows when searching", async () => {
-  render(
-    <DataView
-      availableLayouts={["table"]}
-      getData={getData}
-      tableLayoutOptions={{
-        columns: columns,
-      }}
-      hasSearch
-      hasPagination
-      // virtualization has to be false for the tests to work properly
-      enableVirtualization={false}
-      paginationType="loadMore"
-      resultsPerPage={20}
-    />,
-  );
-
-  const tableElement = await screen.findByRole("table", { name: "" });
-  const rowElements = within(tableElement).getAllByRole("row", {
-    hidden: false,
-  });
-  expect(rowElements.length).toBe(21);
 
-  fireEvent.click(screen.getByText("Show more"));
+  it("resets the rows when searching", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
 
-  waitFor(() => {
-    const loadedRows = within(tableElement).getAllByRole("row", {
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
       hidden: false,
     });
-    expect(loadedRows.length).toBe(41);
+    expect(rowElements.length).toBe(21);
+
+    fireEvent.click(screen.getByText("Show more"));
+
+    waitFor(() => {
+      const loadedRows = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(loadedRows.length).toBe(41);
+    });
+
+    const searchField = screen.getByPlaceholderText("Search");
+    fireEvent.change(searchField, { target: { value: "John" } });
+
+    waitFor(() => {
+      const rowsAfterFilter = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
+    });
   });
 
-  const searchField = screen.getByPlaceholderText("Search");
-  fireEvent.change(searchField, { target: { value: "John" } });
+  it("fires onPaginationChange when pagination changes", async () => {
+    let currentPage = 1;
+    const onPaginationChange = (pagination: {
+      pageIndex: number;
+      pageSize: number;
+    }) => {
+      currentPage = pagination.pageIndex;
+    };
 
-  waitFor(() => {
-    const rowsAfterFilter = within(tableElement).getAllByRole("row", {
-      hidden: false,
+    render(
+      <>
+        <DataView
+          getData={getData}
+          hasPagination
+          onPaginationChange={onPaginationChange}
+        />
+      </>,
+    );
+
+    const nextButton = screen.getByLabelText("Next page");
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(currentPage).toBe(2);
     });
-    expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
   });
 });
diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
@@ -123,6 +123,7 @@ const DataView = ({
   totalRows,
   maxPages,
   maxResultsPerPage,
+  onPaginationChange,
 }: DataViewProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
@@ -218,6 +219,11 @@ const DataView = ({
     }));
   }, [filters, paginationType, resultsPerPage, search]);
 
+  // Fire onPaginationChange if pagination changes
+  useEffect(() => {
+    onPaginationChange?.(pagination);
+  }, [onPaginationChange, pagination]);
+
   // Retrieve the data
   useEffect(() => {
     fetchData({

diff --git a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
@@ -73,8 +73,19 @@ export type UniversalProps = {
   maxResultsPerPage?: number;
   metaText?: string;
   noResultsPlaceholder?: ReactNode;
+  /**
+   * @deprecated onChangeRowSelection is now onRowSelectionChange
+   */
   onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
+  onPaginationChange?: ({
+    pageIndex,
+    pageSize,
+  }: {
+    pageIndex: number;
+    pageSize: number;
+  }) => void;
   onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
+  onRowSelectionChange?: (rowSelection: DataRowSelectionState) => void;
   paginationType?: (typeof paginationTypeValues)[number];
   resultsPerPage?: number;
   searchDelayTime?: number;

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
@@ -989,3 +989,28 @@ export const LoadMore: StoryObj<DataViewMetaProps> = {
     hasFilters: true,
   },
 };
+
+export const PaginationHook: StoryObj<DataViewMetaProps> = {
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData } = useDataCallbacks(data, setData);
+
+    const onPaginationChange = (pagination: {
+      pageIndex: number;
+      pageSize: number;
+    }) => {
+      console.log(pagination);
+    };
+
+    return (
+      <DataView
+        hasPagination
+        onPaginationChange={onPaginationChange}
+        tableLayoutOptions={{
+          columns: personColumns,
+        }}
+        getData={getData}
+      />
+    );
+  },
+};