diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SelectableList/SelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SelectableList/SelectableList.component.tsx index a0f648367a9..b53cbf6a99b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/SelectableList/SelectableList.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SelectableList/SelectableList.component.tsx @@ -114,19 +114,28 @@ export const SelectableList = ({ [selectedItemsInternal] ); - const onScroll: UIEventHandler = async (e) => { - if ( - e.currentTarget.scrollHeight - e.currentTarget.scrollTop === - ADD_USER_CONTAINER_HEIGHT && - pagingInfo.after && - uniqueOptions.length <= pagingInfo.total - ) { - const { data, paging } = await fetchOptions(searchText, pagingInfo.after); + const onScroll: UIEventHandler = useCallback( + async (e) => { + if ( + // If user reachs to end of container fetch more options + e.currentTarget.scrollHeight - e.currentTarget.scrollTop === + ADD_USER_CONTAINER_HEIGHT && + // If there are other options available which can be determine form the cursor value + pagingInfo.after && + // If we have all the options already we don't need to fetch more + uniqueOptions.length < pagingInfo.total + ) { + const { data, paging } = await fetchOptions( + searchText, + pagingInfo.after + ); - setUniqueOptions((prevData) => [...prevData, ...data]); - setPagingInfo(paging); - } - }; + setUniqueOptions((prevData) => [...prevData, ...data]); + setPagingInfo(paging); + } + }, + [pagingInfo, uniqueOptions, searchText] + ); const selectionHandler = (item: EntityReference) => { if (multiSelect) { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx index b546520d8c3..469d770d65d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx @@ -19,7 +19,7 @@ import { EntityType } from 'enums/entity.enum'; import { SearchIndex } from 'enums/search.enum'; import { EntityReference } from 'generated/entity/data/table'; import { Paging } from 'generated/type/paging'; -import { isEmpty, isEqual, isNumber, noop, toString } from 'lodash'; +import { isEmpty, isEqual, noop, toString } from 'lodash'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { searchData } from 'rest/miscAPI'; @@ -46,7 +46,6 @@ export const UserTeamSelectableList = ({ const [userPaging, setUserPaging] = useState(pagingObject); const [teamPaging, setTeamPaging] = useState(pagingObject); const [activeTab, setActiveTab] = useState<'teams' | 'users'>('teams'); - const [currentTeamPage, setCurrentTeamPage] = useState('1'); const fetchUserOptions = async (searchText: string, after?: string) => { if (searchText) { @@ -100,11 +99,13 @@ export const UserTeamSelectableList = ({ }; const fetchTeamOptions = async (searchText: string, after?: string) => { + const afterPage = isNaN(Number(after)) ? 1 : Number(after); + if (searchText) { try { const res = await searchData( searchText, - 1, + afterPage, PAGE_SIZE_MEDIUM, 'teamType:Group', '', @@ -119,7 +120,13 @@ export const UserTeamSelectableList = ({ setTeamPaging({ total: res.data.hits.total.value }); - return { data, paging: { total: res.data.hits.total.value } }; + return { + data, + paging: { + total: res.data.hits.total.value, + after: toString(afterPage + 1), + }, + }; } catch (error) { return { data: [], paging: { total: 0 } }; } @@ -127,7 +134,7 @@ export const UserTeamSelectableList = ({ try { const { data } = await searchData( WILD_CARD_CHAR, - isNumber(after) ? after : 1, + afterPage, PAGE_SIZE_MEDIUM, 'teamType:Group', '', @@ -140,14 +147,16 @@ export const UserTeamSelectableList = ({ EntityType.TEAM ); - setTeamPaging({ total: data.hits.total.value }); - setCurrentTeamPage((prevCount) => prevCount + 1); + setTeamPaging({ + total: data.hits.total.value, + after: toString(afterPage + 1), + }); return { data: filterData, paging: { total: data.hits.total.value, - after: toString(Number(currentTeamPage) + 1), + after: toString(afterPage + 1), }, }; } catch (error) { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.test.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.test.tsx index d8a513dd845..744745c56cb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.test.tsx @@ -43,6 +43,8 @@ describe('AlertsUtil tests', () => { }); it('getFunctionDisplayName should return correct text for matchAnyEntityId', () => { - expect(getFunctionDisplayName('matchAnyEntityId')).toBe('label.entity-id-match'); + expect(getFunctionDisplayName('matchAnyEntityId')).toBe( + 'label.entity-id-match' + ); }); });