feat: set Select field option as default option (#2725)

Closes #2591

front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx

@@ -11,17 +11,17 @@ import { Field } from '~/generated-metadata/graphql';
 import { relationTypes } from '../constants/relationTypes';
 import { RelationType } from '../types/RelationType';
 
-export type SettingsObjectFieldRelationFormValues = Partial<{
-  field: Partial<Pick<Field, 'icon' | 'label'>>;
+export type SettingsObjectFieldRelationFormValues = {
+  field: Pick<Field, 'icon' | 'label'>;
   objectMetadataId: string;
   type: RelationType;
-}>;
+};
 
 type SettingsObjectFieldRelationFormProps = {
   disableFieldEdition?: boolean;
   disableRelationEdition?: boolean;
-  onChange: (values: SettingsObjectFieldRelationFormValues) => void;
-  values?: SettingsObjectFieldRelationFormValues;
+  onChange: (values: Partial<SettingsObjectFieldRelationFormValues>) => void;
+  values: SettingsObjectFieldRelationFormValues;
 };
 
 const StyledContainer = styled.div`
@@ -61,7 +61,7 @@ export const SettingsObjectFieldRelationForm = ({
     useObjectMetadataItemForSettings();
 
   const selectedObjectMetadataItem =
-    (values?.objectMetadataId
+    (values.objectMetadataId
       ? findObjectMetadataItemById(values.objectMetadataId)
       : undefined) || objectMetadataItems[0];
 
@@ -72,7 +72,7 @@ export const SettingsObjectFieldRelationForm = ({
           label="Relation type"
           dropdownScopeId="relation-type-select"
           disabled={disableRelationEdition}
-          value={values?.type}
+          value={values.type}
           options={Object.entries(relationTypes).map(
             ([value, { label, Icon }]) => ({
               label,
@@ -86,7 +86,7 @@ export const SettingsObjectFieldRelationForm = ({
           label="Object destination"
           dropdownScopeId="object-destination-select"
           disabled={disableRelationEdition}
-          value={values?.objectMetadataId}
+          value={values.objectMetadataId}
           options={objectMetadataItems.map((objectMetadataItem) => ({
             label: objectMetadataItem.labelPlural,
             value: objectMetadataItem.id,
@@ -104,10 +104,10 @@ export const SettingsObjectFieldRelationForm = ({
         <IconPicker
           disabled={disableFieldEdition}
           dropdownScopeId="field-destination-icon-picker"
-          selectedIconKey={values?.field?.icon || undefined}
+          selectedIconKey={values.field.icon || undefined}
           onChange={(value) =>
             onChange({
-              field: { ...values?.field, icon: value.iconKey },
+              field: { ...values.field, icon: value.iconKey },
             })
           }
           variant="primary"
@@ -115,11 +115,11 @@ export const SettingsObjectFieldRelationForm = ({
         <TextInput
           disabled={disableFieldEdition}
           placeholder="Field name"
-          value={values?.field?.label || ''}
+          value={values.field.label}
           onChange={(value) => {
             if (!value || validateMetadataLabel(value)) {
               onChange({
-                field: { ...values?.field, label: value },
+                field: { ...values.field, label: value },
               });
             }
           }}

front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx

@@ -4,17 +4,16 @@ import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
 
-import {
-  SettingsObjectFieldSelectFormOption,
-  SettingsObjectFieldSelectFormOptionRow,
-} from './SettingsObjectFieldSelectFormOptionRow';
+import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
+
+import { SettingsObjectFieldSelectFormOptionRow } from './SettingsObjectFieldSelectFormOptionRow';
 
 export type SettingsObjectFieldSelectFormValues =
   SettingsObjectFieldSelectFormOption[];
 
 type SettingsObjectFieldSelectFormProps = {
   onChange: (values: SettingsObjectFieldSelectFormValues) => void;
-  values?: SettingsObjectFieldSelectFormValues;
+  values: SettingsObjectFieldSelectFormValues;
 };
 
 const StyledContainer = styled.div`
@@ -54,31 +53,38 @@ const getNextColor = (currentColor: ThemeColor) => {
 
 export const SettingsObjectFieldSelectForm = ({
   onChange,
-  values = [],
+  values,
 }: SettingsObjectFieldSelectFormProps) => {
   return (
     <>
       <StyledContainer>
         <StyledLabel>Options</StyledLabel>
         <StyledRows>
-          {values.map((value, index) => (
+          {values.map((option, index) => (
             <SettingsObjectFieldSelectFormOptionRow
               key={index}
-              onChange={(optionValue) => {
-                const nextValues = [...values];
-                nextValues.splice(index, 1, optionValue);
-                onChange(nextValues);
+              isDefault={option.isDefault}
+              onChange={(nextOption) => {
+                const hasDefaultOptionChanged =
+                  !option.isDefault && nextOption.isDefault;
+                const nextOptions = hasDefaultOptionChanged
+                  ? values.map((value) => ({ ...value, isDefault: false }))
+                  : [...values];
+
+                nextOptions.splice(index, 1, nextOption);
+
+                onChange(nextOptions);
               }}
               onRemove={
                 values.length > 1
                   ? () => {
-                      const nextValues = [...values];
-                      nextValues.splice(index, 1);
-                      onChange(nextValues);
+                      const nextOptions = [...values];
+                      nextOptions.splice(index, 1);
+                      onChange(nextOptions);
                     }
                   : undefined
               }
-              value={value}
+              option={option}
             />
           ))}
         </StyledRows>
@@ -92,7 +98,7 @@ export const SettingsObjectFieldSelectForm = ({
             ...values,
             {
               color: getNextColor(values[values.length - 1].color),
-              text: `Option ${values.length + 1}`,
+              label: `Option ${values.length + 1}`,
             },
           ])
         }

front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx

@@ -2,7 +2,12 @@ import { useMemo } from 'react';
 import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
-import { IconDotsVertical, IconTrash } from '@/ui/display/icon';
+import {
+  IconCheck,
+  IconDotsVertical,
+  IconTrash,
+  IconX,
+} from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -11,17 +16,14 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { ThemeColor } from '@/ui/theme/constants/colors';
 
-export type SettingsObjectFieldSelectFormOption = {
-  color: ThemeColor;
-  text: string;
-};
+import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
 
 type SettingsObjectFieldSelectFormOptionRowProps = {
+  isDefault?: boolean;
   onChange: (value: SettingsObjectFieldSelectFormOption) => void;
   onRemove?: () => void;
-  value: SettingsObjectFieldSelectFormOption;
+  option: SettingsObjectFieldSelectFormOption;
 };
 
 const StyledRow = styled.div`
@@ -41,9 +43,10 @@ const StyledOptionInput = styled(TextInput)`
 `;
 
 export const SettingsObjectFieldSelectFormOptionRow = ({
+  isDefault,
   onChange,
   onRemove,
-  value,
+  option,
 }: SettingsObjectFieldSelectFormOptionRowProps) => {
   const dropdownScopeId = useMemo(() => `select-field-option-row-${v4()}`, []);
 
@@ -52,8 +55,9 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
   return (
     <StyledRow>
       <StyledOptionInput
-        value={value.text}
-        onChange={(text) => onChange({ ...value, text })}
+        value={option.label}
+        onChange={(label) => onChange({ ...option, label })}
+        RightIcon={isDefault ? IconCheck : undefined}
       />
       <DropdownScope dropdownScopeId={dropdownScopeId}>
         <Dropdown
@@ -65,6 +69,25 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
           dropdownComponents={
             <DropdownMenu>
               <DropdownMenuItemsContainer>
+                {isDefault ? (
+                  <MenuItem
+                    LeftIcon={IconX}
+                    text="Remove as default"
+                    onClick={() => {
+                      onChange({ ...option, isDefault: false });
+                      closeDropdown();
+                    }}
+                  />
+                ) : (
+                  <MenuItem
+                    LeftIcon={IconCheck}
+                    text="Set as default"
+                    onClick={() => {
+                      onChange({ ...option, isDefault: true });
+                      closeDropdown();
+                    }}
+                  />
+                )}
                 {!!onRemove && (
                   <MenuItem
                     accent="danger"

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -22,18 +22,20 @@ import {
 } from './SettingsObjectFieldSelectForm';
 import { SettingsObjectFieldTypeCard } from './SettingsObjectFieldTypeCard';
 
-export type SettingsObjectFieldTypeSelectSectionFormValues = Partial<{
+export type SettingsObjectFieldTypeSelectSectionFormValues = {
   type: FieldMetadataType;
   relation: SettingsObjectFieldRelationFormValues;
   select: SettingsObjectFieldSelectFormValues;
-}>;
+};
 
 type SettingsObjectFieldTypeSelectSectionProps = {
   excludedFieldTypes?: FieldMetadataType[];
   fieldMetadata: Pick<Field, 'icon' | 'label'> & { id?: string };
-  onChange: (values: SettingsObjectFieldTypeSelectSectionFormValues) => void;
+  onChange: (
+    values: Partial<SettingsObjectFieldTypeSelectSectionFormValues>,
+  ) => void;
   relationFieldMetadata?: Pick<Field, 'id' | 'isCustom'>;
-  values?: SettingsObjectFieldTypeSelectSectionFormValues;
+  values: SettingsObjectFieldTypeSelectSectionFormValues;
 } & Pick<SettingsObjectFieldPreviewProps, 'objectMetadataId'>;
 
 const StyledSettingsObjectFieldTypeCard = styled(SettingsObjectFieldTypeCard)`
@@ -58,8 +60,8 @@ export const SettingsObjectFieldTypeSelectSection = ({
   relationFieldMetadata,
   values,
 }: SettingsObjectFieldTypeSelectSectionProps) => {
-  const relationFormConfig = values?.relation;
-  const selectFormConfig = values?.select;
+  const relationFormConfig = values.relation;
+  const selectFormConfig = values.select;
 
   const fieldTypeOptions = Object.entries(settingsFieldMetadataTypes)
     .filter(([key]) => !excludedFieldTypes?.includes(key as FieldMetadataType))