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

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 { useEffect, useMemo, useState, type ComponentType } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import {
@@ -43,11 +41,15 @@ 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';
 
+const TransComponent = Trans as ComponentType<{
+  i18nKey: string;
+  components: Record<number, JSX.Element>;
+}>;
+
 const DimensionalityTab = () => {
   const { t } = useTranslation();
   const { dimensionKey } = useRequiredParams<{ dimensionKey?: string }>();
@@ -176,84 +178,60 @@ 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 ? (
+  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 = (
+    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[result.testCaseStatus]}
-            status={toLower(result.testCaseStatus) as StatusType}
+            label={TEST_CASE_STATUS_LABELS[row.result.testCaseStatus]}
+            status={toLower(row.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) => {
+      case 'impactScore':
         return (
-          <span className="tw:text-sm">{result?.impactScore ?? '--'}</span>
+          <span className="tw:text-sm">{row.result?.impactScore ?? '--'}</span>
         );
-      },
-    },
-    {
-      title: t('label.dimension'),
-      dataIndex: 'dimensionValue',
-      key: 'dimensionValue',
-      width: 200,
-      render: (dimensionValue: string, record) => {
+      case 'dimensionValue':
         return (
           <Link
             className="tw:text-text-brand-secondary"
             to={getTestCaseDimensionsDetailPagePath(
               testCase?.fullyQualifiedName || '',
-              record.result.dimensionKey || ''
+              row.result.dimensionKey || ''
             )}>
-            {dimensionValue}
+            {row.dimensionValue}
           </Link>
         );
-      },
-    },
-    {
-      title: t('label.last-run'),
-      dataIndex: 'result',
-      key: 'lastRun',
-      width: 200,
-      render: (result: DimensionResultWithTimestamp) => {
-        return result?.timestamp ? (
-          <DateTimeDisplay timestamp={result.timestamp} />
+      case 'lastRun':
+        return row.result?.timestamp ? (
+          <DateTimeDisplay timestamp={row.result.timestamp} />
         ) : (
           <span className="tw:text-sm">--</span>
         );
-      },
-    },
-  ];
+      default:
+        return null;
+    }
+  };
 
   const noDataPlaceholder = useMemo(() => {
     if (isLoading) {
@@ -267,7 +245,7 @@ const DimensionalityTab = () => {
 
     return (
       <NoDataPlaceholderNew size={SIZE.LARGE}>
-        <Trans
+        <TransComponent
           components={{
             0: <span className="tw:text-sm" />,
             1: <span className="tw:text-sm" />,
@@ -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,32 @@ const DimensionalityTab = () => {
                 entityText: selectedDimension || '',
               })}
             </p>
-            <Table
-              bordered
-              columns={tableColumns}
-              dataSource={getLatestResultPerDimension}
-              loading={isLoading}
-              pagination={false}
-            />
+            <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>
         </>
       )}

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">