Fix UI :- Convert CustomProperty html table to antd table (#7583)

* Convert CustomProperty html table to antd table

* fix cypress issue

* fix cypress issue

* fix cypress issue of not found @value

openmetadata-ui/src/main/resources/ui/cypress/common/common.js

@@ -649,12 +649,12 @@ export const addCustomPropertiesForEntity = (entityType, customType, value) => {
     .should('exist')
     .should('be.visible')
     .click();
-  cy.get('[data-testid="table-body"]').should('contain', propertyName);
+  cy.get('tbody').should('contain', propertyName);
 
   //Adding value for the custom property
 
   //Navigating through the created custom property for adding value
-  cy.get('[data-testid="data-row"]')
+  cy.get('tbody')
     .contains(propertyName)
     .scrollIntoView()
     .next('td')
@@ -684,13 +684,16 @@ export const addCustomPropertiesForEntity = (entityType, customType, value) => {
   });
 
   //Checking the added value to the property
-  cy.get('[data-testid="data-row"]')
+  cy.get('tbody')
     .contains(propertyName)
     .scrollIntoView()
     .next('td')
     .as('value');
 
-  cy.get('@value').should('contain', value);
+    cy.get('tbody')
+    .contains(propertyName)
+    .scrollIntoView()
+    .next('td').should('contain', value);
 
   //returning the property name since it needs to be deleted and updated
   return propertyName;
@@ -698,7 +701,7 @@ export const addCustomPropertiesForEntity = (entityType, customType, value) => {
 
 export const editCreatedProperty = (propertyName) => {
   //Fetching for edit button
-  cy.get('[data-testid="table-body"]')
+  cy.get('tbody')
     .children()
     .contains(propertyName)
     .scrollIntoView()
@@ -731,7 +734,7 @@ export const editCreatedProperty = (propertyName) => {
 export const deleteCreatedProperty = (propertyName) => {
   //Fetching for delete button
 
-  cy.get('[data-testid="table-body"]')
+  cy.get('tbody')
     .children()
     .contains(propertyName)
     .nextUntil('button')

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.test.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { getTypeByFQN } from '../../../axiosAPIs/metadataTypeAPI';
 import { EntityType } from '../../../enums/entity.enum';
@@ -73,22 +73,18 @@ const mockProp = {
 
 describe('Test CustomProperty Table Component', () => {
   it('Should render table component', async () => {
-    const { findByTestId, findAllByTestId } = render(
-      <CustomPropertyTable {...mockProp} />
-    );
-    const table = await findByTestId('custom-properties-table');
+    render(<CustomPropertyTable {...mockProp} />);
+    const table = await screen.findByTestId('custom-properties-table');
 
     expect(table).toBeInTheDocument();
 
-    const propertyName = await findByTestId('property-name');
-    const propertyValue = await findByTestId('property-value');
+    const propertyName = await screen.findByText('Name');
+    const propertyValue = await screen.findByText('Value');
+    const rows = await screen.findAllByRole('row');
 
     expect(propertyName).toBeInTheDocument();
     expect(propertyValue).toBeInTheDocument();
-
-    const dataRows = await findAllByTestId('data-row');
-
-    expect(dataRows).toHaveLength(mockCustomProperties.length);
+    expect(rows).toHaveLength(mockCustomProperties.length + 1);
   });
 
   it('Should render no data placeholder if custom properties list is empty', async () => {

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx

@@ -11,13 +11,13 @@
  *  limitations under the License.
  */
 
+import { Table } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
-import classNames from 'classnames';
-import { isEmpty, uniqueId } from 'lodash';
-import React, { FC, useEffect, useState } from 'react';
+import { isEmpty } from 'lodash';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import { getTypeByFQN } from '../../../axiosAPIs/metadataTypeAPI';
-import { Type } from '../../../generated/entity/type';
-import { isEven } from '../../../utils/CommonUtils';
+import { CustomProperty, Type } from '../../../generated/entity/type';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import ErrorPlaceHolder from '../error-with-placeholder/ErrorPlaceHolder';
 import { CustomPropertyProps } from './CustomPropertyTable.interface';
@@ -38,10 +38,6 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
       .catch((err: AxiosError) => showErrorToast(err));
   };
 
-  const customProperties = entityTypeDetail.customProperties || [];
-
-  const extension = entityDetails.extension;
-
   const onExtensionUpdate = async (
     updatedExtension: CustomPropertyProps['entityDetails']['extension']
   ) => {
@@ -51,57 +47,47 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
     });
   };
 
+  const tableColumn: ColumnsType<CustomProperty> = useMemo(() => {
+    return [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        width: '50%',
+      },
+      {
+        title: 'Value',
+        dataIndex: 'value',
+        key: 'value',
+        width: '50%',
+        render: (_, record) => (
+          <PropertyValue
+            extension={entityDetails.extension}
+            propertyName={record.name}
+            propertyType={record.propertyType}
+            onExtensionUpdate={onExtensionUpdate}
+          />
+        ),
+      },
+    ];
+  }, [entityDetails.extension]);
+
   useEffect(() => {
     fetchTypeDetail();
   }, []);
 
   return (
     <>
-      {isEmpty(customProperties) ? (
+      {isEmpty(entityTypeDetail.customProperties) ? (
         <ErrorPlaceHolder heading="Custom Properties" />
       ) : (
-        <div className="tw-table-container">
-          <table className="tw-w-full" data-testid="custom-properties-table">
-            <thead data-testid="table-header">
-              <tr className="tableHead-row">
-                <th
-                  className="tableHead-cell tw-w-2/4"
-                  data-testid="property-name">
-                  Name
-                </th>
-                <th
-                  className="tableHead-cell tw-w-2/4"
-                  data-testid="property-value">
-                  Value
-                </th>
-              </tr>
-            </thead>
-            <tbody data-testid="table-body">
-              {customProperties.map((property, index) => (
-                <tr
-                  className={classNames(
-                    `tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
-                    {
-                      'tw-border-b-0': index === customProperties.length - 1,
-                    }
-                  )}
-                  data-testid="data-row"
-                  key={uniqueId()}>
-                  <td className="tableBody-cell">{property.name}</td>
-
-                  <td className="tableBody-cell">
-                    <PropertyValue
-                      extension={extension}
-                      propertyName={property.name}
-                      propertyType={property.propertyType}
-                      onExtensionUpdate={onExtensionUpdate}
-                    />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <Table
+          columns={tableColumn}
+          data-testid="custom-properties-table"
+          dataSource={entityTypeDetail.customProperties || []}
+          pagination={false}
+          size="small"
+        />
       )}
     </>
   );

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx

@@ -64,6 +64,7 @@ export const PropertyValue: FC<Props> = ({
           : updatedValue,
     };
     await onExtensionUpdate(updatedExtension);
+    setShowInput(false);
   };
 
   const getPropertyInput = () => {