Added new view to select types for objects (#6700)

Issue #6496 
Hi team,

Is this the right approach for handling type selection with states and
conditional rendering, or should these be managed on separate pages
altogether? Please let me know Ill make changes accordingly :)

I’m also working on styling the buttons according to the Figma design
and will be moving constants like categoryDescriptions and categories to
the constants folder.

Thanks for your guidance!



https://github.com/user-attachments/assets/452bea9f-4d0a-4472-9941-421b54cda47f

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-09-07 02:17:40 +05:30
committed by GitHub
parent 99f8f8fedb
commit 79aba75649
17 changed files with 597 additions and 264 deletions

View File

@ -1,5 +1,4 @@
import { useApolloClient } from '@apollo/client';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
@ -22,9 +21,9 @@ import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength';
import { SettingsDataModelFieldAboutForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm';
import { SettingsDataModelFieldDescriptionForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@ -40,12 +39,6 @@ type SettingsDataModelFieldEditFormValues = z.infer<
ReturnType<typeof settingsFieldFormSchema>
>;
const StyledSettingsObjectFieldTypeSelect = styled(
SettingsDataModelFieldTypeSelect,
)`
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
const canPersistFieldMetadataItemUpdate = (
fieldMetadataItem: FieldMetadataItem,
) => {
@ -204,34 +197,33 @@ export const SettingsObjectFieldEdit = () => {
<SettingsPageContainer>
<Section>
<H2Title
title="Name and description"
description="The name and description of this field"
title="Icon and Name"
description="The name and icon of this field"
/>
<SettingsDataModelFieldAboutForm
<SettingsDataModelFieldIconLabelForm
disabled={!activeMetadataField.isCustom}
fieldMetadataItem={activeMetadataField}
maxLength={FIELD_NAME_MAXIMUM_LENGTH}
/>
</Section>
<Section>
<H2Title
title="Type and values"
description="The field's type and values."
/>
<StyledSettingsObjectFieldTypeSelect
disabled
fieldMetadataItem={activeMetadataField}
excludedFieldTypes={[
FieldMetadataType.Link,
FieldMetadataType.Email,
]}
/>
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
disableCurrencyForm
fieldMetadataItem={activeMetadataField}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
<Section>
<H2Title
title="Description"
description="The description of this field"
/>
<SettingsDataModelFieldDescriptionForm
disabled={!activeMetadataField.isCustom}
fieldMetadataItem={activeMetadataField}
/>
</Section>
{!isLabelIdentifier && (
<Section>
<H2Title