Migrate FailedTestCaseSampleData table to core-ui Table component

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

@@ -11,7 +11,8 @@
  *  limitations under the License.
  */
 
-import { Button, Dropdown, Space, Table, Tooltip, Typography } from 'antd';
+import { Table } from '@openmetadata/ui-core-components';
+import { Button, Dropdown, Space, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
@@ -40,40 +41,49 @@ import { showErrorToast } from '../../../../utils/ToastUtils';
 import Loader from '../../../common/Loader/Loader';
 import { ManageButtonItemLabel } from '../../../common/ManageButtonContentItem/ManageButtonContentItem.component';
 import { RowData } from '../../../Database/SampleDataTable/RowData';
-import {
-  SampleData,
-  SampleDataType,
-} from '../../../Database/SampleDataTable/SampleData.interface';
+import { SampleDataType } from '../../../Database/SampleDataTable/SampleData.interface';
 import EntityDeleteModal from '../../../Modals/EntityDeleteModal/EntityDeleteModal';
-import './failed-test-case-sample-data.less';
 import { FailedTestCaseSampleDataProps } from './FailedTestCaseSampleData.interface';
 
 const DIFF_TYPE = 'diffType';
 const ROW_KEY = '__rowKey';
+
 const DIFF_TYPE_VALUES = {
   ADD: '+',
   REMOVE: '-',
   NOT_EQUAL: '!=',
 };
 
+type SampleDataColumn = {
+  id: string;
+  label: string;
+};
+
+type LocalSampleData = {
+  columns: SampleDataColumn[];
+  rows: Record<string, SampleDataType>[];
+};
+
 const FailedTestCaseSampleData = ({
   testCaseData,
 }: FailedTestCaseSampleDataProps) => {
   const { t } = useTranslation();
-  const [sampleData, setSampleData] = useState<SampleData>();
+  const [sampleData, setSampleData] = useState<LocalSampleData>();
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [showActions, setShowActions] = useState(false);
   const { permissions } = usePermissionProvider();
   const { version } = useParams<{ version: string }>();
   const isVersionPage = !isUndefined(version);
+
   const columnName = useMemo(
     () =>
       testCaseData?.entityLink
         ? getColumnNameFromEntityLink(testCaseData?.entityLink)
         : undefined,
     [testCaseData]
   );
+
   const hasViewSampleDataPermission = useMemo(() => {
     return checkPermission(
       Operation.ViewSampleData,
@@ -116,48 +126,26 @@ const FailedTestCaseSampleData = ({
       },
     },
   ];
-  const getSampleDataWithType = (sampleData: TableData) => {
-    const updatedColumns = sampleData?.columns?.map((column) => {
-      return {
-        name: column,
-        title:
-          column === DIFF_TYPE ? (
-            ''
-          ) : (
-            <div className="d-flex flex-column">
-              <Typography.Text> {column}</Typography.Text>
-            </div>
-          ),
-        dataIndex: column,
-        key: column,
-        accessor: column,
-        width: column === DIFF_TYPE ? undefined : 210,
-        render: (data: SampleDataType) => ({
-          props: {
-            className: classNames({
-              'failed-sample-data-column': column === columnName,
-              'diff-type-sample-data-column': column === DIFF_TYPE,
-            }),
-          },
-          children: <RowData data={data} />,
-        }),
-      };
-    });
 
-    const data = (sampleData?.rows ?? []).map((item, index) => {
+  const getSampleDataWithType = (tableData: TableData): LocalSampleData => {
+    const columns: SampleDataColumn[] = (tableData?.columns ?? []).map(
+      (column) => ({
+        id: column,
+        label: column === DIFF_TYPE ? '' : column,
+      })
+    );
+
+    const rows = (tableData?.rows ?? []).map((item, index) => {
       const dataObject: Record<string, SampleDataType> = {};
-      (sampleData?.columns ?? []).forEach((col, index) => {
-        dataObject[col] = item[index];
+      (tableData?.columns ?? []).forEach((col, colIndex) => {
+        dataObject[col] = item[colIndex];
       });
       dataObject[ROW_KEY] = index;
 
       return dataObject;
     });
 
-    return {
-      columns: updatedColumns,
-      rows: data,
-    };
+    return { columns, rows };
   };
 
   const fetchFailedTestCaseSampleData = async () => {
@@ -258,25 +246,79 @@ const FailedTestCaseSampleData = ({
           )}
         </div>
       </Space>
-      <Table
-        bordered
-        columns={sampleData.columns}
-        data-testid="sample-data-table"
-        dataSource={sampleData.rows}
-        pagination={false}
-        rowClassName={(record) => {
-          const type = record?.diffType;
+      <div className="tw:overflow-x-auto tw:border tw:border-border-secondary tw:rounded-[10px]">
+        <Table
+          aria-label={t('label.sample-data')}
+          data-testid="sample-data-table"
+          size="sm">
+          <Table.Header columns={sampleData.columns}>
+            {(col) => (
+              <Table.Head
+                className={classNames('tw:px-2 tw:py-2', {
+                  'tw:min-w-52.5': col.id !== DIFF_TYPE,
+                })}
+                id={col.id}
+                key={col.id}
+                label={col.label}
+              />
+            )}
+          </Table.Header>
+          <Table.Body items={sampleData.rows}>
+            {(record) => {
+              const diffType = record[DIFF_TYPE];
+
+              return (
+                <Table.Row
+                  className={classNames({
+                    'tw:bg-success-primary': diffType === DIFF_TYPE_VALUES.ADD,
+                    'tw:bg-gray-50': diffType === DIFF_TYPE_VALUES.NOT_EQUAL,
+                    'tw:bg-error-primary': diffType === DIFF_TYPE_VALUES.REMOVE,
+                  })}
+                  columns={sampleData.columns}
+                  id={record[ROW_KEY] as number}
+                  key={record[ROW_KEY] as number}>
+                  {(col) => {
+                    const isDiffCol = col.id === DIFF_TYPE;
+                    const isFailedCol = col.id === columnName;
 
-          return classNames({
-            'remove-sample-data': type === DIFF_TYPE_VALUES.REMOVE,
-            'add-sample-data': type === DIFF_TYPE_VALUES.ADD,
-            'not-equal-sample-data': type === DIFF_TYPE_VALUES.NOT_EQUAL,
-          });
-        }}
-        rowKey={ROW_KEY}
-        scroll={{ x: 'max-content' }}
-        size="small"
-      />
+                    return (
+                      <Table.Cell
+                        className={classNames('tw:p-2', {
+                          'tw:border-r tw:border-r-gray-blue-100 tw:text-center tw:align-middle':
+                            isDiffCol,
+                          'failed-sample-data-column tw:bg-error-primary':
+                            isFailedCol,
+                          'tw:min-w-52.5': !isDiffCol,
+                        })}>
+                        {isDiffCol ? (
+                          <span
+                            className={classNames('tw:font-medium', {
+                              'tw:text-success-primary':
+                                diffType === DIFF_TYPE_VALUES.ADD,
+                              'tw:text-gray-500':
+                                diffType === DIFF_TYPE_VALUES.NOT_EQUAL,
+                              'tw:text-error-primary':
+                                diffType === DIFF_TYPE_VALUES.REMOVE,
+                            })}>
+                            {record[col.id] as string}
+                          </span>
+                        ) : (
+                          <span
+                            className={
+                              isFailedCol ? 'tw:text-error-primary' : undefined
+                            }>
+                            <RowData data={record[col.id] as SampleDataType} />
+                          </span>
+                        )}
+                      </Table.Cell>
+                    );
+                  }}
+                </Table.Row>
+              );
+            }}
+          </Table.Body>
+        </Table>
+      </div>
       {isDeleteModalOpen && (
         <EntityDeleteModal
           bodyText={getEntityDeleteMessage(t('label.sample-data'), '')}