UI : Fix pagination issue in test case (#9271)

* Fix pagination issue in test case

* minor changes

* fix cypress issue

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

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataQualityAndProfiler.js

@@ -294,10 +294,7 @@ describe('Data Quality and Profiler should work properly', () => {
       )
       .should('be.visible');
     cy.get('[data-testid="view-service-button"]').scrollIntoView().click();
-
+    cy.get('.ant-table-row').should('contain', "id_columnValueLengthsToBeBetween");
-    cy.get('[data-row-key="id_columnValueLengthsToBeBetween"]').should(
-      'be.visible'
-    );
   });
 
   it('Edit column test case should work properly', () => {

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx

@@ -13,8 +13,9 @@
 
 import { Button, Row, Space, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isUndefined } from 'lodash';
+import { isEmpty, isUndefined } from 'lodash';
 import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ReactComponent as ArrowDown } from '../../../assets/svg/arrow-down.svg';
 import { ReactComponent as ArrowRight } from '../../../assets/svg/arrow-right.svg';
@@ -44,6 +45,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   deletedTable = false,
   onTestUpdate,
 }) => {
+  const { t } = useTranslation();
   const [selectedTestCase, setSelectedTestCase] = useState<TestCase>();
   const [editTestCase, setEditTestCase] = useState<TestCase>();
   const { isAdminUser } = useAuth();
@@ -54,7 +56,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   const columns: ColumnsType<TestCase> = useMemo(() => {
     return [
       {
-        title: 'Last Run Result',
+        title: t('label.last-run-result'),
         dataIndex: 'testCaseResult',
         key: 'testCaseResult',
         render: (result: TestCaseResult) => (
@@ -62,7 +64,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
             {result?.testCaseStatus && (
               <SVGIcons
                 alt="result"
-                className="tw-w-4"
+                className="w-4"
                 icon={getTestResultBadgeIcon(result.testCaseStatus)}
               />
             )}
@@ -71,7 +73,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         ),
       },
       {
-        title: 'Last Run',
+        title: t('label.last-run'),
         dataIndex: 'testCaseResult',
         key: 'lastRun',
         render: (result: TestCaseResult) =>
@@ -80,18 +82,19 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
             : '--',
       },
       {
-        title: 'Name',
+        title: t('label.name'),
         dataIndex: 'name',
         key: 'name',
         render: (name: string) => <span data-testid={name}>{name}</span>,
       },
       {
-        title: 'Description',
+        title: t('label.description'),
         dataIndex: 'description',
         key: 'description',
+        render: (text) => (isEmpty(text) ? '--' : text),
       },
       {
-        title: 'Test Suite',
+        title: t('label.test-suite'),
         dataIndex: 'testSuite',
         key: 'testSuite',
         render: (value) => {
@@ -105,7 +108,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         },
       },
       {
-        title: 'Table',
+        title: t('label.table'),
         dataIndex: 'entityLink',
         key: 'table',
         render: (entityLink) => {
@@ -122,7 +125,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         },
       },
       {
-        title: 'Column',
+        title: t('label.column'),
         dataIndex: 'entityLink',
         key: 'column',
         render: (entityLink) => {
@@ -143,7 +146,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         },
       },
       {
-        title: 'Actions',
+        title: t('label.actions'),
         dataIndex: 'actions',
         key: 'actions',
         width: 100,
@@ -161,7 +164,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
                     icon={
                       <SVGIcons
                         alt="edit"
-                        className="tw-h-4"
+                        className="h-4"
                         icon={Icons.EDIT}
                         title="Edit"
                       />
@@ -177,15 +180,17 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
               )}
               <Tooltip
                 placement="bottomLeft"
-                title={hasAccess ? 'Delete' : NO_PERMISSION_FOR_ACTION}>
+                title={
+                  hasAccess ? t('label.delete') : NO_PERMISSION_FOR_ACTION
+                }>
                 <Button
                   className="flex-center"
                   data-testid={`delete-${record.name}`}
                   disabled={!hasAccess}
                   icon={
                     <SVGIcons
-                      alt="Delete"
+                      alt={t('label.delete')}
-                      className="tw-h-4"
+                      className="h-4"
                       icon={Icons.DELETE}
                     />
                   }
@@ -243,6 +248,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
           spinning: isLoading,
         }}
         pagination={false}
+        rowKey="id"
         size="small"
       />
       <EditTestCaseModal

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -475,6 +475,8 @@
     "test-suite": "Test Suite",
     "enter-entity": "Enter {{entity}}",
     "test-suite-status": "Test Suite Status",
+    "last-run-result": "Last Run Result",
+    "last-run": "Last Run",
     "search-entity": "Search {{entity}}",
     "more": "More",
     "update": "Update"