feat: add Settings Object Edit identifiers form (#4300)

* feat: add Settings Object Edit identifiers form

Closes #3836

* fix: fix wrong imports after renaming directories

packages/twenty-front/src/modules/object-metadata/constants/LabelIdentifierFieldMetadataTypes.ts

@@ -0,0 +1,6 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+export const LABEL_IDENTIFIER_FIELD_METADATA_TYPES = [
+  FieldMetadataType.Number,
+  FieldMetadataType.Text,
+];

packages/twenty-front/src/modules/object-metadata/utils/getActiveFieldMetadataItems.ts

@@ -0,0 +1,9 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const getActiveFieldMetadataItems = (
+  objectMetadataItem: Pick<ObjectMetadataItem, 'fields'>,
+) =>
+  objectMetadataItem.fields.filter(
+    (fieldMetadataItem) =>
+      fieldMetadataItem.isActive && !fieldMetadataItem.isSystem,
+  );

packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts

@@ -0,0 +1,9 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const getDisabledFieldMetadataItems = (
+  objectMetadataItem: Pick<ObjectMetadataItem, 'fields'>,
+) =>
+  objectMetadataItem.fields.filter(
+    (fieldMetadataItem) =>
+      !fieldMetadataItem.isActive && !fieldMetadataItem.isSystem,
+  );

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelCardTitle.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledTitle = styled.h3`
+  color: ${({ theme }) => theme.font.color.extraLight};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export { StyledTitle as SettingsDataModelCardTitle };

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
+import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
+import { IconCircleOff } from '@/ui/display/icon';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import { Select, SelectOption } from '@/ui/input/components/Select';
+
+export const settingsDataModelObjectIdentifiersFormSchema =
+  objectMetadataItemSchema.pick({
+    labelIdentifierFieldMetadataId: true,
+    imageIdentifierFieldMetadataId: true,
+  });
+
+export type SettingsDataModelObjectIdentifiersFormValues = z.infer<
+  typeof settingsDataModelObjectIdentifiersFormSchema
+>;
+
+type SettingsDataModelObjectIdentifiersFormProps = {
+  objectMetadataItem: ObjectMetadataItem;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsDataModelObjectIdentifiersForm = ({
+  objectMetadataItem,
+}: SettingsDataModelObjectIdentifiersFormProps) => {
+  const { control } =
+    useFormContext<SettingsDataModelObjectIdentifiersFormValues>();
+  const { getIcon } = useIcons();
+
+  const labelIdentifierFieldOptions = useMemo(
+    () =>
+      getActiveFieldMetadataItems(objectMetadataItem)
+        .filter(
+          ({ id, type }) =>
+            LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(type) ||
+            objectMetadataItem.labelIdentifierFieldMetadataId === id,
+        )
+        .map<SelectOption<string | null>>((fieldMetadataItem) => ({
+          Icon: getIcon(fieldMetadataItem.icon),
+          label: fieldMetadataItem.label,
+          value: fieldMetadataItem.id,
+        })),
+    [getIcon, objectMetadataItem],
+  );
+  const imageIdentifierFieldOptions: SelectOption<string | null>[] = [];
+
+  const emptyOption: SelectOption<string | null> = {
+    Icon: IconCircleOff,
+    label: 'None',
+    value: null,
+  };
+
+  return (
+    <StyledContainer>
+      {[
+        {
+          label: 'Record label',
+          fieldName: 'labelIdentifierFieldMetadataId' as const,
+          options: labelIdentifierFieldOptions,
+        },
+        {
+          label: 'Record image',
+          fieldName: 'imageIdentifierFieldMetadataId' as const,
+          options: imageIdentifierFieldOptions,
+        },
+      ].map(({ fieldName, label, options }) => (
+        <Controller
+          key={fieldName}
+          name={fieldName}
+          control={control}
+          defaultValue={objectMetadataItem[fieldName]}
+          render={({ field: { onBlur, onChange, value } }) => {
+            return (
+              <Select
+                label={label}
+                disabled={!objectMetadataItem.isCustom || !options.length}
+                fullWidth
+                dropdownId={`${fieldName}-select`}
+                emptyOption={emptyOption}
+                options={options}
+                value={value}
+                onChange={onChange}
+                onBlur={onBlur}
+              />
+            );
+          }}
+        />
+      ))}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx

@@ -1,9 +1,15 @@
+import { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
-import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
+import { SettingsDataModelCardTitle } from '@/settings/data-model/components/SettingsDataModelCardTitle';
 import { SettingsDataModelFieldPreviewCard } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import {
+  SettingsDataModelObjectIdentifiersForm,
+  SettingsDataModelObjectIdentifiersFormValues,
+} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
 import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/SettingsDataModelObjectSummary';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
@@ -16,6 +22,10 @@ const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
   width: 100%;
 `;
 
+const StyledTopCardContent = styled(CardContent)`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+`;
+
 const StyledObjectSummaryCard = styled(Card)`
   border-radius: ${({ theme }) => theme.border.radius.md};
   color: ${({ theme }) => theme.font.color.primary};
@@ -29,13 +39,27 @@ const StyledObjectSummaryCardContent = styled(CardContent)`
 export const SettingsDataModelObjectSettingsFormCard = ({
   objectMetadataItem,
 }: SettingsDataModelObjectSettingsFormCardProps) => {
-  const labelIdentifierFieldMetadataItem =
+  const { watch: watchFormValue } =
-    getLabelIdentifierFieldMetadataItem(objectMetadataItem);
+    useFormContext<SettingsDataModelObjectIdentifiersFormValues>();
+
+  const labelIdentifierFieldMetadataIdFormValue = watchFormValue(
+    'labelIdentifierFieldMetadataId',
+  );
+
+  const labelIdentifierFieldMetadataItem = useMemo(
+    () =>
+      getLabelIdentifierFieldMetadataItem({
+        fields: objectMetadataItem.fields,
+        labelIdentifierFieldMetadataId: labelIdentifierFieldMetadataIdFormValue,
+      }),
+    [labelIdentifierFieldMetadataIdFormValue, objectMetadataItem],
+  );
 
   return (
-    <SettingsDataModelPreviewFormCard
+    <Card fullWidth>
-      preview={
+      <StyledTopCardContent divider>
-        labelIdentifierFieldMetadataItem ? (
+        <SettingsDataModelCardTitle>Preview</SettingsDataModelCardTitle>
+        {labelIdentifierFieldMetadataItem ? (
           <StyledFieldPreviewCard
             objectMetadataItem={objectMetadataItem}
             fieldMetadataItem={labelIdentifierFieldMetadataItem}
@@ -49,8 +73,13 @@ export const SettingsDataModelObjectSettingsFormCard = ({
               />
             </StyledObjectSummaryCardContent>
           </StyledObjectSummaryCard>
-        )
+        )}
-      }
+      </StyledTopCardContent>
+      <CardContent>
+        <SettingsDataModelObjectIdentifiersForm
+          objectMetadataItem={objectMetadataItem}
         />
+      </CardContent>
+    </Card>
   );
 };

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -36,6 +36,7 @@ export {
   IconChevronsRight,
   IconChevronUp,
   IconCircleDot,
+  IconCircleOff,
   IconClick,
   IconCode,
   IconCoins,

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -24,9 +24,11 @@ export type SelectProps<Value extends string | number | null> = {
   disabled?: boolean;
   dropdownId: string;
   dropdownWidth?: `${string}px` | 'auto' | number;
+  emptyOption?: SelectOption<Value>;
   fullWidth?: boolean;
   label?: string;
   onChange?: (value: Value) => void;
+  onBlur?: () => void;
   options: SelectOption<Value>[];
   value?: Value;
   withSearchInput?: boolean;
@@ -73,12 +75,14 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
 
 export const Select = <Value extends string | number | null>({
   className,
-  disabled,
+  disabled: disabledFromProps,
   dropdownId,
   dropdownWidth = 176,
+  emptyOption,
   fullWidth,
   label,
   onChange,
+  onBlur,
   options,
   value,
   withSearchInput,
@@ -87,7 +91,9 @@ export const Select = <Value extends string | number | null>({
   const [searchInputValue, setSearchInputValue] = useState('');
 
   const selectedOption =
-    options.find(({ value: key }) => key === value) || options[0];
+    options.find(({ value: key }) => key === value) ||
+    options[0] ||
+    emptyOption;
   const filteredOptions = useMemo(
     () =>
       searchInputValue
@@ -98,28 +104,37 @@ export const Select = <Value extends string | number | null>({
     [options, searchInputValue],
   );
 
+  const isDisabled = disabledFromProps || options.length <= 1;
+
   const { closeDropdown } = useDropdown(dropdownId);
 
   const selectControl = (
-    <StyledControlContainer disabled={disabled}>
+    <StyledControlContainer disabled={isDisabled}>
       <StyledControlLabel>
         {!!selectedOption?.Icon && (
           <selectedOption.Icon
-            color={disabled ? theme.font.color.light : theme.font.color.primary}
+            color={
+              isDisabled ? theme.font.color.light : theme.font.color.primary
+            }
             size={theme.icon.size.md}
             stroke={theme.icon.stroke.sm}
           />
         )}
         {selectedOption?.label}
       </StyledControlLabel>
-      <StyledIconChevronDown disabled={disabled} size={theme.icon.size.md} />
+      <StyledIconChevronDown disabled={isDisabled} size={theme.icon.size.md} />
     </StyledControlContainer>
   );
 
   return (
-    <StyledContainer className={className} fullWidth={fullWidth}>
+    <StyledContainer
+      className={className}
+      fullWidth={fullWidth}
+      tabIndex={0}
+      onBlur={onBlur}
+    >
       {!!label && <StyledLabel>{label}</StyledLabel>}
-      {disabled ? (
+      {isDisabled ? (
         selectControl
       ) : (
         <Dropdown
@@ -148,6 +163,7 @@ export const Select = <Value extends string | number | null>({
                       text={option.label}
                       onClick={() => {
                         onChange?.(option.value);
+                        onBlur?.();
                         closeDropdown();
                       }}
                     />

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -75,7 +75,7 @@ export const RecordShowPage = () => {
           labelIdentifierFieldValue?.firstName,
           labelIdentifierFieldValue?.lastName,
         ].join(' ')
-      : labelIdentifierFieldValue;
+      : `${labelIdentifierFieldValue}`;
 
   return (
     <PageContainer>

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx

@@ -2,10 +2,13 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
+import { getDisabledFieldMetadataItems } from '@/object-metadata/utils/getDisabledFieldMetadataItems';
 import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -29,7 +32,6 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 const StyledDiv = styled.div`
   display: flex;
@@ -57,11 +59,11 @@ export const SettingsObjectDetail = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const activeMetadataFields = activeObjectMetadataItem.fields.filter(
+  const activeMetadataFields = getActiveFieldMetadataItems(
-    (metadataField) => metadataField.isActive && !metadataField.isSystem,
+    activeObjectMetadataItem,
   );
-  const disabledMetadataFields = activeObjectMetadataItem.fields.filter(
+  const disabledMetadataFields = getDisabledFieldMetadataItems(
-    (metadataField) => !metadataField.isActive && !metadataField.isSystem,
+    activeObjectMetadataItem,
   );
 
   const handleDisableObject = async () => {
@@ -128,7 +130,7 @@ export const SettingsObjectDetail = () => {
                   const canBeSetAsLabelIdentifier =
                     activeObjectMetadataItem.isCustom &&
                     !isLabelIdentifier &&
-                    [FieldMetadataType.Text, FieldMetadataType.Number].includes(
+                    LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(
                       activeMetadataField.type,
                     );
 

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -15,6 +15,7 @@ import {
   SettingsDataModelObjectAboutForm,
   settingsDataModelObjectAboutFormSchema,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
+import { settingsDataModelObjectIdentifiersFormSchema } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
 import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
 import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -28,7 +29,10 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
-const objectEditFormSchema = settingsDataModelObjectAboutFormSchema;
+const objectEditFormSchema = z
+  .object({})
+  .merge(settingsDataModelObjectAboutFormSchema)
+  .merge(settingsDataModelObjectIdentifiersFormSchema);
 
 type SettingsDataModelObjectEditFormValues = z.infer<
   typeof objectEditFormSchema