UIPFU-96 - Fix pagination issues on UIPFU in user settings

.github/workflows/build-npm-release.yml

@@ -152,7 +152,7 @@ jobs:
           comment_title: Jest Unit Test Statistics
 
       - name: Publish Jest coverage report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: jest-coverage-report
@@ -170,7 +170,7 @@ jobs:
           comment_title: BigTest Unit Test Statistics
 
       - name: Publish BigTest coverage report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: bigtest-coverage-report

.github/workflows/build-npm.yml

@@ -95,7 +95,7 @@ jobs:
           comment_title: Jest Unit Test Statistics
 
       - name: Publish Jest coverage report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: jest-coverage-report
@@ -113,7 +113,7 @@ jobs:
           comment_title: BigTest Unit Test Statistics
 
       - name: Publish BigTest coverage report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: bigtest-coverage-report

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Apply Prev/Next Pagination. Refs UIPFU-49.
 * Use keywords CQL field for keyword user search. Ref UIPFU-95.
 * Add Jest unit tests for ui-plugin-find-user/src/Filters.js. Refs UIPFU-81.
+* Fix pagination issues with `Unassigned` filter. Refs UIPFU-96.
 
 ## [7.1.1](https://github.com/folio-org/ui-plugin-find-user/tree/v7.1.1) (2024-05-03)
 [Full Changelog](https://github.com/folio-org/ui-plugin-find-user/compare/v7.1.0...v7.1.1)

src/UserSearchContainer.js

@@ -15,6 +15,7 @@
   UNASSIGNED_FILTER_KEY,
   UAS,
   ASSIGNED,
+  UNASSIGNED,
 } from './constants';
 
 const INITIAL_RESULT_COUNT = 30;
@@ -161,19 +162,19 @@
     this.source.update(this.props);
   }
 
-  onNeedMoreData = (askAmount, index) => {
+  onNeedMoreData = (askAmount, index, firstIndex, direction) => {
     const { resultOffset } = this.props.mutator;
-    let offset = index;
-    if (offset < askAmount) {
-      /*
-        This condition sets offset to 100 when there are less than 100 records in the current
-        paginated result in order to skip the first 100 records and make an API call to fetch next 100.
-      */
-      offset = 100;
-    }
+
+    const fetchedUsers = get(this.props.resources, 'records.records', []);
+    const totalUserRecords = this.source.totalCount();
+
     if (this.source) {
-      if (resultOffset && offset >= 0) {
-        this.source.fetchOffset(offset);
+      if (!direction) {
+        if (fetchedUsers.length < totalUserRecords) {
+          this.source.fetchOffset(fetchedUsers.length);
+        }
+      } else if (resultOffset && index >= 0) {
+        this.source.fetchOffset(index);
       } else {
         this.source.fetchMore(RESULT_COUNT_INCREMENT);
       }

src/UserSearchView.js

@@ -29,6 +29,7 @@ import filterConfig, { filterConfigWithUserAssignedStatus } from './filterConfig
 import Filters from './Filters';
 
 import css from './UserSearch.css';
+import { UNASSIGNED } from './constants';
 
 function getFullName(user) {
   let firstName = user?.personal?.firstName ?? '';
@@ -181,6 +182,28 @@ class UserSearchView extends React.Component {
     return filterConfig;
   }
 
+  getPagingType = (activeFilters) => {
+    const { data: { users }, source } = this.props;
+    const { state } = activeFilters;
+    const { uas } = state || {};
+
+    /**
+     * if active filter contain "Unassigned", switch to "LOAD_MORE" paging type.
+     * at the end of last page, mark the pagination as "NONE" - as, in this case
+     * the end of pagination cannot be accurately handled by MCL
+     */
+    if (!uas || uas.length !== 1) {
+      return MCLPagingTypes.PREV_NEXT;
+    }
+
+    if (uas[0] !== UNASSIGNED) {
+      return MCLPagingTypes.NONE;
+    }
+
+    const recordsCount = source?.resources?.records?.records.length || 0;
+    return recordsCount >= users.count ? MCLPagingTypes.NONE : MCLPagingTypes.LOAD_MORE;
+  };
+
   render() {
     const {
       onSelectRow,
@@ -389,7 +412,7 @@ class UserSearchView extends React.Component {
                             isEmptyMessage={resultsStatusMessage}
                             autosize
                             pageAmount={100}
-                            pagingType={MCLPagingTypes.PREV_NEXT}
+                            pagingType={this.getPagingType(activeFilters)}
                           />
 
                         </Pane>

src/constants.js

@@ -3,3 +3,4 @@ export const UAS = 'uas';
 export const ASSIGNED_FILTER_KEY = 'uas.Assigned';
 export const UNASSIGNED_FILTER_KEY = 'uas.Unassigned';
 export const ASSIGNED = 'Assigned';
+export const UNASSIGNED = 'Unassigned';