fix(#14369): added sort option in custom property table (#14537)

* added sort option in custom property table

* add comparision for displayName also, instead of just name

* added columnSorter utils fn

* fix type issue

* added unit test for columnSorter method

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<CustomPropertyTableProp> = ({
         dataIndex: 'name',
         key: 'name',
         render: (_, record) => getEntityName(record),
+        sorter: columnSorter,
       },
       {
         title: t('label.type'),

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 = <T extends ExtentionEntitiesKeys>({
         key: 'name',
         width: 200,
         render: (_, record) => getEntityName(record),
+        sorter: columnSorter,
       },
       {
         title: t('label.value'),

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,6 +19,7 @@ import {
 } from './mocks/EntityUtils.mock';
 
 describe('EntityUtils unit tests', () => {
+  describe('highlightEntityNameAndDescription method', () => {
     it('highlightEntityNameAndDescription method should return the entity with highlighted name and description', () => {
       const highlightedEntity = highlightEntityNameAndDescription(
         entityWithoutNameAndDescHighlight,
@@ -29,3 +30,18 @@ describe('EntityUtils unit tests', () => {
       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);
+    });
+  });
+});

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);
+};