[Issue-5772] Add sort feature on settings tables

packages/twenty-front/src/hooks/__tests__/useSortedArray.test.tsx

@@ -0,0 +1,133 @@
+import React, { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react';
+import { MutableSnapshot, RecoilRoot } from 'recoil';
+
+import { tableSortFamilyState } from '@/activities/states/tableSortFamilyState';
+import { OrderBy } from '@/object-metadata/types/OrderBy';
+import {
+  mockedTableData as tableData,
+  tableDataSortedByFieldsCountInAscendingOrder,
+  tableDataSortedByFieldsCountInDescendingOrder,
+  tableDataSortedBylabelInAscendingOrder,
+  tableDataSortedBylabelInDescendingOrder,
+} from '~/testing/mock-data/tableData';
+
+import { useSortedArray } from '../useSortedArray';
+
+interface WrapperProps {
+  children: ReactNode;
+  initializeState?: (mutableSnapshot: MutableSnapshot) => void;
+}
+
+const Wrapper: React.FC<WrapperProps> = ({ children, initializeState }) => (
+  <RecoilRoot initializeState={initializeState}>{children}</RecoilRoot>
+);
+
+describe('useSortedArray hook', () => {
+  const initializeState =
+    (fieldName: string, orderBy: OrderBy) =>
+    ({ set }: MutableSnapshot) => {
+      set(
+        tableSortFamilyState({
+          tableId: 'SettingsObjectDetail',
+          initialFieldName: 'labelPlural',
+        }),
+        {
+          fieldName,
+          orderBy,
+        },
+      );
+    };
+
+  test('initial sorting behavior for string fields - Ascending', () => {
+    const { result } = renderHook(
+      () =>
+        useSortedArray(tableData, {
+          tableId: 'SettingsObjectDetail',
+          initialFieldName: 'labelPlural',
+        }),
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <Wrapper
+            initializeState={initializeState('labelPlural', 'AscNullsLast')}
+          >
+            {children}
+          </Wrapper>
+        ),
+      },
+    );
+
+    const sortedData = result.current;
+
+    expect(sortedData).toEqual(tableDataSortedBylabelInAscendingOrder);
+  });
+
+  test('initial sorting behavior for string fields - Descending', () => {
+    const { result } = renderHook(
+      () =>
+        useSortedArray(tableData, {
+          tableId: 'SettingsObjectDetail',
+          initialFieldName: 'labelPlural',
+        }),
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <Wrapper
+            initializeState={initializeState('labelPlural', 'DescNullsLast')}
+          >
+            {children}
+          </Wrapper>
+        ),
+      },
+    );
+
+    const sortedData = result.current;
+
+    expect(sortedData).toEqual(tableDataSortedBylabelInDescendingOrder);
+  });
+
+  test('initial sorting behavior for number fields - Ascending', () => {
+    const { result } = renderHook(
+      () =>
+        useSortedArray(tableData, {
+          tableId: 'SettingsObjectDetail',
+          initialFieldName: 'labelPlural',
+        }),
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <Wrapper
+            initializeState={initializeState('fieldsCount', 'AscNullsLast')}
+          >
+            {children}
+          </Wrapper>
+        ),
+      },
+    );
+
+    const sortedData = result.current;
+
+    expect(sortedData).toEqual(tableDataSortedByFieldsCountInAscendingOrder);
+  });
+
+  test('initial sorting behavior for number fields - Descending', () => {
+    const { result } = renderHook(
+      () =>
+        useSortedArray(tableData, {
+          tableId: 'SettingsObjectDetail',
+          initialFieldName: 'labelPlural',
+        }),
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <Wrapper
+            initializeState={initializeState('fieldsCount', 'DescNullsLast')}
+          >
+            {children}
+          </Wrapper>
+        ),
+      },
+    );
+
+    const sortedData = result.current;
+
+    expect(sortedData).toEqual(tableDataSortedByFieldsCountInDescendingOrder);
+  });
+});

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

@@ -0,0 +1,39 @@
+import { useRecoilValue } from 'recoil';
+
+import { tableSortFamilyState } from '@/activities/states/tableSortFamilyState';
+import { OrderBy } from '@/object-metadata/types/OrderBy';
+
+export const useSortedArray = <T>(
+  arrayToSort: T[],
+  { tableId, initialFieldName }: { tableId: string; initialFieldName: string },
+): T[] => {
+  const sortConfig = useRecoilValue(
+    tableSortFamilyState({ tableId, initialFieldName }),
+  );
+
+  const sortTableData = (
+    data: T[],
+    columnKey: keyof T,
+    order: OrderBy | null,
+  ): T[] => {
+    return data.sort((a: T, b: T) => {
+      if (typeof a[columnKey] === 'string') {
+        return order === 'AscNullsLast'
+          ? (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 === 'AscNullsLast'
+          ? (a[columnKey] as number) - (b[columnKey] as number)
+          : (b[columnKey] as number) - (a[columnKey] as number);
+      } else return 0;
+    });
+  };
+
+  const sortedTableData = sortTableData(
+    [...arrayToSort],
+    sortConfig.fieldName as keyof T,
+    sortConfig.orderBy,
+  );
+
+  return sortedTableData;
+};

packages/twenty-front/src/modules/activities/states/tableSortFamilyState.ts

@@ -0,0 +1,29 @@
+import { SerializableParam } from 'recoil';
+
+import { OrderBy } from '@/object-metadata/types/OrderBy';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+
+interface TableSortState {
+  fieldName: string;
+  orderBy: OrderBy | null;
+}
+
+type TableSortFamilyKey = {
+  tableId: string;
+  initialFieldName: string;
+} & SerializableParam;
+
+const getDefaultTableSortState = ({
+  initialFieldName,
+}: TableSortFamilyKey): TableSortState => ({
+  fieldName: initialFieldName,
+  orderBy: 'AscNullsLast' as OrderBy,
+});
+
+export const tableSortFamilyState = createFamilyState<
+  TableSortState,
+  TableSortFamilyKey
+>({
+  key: 'tableSortFamilyState',
+  defaultValue: getDefaultTableSortState as TableSortState,
+});

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIcons } from 'twenty-ui';
@@ -10,10 +10,11 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab
 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;
   to?: string;
+  updateInstanceCount: (id: string, instanceCount: number) => void;
 };
 
 export const StyledObjectTableRow = styled(TableRow)`
@@ -34,12 +35,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);

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