Skip to content

Commit

Permalink
Fix 16805: pagination dropdown issue (#18611)
Browse files Browse the repository at this point in the history 
* fix: pagination dropdown

* fix: remove handlePageChange dependency

* fix: api url for database schema response

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
  • Loading branch information
@pranita09 @ShaileshParmar11
pranita09 and ShaileshParmar11 authored Nov 13, 2024
1 parent 089fa78 commit 00357f6
Show file tree
Hide file tree
Showing 11 changed files with 116 additions and 78 deletions.
2 changes: 1 addition & 1 deletion openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1235,7 +1235,7 @@ export const softDeleteEntity = async (
if (endPoint === EntityTypeEndpoint.Table) {
await page.click('[data-testid="breadcrumb-link"]:last-child');
const deletedTableResponse = page.waitForResponse(
'/api/v1/tables?databaseSchema=*'
'/api/v1/tables?*databaseSchema=*'
);
await page.click('[data-testid="show-deleted"]');
await deletedTableResponse;
Expand Down
29 changes: 17 additions & 12 deletions openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
import { AxiosError } from 'axios';
import { compare, Operation } from 'fast-json-patch';
import { isEmpty, isUndefined } from 'lodash';
import { EntityTags, PagingResponse } from 'Models';
import { EntityTags } from 'Models';
import React, {
FunctionComponent,
useCallback,
Expand Down Expand Up @@ -46,6 +46,7 @@ import {
getEntityDetailsPath,
getVersionPath,
INITIAL_PAGING_VALUE,
PAGE_SIZE,
ROUTES,
} from '../../constants/constants';
import { FEED_COUNT_INITIAL_DATA } from '../../constants/entity.constants';
Expand All @@ -69,6 +70,7 @@ import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
import { ThreadType } from '../../generated/entity/feed/thread';
import { Include } from '../../generated/type/include';
import { TagLabel } from '../../generated/type/tagLabel';
import { usePaging } from '../../hooks/paging/usePaging';
import { useFqn } from '../../hooks/useFqn';
import { FeedCounts } from '../../interface/feed.interface';
import {
Expand Down Expand Up @@ -99,6 +101,9 @@ const APICollectionPage: FunctionComponent = () => {
const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
const { t } = useTranslation();
const { getEntityPermissionByFqn } = usePermissionProvider();
const pagingInfo = usePaging(PAGE_SIZE);

const { paging, pageSize, handlePagingChange } = pagingInfo;

const { tab: activeTab = EntityTabs.API_ENDPOINT } =
useParams<{ tab: EntityTabs }>();
Expand All @@ -112,12 +117,7 @@ const APICollectionPage: FunctionComponent = () => {
const [apiCollection, setAPICollection] = useState<APICollection>(
{} as APICollection
);
const [apiEndpoints, setAPIEndpoints] = useState<
PagingResponse<APIEndpoint[]>
>({
data: [],
paging: { total: 0 },
});
const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);
const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);
const [isAPICollectionLoading, setIsAPICollectionLoading] =
useState<boolean>(true);
Expand Down Expand Up @@ -239,7 +239,8 @@ const APICollectionPage: FunctionComponent = () => {
service: apiCollection?.service?.fullyQualifiedName ?? '',
include: showDeletedEndpoints ? Include.Deleted : Include.NonDeleted,
});
setAPIEndpoints(res);
setAPIEndpoints(res.data);
handlePagingChange(res.paging);
} catch (err) {
showErrorToast(err as AxiosError);
} finally {
Expand Down Expand Up @@ -454,13 +455,13 @@ const APICollectionPage: FunctionComponent = () => {
if (cursorType) {
getAPICollectionEndpoints({
paging: {
[cursorType]: apiEndpoints.paging[cursorType],
[cursorType]: paging[cursorType],
},
});
}
setCurrentEndpointsPage(currentPage);
},
[apiEndpoints, getAPICollectionEndpoints]
[paging, getAPICollectionEndpoints]
);

const versionHandler = useCallback(() => {
Expand Down Expand Up @@ -503,13 +504,16 @@ const APICollectionPage: FunctionComponent = () => {

useEffect(() => {
if (viewAPICollectionPermission && decodedAPICollectionFQN) {
getAPICollectionEndpoints();
getAPICollectionEndpoints({
paging: { limit: pageSize },
});
}
}, [
showDeletedEndpoints,
decodedAPICollectionFQN,
viewAPICollectionPermission,
apiCollection,
pageSize,
]);

const {
Expand Down Expand Up @@ -556,7 +560,7 @@ const APICollectionPage: FunctionComponent = () => {
{
label: (
<TabsLabel
count={apiEndpoints.paging.total}
count={paging.total}
id={EntityTabs.API_ENDPOINT}
isActive={activeTab === EntityTabs.API_ENDPOINT}
name={t('label.endpoint-plural')}
Expand All @@ -580,6 +584,7 @@ const APICollectionPage: FunctionComponent = () => {
editDescriptionPermission={editDescriptionPermission}
endpointPaginationHandler={endpointPaginationHandler}
isEdit={isEdit}
pagingInfo={pagingInfo}
showDeletedEndpoints={showDeletedEndpoints}
onCancel={onEditCancel}
onDescriptionEdit={onDescriptionEdit}
Expand Down
32 changes: 18 additions & 14 deletions ...etadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { Col, Row, Space, Tabs } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { isEmpty, isUndefined, toString } from 'lodash';
import { PagingResponse } from 'Models';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory, useParams } from 'react-router-dom';
Expand All @@ -34,6 +33,7 @@ import {
getEntityDetailsPath,
getVersionPath,
INITIAL_PAGING_VALUE,
PAGE_SIZE,
} from '../../constants/constants';
import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
import {
Expand All @@ -52,6 +52,7 @@ import { ChangeDescription } from '../../generated/entity/type';
import { EntityHistory } from '../../generated/type/entityHistory';
import { Include } from '../../generated/type/include';
import { TagSource } from '../../generated/type/tagLabel';
import { usePaging } from '../../hooks/paging/usePaging';
import { useFqn } from '../../hooks/useFqn';
import {
getApiCollectionByFQN,
Expand Down Expand Up @@ -83,6 +84,10 @@ const APICollectionVersionPage = () => {

const { fqn: decodedEntityFQN } = useFqn();

const pagingInfo = usePaging(PAGE_SIZE);

const { paging, pageSize, handlePagingChange } = pagingInfo;

const [collectionPermissions, setCollectionPermissions] =
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
const [isLoading, setIsLoading] = useState<boolean>(true);
Expand All @@ -99,12 +104,7 @@ const APICollectionVersionPage = () => {

const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);

const [apiEndpoints, setAPIEndpoints] = useState<
PagingResponse<APIEndpoint[]>
>({
data: [],
paging: { total: 0 },
});
const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);

const [currentEndpointsPage, setCurrentEndpointsPage] =
useState<number>(INITIAL_PAGING_VALUE);
Expand Down Expand Up @@ -182,7 +182,8 @@ const APICollectionVersionPage = () => {
service: collection?.service?.fullyQualifiedName ?? '',
include: Include.All,
});
setAPIEndpoints(res);
setAPIEndpoints(res.data);
handlePagingChange(res.paging);
} catch (err) {
showErrorToast(err as AxiosError);
} finally {
Expand All @@ -203,13 +204,15 @@ const APICollectionVersionPage = () => {
);

setCurrentVersionData(response);
await getAPICollectionEndpoints();
await getAPICollectionEndpoints({
paging: { limit: pageSize },
});
}
} finally {
setIsVersionDataLoading(false);
}
},
[viewVersionPermission, version, getAPICollectionEndpoints]
[viewVersionPermission, version, getAPICollectionEndpoints, pageSize]
);

const handleTabChange = (activeKey: string) => {
Expand All @@ -228,13 +231,13 @@ const APICollectionVersionPage = () => {
if (cursorType) {
getAPICollectionEndpoints({
paging: {
[cursorType]: apiEndpoints.paging[cursorType],
[cursorType]: paging[cursorType],
},
});
}
setCurrentEndpointsPage(currentPage);
},
[apiEndpoints, getAPICollectionEndpoints]
[paging, getAPICollectionEndpoints]
);

const { versionHandler, backHandler } = useMemo(
Expand Down Expand Up @@ -268,7 +271,7 @@ const APICollectionVersionPage = () => {
{
label: (
<TabsLabel
count={apiEndpoints.paging.total}
count={paging.total}
id={EntityTabs.API_ENDPOINT}
isActive={tab === EntityTabs.API_ENDPOINT}
name={t('label.endpoint-plural')}
Expand All @@ -286,6 +289,7 @@ const APICollectionVersionPage = () => {
currentEndpointsPage={currentEndpointsPage}
description={description}
endpointPaginationHandler={endpointPaginationHandler}
pagingInfo={pagingInfo}
/>
</Col>
<Col
Expand Down Expand Up @@ -432,7 +436,7 @@ const APICollectionVersionPage = () => {
if (!isUndefined(collection)) {
fetchCurrentVersionData(collection);
}
}, [version, collection]);
}, [version, collection, pageSize]);

return (
<PageLayoutV1
Expand Down
23 changes: 13 additions & 10 deletions openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APIEndpointsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@

import { Col, Row, Switch, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { isEmpty } from 'lodash';
import { PagingResponse } from 'Models';
import { isEmpty, isUndefined } from 'lodash';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
Expand All @@ -24,11 +23,12 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
import RichTextEditorPreviewer from '../../components/common/RichTextEditor/RichTextEditorPreviewer';
import TableAntd from '../../components/common/Table/Table';
import { NO_DATA, PAGE_SIZE } from '../../constants/constants';
import { NO_DATA } from '../../constants/constants';
import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
import { EntityType } from '../../enums/entity.enum';
import { APICollection } from '../../generated/entity/data/apiCollection';
import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
import { UsePagingInterface } from '../../hooks/paging/usePaging';
import entityUtilClassBase from '../../utils/EntityUtilClassBase';
import { getEntityName } from '../../utils/EntityUtils';

Expand All @@ -39,7 +39,7 @@ interface APIEndpointsTabProps {
editDescriptionPermission?: boolean;
isEdit?: boolean;
showDeletedEndpoints?: boolean;
apiEndpoints: PagingResponse<APIEndpoint[]>;
apiEndpoints: APIEndpoint[];
currentEndpointsPage: number;
endpointPaginationHandler: NextPreviousProps['pagingHandler'];
onCancel?: () => void;
Expand All @@ -48,6 +48,7 @@ interface APIEndpointsTabProps {
onThreadLinkSelect?: (link: string) => void;
onShowDeletedEndpointsChange?: (value: boolean) => void;
isVersionView?: boolean;
pagingInfo: UsePagingInterface;
}

function APIEndpointsTab({
Expand All @@ -66,6 +67,7 @@ function APIEndpointsTab({
showDeletedEndpoints = false,
onShowDeletedEndpointsChange,
isVersionView = false,
pagingInfo,
}: Readonly<APIEndpointsTabProps>) {
const { t } = useTranslation();

Expand Down Expand Up @@ -124,7 +126,7 @@ function APIEndpointsTab({
description={description}
entityFqn={apiCollectionDetails.fullyQualifiedName}
entityType={EntityType.API_COLLECTION}
isDescriptionExpanded={isEmpty(apiEndpoints.data)}
isDescriptionExpanded={isEmpty(apiEndpoints)}
showActions={false}
/>
) : (
Expand All @@ -134,7 +136,7 @@ function APIEndpointsTab({
entityName={getEntityName(apiCollectionDetails)}
entityType={EntityType.API_COLLECTION}
hasEditAccess={editDescriptionPermission}
isDescriptionExpanded={isEmpty(apiEndpoints.data)}
isDescriptionExpanded={isEmpty(apiEndpoints)}
isEdit={isEdit}
showActions={!apiCollectionDetails.deleted}
onCancel={onCancel}
Expand Down Expand Up @@ -166,7 +168,7 @@ function APIEndpointsTab({
bordered
columns={tableColumn}
data-testid="databaseSchema-tables"
dataSource={apiEndpoints.data}
dataSource={apiEndpoints}
loading={apiEndpointsLoading}
locale={{
emptyText: (
Expand All @@ -181,14 +183,15 @@ function APIEndpointsTab({
size="small"
/>
</Col>
{apiEndpoints.paging.total > PAGE_SIZE && apiEndpoints.data.length > 0 && (
{!isUndefined(pagingInfo) && pagingInfo.showPagination && (
<Col span={24}>
<NextPrevious
currentPage={currentEndpointsPage}
isLoading={apiEndpointsLoading}
pageSize={PAGE_SIZE}
paging={apiEndpoints.paging}
pageSize={pagingInfo.pageSize}
paging={pagingInfo.paging}
pagingHandler={endpointPaginationHandler}
onShowSizeChange={pagingInfo.handlePageSizeChange}
/>
</Col>
)}
Expand Down
Loading

0 comments on commit 00357f6

Please sign in to comment.