diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx index d3accefb9cf..88340f313b6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx @@ -67,6 +67,7 @@ import { getDatabaseDetailsPath, getDatabaseSchemaDetailsPath, getExplorePath, + INITIAL_PAGING_VALUE, PAGE_SIZE, pagingObject, } from '../../constants/constants'; @@ -128,7 +129,7 @@ const DatabaseDetails: FunctionComponent = () => { >([]); const [threadLink, setThreadLink] = useState(''); - const [currentPage, setCurrentPage] = useState(1); + const [currentPage, setCurrentPage] = useState(INITIAL_PAGING_VALUE); const history = useHistory(); const isMounting = useRef(true); @@ -312,9 +313,9 @@ const DatabaseDetails: FunctionComponent = () => { const pagingString = `&${cursorType}=${ databaseSchemaPaging[cursorType as keyof typeof databaseSchemaPaging] }`; - setIsLoading(true); + setSchemaDataLoading(true); fetchDatabaseSchemas(pagingString).finally(() => { - setIsLoading(false); + setSchemaDataLoading(false); }); setCurrentPage(activePage ?? 1); }; @@ -581,6 +582,11 @@ const DatabaseDetails: FunctionComponent = () => { } }, [databaseId]); + const handleShowDeletedSchemas = useCallback((value: boolean) => { + setShowDeletedSchemas(value); + setCurrentPage(INITIAL_PAGING_VALUE); + }, []); + const editTagsPermission = useMemo( () => (databasePermission.EditTags || databasePermission.EditAll) && @@ -636,7 +642,7 @@ const DatabaseDetails: FunctionComponent = () => { {t('label.deleted')} @@ -717,6 +723,7 @@ const DatabaseDetails: FunctionComponent = () => { showDeletedSchemas, editTagsPermission, editDescriptionPermission, + handleShowDeletedSchemas, ] ); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx index 4f757553026..e25f11bdb06 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx @@ -33,9 +33,10 @@ import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2'; import { DisplayType } from 'components/Tag/TagsViewer/TagsViewer.interface'; import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum'; import { compare, Operation } from 'fast-json-patch'; +import { ThreadType } from 'generated/entity/feed/thread'; import { Include } from 'generated/type/include'; import { LabelType, State, TagLabel, TagSource } from 'generated/type/tagLabel'; -import { isUndefined } from 'lodash'; +import { isString, isUndefined } from 'lodash'; import { observer } from 'mobx-react'; import { EntityTags, PagingResponse } from 'Models'; import React, { @@ -57,7 +58,10 @@ import { getFeedCount, postThread } from 'rest/feedsAPI'; import { getTableList, TableListParams } from 'rest/tableAPI'; import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils'; import { default as appState } from '../../AppState'; -import { getDatabaseSchemaDetailsPath } from '../../constants/constants'; +import { + getDatabaseSchemaDetailsPath, + INITIAL_PAGING_VALUE, +} from '../../constants/constants'; import { EntityTabs, EntityType } from '../../enums/entity.enum'; import { CreateThread } from '../../generated/api/feed/createThread'; import { DatabaseSchema } from '../../generated/entity/data/databaseSchema'; @@ -83,6 +87,9 @@ const DatabaseSchemaPage: FunctionComponent = () => { const history = useHistory(); const isMounting = useRef(true); + const [threadType, setThreadType] = useState( + ThreadType.Conversation + ); const [isLoading, setIsLoading] = useState(true); const [databaseSchema, setDatabaseSchema] = useState( {} as DatabaseSchema @@ -104,9 +111,12 @@ const DatabaseSchemaPage: FunctionComponent = () => { const [databaseSchemaPermission, setDatabaseSchemaPermission] = useState(DEFAULT_ENTITY_PERMISSION); const [showDeletedTables, setShowDeletedTables] = useState(false); + const [currentTablesPage, setCurrentTablesPage] = + useState(INITIAL_PAGING_VALUE); const handleShowDeletedTables = (value: boolean) => { setShowDeletedTables(value); + setCurrentTablesPage(INITIAL_PAGING_VALUE); }; const { tags, tier } = useMemo( @@ -143,8 +153,18 @@ const DatabaseSchemaPage: FunctionComponent = () => { [databaseSchemaPermission] ); - const onThreadLinkSelect = useCallback((link?: string) => { - setThreadLink(link ?? ''); + const onThreadLinkSelect = useCallback( + (link: string, threadType?: ThreadType) => { + setThreadLink(link); + if (threadType) { + setThreadType(threadType); + } + }, + [] + ); + + const onThreadPanelClose = useCallback(() => { + setThreadLink(''); }, []); const getEntityFeedCount = useCallback(async () => { @@ -403,6 +423,16 @@ const DatabaseSchemaPage: FunctionComponent = () => { } }, [databaseSchemaId]); + const tablePaginationHandler = useCallback( + (cursorValue: string | number, activePage?: number) => { + if (isString(cursorValue)) { + getSchemaTables({ [cursorValue]: tableData.paging[cursorValue] }); + } + setCurrentTablesPage(activePage ?? INITIAL_PAGING_VALUE); + }, + [tableData, getSchemaTables] + ); + useEffect(() => { if (viewDatabaseSchemaPermission) { fetchDatabaseSchemaDetails(); @@ -456,15 +486,16 @@ const DatabaseSchemaPage: FunctionComponent = () => { { open={Boolean(threadLink)} postFeedHandler={postFeed} threadLink={threadLink} + threadType={threadType} updateThreadHandler={updateFeed} - onCancel={onThreadLinkSelect} + onCancel={onThreadPanelClose} /> ) : null} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx index 5882eca442e..e8774bfa6c6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx @@ -18,19 +18,18 @@ import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlac import NextPrevious from 'components/common/next-previous/NextPrevious'; import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer'; import Loader from 'components/Loader/Loader'; -import { INITIAL_PAGING_VALUE, PAGE_SIZE } from 'constants/constants'; +import { PAGE_SIZE } from 'constants/constants'; import { EntityField } from 'constants/Feeds.constants'; import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum'; import { EntityType } from 'enums/entity.enum'; import { EntityLinkThreadCount } from 'generated/api/feed/threadCount'; import { DatabaseSchema } from 'generated/entity/data/databaseSchema'; import { Table } from 'generated/entity/data/table'; -import { isEmpty, isString } from 'lodash'; +import { isEmpty } from 'lodash'; import { PagingResponse } from 'Models'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { TableListParams } from 'rest/tableAPI'; import { getEntityName } from 'utils/EntityUtils'; import { getEntityFieldThreadCounts } from 'utils/FeedUtils'; import { getEntityLink } from 'utils/TableUtils'; @@ -44,7 +43,11 @@ interface SchemaTablesTabProps { isEdit: boolean; showDeletedTables: boolean; tableData: PagingResponse; - getSchemaTables: (params?: TableListParams) => Promise; + currentTablesPage: number; + tablePaginationHandler: ( + cursorValue: string | number, + activePage?: number + ) => void; onCancel: () => void; onDescriptionEdit: () => void; onDescriptionUpdate: (updatedHTML: string) => Promise; @@ -60,7 +63,8 @@ function SchemaTablesTab({ editDescriptionPermission, isEdit, tableData, - getSchemaTables, + currentTablesPage, + tablePaginationHandler, onCancel, onDescriptionEdit, onDescriptionUpdate, @@ -68,21 +72,8 @@ function SchemaTablesTab({ showDeletedTables, onShowDeletedTablesChange, }: SchemaTablesTabProps) { - const [currentTablesPage, setCurrentTablesPage] = - useState(INITIAL_PAGING_VALUE); const { t } = useTranslation(); - const tablePaginationHandler = useCallback( - (cursorValue: string | number, activePage?: number) => { - if (isString(cursorValue)) { - const { paging } = tableData; - getSchemaTables({ [cursorValue]: paging[cursorValue] }); - } - setCurrentTablesPage(activePage ?? INITIAL_PAGING_VALUE); - }, - [tableData] - ); - const tableColumn: ColumnsType = useMemo( () => [ { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx index d8e77f0ce0e..420ebb30f82 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx @@ -37,7 +37,11 @@ import { usePermissionProvider } from 'components/PermissionProvider/PermissionP import { OperationPermission } from 'components/PermissionProvider/PermissionProvider.interface'; import ServiceConnectionDetails from 'components/ServiceConnectionDetails/ServiceConnectionDetails.component'; import TabsLabel from 'components/TabsLabel/TabsLabel.component'; -import { getServiceDetailsPath, pagingObject } from 'constants/constants'; +import { + getServiceDetailsPath, + INITIAL_PAGING_VALUE, + pagingObject, +} from 'constants/constants'; import { OPEN_METADATA } from 'constants/Services.constant'; import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum'; import { EntityTabs } from 'enums/entity.enum'; @@ -164,9 +168,11 @@ const ServiceDetailsPage: FunctionComponent = () => { const [connectionDetails, setConnectionDetails] = useState(); const [servicePermission, setServicePermission] = useState(DEFAULT_ENTITY_PERMISSION); + const [currentPage, setCurrentPage] = useState(INITIAL_PAGING_VALUE); const handleShowDeleted = useCallback((value: boolean) => { setShowDeleted(value); + setCurrentPage(INITIAL_PAGING_VALUE); }, []); const allowTestConn = useMemo(() => { @@ -888,6 +894,16 @@ const ServiceDetailsPage: FunctionComponent = () => { [serviceCategory] ); + const pagingHandler = useCallback( + (cursorType: string | number, activePage?: number) => { + getOtherDetails({ + [cursorType]: paging[cursorType as keyof typeof paging], + }); + setCurrentPage(activePage ?? INITIAL_PAGING_VALUE); + }, + [paging, getOtherDetails] + ); + const tabs: TabsProps['items'] = useMemo(() => { const tabs = []; const isOwner = AppState.userDetails.id === serviceDetails?.owner?.id; @@ -900,10 +916,11 @@ const ServiceDetailsPage: FunctionComponent = () => { count: paging.total, children: ( void; + currentPage: number; + pagingHandler: (cursorType: string | number, activePage?: number) => void; saveUpdatedServiceData: (updatedData: ServicesType) => Promise; } @@ -81,7 +79,8 @@ function ServiceMainTabContent({ data, isServiceLoading, paging, - fetchServiceExtraInfo, + pagingHandler, + currentPage, serviceDetails, saveUpdatedServiceData, }: ServiceMainTabContentProps) { @@ -91,7 +90,6 @@ function ServiceMainTabContent({ serviceCategory: ServiceTypes; }>(); const [isEdit, setIsEdit] = useState(false); - const [currentPage, setCurrentPage] = useState(1); const tier = getTierTags(serviceDetails?.tags ?? []); const tags = getTagsWithoutTier(serviceDetails?.tags ?? []); @@ -246,17 +244,6 @@ function ServiceMainTabContent({ : []), ]; }, [serviceCategory]); - - const pagingHandler = useCallback( - (cursorType: string | number, activePage?: number) => { - fetchServiceExtraInfo({ - [cursorType]: paging[cursorType as keyof typeof paging], - }); - setCurrentPage(activePage ?? 1); - }, - [] - ); - const entityType = useMemo( () => getEntityTypeFromServiceCategory(serviceCategory), [serviceCategory]