refactor(DimensionalityTab): migrate table to core-ui Table component

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts

@@ -145,7 +145,7 @@ const isVisible = async (locator: Locator) =>
 
 const expectIncidentTableRowsToContain = async (page: Page, text: string) => {
   const rows = page.locator(
-    '.ant-table-tbody tr:not(.ant-table-measure-row):not(.ant-table-placeholder)'
+    '[data-testid="test-case-incident-manager-table"] tbody tr'
   );
   const rowCount = await rows.count();
 
@@ -182,7 +182,7 @@ const openIncidentReassignModal = async (page: Page, testCaseName?: string) => {
     .last();
   const incidentListRowAction = testCaseName
     ? page
-        .locator('.ant-table-tbody tr')
+        .locator('[data-testid="test-case-incident-manager-table"] tbody tr')
         .filter({ hasText: testCaseName })
         .first()
         .locator('button')

openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts

@@ -73,9 +73,7 @@ export const addAssigneeFromPopoverWidget = async (data: {
   const taskTabEditAssigneesButton = page.getByTestId('edit-assignees').last();
 
   if (testCaseName) {
-    const incidentRow = page
-      .getByRole('row', { name: new RegExp(testCaseName, 'i') })
-      .first();
+    const incidentRow = page.getByTestId(`test-case-${testCaseName}`).first();
     const editOwnerButton = incidentRow.getByTestId('edit-owner');
 
     if (await editOwnerButton.isVisible().catch(() => false)) {
@@ -184,7 +182,7 @@ export const assignIncident = async (data: {
     .poll(
       async () => {
         const incidentRow = page
-          .getByRole('row', { name: new RegExp(testCaseName, 'i') })
+          .getByTestId(`test-case-${testCaseName}`)
           .first();
         const incidentLink = page
           .getByRole('link', { name: testCaseName })

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityTab.tsx

@@ -10,13 +10,11 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Select, Skeleton, Tooltip } from '@openmetadata/ui-core-components';
-import { HelpCircle } from '@untitledui/icons';
-import { ColumnsType } from 'antd/lib/table';
+import { Select, Skeleton, Table } from '@openmetadata/ui-core-components';
 import { format } from 'date-fns';
 import { isEmpty, split, toLower } from 'lodash';
 import { DateRangeObject } from 'Models';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import {
@@ -43,7 +41,6 @@ import NoDataPlaceholderNew from '../../../common/ErrorWithPlaceholder/NoDataPla
 import MuiDatePickerMenu from '../../../common/MuiDatePickerMenu/MuiDatePickerMenu';
 import StatusBadge from '../../../common/StatusBadge/StatusBadge.component';
 import { StatusType } from '../../../common/StatusBadge/StatusBadge.interface';
-import Table from '../../../common/Table/Table';
 import { ProfilerTabPath } from '../../../Database/Profiler/ProfilerDashboard/profilerDashboard.interface';
 import DimensionalityHeatmap from './DimensionalityHeatmap/DimensionalityHeatmap.component';
 import { DimensionResultWithTimestamp } from './DimensionalityHeatmap/DimensionalityHeatmap.interface';
@@ -176,84 +173,65 @@ const DimensionalityTab = () => {
       });
   }, [dimensionData]);
 
-  const tableColumns: ColumnsType<{
-    key: string;
-    dimensionValue: string;
-    result: DimensionResultWithTimestamp;
-  }> = [
-    {
-      title: t('label.status'),
-      dataIndex: 'result',
-      key: 'status',
-      width: 120,
-      render: (result: DimensionResultWithTimestamp) => {
-        return result?.testCaseStatus ? (
-          <StatusBadge
-            dataTestId="status-badge"
-            label={TEST_CASE_STATUS_LABELS[result.testCaseStatus]}
-            status={toLower(result.testCaseStatus) as StatusType}
-          />
-        ) : (
-          <span className="tw:text-sm">--</span>
-        );
-      },
-    },
-    {
-      title: (
-        <div className="tw:flex tw:items-center tw:gap-2">
-          {t('label.impact-score')}
-          <Tooltip
-            placement="top"
-            title={
-              <span className="tw:text-xs">
-                {t('message.impact-score-helper')}
-              </span>
-            }>
-            <HelpCircle height={16} width={16} />
-          </Tooltip>
-        </div>
-      ),
-      dataIndex: 'result',
-      key: 'impactScore',
-      width: 120,
-      render: (result: DimensionResultWithTimestamp) => {
-        return (
-          <span className="tw:text-sm">{result?.impactScore ?? '--'}</span>
-        );
-      },
-    },
-    {
-      title: t('label.dimension'),
-      dataIndex: 'dimensionValue',
-      key: 'dimensionValue',
-      width: 200,
-      render: (dimensionValue: string, record) => {
-        return (
-          <Link
-            className="tw:text-text-brand-secondary"
-            to={getTestCaseDimensionsDetailPagePath(
-              testCase?.fullyQualifiedName || '',
-              record.result.dimensionKey || ''
-            )}>
-            {dimensionValue}
-          </Link>
-        );
-      },
-    },
-    {
-      title: t('label.last-run'),
-      dataIndex: 'result',
-      key: 'lastRun',
-      width: 200,
-      render: (result: DimensionResultWithTimestamp) => {
-        return result?.timestamp ? (
-          <DateTimeDisplay timestamp={result.timestamp} />
-        ) : (
-          <span className="tw:text-sm">--</span>
-        );
+  const dimensionTableColumns = useMemo(
+    () => [
+      { id: 'status', label: t('label.status') },
+      {
+        id: 'impactScore',
+        label: t('label.impact-score'),
+        tooltip: t('message.impact-score-helper'),
       },
+      { id: 'dimensionValue', label: t('label.dimension') },
+      { id: 'lastRun', label: t('label.last-run') },
+    ],
+    [t]
+  );
+
+  const renderCell = useCallback(
+    (
+      col: { id: string },
+      row: (typeof getLatestResultPerDimension)[number]
+    ) => {
+      switch (col.id) {
+        case 'status':
+          return row.result?.testCaseStatus ? (
+            <StatusBadge
+              dataTestId="status-badge"
+              label={TEST_CASE_STATUS_LABELS[row.result.testCaseStatus]}
+              status={toLower(row.result.testCaseStatus) as StatusType}
+            />
+          ) : (
+            <span className="tw:text-sm">--</span>
+          );
+        case 'impactScore':
+          return (
+            <span className="tw:text-sm">
+              {row.result?.impactScore ?? '--'}
+            </span>
+          );
+        case 'dimensionValue':
+          return (
+            <Link
+              className="tw:text-text-brand-secondary"
+              to={getTestCaseDimensionsDetailPagePath(
+                testCase?.fullyQualifiedName || '',
+                row.result.dimensionKey || ''
+              )}>
+              {row.dimensionValue}
+            </Link>
+          );
+        case 'lastRun':
+          return row.result?.timestamp ? (
+            <DateTimeDisplay timestamp={row.result.timestamp} />
+          ) : (
+            <span className="tw:text-sm">--</span>
+          );
+        default:
+          return null;
+      }
     },
-  ];
+    [testCase?.fullyQualifiedName]
+  );
 
   const noDataPlaceholder = useMemo(() => {
     if (isLoading) {
@@ -287,8 +265,9 @@ const DimensionalityTab = () => {
             {`${t('label.select-dimension')}:`}
           </p>
           <Select
-            className="tw:min-w-37.5"
+            className="tw:min-w-37.5 tw:h-8"
             data-testid="dimension-select"
+            fontSize="xs"
             items={dimensionColumnsOptions}
             size="sm"
             value={selectedDimension ?? null}
@@ -329,13 +308,34 @@ const DimensionalityTab = () => {
                 entityText: selectedDimension || '',
               })}
             </p>
-            <Table
-              bordered
-              columns={tableColumns}
-              dataSource={getLatestResultPerDimension}
-              loading={isLoading}
-              pagination={false}
-            />
+            <div className="tw:overflow-hidden tw:rounded-xl tw:shadow-xs tw:ring-1 tw:ring-secondary">
+              <Table aria-label={selectedDimension ?? ''}>
+                <Table.Header columns={dimensionTableColumns}>
+                  {(col) => (
+                    <Table.Head
+                      id={col.id}
+                      key={col.id}
+                      label={col.label}
+                      tooltip={col.tooltip}
+                    />
+                  )}
+                </Table.Header>
+                <Table.Body items={getLatestResultPerDimension}>
+                  {(row) => (
+                    <Table.Row
+                      columns={dimensionTableColumns}
+                      id={row.key}
+                      key={row.key}>
+                      {(col) => (
+                        <Table.Cell key={col.id}>
+                          {renderCell(col, row)}
+                        </Table.Cell>
+                      )}
+                    </Table.Row>
+                  )}
+                </Table.Body>
+              </Table>
+            </div>
           </div>
         </>
       )}

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx

@@ -513,7 +513,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
                 TestCasePageTabs.DIMENSIONALITY
               )}>
               <div
-                className="tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:bg-blue-50 tw:p-2 tw:text-primary"
+                className="tw:flex tw:min-w-13 tw:items-center tw:gap-2 tw:rounded-md tw:bg-blue-50 tw:p-2 tw:text-primary"
                 data-testid={`dimension-count-${record.name}`}>
                 <DimensionIcon height={12} width={12} />
                 <span className="tw:text-xs tw:font-medium">