Morph-front-settings (#13872)

# Implement Morph Frontend Settings

Possiblity to create a morh relation from the Settings !

## Overview
Morph object system with new frontend settings UI for configuring morph
relations.

## What Changed
- **New Components**: `SettingsDataModelFieldMorphRelationForm`,
`SettingsMorphRelationMultiSelect`
- **Form System**: React Hook Form + Zod validation for morph relation
configuration
- **Preview System**: Live preview of field configurations with
validation
- **State Management**: Enhanced component state handling for complex
form interactions

## Technical Details
- **Architecture**: Restructured field input/display components for
better maintainability
- **Types**: Added comprehensive TypeScript types for morph relations
(`isFieldMorphRelation`, etc.)
- **Validation**: Dynamic validation rules based on field types and
relation patterns
- **Performance**: Optimized rendering with proper state management

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -0,0 +1,81 @@
+import {
+  type SelectControlProps,
+  StyledControlContainer,
+  StyledSelectControlIconChevronDown,
+} from '@/ui/input/components/SelectControl';
+import { useTheme } from '@emotion/react';
+import { t } from '@lingui/core/macro';
+import pluralize from 'pluralize';
+import React from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  type IconComponent,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui/display';
+
+type MultiSelectOptionType = {
+  label: string;
+  Icon: IconComponent;
+};
+
+type MultiSelectControlProps = Omit<SelectControlProps, 'selectedOption'> & {
+  fixedIcon?: IconComponent;
+  fixedText?: string;
+  selectedOptions: MultiSelectOptionType[];
+};
+
+export const MultiSelectControl = ({
+  fixedIcon,
+  fixedText,
+  selectedOptions,
+  isDisabled,
+  selectSizeVariant,
+  textAccent = 'default',
+  hasRightElement,
+}: MultiSelectControlProps) => {
+  const theme = useTheme();
+
+  if (selectedOptions.length === 0) {
+    return null;
+  }
+
+  const firstSelectedOption = selectedOptions[0];
+  const selectedOptionsCount = selectedOptions.length;
+  return (
+    <StyledControlContainer
+      disabled={isDisabled}
+      hasIcon={isDefined(fixedIcon) || isDefined(firstSelectedOption.Icon)}
+      selectSizeVariant={selectSizeVariant}
+      textAccent={textAccent}
+      hasRightElement={hasRightElement}
+    >
+      {isDefined(fixedIcon) ? (
+        React.createElement(fixedIcon, {
+          color: isDisabled ? theme.font.color.light : theme.font.color.primary,
+          size: theme.icon.size.md,
+          stroke: theme.icon.stroke.sm,
+        })
+      ) : isDefined(firstSelectedOption.Icon) ? (
+        <firstSelectedOption.Icon
+          color={isDisabled ? theme.font.color.light : theme.font.color.primary}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+      ) : null}
+      {isDefined(fixedText) ? (
+        <OverflowingTextWithTooltip
+          text={t`${selectedOptionsCount} ${
+            selectedOptionsCount <= 1 ? fixedText : pluralize(fixedText)
+          }`}
+        />
+      ) : (
+        <OverflowingTextWithTooltip text={firstSelectedOption.label} />
+      )}
+
+      <StyledSelectControlIconChevronDown
+        disabled={isDisabled}
+        size={theme.icon.size.md}
+      />
+    </StyledControlContainer>
+  );
+};

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

@@ -8,7 +8,7 @@ import { type SelectOption } from 'twenty-ui/input';
 export type SelectControlTextAccent = 'default' | 'placeholder';
 
 // TODO: factorize this with https://github.com/twentyhq/core-team-issues/issues/752
-const StyledControlContainer = styled.div<{
+export const StyledControlContainer = styled.div<{
   disabled?: boolean;
   hasIcon: boolean;
   selectSizeVariant?: SelectSizeVariant;
@@ -53,14 +53,14 @@ const StyledControlContainer = styled.div<{
   text-align: left;
 `;
 
-const StyledIconChevronDown = styled(IconChevronDown)<{
+export const StyledSelectControlIconChevronDown = styled(IconChevronDown)<{
   disabled?: boolean;
 }>`
   color: ${({ disabled, theme }) =>
     disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
 `;
 
-type SelectControlProps = {
+export type SelectControlProps = {
   selectedOption: SelectOption<string | number | boolean | null>;
   isDisabled?: boolean;
   selectSizeVariant?: SelectSizeVariant;
@@ -93,7 +93,10 @@ export const SelectControl = ({
         />
       ) : null}
       <OverflowingTextWithTooltip text={selectedOption.label} />
-      <StyledIconChevronDown disabled={isDisabled} size={theme.icon.size.md} />
+      <StyledSelectControlIconChevronDown
+        disabled={isDisabled}
+        size={theme.icon.size.md}
+      />
     </StyledControlContainer>
   );
 };