Add friendly name to list group members response

contrib/auth/acl/controller.go

@@ -151,6 +151,7 @@ func (c *Controller) ListGroupMembers(w http.ResponseWriter, r *http.Request, gr
 			Username:     u.Username,
 			CreationDate: u.CreatedAt.Unix(),
 			Email:        u.Email,
+			FriendlyName: u.FriendlyName,
 		})
 	}
 	writeResponse(w, http.StatusOK, response)

pkg/api/controller.go

@@ -1112,6 +1112,7 @@ func (c *Controller) ListGroupMembers(w http.ResponseWriter, r *http.Request, gr
 			Id:           u.Username,
 			Email:        u.Email,
 			CreationDate: u.CreatedAt.Unix(),
+			FriendlyName: u.FriendlyName,
 		})
 	}
 	writeResponse(w, r, http.StatusOK, response)

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

@@ -9,15 +9,8 @@ import {SearchIcon} from "@primer/octicons-react";
 import {useAPI} from "../../hooks/api";
 import {Checkbox, DataTable, DebouncedFormControl, AlertError, Loading} from "../controls";
 
-const resolveEntityDisplayName = (ent) => {
-    // for users
-    if (ent?.email?.length) return ent.email;
-    // for groups
-    if (ent?.name?.length) return ent.name;
-    return ent.id;
-}
-
-export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
+
+export const AttachModal = ({ show, searchFn, onAttach, onHide, resolveEntityFN = (ent => ent.id), addText = "Add",
                           emptyState = 'No matches', modalTitle = 'Add', headers = ['Select', 'ID'],
                      filterPlaceholder = 'Filter...'}) => {
     const search = useRef(null);
@@ -49,7 +42,7 @@ export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
                             onAdd={() => setSelected([...selected, ent])}
                             onRemove={() => setSelected(selected.filter(selectedEnt => selectedEnt.id !== ent.id))}
                             name={'selected'}/>,
-                        <strong>{resolveEntityDisplayName(ent)}</strong>
+                        <strong>{resolveEntityFN(ent)}</strong>
                     ]}/>
 
                 <div className="mt-3">
@@ -58,7 +51,7 @@ export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
                         <strong>Selected: </strong>
                         {(selected.map(item => (
                             <Badge key={item.id} pill variant="primary" className="me-1">
-                                {resolveEntityDisplayName(item)}
+                                {resolveEntityFN(item)}
                             </Badge>
                         )))}
                     </p>

webui/src/lib/utils.ts

@@ -4,7 +4,7 @@ interface User {
   friendly_name: string;
 }
 
-export const resolveDisplayName = (user: User): string => {
+export const resolveUserDisplayName = (user: User): string => {
   if (!user) return "";
   if (user?.email?.length) return user.email;
   if (user?.friendly_name?.length) return user.friendly_name;

webui/src/pages/auth/credentials.jsx

@@ -12,7 +12,7 @@ import {auth} from "../../lib/api";
 import {useState} from "react";
 import {CredentialsShowModal, CredentialsTable} from "../../lib/components/auth/credentials";
 import {useRouter} from "../../lib/hooks/router";
-import {resolveDisplayName} from "../../lib/utils";
+import {resolveUserDisplayName} from "../../lib/utils";
 
 const CredentialsContainer = () => {
     const router = useRouter();
@@ -40,7 +40,7 @@ const CredentialsContainer = () => {
                     <ConfirmationButton
                         variant="success"
                         modalVariant="success"
-                        msg={<span>Create a new Access Key for user <strong>{resolveDisplayName(user)}</strong>?</span>}
+                        msg={<span>Create a new Access Key for user <strong>{resolveUserDisplayName(user)}</strong>?</span>}
                         onConfirm={hide => {
                             createKey()
                                 .then(key => { setCreatedKey(key) })

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

@@ -4,7 +4,7 @@ import Button from "react-bootstrap/Button";
 
 import {GroupHeader} from "../../../../lib/components/auth/nav";
 import {useAPIWithPagination} from "../../../../lib/hooks/api";
-import {auth} from "../../../../lib/api";
+import {auth, MAX_LISTING_AMOUNT} from "../../../../lib/api";
 import {Paginator} from "../../../../lib/components/pagination";
 import {AttachModal} from "../../../../lib/components/auth/forms";
 import {ConfirmationButton} from "../../../../lib/components/modals";
@@ -19,22 +19,48 @@ import {
 } from "../../../../lib/components/controls";
 import {useRouter} from "../../../../lib/hooks/router";
 import {Link} from "../../../../lib/components/nav";
-import {resolveDisplayName} from "../../../../lib/utils";
+import {resolveUserDisplayName} from "../../../../lib/utils";
 
 
 const GroupMemberList = ({ groupId, after, onPaginate }) => {
     const [refresh, setRefresh] = useState(false);
     const [showAddModal, setShowAddModal] = useState(false);
     const [attachError, setAttachError] = useState(null);
-
+    const [allUsers, setAllUsers] = useState([]);
     const {results, loading, error, nextPage} = useAPIWithPagination(() => {
         return auth.listGroupMembers(groupId, after);
     }, [groupId, after, refresh]);
-
     useEffect(() => {
         setAttachError(null);
     }, [refresh]);
 
+    const allUsersFromLakeFS = async (resolveUserDisplayNameFN = (user => user.id)) => {
+        if (allUsers.length > 0) {
+            return allUsers
+        }
+        after = ""
+        let hasMore = true
+        let usersList = []
+        try {
+            do {
+                const results = await auth.listUsers("", after, MAX_LISTING_AMOUNT);
+                usersList = usersList.concat(results.results);
+                after = results.pagination.next_offset;
+                hasMore = results.pagination.has_more;
+            } while (hasMore);
+            usersList.sort((a, b) => resolveUserDisplayNameFN(a).localeCompare(resolveUserDisplayNameFN(b)));
+            setAllUsers(usersList);
+            return usersList;
+        } catch (error) {
+            console.error("Error fetching users:", error);
+            return [];
+        }
+    }
+    const searchUsers = async (prefix, maxResults, resolveUserDisplayNameFN = (user => user.id)) => {
+        let allUsersList = await allUsersFromLakeFS(resolveUserDisplayNameFN)
+        let filteredUsers = allUsersList.filter(user => resolveUserDisplayNameFN(user).startsWith(prefix));
+        return filteredUsers.slice(0, maxResults);
+    };
     let content;
     if (loading) content = <Loading/>;
     else if (error) content=  <AlertError error={error}/>;
@@ -45,7 +71,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                 <DataTable
                     keyFn={user => user.id}
                     rowFn={user => [
-                        <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveDisplayName(user)}</Link>,
+                        <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveUserDisplayName(user)}</Link>,
                         <FormattedDate dateValue={user.creation_date}/>
                     ]}
                     headers={['User ID', 'Created At']}
@@ -54,7 +80,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                         buttonFn: user => <ConfirmationButton
                             size="sm"
                             variant="outline-danger"
-                            msg={<span>Are you sure you{'\''}d like to remove user <strong>{resolveDisplayName(user)}</strong> from group <strong>{groupId}</strong>?</span>}
+                            msg={<span>Are you sure you{'\''}d like to remove user <strong>{resolveUserDisplayName(user)}</strong> from group <strong>{groupId}</strong>?</span>}
                             onConfirm={() => {
                                 auth.removeUserFromGroup(user.id, groupId)
                                     .catch(error => alert(error))
@@ -75,7 +101,8 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                     filterPlaceholder={'Find User...'}
                     modalTitle={'Add to Group'}
                     addText={'Add to Group'}
-                    searchFn={prefix => auth.listUsers(prefix, "", 5).then(res => res.results)}
+                    resolveEntityFN={resolveUserDisplayName}
+                    searchFn={prefix => searchUsers(prefix, 5, resolveUserDisplayName).then(res => res)}
                     onHide={() => setShowAddModal(false)}
                     onAttach={(selected) => {
                         Promise.all(selected.map(user => auth.addUserToGroup(user.id, groupId)))

webui/src/pages/auth/users/index.jsx

@@ -24,7 +24,7 @@ import {
 } from "../../../lib/components/controls";
 import validator from "validator/es";
 import { disallowPercentSign, INVALID_USER_NAME_ERROR_MESSAGE } from "../validation";
-import { resolveDisplayName } from "../../../lib/utils";
+import { resolveUserDisplayName } from "../../../lib/utils";
 
 const USER_NOT_FOUND = "unknown";
 export const GetUserEmailByIdContext = createContext();
@@ -119,7 +119,7 @@ const UsersContainer = ({nextPage, refresh, setRefresh, error, loading, userList
                         onRemove={() => setSelected(selected.filter(u => u !== user))}
                     />,
                     <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>
-                        { resolveDisplayName(user) }
+                        { resolveUserDisplayName(user) }
                     </Link>,
                     <FormattedDate dateValue={user.creation_date}/>
                 ]}/>

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

@@ -21,6 +21,12 @@ import { ConfirmationButton } from "../../../../lib/components/modals";
 import { useRouter } from "../../../../lib/hooks/router";
 import { Link } from "../../../../lib/components/nav";
 
+const resolveGroupDisplayName = (group) => {
+    if(!group) return "";
+    if (group?.name?.length) return group.name;
+    return group.id;
+}
+
 const UserGroupsList = ({ userId, after, onPaginate }) => {
   const [refresh, setRefresh] = useState(false);
   const [showAddModal, setShowAddModal] = useState(false);
@@ -97,6 +103,7 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
             searchFn={(prefix) =>
               auth.listGroups(prefix, "", 5).then((res) => res.results)
             }
+            resolveEntityFN={resolveGroupDisplayName}
             onHide={() => setShowAddModal(false)}
             onAttach={(selected) => {
               Promise.all(
@@ -112,7 +119,8 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
                 .finally(() => {
                   setShowAddModal(false);
                 });
-            }}
+            }
+          }
           />
         )}
       </>