[Issue-5772] Add sort feature on settings tables (#5787)

## Proposed Changes - Introduce a new custom hook - useTableSort to sort table content - Add test cases for the new custom hook - Integrate useTableSort hook on to the table in settings object and settings object field pages ## Related Issue #5772 ## Evidence https://github.com/twentyhq/twenty/assets/87609792/8be456ce-2fa5-44ec-8bbd-70fb6c8fdb30 ## Evidence after addressing review comments https://github.com/twentyhq/twenty/assets/87609792/c267e3da-72f9-4c0e-8c94-a38122d6395e ## Further comments Apologies for the large PR. Looking forward for the review --------- Co-authored-by: Félix Malfait <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Aug 14, 2024 · 59e14fa · 59e14fa
1 parent 0f75e14
commit 59e14fa
Show file tree

Hide file tree

Showing 40 changed files with 1,221 additions and 437 deletions.
diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
@@ -59,7 +59,7 @@ import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccoun
 import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
 import { SettingsCRMMigration } from '~/pages/settings/crm-migration/SettingsCRMMigration';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
-import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
+import { SettingsObjectDetailPage } from '~/pages/settings/data-model/SettingsObjectDetailPage';
 import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit';
 import { SettingsObjectFieldEdit } from '~/pages/settings/data-model/SettingsObjectFieldEdit';
 import { SettingsObjectNewFieldStep1 } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
@@ -218,7 +218,7 @@ const createRouter = (
                 />
                 <Route
                   path={SettingsPath.ObjectDetail}
-                  element={<SettingsObjectDetail />}
+                  element={<SettingsObjectDetailPage />}
                 />
                 <Route
                   path={SettingsPath.ObjectEdit}

diff --git a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/sortCachedObjectEdges.ts b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/sortCachedObjectEdges.ts
@@ -1,9 +1,9 @@
 import { Reference, StoreObject } from '@apollo/client';
 import { ReadFieldFunction } from '@apollo/client/cache/core/types/common';
 
-import { OrderBy } from '@/object-metadata/types/OrderBy';
 import { RecordGqlRefEdge } from '@/object-record/cache/types/RecordGqlRefEdge';
 import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
+import { OrderBy } from '@/types/OrderBy';
 import { isDefined } from '~/utils/isDefined';
 import { sortAsc, sortDesc, sortNullsFirst, sortNullsLast } from '~/utils/sort';
 

diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectOrderByField.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectOrderByField.ts
@@ -1,7 +1,8 @@
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+
 import { getOrderByFieldForObjectMetadataItem } from '@/object-metadata/utils/getObjectOrderByField';
 import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
+import { OrderBy } from '@/types/OrderBy';
 
 export const useGetObjectOrderByField = ({
   objectNameSingular,

diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectOrderByField.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectOrderByField.ts
@@ -1,8 +1,9 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
 import { getOrderByForFieldMetadataType } from '@/object-metadata/utils/getOrderByForFieldMetadataType';
 import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
+import { OrderBy } from '@/types/OrderBy';
 import { isDefined } from '~/utils/isDefined';
 
 export const getOrderByFieldForObjectMetadataItem = (

diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getOrderByForFieldMetadataType.ts b/packages/twenty-front/src/modules/object-metadata/utils/getOrderByForFieldMetadataType.ts
@@ -1,7 +1,8 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+
 import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
+import { OrderBy } from '@/types/OrderBy';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const getOrderByForFieldMetadataType = (

diff --git a/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationOrderBy.ts b/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationOrderBy.ts
@@ -1,4 +1,4 @@
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+import { OrderBy } from '@/types/OrderBy';
 
 export type RecordGqlOperationOrderBy = Array<{
   [fieldName: string]: OrderBy | { [subFieldName: string]: OrderBy };

diff --git a/...twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedGetTotalCount.ts b/...twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedGetTotalCount.ts
@@ -0,0 +1,48 @@
+import { useQuery } from '@apollo/client';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
+import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature';
+import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
+import { MultiObjectRecordQueryResult } from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+
+export const useCombinedGetTotalCount = ({
+  objectMetadataItems,
+  skip = false,
+}: {
+  objectMetadataItems: ObjectMetadataItem[];
+  skip?: boolean;
+}) => {
+  const operationSignatures = objectMetadataItems.map(
+    (objectMetadataItem) =>
+      ({
+        objectNameSingular: objectMetadataItem.nameSingular,
+        variables: {},
+        fields: {
+          id: true,
+        },
+      }) satisfies RecordGqlOperationSignature,
+  );
+
+  const findManyQuery = useGenerateCombinedFindManyRecordsQuery({
+    operationSignatures,
+  });
+
+  const { data } = useQuery<MultiObjectRecordQueryResult>(
+    findManyQuery ?? EMPTY_QUERY,
+    {
+      skip,
+    },
+  );
+
+  const totalCountByObjectMetadataItemNamePlural = Object.fromEntries(
+    Object.entries(data ?? {}).map(([namePlural, objectRecordConnection]) => [
+      namePlural,
+      objectRecordConnection.totalCount,
+    ]),
+  );
+
+  return {
+    totalCountByObjectMetadataItemNamePlural,
+  };
+};
diff --git a/...twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts b/...twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts
@@ -1,5 +1,5 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+
 import { hasPositionField } from '@/object-metadata/utils/hasPositionField';
 import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
@@ -8,6 +8,7 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getOrderByForFieldMetadataType } from '@/object-metadata/utils/getOrderByForFieldMetadataType';
+import { OrderBy } from '@/types/OrderBy';
 import { Sort } from '../types/Sort';
 
 export const turnSortsIntoOrderBy = (

diff --git a/packages/twenty-front/src/modules/object-record/select/hooks/useRecordsForSelect.ts b/packages/twenty-front/src/modules/object-record/select/hooks/useRecordsForSelect.ts
@@ -2,13 +2,14 @@ import { isNonEmptyString } from '@sniptt/guards';
 
 import { useGetObjectOrderByField } from '@/object-metadata/hooks/useGetObjectOrderByField';
 import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
+
 import { DEFAULT_SEARCH_REQUEST_LIMIT } from '@/object-record/constants/DefaultSearchRequestLimit';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SelectableRecord } from '@/object-record/select/types/SelectableRecord';
 import { getObjectFilterFields } from '@/object-record/select/utils/getObjectFilterFields';
 import { makeAndFilterVariables } from '@/object-record/utils/makeAndFilterVariables';
 import { makeOrFilterVariables } from '@/object-record/utils/makeOrFilterVariables';
+import { OrderBy } from '@/types/OrderBy';
 
 export const useRecordsForSelect = ({
   searchFilterText,

diff --git a/packages/twenty-front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts b/packages/twenty-front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts
@@ -1,7 +1,6 @@
 import { isNonEmptyString } from '@sniptt/guards';
 
 import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
-import { OrderBy } from '@/object-metadata/types/OrderBy';
 import { DEFAULT_SEARCH_REQUEST_LIMIT } from '@/object-record/constants/DefaultSearchRequestLimit';
 import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -10,6 +9,7 @@ import { EntityForSelect } from '@/object-record/relation-picker/types/EntityFor
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { makeAndFilterVariables } from '@/object-record/utils/makeAndFilterVariables';
 import { makeOrFilterVariables } from '@/object-record/utils/makeOrFilterVariables';
+import { OrderBy } from '@/types/OrderBy';
 import { generateILikeFiltersForCompositeFields } from '~/utils/array/generateILikeFiltersForCompositeFields';
 import { isDefined } from '~/utils/isDefined';
 

diff --git a/...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -1,28 +1,36 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ReactNode, useMemo } from 'react';
-import { Nullable, useIcons } from 'twenty-ui';
+import { useMemo } from 'react';
+import { IconMinus, IconPlus, isDefined, useIcons } from 'twenty-ui';
 
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
-import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
 import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 import { RELATION_TYPES } from '../../constants/RelationTypes';
 
+import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
+import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
+import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
+import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
+import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
+import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
+import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
+import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import { RelationMetadataType } from '~/generated-metadata/graphql';
+import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {
-  ActionIcon: ReactNode;
-  fieldMetadataItem: FieldMetadataItem;
-  identifierType?: Nullable<FieldIdentifierType>;
-  variant?: 'field-type' | 'identifier';
-  isRemoteObjectField?: boolean;
-  to?: string;
+  settingsObjectDetailTableItem: SettingsObjectDetailTableItem;
+  status: 'active' | 'disabled';
+  mode: 'view' | 'new-field';
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -40,13 +48,19 @@ const StyledIconTableCell = styled(TableCell)`
 `;
 
 export const SettingsObjectFieldItemTableRow = ({
-  ActionIcon,
-  fieldMetadataItem,
-  identifierType,
-  variant = 'field-type',
-  isRemoteObjectField,
-  to,
+  settingsObjectDetailTableItem,
+  mode,
+  status,
 }: SettingsObjectFieldItemTableRowProps) => {
+  const { fieldMetadataItem, identifierType, objectMetadataItem } =
+    settingsObjectDetailTableItem;
+
+  const isRemoteObjectField = objectMetadataItem.isRemote;
+
+  const variant = objectMetadataItem.isCustom ? 'identifier' : 'field-type';
+
+  const navigate = useNavigate();
+
   const theme = useTheme();
   const { getIcon } = useIcons();
   const Icon = getIcon(fieldMetadataItem.icon);
@@ -62,31 +76,94 @@ export const SettingsObjectFieldItemTableRow = ({
   const fieldType = fieldMetadataItem.type;
   const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
 
-  if (!isFieldTypeSupported) return null;
-
   const RelationIcon = relationType
     ? RELATION_TYPES[relationType].Icon
     : undefined;
 
+  const isLabelIdentifier = isLabelIdentifierField({
+    fieldMetadataItem,
+    objectMetadataItem,
+  });
+
+  const canToggleField = !isLabelIdentifier;
+
+  const canBeSetAsLabelIdentifier =
+    objectMetadataItem.isCustom &&
+    !isLabelIdentifier &&
+    LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(fieldMetadataItem.type);
+
+  const linkToNavigate = `./${getFieldSlug(fieldMetadataItem)}`;
+
+  const {
+    activateMetadataField,
+    deactivateMetadataField,
+    deleteMetadataField,
+  } = useFieldMetadataItem();
+
+  const handleDisableField = (activeFieldMetadatItem: FieldMetadataItem) => {
+    deactivateMetadataField(activeFieldMetadatItem);
+  };
+
+  const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
+
+  const handleSetLabelIdentifierField = (
+    activeFieldMetadatItem: FieldMetadataItem,
+  ) =>
+    updateOneObjectMetadataItem({
+      idToUpdate: objectMetadataItem.id,
+      updatePayload: {
+        labelIdentifierFieldMetadataId: activeFieldMetadatItem.id,
+      },
+    });
+
+  const [, setActiveSettingsObjectFields] = useRecoilState(
+    settingsObjectFieldsFamilyState({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
+  );
+
+  const handleToggleField = () => {
+    setActiveSettingsObjectFields((previousFields) => {
+      const newFields = isDefined(previousFields)
+        ? previousFields?.map((field) =>
+            field.id === fieldMetadataItem.id
+              ? { ...field, isActive: !field.isActive }
+              : field,
+          )
+        : null;
+
+      return newFields;
+    });
+  };
+
+  const typeLabel =
+    variant === 'field-type'
+      ? isRemoteObjectField
+        ? 'Remote'
+        : fieldMetadataItem.isCustom
+          ? 'Custom'
+          : 'Standard'
+      : variant === 'identifier'
+        ? isDefined(identifierType)
+          ? identifierType === 'label'
+            ? 'Record text'
+            : 'Record image'
+          : ''
+        : '';
+
+  if (!isFieldTypeSupported) return null;
+
   return (
-    <StyledObjectFieldTableRow to={to}>
+    <StyledObjectFieldTableRow
+      to={mode === 'view' ? linkToNavigate : undefined}
+    >
       <StyledNameTableCell>
         {!!Icon && (
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         )}
         {fieldMetadataItem.label}
       </StyledNameTableCell>
-      <TableCell>
-        {variant === 'field-type' &&
-          (isRemoteObjectField
-            ? 'Remote'
-            : fieldMetadataItem.isCustom
-              ? 'Custom'
-              : 'Standard')}
-        {variant === 'identifier' &&
-          !!identifierType &&
-          (identifierType === 'label' ? 'Record text' : 'Record image')}
-      </TableCell>
+      <TableCell>{typeLabel}</TableCell>
       <TableCell>
         <SettingsObjectFieldDataType
           Icon={RelationIcon}
@@ -105,7 +182,48 @@ export const SettingsObjectFieldItemTableRow = ({
           value={fieldType}
         />
       </TableCell>
-      <StyledIconTableCell>{ActionIcon}</StyledIconTableCell>
+      <StyledIconTableCell>
+        {status === 'active' ? (
+          mode === 'view' ? (
+            <SettingsObjectFieldActiveActionDropdown
+              isCustomField={fieldMetadataItem.isCustom === true}
+              scopeKey={fieldMetadataItem.id}
+              onEdit={() => navigate(linkToNavigate)}
+              onSetAsLabelIdentifier={
+                canBeSetAsLabelIdentifier
+                  ? () => handleSetLabelIdentifierField(fieldMetadataItem)
+                  : undefined
+              }
+              onDeactivate={
+                isLabelIdentifier
+                  ? undefined
+                  : () => handleDisableField(fieldMetadataItem)
+              }
+            />
+          ) : (
+            canToggleField && (
+              <LightIconButton
+                Icon={IconMinus}
+                accent="tertiary"
+                onClick={handleToggleField}
+              />
+            )
+          )
+        ) : mode === 'view' ? (
+          <SettingsObjectFieldInactiveActionDropdown
+            isCustomField={fieldMetadataItem.isCustom === true}
+            scopeKey={fieldMetadataItem.id}
+            onActivate={() => activateMetadataField(fieldMetadataItem)}
+            onDelete={() => deleteMetadataField(fieldMetadataItem)}
+          />
+        ) : (
+          <LightIconButton
+            Icon={IconPlus}
+            accent="tertiary"
+            onClick={handleToggleField}
+          />
+        )}
+      </StyledIconTableCell>
     </StyledObjectFieldTableRow>
   );
 };