fix(ui): pagination and conversation thread bug fixes (#12640)

* fixed schema page pagination bug
fixed schema page conversation drawer error

* fixed pagination bug for database details page

* fixed pagination bug for service details page

* Fixed loader shown for whole page for fetching schemas on database details page

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

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<string>('');
-  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 = () => {
                       <Switch
                         checked={showDeletedSchemas}
                         data-testid="show-deleted"
-                        onClick={setShowDeletedSchemas}
+                        onClick={handleShowDeletedSchemas}
                       />
                       <Typography.Text className="m-l-xs">
                         {t('label.deleted')}
@@ -717,6 +723,7 @@ const DatabaseDetails: FunctionComponent = () => {
       showDeletedSchemas,
       editTagsPermission,
       editDescriptionPermission,
+      handleShowDeletedSchemas,
     ]
   );
 

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>(
+    ThreadType.Conversation
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [databaseSchema, setDatabaseSchema] = useState<DatabaseSchema>(
     {} as DatabaseSchema
@@ -104,9 +111,12 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const [databaseSchemaPermission, setDatabaseSchemaPermission] =
     useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
   const [showDeletedTables, setShowDeletedTables] = useState<boolean>(false);
+  const [currentTablesPage, setCurrentTablesPage] =
+    useState<number>(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 = () => {
         <Row gutter={[0, 16]} wrap={false}>
           <Col className="p-t-sm m-x-lg" flex="auto">
             <SchemaTablesTab
+              currentTablesPage={currentTablesPage}
               databaseSchemaDetails={databaseSchema}
               description={description}
               editDescriptionPermission={editDescriptionPermission}
               entityFieldThreadCount={entityFieldThreadCount}
-              getSchemaTables={getSchemaTables}
               isEdit={isEdit}
               showDeletedTables={showDeletedTables}
               tableData={tableData}
               tableDataLoading={tableDataLoading}
+              tablePaginationHandler={tablePaginationHandler}
               onCancel={onEditCancel}
               onDescriptionEdit={onDescriptionEdit}
               onDescriptionUpdate={onDescriptionUpdate}
@@ -587,8 +618,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
               open={Boolean(threadLink)}
               postFeedHandler={postFeed}
               threadLink={threadLink}
+              threadType={threadType}
               updateThreadHandler={updateFeed}
-              onCancel={onThreadLinkSelect}
+              onCancel={onThreadPanelClose}
             />
           ) : null}
         </Col>

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<Table[]>;
-  getSchemaTables: (params?: TableListParams) => Promise<void>;
+  currentTablesPage: number;
+  tablePaginationHandler: (
+    cursorValue: string | number,
+    activePage?: number
+  ) => void;
   onCancel: () => void;
   onDescriptionEdit: () => void;
   onDescriptionUpdate: (updatedHTML: string) => Promise<void>;
@@ -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<number>(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<Table> = useMemo(
     () => [
       {

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<ConfigData>();
   const [servicePermission, setServicePermission] =
     useState<OperationPermission>(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: (
           <ServiceMainTabContent
+            currentPage={currentPage}
             data={data}
-            fetchServiceExtraInfo={getOtherDetails}
             isServiceLoading={isServiceLoading}
             paging={paging}
+            pagingHandler={pagingHandler}
             saveUpdatedServiceData={saveUpdatedServiceData}
             serviceDetails={serviceDetails}
             serviceName={serviceCategory}

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx

@@ -31,7 +31,7 @@ import { Paging } from 'generated/type/paging';
 import { LabelType, State, TagSource } from 'generated/type/tagLabel';
 import { ServicesType } from 'interface/service.interface';
 import { isEmpty, isNil, isUndefined } from 'lodash';
-import { EntityTags, PagingWithoutTotal, ServiceTypes } from 'Models';
+import { EntityTags, ServiceTypes } from 'Models';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router-dom';
@@ -57,10 +57,8 @@ interface ServiceMainTabContentProps {
   data: ServicePageData[];
   isServiceLoading: boolean;
   paging: Paging;
-  fetchServiceExtraInfo: (
-    paging?: PagingWithoutTotal,
-    isDataModel?: boolean
-  ) => void;
+  currentPage: number;
+  pagingHandler: (cursorType: string | number, activePage?: number) => void;
   saveUpdatedServiceData: (updatedData: ServicesType) => Promise<void>;
 }
 
@@ -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]