diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx index 3c043f057dc..c1ce5bcfd8a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx @@ -23,7 +23,7 @@ import { CUSTOM_PROPERTIES_DOCS } from '../../constants/docs.constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; import { ERROR_PLACEHOLDER_TYPE, OPERATION } from '../../enums/common.enum'; import { CustomProperty } from '../../generated/entity/type'; -import { getEntityName } from '../../utils/EntityUtils'; +import { columnSorter, getEntityName } from '../../utils/EntityUtils'; import RichTextEditorPreviewer from '../common/RichTextEditor/RichTextEditorPreviewer'; import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal'; import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor'; @@ -89,6 +89,7 @@ export const CustomPropertyTable: FC = ({ dataIndex: 'name', key: 'name', render: (_, record) => getEntityName(record), + sorter: columnSorter, }, { title: t('label.type'), 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 cf58d0cae3e..3652417ba12 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 @@ -28,7 +28,7 @@ import { } from '../../../generated/entity/type'; import { getTypeByFQN } from '../../../rest/metadataTypeAPI'; import { getEntityExtentionDetailsFromEntityType } from '../../../utils/CustomProperties/CustomProperty.utils'; -import { getEntityName } from '../../../utils/EntityUtils'; +import { columnSorter, getEntityName } from '../../../utils/EntityUtils'; import { getChangedEntityNewValue, getDiffByFieldName, @@ -172,6 +172,7 @@ export const CustomPropertyTable = ({ key: 'name', width: 200, render: (_, record) => getEntityName(record), + sorter: columnSorter, }, { title: t('label.value'), diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.test.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.test.tsx index e057adc8c2a..c282f6a721a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.test.tsx @@ -10,7 +10,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { highlightEntityNameAndDescription } from './EntityUtils'; +import { columnSorter, highlightEntityNameAndDescription } from './EntityUtils'; import { entityWithoutNameAndDescHighlight, highlightedEntityDescription, @@ -19,13 +19,29 @@ import { } from './mocks/EntityUtils.mock'; describe('EntityUtils unit tests', () => { - it('highlightEntityNameAndDescription method should return the entity with highlighted name and description', () => { - const highlightedEntity = highlightEntityNameAndDescription( - entityWithoutNameAndDescHighlight, - mockHighlights - ); + describe('highlightEntityNameAndDescription method', () => { + it('highlightEntityNameAndDescription method should return the entity with highlighted name and description', () => { + const highlightedEntity = highlightEntityNameAndDescription( + entityWithoutNameAndDescHighlight, + mockHighlights + ); - expect(highlightedEntity.displayName).toBe(highlightedEntityDisplayName); - expect(highlightedEntity.description).toBe(highlightedEntityDescription); + expect(highlightedEntity.displayName).toBe(highlightedEntityDisplayName); + expect(highlightedEntity.description).toBe(highlightedEntityDescription); + }); + }); + + describe('columnSorter method', () => { + it('columnSorter method should return 1 if the 2nd column should be come before 1st column', () => { + const result = columnSorter({ name: 'name2' }, { name: 'name1' }); + + expect(result).toBe(1); + }); + + it('columnSorter method should return -1 if the 1st column should be come before 2nd column', () => { + const result = columnSorter({ name: 'name1' }, { name: 'name2' }); + + expect(result).toBe(-1); + }); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx index a57e4d5deab..4402abd70dc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx @@ -1790,3 +1790,13 @@ export const highlightEntityNameAndDescription = ( description: entityDescription, }; }; + +export const columnSorter = ( + col1: { name: string; displayName?: string }, + col2: { name: string; displayName?: string } +) => { + const name1 = getEntityName(col1); + const name2 = getEntityName(col2); + + return name1.localeCompare(name2); +};