diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index 3ca3b594327..5b0030346be 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -27,7 +27,6 @@ import unique from 'fork-ts-checker-webpack-plugin/lib/utils/array/unique'; import { isEmpty, isNil, - isNumber, isString, isUndefined, lowerCase, @@ -81,7 +80,6 @@ const Explore: React.FC = ({ onChangeSortValue, onChangeShowDeleted, showDeleted, - page = 1, onChangePage = noop, loading, quickFilters, @@ -400,19 +398,12 @@ const Explore: React.FC = ({ { - if (isNumber(value)) { - onChangePage(value); - } else if (!isNaN(Number.parseInt(value))) { - onChangePage(Number.parseInt(value)); - } - }} selectedEntityId={entityDetails?.id || ''} totalValue={searchResults?.hits.total.value ?? 0} + onPaginationChange={onChangePage} /> ) : ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts index 5c19a88369c..8d347a991f2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts @@ -82,8 +82,7 @@ export interface ExploreProps { showDeleted: boolean; onChangeShowDeleted: (showDeleted: boolean) => void; - page?: number; - onChangePage?: (page: number) => void; + onChangePage?: (page: number, size?: number) => void; loading?: boolean; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts index b90e8fd8e3c..21841416d9f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts @@ -73,9 +73,8 @@ export interface SearchedDataProps { children?: ReactNode; selectedEntityId: string; data: SearchHitBody[]; - currentPage: number; isLoading?: boolean; - paginate: (value: string | number) => void; + onPaginationChange: (value: number, pageSize?: number) => void; totalValue: number; fetchLeftPanel?: () => ReactNode; isSummaryPanelVisible: boolean; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx index 5d0c38b9a49..1dae306c772 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx @@ -106,7 +106,7 @@ const MOCK_PROPS = { currentPage: 0, data: mockData, handleSummaryPanelDisplay: mockHandleSummaryPanelDisplay, - paginate: mockPaginate, + onPaginationChange: mockPaginate, selectedEntityId: 'name1', totalValue: 10, }; @@ -145,19 +145,6 @@ describe('Test SearchedData Component', () => { expect(getByText(container, /hello world/i)).toBeInTheDocument(); }); - it('Pagination Should be there if data is more than 10 count', () => { - const { container } = render( - -

hello world

-
, - { - wrapper: MemoryRouter, - } - ); - - expect(getByText(container, /Pagination/i)).toBeInTheDocument(); - }); - it('Onboarding component should display if there is showOnboardingTemplate is true', () => { const { container } = render( = ({ children, data, - currentPage, isLoading = false, - paginate, + onPaginationChange, showResultCount = false, showOnboardingTemplate = false, showOnlyChildren = false, @@ -51,7 +49,7 @@ const SearchedData: React.FC = ({ selectedEntityId, handleSummaryPanelDisplay, }) => { - const highlightSearchResult = () => { + const searchResultCards = useMemo(() => { return data.map(({ _source: table, highlight }, index) => { let tDesc = table.description ?? ''; const highLightedTexts = highlight?.description || []; @@ -108,7 +106,12 @@ const SearchedData: React.FC = ({ ); }); - }; + }, [ + data, + isSummaryPanelVisible, + handleSummaryPanelDisplay, + selectedEntityId, + ]); const ResultCount = () => { if (showResultCount && (isFilterSelected || searchText)) { @@ -122,6 +125,16 @@ const SearchedData: React.FC = ({ } }; + const { page, size } = useMemo( + () => + Qs.parse( + location.search.startsWith('?') + ? location.search.substr(1) + : location.search + ), + [location.search] + ); + return ( <> {isLoading ? ( @@ -138,17 +151,20 @@ const SearchedData: React.FC = ({
- {highlightSearchResult()} - {totalValue > PAGE_SIZE && data.length > 0 && ( - - )} + {searchResultCards} +
) : ( @@ -171,16 +187,4 @@ const SearchedData: React.FC = ({ ); }; -SearchedData.propTypes = { - children: PropTypes.element, - data: PropTypes.array.isRequired, - currentPage: PropTypes.number.isRequired, - isLoading: PropTypes.bool, - paginate: PropTypes.func.isRequired, - showResultCount: PropTypes.bool, - showOnboardingTemplate: PropTypes.bool, - totalValue: PropTypes.number.isRequired, - fetchLeftPanel: PropTypes.func, -}; - export default SearchedData; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx index 02326e87b23..a86a7c21210 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx @@ -119,8 +119,10 @@ const ExplorePage: FunctionComponent = () => { [facetFilters] ); - const handlePageChange: ExploreProps['onChangePage'] = (page) => { - history.push({ search: Qs.stringify({ ...parsedSearch, page }) }); + const handlePageChange: ExploreProps['onChangePage'] = (page, size) => { + history.push({ + search: Qs.stringify({ ...parsedSearch, page, size: size ?? PAGE_SIZE }), + }); }; // Filters that can be common for all the Entities Ex. Tables, Topics, etc. @@ -234,9 +236,18 @@ const ExplorePage: FunctionComponent = () => { return Number.parseInt(pageParam); }, [parsedSearch.page]); + const size = useMemo(() => { + const sizeParam = parsedSearch.size; + if (!isString(sizeParam) || isNaN(Number.parseInt(sizeParam))) { + return PAGE_SIZE; + } + + return Number.parseInt(sizeParam); + }, [parsedSearch.size]); + useEffect(() => { - handlePageChange(page); - }, [page]); + handlePageChange(page, size); + }, [page, size]); const showDeleted = useMemo(() => { const showDeletedParam = parsedSearch.showDeleted; @@ -305,7 +316,7 @@ const ExplorePage: FunctionComponent = () => { sortField: sortValue, sortOrder, pageNumber: page, - pageSize: PAGE_SIZE, + pageSize: size, includeDeleted: showDeleted, }) .then((res) => res) @@ -373,6 +384,7 @@ const ExplorePage: FunctionComponent = () => { elasticsearchQueryFilter, searchIndex, page, + size, ]); const handleAdvanceSearchQuickFiltersChange = useCallback( @@ -422,7 +434,6 @@ const ExplorePage: FunctionComponent = () => { aggregations={updatedAggregations} facetFilters={facetFilters} loading={isLoading} - page={page} quickFilters={advancesSearchQuickFilters} searchIndex={searchIndex} searchResults={searchResults}