name column sorting functionality for tables (#18547)

openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerChildren/ContainerChildren.tsx

@@ -19,7 +19,7 @@ import { getEntityDetailsPath } from '../../../constants/constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { Container } from '../../../generated/entity/data/container';
 import { EntityReference } from '../../../generated/type/entityReference';
-import { getEntityName } from '../../../utils/EntityUtils';
+import { getColumnSorter, getEntityName } from '../../../utils/EntityUtils';
 import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import RichTextEditorPreviewer from '../../common/RichTextEditor/RichTextEditorPreviewer';
 import Table from '../../common/Table/Table';
@@ -44,6 +44,7 @@ const ContainerChildren: FC<ContainerChildrenProps> = ({
         dataIndex: 'name',
         width: 400,
         key: 'name',
+        sorter: getColumnSorter<EntityReference, 'name'>('name'),
         render: (_, record) => (
           <div className="d-inline-flex w-max-90">
             <Link

openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardDetails/DashboardDetails.component.tsx

@@ -44,7 +44,7 @@ import { useFqn } from '../../../hooks/useFqn';
 import { FeedCounts } from '../../../interface/feed.interface';
 import { restoreDashboard } from '../../../rest/dashboardAPI';
 import { getFeedCounts } from '../../../utils/CommonUtils';
-import { getEntityName } from '../../../utils/EntityUtils';
+import { getColumnSorter, getEntityName } from '../../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../../utils/PermissionsUtils';
 import {
   getAllTags,
@@ -439,6 +439,7 @@ const DashboardDetails = ({
         key: 'chartName',
         width: 220,
         fixed: 'left',
+        sorter: getColumnSorter<ChartType, 'name'>('name'),
         render: (_, record) => {
           const chartName = getEntityName(record);
 

openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/ModelTab/ModelTab.component.tsx

@@ -20,7 +20,10 @@ import { EntityType } from '../../../../../enums/entity.enum';
 import { Column } from '../../../../../generated/entity/data/dashboardDataModel';
 import { TagLabel, TagSource } from '../../../../../generated/type/tagLabel';
 import { updateDataModelColumnDescription } from '../../../../../utils/DataModelsUtils';
-import { getEntityName } from '../../../../../utils/EntityUtils';
+import {
+  getColumnSorter,
+  getEntityName,
+} from '../../../../../utils/EntityUtils';
 import {
   getAllTags,
   searchTagInData,
@@ -93,6 +96,7 @@ const ModelTab = ({
         key: 'name',
         width: 250,
         fixed: 'left',
+        sorter: getColumnSorter<Column, 'name'>('name'),
         render: (_, record) => (
           <Typography.Text>{getEntityName(record)}</Typography.Text>
         ),

openmetadata-ui/src/main/resources/ui/src/components/DataInsight/TopActiveUsers.tsx

@@ -33,6 +33,7 @@ import Table from '../common/Table/Table';
 import PageHeader from '../PageHeader/PageHeader.component';
 import './data-insight-detail.less';
 import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
+import { getColumnSorter } from '../../utils/EntityUtils';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -73,6 +74,7 @@ const TopActiveUsers: FC<Props> = ({ chartFilter }) => {
         title: t('label.user'),
         dataIndex: 'userName',
         key: 'userName',
+        sorter: getColumnSorter<MostActiveUsers, 'userName'>('userName'),
         render: (userName: string) => (
           <Space>
             <ProfilePicture name={userName} width="24" />

openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx

@@ -53,6 +53,7 @@ import { useApplicationStore } from '../../../hooks/useApplicationStore';
 import { useFqn } from '../../../hooks/useFqn';
 import { getPartialNameFromTableFQN } from '../../../utils/CommonUtils';
 import {
+  getColumnSorter,
   getEntityName,
   getFrequentlyJoinedColumns,
   searchInColumns,
@@ -361,6 +362,7 @@ const SchemaTable = ({
         accessor: 'name',
         width: 200,
         fixed: 'left',
+        sorter: getColumnSorter<Column, 'name'>('name'),
         render: (name: Column['name'], record: Column) => {
           const { displayName } = record;
 

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineDetails/PipelineDetails.component.tsx

@@ -51,7 +51,7 @@ import { FeedCounts } from '../../../interface/feed.interface';
 import { postThread } from '../../../rest/feedsAPI';
 import { restorePipeline } from '../../../rest/pipelineAPI';
 import { getFeedCounts } from '../../../utils/CommonUtils';
-import { getEntityName } from '../../../utils/EntityUtils';
+import { getColumnSorter, getEntityName } from '../../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../../utils/PermissionsUtils';
 import {
   getAllTags,
@@ -383,6 +383,7 @@ const PipelineDetails = ({
         title: t('label.name'),
         width: 220,
         fixed: 'left',
+        sorter: getColumnSorter<Task, 'name'>('name'),
         render: (_, record) =>
           isEmpty(record.sourceUrl) ? (
             <span>{getEntityName(record)}</span>

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineDetails/PipelineDetails.test.tsx

@@ -165,6 +165,9 @@ jest.mock('../../../utils/TableTags/TableTags.utils', () => ({
 
 jest.mock('../../../utils/EntityUtils', () => ({
   getEntityName: jest.fn().mockReturnValue('testEntityName'),
+  getColumnSorter: jest.fn().mockImplementation(() => {
+    return () => 1;
+  }),
 }));
 
 jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({

openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTable/SearchIndexFieldsTable.tsx

@@ -36,7 +36,7 @@ import { EntityType } from '../../../enums/entity.enum';
 import { SearchIndexField } from '../../../generated/entity/data/searchIndex';
 import { TagSource } from '../../../generated/type/schema';
 import { TagLabel } from '../../../generated/type/tagLabel';
-import { getEntityName } from '../../../utils/EntityUtils';
+import { getColumnSorter, getEntityName } from '../../../utils/EntityUtils';
 import { makeData } from '../../../utils/SearchIndexUtils';
 import {
   getAllTags,
@@ -194,6 +194,7 @@ const SearchIndexFieldsTable = ({
         accessor: 'name',
         width: 220,
         fixed: 'left',
+        sorter: getColumnSorter<SearchIndexField, 'name'>('name'),
         render: (_, record: SearchIndexField) => (
           <div className="d-inline-flex w-max-90">
             <span className="break-word">{getEntityName(record)}</span>

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.test.tsx

@@ -19,6 +19,7 @@ import { MOCK_TABLE, MOCK_TIER_DATA } from '../mocks/TableData.mock';
 import {
   columnSorter,
   getBreadcrumbForTestSuite,
+  getColumnSorter,
   getEntityLinkFromType,
   getEntityOverview,
   highlightEntityNameAndDescription,
@@ -161,4 +162,35 @@ describe('EntityUtils unit tests', () => {
       expect(result).toContain('14567');
     });
   });
+
+  describe('getColumnSorter', () => {
+    type TestType = { name: string };
+    it('should return -1 if the 1st value should be before 2nd value', () => {
+      const sorter = getColumnSorter<TestType, 'name'>('name');
+      const item1 = { name: 'abc' };
+      const item2 = { name: 'xyz' };
+      expect(sorter(item1, item2)).toBe(-1);
+    });
+
+    it('should return 0 when both values are the same', () => {
+      const sorter = getColumnSorter<TestType, 'name'>('name');
+      const item1 = { name: 'abc' };
+      const item2 = { name: 'abc' };
+      expect(sorter(item1, item2)).toBe(0);
+    });
+
+    it('should return 1 if the 1st value should be after 2nd value', () => {
+      const sorter = getColumnSorter<TestType, 'name'>('name');
+      const item1 = { name: 'abc' };
+      const item2 = { name: 'xyz' };
+      expect(sorter(item2, item1)).toBe(1);
+    });
+
+    it('should return 1 if the 1st value should be after 2nd value for alphanumeric values', () => {
+      const sorter = getColumnSorter<TestType, 'name'>('name');
+      const item1 = { name: 'abc10' };
+      const item2 = { name: 'abc20' };
+      expect(sorter(item2, item1)).toBe(1);
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -2409,3 +2409,14 @@ export const getPluralizeEntityName = (entityType?: string) => {
     getEntityNameLabel(entityType)
   );
 };
+
+export const getColumnSorter = <T, K extends keyof T>(field: K) => {
+  return (a: T, b: T) => {
+    const aValue = a[field];
+    const bValue = b[field];
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+      return aValue.localeCompare(bValue);
+    }
+    return 0;
+  };
+};