feat: add Select field preview and form (#2655)

Closes #2432

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

@@ -10,15 +10,16 @@ import { Field } from '~/generated/graphql';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { SettingsObjectFieldPreviewValueEffect } from '../components/SettingsObjectFieldPreviewValueEffect';
-import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
 import { useFieldPreview } from '../hooks/useFieldPreview';
-import { useRelationFieldPreview } from '../hooks/useRelationFieldPreview';
+
+import { SettingsObjectFieldSelectFormValues } from './SettingsObjectFieldSelectForm';
 
 export type SettingsObjectFieldPreviewProps = {
   className?: string;
   fieldMetadata: Pick<Field, 'icon' | 'label' | 'type'> & { id?: string };
   objectMetadataId: string;
   relationObjectMetadataId?: string;
+  selectOptions?: SettingsObjectFieldSelectFormValues;
   shrink?: boolean;
 };
 
@@ -73,6 +74,7 @@ export const SettingsObjectFieldPreview = ({
   fieldMetadata,
   objectMetadataId,
   relationObjectMetadataId,
+  selectOptions,
   shrink,
 }: SettingsObjectFieldPreviewProps) => {
   const theme = useTheme();
@@ -81,27 +83,17 @@ export const SettingsObjectFieldPreview = ({
     entityId,
     FieldIcon,
     fieldName,
-    hasValue,
     ObjectIcon,
     objectMetadataItem,
+    relationObjectMetadataItem,
     value,
   } = useFieldPreview({
     fieldMetadata,
     objectMetadataId,
+    relationObjectMetadataId,
+    selectOptions,
   });
 
-  const { defaultValue: relationDefaultValue, relationObjectMetadataItem } =
-    useRelationFieldPreview({
-      relationObjectMetadataId,
-      skipDefaultValue:
-        fieldMetadata.type !== FieldMetadataType.Relation || hasValue,
-    });
-
-  const defaultValue =
-    fieldMetadata.type === FieldMetadataType.Relation
-      ? relationDefaultValue
-      : settingsFieldMetadataTypes[fieldMetadata.type].defaultValue;
-
   return (
     <StyledContainer className={className}>
       <StyledObjectSummary>
@@ -123,7 +115,7 @@ export const SettingsObjectFieldPreview = ({
       <SettingsObjectFieldPreviewValueEffect
         entityId={entityId}
         fieldName={fieldName}
-        value={value ?? defaultValue}
+        value={value}
       />
       <StyledFieldPreview shrink={shrink}>
         <StyledFieldLabel>

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

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+
+import { TextInput } from '@/ui/input/components/TextInput';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type SettingsObjectFieldSelectFormValues = {
+  color: ThemeColor;
+  text: string;
+}[];
+
+type SettingsObjectFieldSelectFormProps = {
+  onChange: (values: SettingsObjectFieldSelectFormValues) => void;
+  values?: SettingsObjectFieldSelectFormValues;
+};
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  display: block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  text-transform: uppercase;
+`;
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const StyledOptionInput = styled(TextInput)`
+  & input {
+    height: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+export const SettingsObjectFieldSelectForm = ({
+  onChange,
+  values = [],
+}: SettingsObjectFieldSelectFormProps) => {
+  return (
+    <div>
+      <StyledLabel>Options</StyledLabel>
+      <StyledInputsContainer>
+        {values.map((value, index) => (
+          <StyledOptionInput
+            value={value.text}
+            onChange={(text) => {
+              const nextValues = [...values];
+              nextValues.splice(index, 1, { ...values[index], text });
+              onChange(nextValues);
+            }}
+          />
+        ))}
+      </StyledInputsContainer>
+    </div>
+  );
+};

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

@@ -16,11 +16,16 @@ import {
   SettingsObjectFieldRelationForm,
   SettingsObjectFieldRelationFormValues,
 } from './SettingsObjectFieldRelationForm';
+import {
+  SettingsObjectFieldSelectForm,
+  SettingsObjectFieldSelectFormValues,
+} from './SettingsObjectFieldSelectForm';
 import { SettingsObjectFieldTypeCard } from './SettingsObjectFieldTypeCard';
 
 export type SettingsObjectFieldTypeSelectSectionFormValues = Partial<{
   type: FieldMetadataType;
   relation: SettingsObjectFieldRelationFormValues;
+  select: SettingsObjectFieldSelectFormValues;
 }>;
 
 type SettingsObjectFieldTypeSelectSectionProps = {
@@ -54,6 +59,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
   values,
 }: SettingsObjectFieldTypeSelectSectionProps) => {
   const relationFormConfig = values?.relation;
+  const selectFormConfig = values?.select;
 
   const fieldTypeOptions = Object.entries(settingsFieldMetadataTypes)
     .filter(([key]) => !excludedFieldTypes?.includes(key as FieldMetadataType))
@@ -80,6 +86,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
           FieldMetadataType.Boolean,
           FieldMetadataType.Currency,
           FieldMetadataType.DateTime,
+          FieldMetadataType.Enum,
           FieldMetadataType.Link,
           FieldMetadataType.Number,
           FieldMetadataType.Relation,
@@ -98,6 +105,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
                   relationObjectMetadataId={
                     relationFormConfig?.objectMetadataId
                   }
+                  selectOptions={selectFormConfig}
                 />
                 {values.type === FieldMetadataType.Relation &&
                   !!relationFormConfig?.type &&
@@ -127,7 +135,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
               </>
             }
             form={
-              values.type === FieldMetadataType.Relation && (
+              values.type === FieldMetadataType.Relation ? (
                 <SettingsObjectFieldRelationForm
                   disableFieldEdition={
                     relationFieldMetadata && !relationFieldMetadata.isCustom
@@ -140,7 +148,12 @@ export const SettingsObjectFieldTypeSelectSection = ({
                     })
                   }
                 />
-              )
+              ) : values.type === FieldMetadataType.Enum ? (
+                <SettingsObjectFieldSelectForm
+                  values={selectFormConfig}
+                  onChange={(nextValues) => onChange({ select: nextValues })}
+                />
+              ) : undefined
             }
           />
         )}