diff --git a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
index 5d3ded77030..01658b4ba59 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
+++ b/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')
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.test.tsx
index f23d8d19775..b8bf85b58aa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.test.tsx
+++ b/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(
-
- );
- const table = await findByTestId('custom-properties-table');
+ render();
+ 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 () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
index 987be88386e..00d03c25e4e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
+++ b/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 = ({
.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 = ({
});
};
+ const tableColumn: ColumnsType = useMemo(() => {
+ return [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ width: '50%',
+ },
+ {
+ title: 'Value',
+ dataIndex: 'value',
+ key: 'value',
+ width: '50%',
+ render: (_, record) => (
+
+ ),
+ },
+ ];
+ }, [entityDetails.extension]);
+
useEffect(() => {
fetchTypeDetail();
}, []);
return (
<>
- {isEmpty(customProperties) ? (
+ {isEmpty(entityTypeDetail.customProperties) ? (
) : (
-
-
-
-
- |
- Name
- |
-
- Value
- |
-
-
-
- {customProperties.map((property, index) => (
-
- | {property.name} |
-
-
-
- |
-
- ))}
-
-
-