[Issue-5772] Add sort feature on settings tables

packages/twenty-front/src/hooks/__tests__/useTableSort.test.ts

@@ -0,0 +1,105 @@
+import { act, renderHook } from '@testing-library/react';
+
+import {
+  mockedTableData as tableData,
+  tableDataSortedByFieldsCountInAscendingOrder,
+  tableDataSortedByFieldsCountInDescendingOrder,
+  tableDataSortedBylabelInAscendingOrder,
+  tableDataSortedBylabelInDescendingOrder,
+} from '~/testing/mock-data/tableData';
+
+import { useTableSort } from '../useTableSort';
+
+describe('useTableSort hook', () => {
+  test('initial sorting behavior for string fields', () => {
+    const { result } = renderHook(() => useTableSort('labelPlural', tableData));
+    const [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedBylabelInAscendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'labelPlural',
+      sortOrder: 'ascending',
+    });
+  });
+
+  test('initial sorting behavior for number fields', () => {
+    const { result } = renderHook(() => useTableSort('fieldsCount', tableData));
+    const [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedByFieldsCountInAscendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'fieldsCount',
+      sortOrder: 'ascending',
+    });
+  });
+
+  test('sorting behavior when clicking on string column header', () => {
+    const { result } = renderHook(() => useTableSort('fieldsCount', tableData));
+    const [, handleSortClick] = result.current;
+
+    act(() => {
+      handleSortClick('labelPlural');
+    });
+
+    let [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedBylabelInAscendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'labelPlural',
+      sortOrder: 'ascending',
+    });
+
+    act(() => {
+      handleSortClick('labelPlural');
+    });
+
+    [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedBylabelInDescendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'labelPlural',
+      sortOrder: 'descending',
+    });
+  });
+
+  test('sorting behavior when clicking on number column header', () => {
+    const { result } = renderHook(() => useTableSort('labelPlural', tableData));
+    const [, handleSortClick] = result.current;
+
+    act(() => {
+      handleSortClick('fieldsCount');
+    });
+
+    let [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedByFieldsCountInAscendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'fieldsCount',
+      sortOrder: 'ascending',
+    });
+
+    act(() => {
+      handleSortClick('fieldsCount');
+    });
+
+    [sortedData, , sortConfig] = result.current;
+
+    expect(JSON.stringify(sortedData)).toBe(
+      JSON.stringify(tableDataSortedByFieldsCountInDescendingOrder),
+    );
+    expect(sortConfig).toEqual({
+      sortByColumnKey: 'fieldsCount',
+      sortOrder: 'descending',
+    });
+  });
+});

packages/twenty-front/src/hooks/useTableSort.ts

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+enum sortOrders {
+  ascending = 'ascending',
+  descending = 'descending',
+}
+type SortConfig<T> = {
+  sortByColumnKey: keyof T;
+  sortOrder: sortOrders;
+};
+
+export const useTableSort = <T>(
+  initialColumnKey: keyof T,
+  tableData: T[],
+): [T[], (sortKey: keyof T) => void, SortConfig<T>] => {
+  const [sortConfig, setSortConfig] = useState<SortConfig<T>>({
+    sortByColumnKey: initialColumnKey,
+    sortOrder: sortOrders.ascending,
+  });
+
+  const sortTableData = (
+    data: T[],
+    columnKey: keyof T,
+    order: sortOrders,
+  ): T[] => {
+    return data.sort((a: T, b: T) => {
+      if (typeof a[columnKey] === 'string') {
+        return order === sortOrders.ascending
+          ? (a[columnKey] as string).localeCompare(b[columnKey] as string)
+          : (b[columnKey] as string).localeCompare(a[columnKey] as string);
+      } else if (typeof a[columnKey] === 'number') {
+        return order === sortOrders.ascending
+          ? (a[columnKey] as number) - (b[columnKey] as number)
+          : (b[columnKey] as number) - (a[columnKey] as number);
+      } else return 0;
+    });
+  };
+
+  const sortedTableData = sortTableData(
+    [...tableData],
+    sortConfig.sortByColumnKey,
+    sortConfig.sortOrder,
+  );
+
+  const toggleSortOrder = (sortOrder: sortOrders) => {
+    return sortOrder === sortOrders.ascending
+      ? sortOrders.descending
+      : sortOrders.ascending;
+  };
+
+  const handleSortClick = (columnKey: keyof T) => {
+    setSortConfig((state) => ({
+      sortByColumnKey: columnKey,
+      sortOrder:
+        state.sortByColumnKey === columnKey
+          ? toggleSortOrder(state.sortOrder)
+          : sortOrders.ascending,
+    }));
+  };
+
+  return [sortedTableData, handleSortClick, sortConfig];
+};

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useEffect, useMemo } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Nullable, useIcons } from 'twenty-ui';
@@ -7,6 +7,7 @@ import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMe
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
+import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
 import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
@@ -17,11 +18,12 @@ import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {
   ActionIcon: ReactNode;
-  fieldMetadataItem: FieldMetadataItem;
+  fieldMetadataItem: FieldMetadataItem & { fieldType: string | boolean };
   identifierType?: Nullable<FieldIdentifierType>;
   variant?: 'field-type' | 'identifier';
   isRemoteObjectField?: boolean;
   to?: string;
+  updateDataTypes: (id: string, label?: string) => void;
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -41,10 +43,8 @@ const StyledIconTableCell = styled(TableCell)`
 export const SettingsObjectFieldItemTableRow = ({
   ActionIcon,
   fieldMetadataItem,
-  identifierType,
-  variant = 'field-type',
-  isRemoteObjectField,
   to,
+  updateDataTypes,
 }: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
@@ -60,6 +60,18 @@ export const SettingsObjectFieldItemTableRow = ({
 
   const fieldType = fieldMetadataItem.type;
   const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
+  useEffect(() => {
+    const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type);
+    const label =
+      relationObjectMetadataItem?.labelPlural ?? fieldTypeConfig?.label;
+    //Hoist data types to parent component state to determine sort order
+    updateDataTypes(fieldMetadataItem.id, label);
+  }, [
+    fieldMetadataItem.id,
+    fieldMetadataItem.type,
+    relationObjectMetadataItem,
+    updateDataTypes,
+  ]);
 
   if (!isFieldTypeSupported) return null;
 
@@ -75,17 +87,7 @@ export const SettingsObjectFieldItemTableRow = ({
         )}
         {fieldMetadataItem.label}
       </StyledNameTableCell>
-      <TableCell>
-        {variant === 'field-type' &&
-          (isRemoteObjectField
-            ? 'Remote'
-            : fieldMetadataItem.isCustom
-              ? 'Custom'
-              : 'Standard')}
-        {variant === 'identifier' &&
-          !!identifierType &&
-          (identifierType === 'label' ? 'Record text' : 'Record image')}
-      </TableCell>
+      <TableCell>{fieldMetadataItem.fieldType}</TableCell>
       <TableCell>
         <SettingsObjectFieldDataType
           Icon={RelationIcon}

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

@@ -1,19 +1,27 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
-import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
+import {
+  getObjectTypeLabel,
+  ObjectTypeLabel,
+} from '@/settings/data-model/utils/getObjectTypeLabel';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
-type SettingsObjectItemTableRowProps = {
+export type SettingsObjectItemTableRowProps = {
   action: ReactNode;
-  objectItem: ObjectMetadataItem;
+  objectItem: ObjectMetadataItem & {
+    objectTypeLabelText: ObjectTypeLabel['labelText'];
+    fieldsCount: number;
+    instancesCount: number;
+  };
   to?: string;
+  updateInstanceCount: (id: string, instanceCount: number) => void;
 };
 
 export const StyledObjectTableRow = styled(TableRow)`
@@ -34,12 +42,18 @@ export const SettingsObjectItemTableRow = ({
   action,
   objectItem,
   to,
+  updateInstanceCount,
 }: SettingsObjectItemTableRowProps) => {
   const theme = useTheme();
 
   const { totalCount } = useFindManyRecords({
     objectNameSingular: objectItem.nameSingular,
   });
+  useEffect(() => {
+    //Hoist instance count to parent component state to determine sort order
+    updateInstanceCount(objectItem.id, totalCount || 0);
+  }, [objectItem.id, totalCount, updateInstanceCount]);
+
   const { getIcon } = useIcons();
   const Icon = getIcon(objectItem.icon);
   const objectTypeLabel = getObjectTypeLabel(objectItem);
@@ -55,9 +69,7 @@ export const SettingsObjectItemTableRow = ({
       <TableCell>
         <SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
       </TableCell>
-      <TableCell align="right">
-        {objectItem.fields.filter((field) => !field.isSystem).length}
-      </TableCell>
+      <TableCell align="right">{objectItem.fieldsCount}</TableCell>
       <TableCell align="right">{totalCount}</TableCell>
       <StyledActionTableCell>{action}</StyledActionTableCell>
     </StyledObjectTableRow>

packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx

@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
-const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
+const StyledTableHeader = styled.div<{
+  align?: 'left' | 'center' | 'right';
+  onClick?: () => void;
+}>`
   align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -15,6 +18,7 @@ const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
         : 'flex-start'};
   padding: 0 ${({ theme }) => theme.spacing(2)};
   text-align: ${({ align }) => align ?? 'left'};
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
 `;
 
 export { StyledTableHeader as TableHeader };