admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Thaïs
2024-02-29 11:23:56 -03:00
committed by GitHub
parent 6ad3880696
commit a892d0f653
43 changed files with 1665 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useMemo } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
@ -12,8 +13,9 @@ import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderCon
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFieldCurrencyFormValues } from '@/settings/data-model/components/SettingsObjectFieldCurrencyForm';
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { useFieldMetadataForm } from '@/settings/data-model/hooks/useFieldMetadataForm';
import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
import { useFieldMetadataForm } from '@/settings/data-model/fields/forms/hooks/useFieldMetadataForm';
import { AppPath } from '@/types/AppPath';
import { IconArchive, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -27,6 +29,12 @@ import {
RelationMetadataType,
} from '~/generated-metadata/graphql';
const StyledSettingsObjectFieldTypeSelect = styled(
SettingsDataModelFieldTypeSelect,
)`
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
const canPersistFieldMetadataItemUpdate = (
fieldMetadataItem: FieldMetadataItem,
) => {
@ -214,23 +222,35 @@ export const SettingsObjectFieldEdit = () => {
iconKey={formValues.icon}
onChange={handleFormChange}
/>
<SettingsObjectFieldTypeSelectSection
disableCurrencyForm
fieldMetadata={{
icon: formValues.icon,
label: formValues.label || 'Employees',
id: activeMetadataField.id,
}}
objectMetadataId={activeObjectMetadataItem.id}
onChange={handleFormChange}
relationFieldMetadata={relationFieldMetadataItem}
values={{
type: formValues.type,
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
}}
/>
<Section>
<H2Title
title="Type and values"
description="The field's type and values."
/>
<StyledSettingsObjectFieldTypeSelect
disabled
onChange={handleFormChange}
value={formValues.type}
/>
<SettingsDataModelFieldSettingsFormCard
disableCurrencyForm
fieldMetadataItem={{
icon: formValues.icon,
id: activeMetadataField.id,
label: formValues.label,
name: activeMetadataField.name,
type: formValues.type,
}}
objectMetadataItem={activeObjectMetadataItem}
onChange={handleFormChange}
relationFieldMetadataItem={relationFieldMetadataItem}
values={{
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
}}
/>
</Section>
{!isLabelIdentifier && (
<Section>
<H2Title title="Danger zone" description="Disable this field" />