Add pagination support to attachment modal (#8953)

* Add pagination support to policy attachment modal

Updated the policy attachment modal to include pagination for listing policies. Adjusted the search function and integrated a paginator for handling large datasets efficiently. This enhances usability when browsing extensive policy/group/member lists.

* Remove unnecessary wrapping <div> around DataTable component.

* Fix inconsistent indentation in auth forms component

* Refactor policy search logic in forms and policies page

Simplify state management by removing redundant `results` state and directly using API response. Centralize pagination logic and improve search behavior with a dedicated handler for prefix updates.

* Refactor search functions to support pagination

Replaced custom search logic with paginated API calls to improve scalability and maintainability. Updated group members, user policies, and user groups search functions for consistent use of pagination parameters. Removed unnecessary local state and redundant logic to streamline the code.

* Fix inconsistent indentation in auth forms component

* Add user search optimization with local caching

Refactored the user search functionality to use a locally cached list of all users, reducing redundancy in API calls. Introduced a `searchUsers` function that filters from a pre-fetched user list, paginating results efficiently.

* Refactor indentation in auth forms for better readability

Adjusted the indentation of the DataTable and Paginator components in the auth forms file to improve code clarity and maintain consistency. This change does not alter functionality but enhances code maintainability and readability.

* Refactor indentation in auth forms component for consistency

Updated the indentation in the DataTable component for better readability and consistent formatting. No functional changes were introduced.

* Fix indentation in auth forms component for better readability

Corrected inconsistent indentation in the `rowFn` function of the auth forms component. This improves code readability and adheres to the project's formatting standards without altering functionality.

* Refactor pagination and search logic for consistency

Centralized page size constant and improved code readability by using shared pagination parameters. Simplified and unified the handling of search and pagination across components.

* Rename `pageSize` to `PageSize` for consistency.

Updated the `pageSize` constant to `PageSize` in both definition and usage to follow naming conventions. This ensures better alignment with code standards and improves readability.

* Set page size using constant in search functions

Replaced hardcoded page size value (5) with the `PageSize` constant across multiple components for consistency and maintainability. This ensures centralized management of pagination settings.

Author: Ben-El

webui/src/constants.ts

@@ -1,6 +1,7 @@
 export const RefTypeBranch = 'branch';
 export const RefTypeCommit = 'commit';
 export const RefTypeTag = 'tag';
+export const PageSize = 5;
 
 export enum TreeRowType {
     Object,

webui/src/lib/components/auth/forms.jsx

@@ -8,6 +8,7 @@ import {SearchIcon} from "@primer/octicons-react";
 
 import {useAPI} from "../../hooks/api";
 import {Checkbox, DataTable, DebouncedFormControl, AlertError, Loading} from "../controls";
+import {Paginator} from "../pagination";
 
 
 export const AttachModal = ({
@@ -16,17 +17,19 @@ export const AttachModal = ({
                               filterPlaceholder = 'Filter...'
                             }) => {
   const search = useRef(null);
-  const [searchPrefix, setSearchPrefix] = useState("");
+  const [paginationParams, setPaginationParams] = useState({ prefix: "", after: "" });
   const [selected, setSelected] = useState([]);
 
+  const { response, error, loading } = useAPI(() => {
+      return searchFn(paginationParams.prefix, paginationParams.after);
+  }, [paginationParams]);
+
   useEffect(() => {
     if (!!search.current && search.current.value === "")
       search.current.focus();
   });
 
-  const {response, error, loading} = useAPI(() => {
-    return searchFn(searchPrefix);
-  }, [searchPrefix]);
+  const nextPage = response?.pagination?.has_more ? response.pagination.next_offset : null;
 
   let content;
   if (loading) content = <Loading/>;
@@ -37,7 +40,7 @@ export const AttachModal = ({
           headers={headers}
           keyFn={ent => ent.id}
           emptyState={emptyState}
-          results={response}
+          results={response.results}
           rowFn={ent => [
             <Checkbox
               defaultChecked={selected.some(selectedEnt => selectedEnt.id === ent.id)}
@@ -48,7 +51,14 @@ export const AttachModal = ({
           ]}
           firstFixedCol={true}
         />
-
+        <Paginator
+            after={paginationParams.after}
+            nextPage={nextPage}
+            onPaginate={(newAfter) => setPaginationParams(prev => ({
+                ...prev,
+                after: newAfter
+            }))}
+        />
         <div className="mt-3">
           {(selected.length > 0) &&
             <p>
@@ -78,6 +88,14 @@ export const AttachModal = ({
       </>
     );
 
+  const handleSearchChange = () => {
+      setPaginationParams(prev => ({
+          ...prev,
+          prefix: search.current.value,
+          after: ""
+      }));
+  };
+
   return (
     <Modal show={show} onHide={onHide}>
       <Modal.Header closeButton>
@@ -94,9 +112,7 @@ export const AttachModal = ({
             <DebouncedFormControl
               ref={search}
               placeholder={filterPlaceholder}
-              onChange={() => {
-                setSearchPrefix(search.current.value)
-              }}/>
+              onChange={handleSearchChange}/>
           </InputGroup>
         </Form>
         <div className="mt-2">

webui/src/pages/auth/groups/group/members.jsx

@@ -21,6 +21,7 @@ import {useRouter} from "../../../../lib/hooks/router";
 import {Link} from "../../../../lib/components/nav";
 import {resolveUserDisplayName} from "../../../../lib/utils";
 import {allUsersFromLakeFS} from "../../../../lib/components/auth/users";
+import {PageSize} from "../../../../constants";
 
 
 const GroupMemberList = ({ groupId, after, onPaginate }) => {
@@ -36,14 +37,31 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
     }, [refresh]);
 
 
-    const searchUsers = async (prefix, maxResults, resolveUserDisplayNameFN = (user => user.id)) => {
-        let allUsersList = allUsers;
-        if (allUsersList.length === 0) {
-            allUsersList = await allUsersFromLakeFS(resolveUserDisplayNameFN)
-            setAllUsers(allUsersList)
-        }
-        let filteredUsers = allUsersList.filter(user => resolveUserDisplayNameFN(user).startsWith(prefix));
-        return filteredUsers.slice(0, maxResults);
+    useEffect(() => {
+        const loadUsers = async () => {
+            const users = await allUsersFromLakeFS(resolveUserDisplayName);
+            setAllUsers(users);
+        };
+        void loadUsers();
+    }, []);
+
+    const searchUsers = (prefix, after, resolveUserDisplayNameFN = (user => user.id)) => {
+        const filteredUsers = allUsers.filter(user =>
+            resolveUserDisplayNameFN(user).toLowerCase().startsWith(prefix.toLowerCase())
+        );
+        const startIndex = after ? parseInt(after, 10) : 0;
+        const page = filteredUsers.slice(startIndex, startIndex + PageSize);
+        const nextOffset = (startIndex + PageSize < filteredUsers.length)
+            ? (startIndex + PageSize).toString()
+            : null;
+
+        return {
+            results: page,
+            pagination: {
+                next_offset: nextOffset,
+                has_more: nextOffset !== null
+            }
+        };
     };
     let content;
     if (loading) content = <Loading/>;
@@ -86,7 +104,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                     modalTitle={'Add to Group'}
                     addText={'Add to Group'}
                     resolveEntityFn={resolveUserDisplayName}
-                    searchFn={prefix => searchUsers(prefix, 5, resolveUserDisplayName).then(res => res)}
+                    searchFn={(prefix, after) => searchUsers(prefix, after, resolveUserDisplayName)}
                     onHide={() => setShowAddModal(false)}
                     onAttach={(selected) => {
                         Promise.all(selected.map(user => auth.addUserToGroup(user.id, groupId)))

webui/src/pages/auth/groups/group/policies.jsx

@@ -19,6 +19,7 @@ import {
 } from "../../../../lib/components/controls";
 import {Link} from "../../../../lib/components/nav";
 import {useRouter} from "../../../../lib/hooks/router";
+import {PageSize} from "../../../../constants";
 
 
 const GroupPoliciesList = ({ groupId, after, onPaginate }) => {
@@ -74,7 +75,7 @@ const GroupPoliciesList = ({ groupId, after, onPaginate }) => {
                     filterPlaceholder={'Find Policy...'}
                     modalTitle={'Attach Policies'}
                     addText={'Attach Policies'}
-                    searchFn={prefix => auth.listPolicies(prefix, "", 5).then(res => res.results)}
+                    searchFn={(prefix, after) => auth.listPolicies(prefix, after, PageSize)}
                     onHide={() => setShowAddModal(false)}
                     onAttach={(selected) => {
                         Promise.all(selected.map(policy => auth.attachPolicyToGroup(groupId, policy.id)))

webui/src/pages/auth/users/user/groups.jsx

@@ -20,6 +20,7 @@ import { AttachModal } from "../../../../lib/components/auth/forms";
 import { ConfirmationButton } from "../../../../lib/components/modals";
 import { useRouter } from "../../../../lib/hooks/router";
 import { Link } from "../../../../lib/components/nav";
+import {PageSize} from "../../../../constants";
 
 const resolveGroupDisplayName = (group) => {
     if(!group) return "";
@@ -100,9 +101,7 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
             modalTitle={"Add to Groups"}
             addText={"Add to Groups"}
             headers={["", "Group Name"]}
-            searchFn={(prefix) =>
-              auth.listGroups(prefix, "", 5).then((res) => res.results)
-            }
+            searchFn={(prefix, after) => auth.listGroups(prefix, after, PageSize)}
             resolveEntityFn={resolveGroupDisplayName}
             onHide={() => setShowAddModal(false)}
             onAttach={(selected) => {

webui/src/pages/auth/users/user/policies.jsx

@@ -19,6 +19,7 @@ import {AttachModal} from "../../../../lib/components/auth/forms";
 import {ConfirmationButton} from "../../../../lib/components/modals";
 import {Link} from "../../../../lib/components/nav";
 import {useRouter} from "../../../../lib/hooks/router";
+import {PageSize} from "../../../../constants";
 
 
 const UserPoliciesList = ({ userId, after, onPaginate }) => {
@@ -71,7 +72,7 @@ const UserPoliciesList = ({ userId, after, onPaginate }) => {
                     filterPlaceholder={'Find Policy...'}
                     modalTitle={'Attach Policies'}
                     addText={'Attach Policies'}
-                    searchFn={prefix => auth.listPolicies(prefix, "", 5).then(res => res.results)}
+                    searchFn={(prefix,after) => auth.listPolicies(prefix, after, PageSize)}
                     onHide={() => setShowAddModal(false)}
                     onAttach={(selected) => {
                         Promise.all(selected.map(policy => auth.attachPolicyToUser(userId, policy.id)))