feat: add Object Edit Settings section with Object preview (#4216)

* feat: add Object Edit Settings section with Object preview

Closes #3834

* fix: fix preview card stories

* test: improve getFieldDefaultPreviewValue tests

* test: add getFieldPreviewValueFromRecord tests

* test: add useFieldPreview tests

* refactor: rename and move components

* fix: restore RecordStoreDecorator

packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelIsCustomTag.tsx

@@ -0,0 +1,18 @@
+import { Tag } from '@/ui/display/tag/components/Tag';
+
+type SettingsDataModelIsCustomTagProps = {
+  className?: string;
+  isCustom?: boolean;
+};
+
+export const SettingsDataModelIsCustomTag = ({
+  className,
+  isCustom,
+}: SettingsDataModelIsCustomTagProps) => (
+  <Tag
+    className={className}
+    color={isCustom ? 'orange' : 'blue'}
+    text={isCustom ? 'Custom' : 'Standard'}
+    weight="medium"
+  />
+);

packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { SettingsDataModelIsCustomTag } from '@/settings/data-model/objects/SettingsDataModelIsCustomTag';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+
+export type SettingsDataModelObjectSummaryProps = {
+  className?: string;
+  objectMetadataItem: Pick<
+    ObjectMetadataItem,
+    'icon' | 'isCustom' | 'labelPlural'
+  >;
+};
+
+const StyledObjectSummary = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: space-between;
+`;
+
+const StyledObjectName = styled.div`
+  align-items: center;
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsDataModelObjectSummary = ({
+  className,
+  objectMetadataItem,
+}: SettingsDataModelObjectSummaryProps) => {
+  const theme = useTheme();
+
+  const { getIcon } = useIcons();
+  const ObjectIcon = getIcon(objectMetadataItem.icon);
+
+  return (
+    <StyledObjectSummary className={className}>
+      <StyledObjectName>
+        <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
+        {objectMetadataItem.labelPlural}
+      </StyledObjectName>
+      <SettingsDataModelIsCustomTag isCustom={objectMetadataItem.isCustom} />
+    </StyledObjectSummary>
+  );
+};

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

@@ -0,0 +1,56 @@
+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 { SettingsDataModelFieldPreviewCard } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/SettingsDataModelObjectSummary';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+type SettingsDataModelObjectSettingsFormCardProps = {
+  objectMetadataItem: ObjectMetadataItem;
+};
+
+const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
+  width: 100%;
+`;
+
+const StyledObjectSummaryCard = styled(Card)`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  color: ${({ theme }) => theme.font.color.primary};
+  max-width: 480px;
+`;
+
+const StyledObjectSummaryCardContent = styled(CardContent)`
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const SettingsDataModelObjectSettingsFormCard = ({
+  objectMetadataItem,
+}: SettingsDataModelObjectSettingsFormCardProps) => {
+  const labelIdentifierFieldMetadataItem =
+    getLabelIdentifierFieldMetadataItem(objectMetadataItem);
+
+  return (
+    <SettingsDataModelPreviewFormCard
+      preview={
+        labelIdentifierFieldMetadataItem ? (
+          <StyledFieldPreviewCard
+            objectMetadataItem={objectMetadataItem}
+            fieldMetadataItem={labelIdentifierFieldMetadataItem}
+            withFieldLabel={false}
+          />
+        ) : (
+          <StyledObjectSummaryCard>
+            <StyledObjectSummaryCardContent>
+              <SettingsDataModelObjectSummary
+                objectMetadataItem={objectMetadataItem}
+              />
+            </StyledObjectSummaryCardContent>
+          </StyledObjectSummaryCard>
+        )
+      }
+    />
+  );
+};