fix(ui): supported pagination in data model (#11456)

* supported pagination in data model

* minor changes

openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx

@@ -14,9 +14,10 @@
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
+import NextPrevious from 'components/common/next-previous/NextPrevious';
 import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
 import Loader from 'components/Loader/Loader';
-import { getDataModelDetailsPath } from 'constants/constants';
+import { getDataModelDetailsPath, PAGE_SIZE } from 'constants/constants';
 import { isEmpty, isUndefined } from 'lodash';
 import { DataModelTableProps } from 'pages/DataModelPage/DataModelsInterface';
 import { ServicePageData } from 'pages/service';
@@ -25,7 +26,13 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { getEntityName } from 'utils/EntityUtils';
 
-const DataModelTable = ({ data, isLoading }: DataModelTableProps) => {
+const DataModelTable = ({
+  data,
+  isLoading,
+  paging,
+  pagingHandler,
+  currentPage,
+}: DataModelTableProps) => {
   const { t } = useTranslation();
 
   const tableColumn: ColumnsType<ServicePageData> = useMemo(
@@ -82,6 +89,15 @@ const DataModelTable = ({ data, isLoading }: DataModelTableProps) => {
         rowKey="id"
         size="small"
       />
+      {paging && paging.total > PAGE_SIZE && (
+        <NextPrevious
+          currentPage={currentPage}
+          pageSize={PAGE_SIZE}
+          paging={paging}
+          pagingHandler={pagingHandler}
+          totalCount={paging.total}
+        />
+      )}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelsInterface.tsx

@@ -10,11 +10,15 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { Paging } from 'generated/type/paging';
 import { ServicePageData } from 'pages/service';
 
 export interface DataModelTableProps {
   data: Array<ServicePageData>;
   isLoading: boolean;
+  paging: Paging;
+  currentPage: number;
+  pagingHandler: (cursorValue: string | number, activePage?: number) => void;
 }
 
 export enum DATA_MODELS_DETAILS_TABS {

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -166,6 +166,7 @@ const ServicePage: FunctionComponent = () => {
   const [ingestionPaging, setIngestionPaging] = useState<Paging>({} as Paging);
 
   const [currentPage, setCurrentPage] = useState(1);
+  const [dataModelCurrentPage, setDataModelCurrentPage] = useState(1);
   const [airflowEndpoint, setAirflowEndpoint] = useState<string>();
   const [connectionDetails, setConnectionDetails] = useState<ConfigData>();
 
@@ -561,7 +562,10 @@ const ServicePage: FunctionComponent = () => {
     }
   };
 
-  const getOtherDetails = (paging?: PagingWithoutTotal) => {
+  const getOtherDetails = (
+    paging?: PagingWithoutTotal,
+    isDataModel?: boolean
+  ) => {
     switch (serviceCategory) {
       case ServiceCategory.DATABASE_SERVICES: {
         fetchDatabases(paging);
@@ -574,7 +578,9 @@ const ServicePage: FunctionComponent = () => {
         break;
       }
       case ServiceCategory.DASHBOARD_SERVICES: {
-        fetchDashboards(paging);
+        if (!isDataModel) {
+          fetchDashboards(paging);
+        }
         fetchDashboardsDataModel(paging);
 
         break;
@@ -810,6 +816,21 @@ const ServicePage: FunctionComponent = () => {
     setCurrentPage(activePage ?? 1);
   };
 
+  const dataModelPagingHandler = (
+    cursorType: string | number,
+    activePage?: number
+  ) => {
+    getOtherDetails(
+      {
+        [cursorType]:
+          dataModelPaging[cursorType as keyof typeof dataModelPaging],
+      },
+      true
+    );
+
+    setDataModelCurrentPage(activePage ?? 1);
+  };
+
   const ingestionTab = useMemo(() => {
     if (!isAirflowAvailable) {
       return <ErrorPlaceHolderIngestion />;
@@ -855,8 +876,16 @@ const ServicePage: FunctionComponent = () => {
   ]);
 
   const dataModalTab = useMemo(
-    () => <DataModelTable data={dataModel} isLoading={isLoading} />,
-    [dataModel, isLoading]
+    () => (
+      <DataModelTable
+        currentPage={dataModelCurrentPage}
+        data={dataModel}
+        isLoading={isServiceLoading}
+        paging={dataModelPaging}
+        pagingHandler={dataModelPagingHandler}
+      />
+    ),
+    [dataModel, isServiceLoading, dataModelPagingHandler, dataModelCurrentPage]
   );
 
   const testConnectionTab = useMemo(() => {