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>
2025-08-19 16:37:26 +02:00
parent 9eaede6e1e
commit 90c237a185
31 changed files with 1209 additions and 83 deletions
@@ -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>
+  );
+};