Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix field forms #7595

Merged
merged 3 commits into from
Oct 11, 2024
Merged

Fix field forms #7595

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da9c079
Revert "Prefill Relation Fields with Initiating Object Icon and Name …
ehconitin Oct 11, 2024
80c6567
temporary fix
ehconitin Oct 11, 2024
c691a6c
Merge branch 'main' into fix-forms
lucasbordeau Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 1 addition & 37 deletions ...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,10 @@ import { Controller, useFormContext } from 'react-hook-form';
import { z } from 'zod';

import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/utils/errorMessages';
import { RelationType } from '@/settings/data-model/types/RelationType';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextInput } from '@/ui/input/components/TextInput';
import { useEffect, useState } from 'react';
import { RelationDefinitionType } from '~/generated-metadata/graphql';

export const settingsDataModelFieldIconLabelFormSchema = (
existingOtherLabels: string[] = [],
Expand All @@ -36,47 +32,19 @@ type SettingsDataModelFieldIconLabelFormProps = {
disabled?: boolean;
fieldMetadataItem?: FieldMetadataItem;
maxLength?: number;
relationObjectMetadataItem?: ObjectMetadataItem;
relationType?: RelationType;
};

export const SettingsDataModelFieldIconLabelForm = ({
disabled,
fieldMetadataItem,
maxLength,
relationObjectMetadataItem,
relationType,
}: SettingsDataModelFieldIconLabelFormProps) => {
const {
control,
trigger,
formState: { errors },
setValue,
} = useFormContext<SettingsDataModelFieldIconLabelFormValues>();

const [labelEditedManually, setLabelEditedManually] = useState(false);
const [iconEditedManually, setIconEditedManually] = useState(false);

useEffect(() => {
if (labelEditedManually) return;
const label = [
RelationDefinitionType.ManyToOne,
RelationDefinitionType.ManyToMany,
].includes(relationType ?? RelationDefinitionType.OneToMany)
? relationObjectMetadataItem?.labelPlural
: relationObjectMetadataItem?.labelSingular;
setValue('label', label ?? '');

if (iconEditedManually) return;
setValue('icon', relationObjectMetadataItem?.icon ?? 'IconUsers');
}, [
labelEditedManually,
iconEditedManually,
relationObjectMetadataItem,
setValue,
relationType,
]);

return (
<StyledInputsContainer>
<Controller
Expand All @@ -87,10 +55,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
<IconPicker
disabled={disabled}
selectedIconKey={value ?? ''}
onChange={({ iconKey }) => {
setIconEditedManually(true);
onChange(iconKey);
}}
onChange={({ iconKey }) => onChange(iconKey)}
variant="primary"
/>
)}
Expand All @@ -104,7 +69,6 @@ export const SettingsDataModelFieldIconLabelForm = ({
placeholder="Employees"
value={value}
onChange={(e) => {
setLabelEditedManually(true);
onChange(e);
trigger('label');
}}
Expand Down
33 changes: 5 additions & 28 deletions ...ttings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,17 @@ import { z } from 'zod';

import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues';
import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { RelationType } from '@/settings/data-model/types/RelationType';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useEffect, useState } from 'react';
import { RelationDefinitionType } from '~/generated-metadata/graphql';

export const settingsDataModelFieldRelationFormSchema = z.object({
Expand All @@ -41,7 +40,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer<

type SettingsDataModelFieldRelationFormProps = {
fieldMetadataItem: Pick<FieldMetadataItem, 'type'>;
objectMetadataItem: SettingsDataModelFieldPreviewCardProps['objectMetadataItem'];
objectMetadataItem: ObjectMetadataItem;
};

const StyledContainer = styled.div`
Expand Down Expand Up @@ -84,17 +83,12 @@ export const SettingsDataModelFieldRelationForm = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldRelationFormProps) => {
const {
control,
watch: watchFormValue,
setValue,
} = useFormContext<SettingsDataModelFieldRelationFormValues>();
const { control, watch: watchFormValue } =
useFormContext<SettingsDataModelFieldRelationFormValues>();
const { getIcon } = useIcons();
const { objectMetadataItems, findObjectMetadataItemById } =
useFilteredObjectMetadataItems();

const [labelEditedManually, setLabelEditedManually] = useState(false);

const {
disableFieldEdition,
disableRelationEdition,
Expand All @@ -111,20 +105,6 @@ export const SettingsDataModelFieldRelationForm = ({
);

const isMobile = useIsMobile();
const relationType = watchFormValue('relation.type');

useEffect(() => {
if (labelEditedManually) return;
setValue(
'relation.field.label',
[
RelationDefinitionType.ManyToMany,
RelationDefinitionType.ManyToOne,
].includes(relationType)
? objectMetadataItem.labelPlural
: objectMetadataItem.labelSingular,
);
}, [labelEditedManually, objectMetadataItem, relationType, setValue]);

return (
<StyledContainer>
Expand Down Expand Up @@ -195,10 +175,7 @@ export const SettingsDataModelFieldRelationForm = ({
disabled={disableFieldEdition}
placeholder="Field name"
value={value}
onChange={(newValue) => {
setLabelEditedManually(true);
onChange(newValue);
}}
onChange={onChange}
fullWidth
Comment on lines 177 to 179
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: The automatic update of the field name based on relation type changes has been removed. Consider implementing a way to update the field name while still allowing manual edits

maxLength={FIELD_NAME_MAXIMUM_LENGTH}
/>
Expand Down
5 changes: 4 additions & 1 deletion ...model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
initialRelationObjectMetadataItem,
initialRelationType,
initialRelationFieldMetadataItem,
} = useRelationSettingsFormInitialValues({ fieldMetadataItem });
} = useRelationSettingsFormInitialValues({
fieldMetadataItem,
objectMetadataItem,
});

const relationObjectMetadataId = watchFormValue(
'relation.objectMetadataId',
Expand Down
2 changes: 1 addition & 1 deletion packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const StyledButton = styled.button<
? focus
? theme.color.blue
: theme.background.transparent.light
: 'transparent'};
: theme.border.color.medium};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}`
Expand Down
15 changes: 5 additions & 10 deletions .../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCre
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
Expand Down Expand Up @@ -48,7 +47,6 @@ export const SettingsObjectNewFieldConfigure = () => {

const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();

const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
Expand All @@ -69,13 +67,6 @@ export const SettingsObjectNewFieldConfigure = () => {
},
});

const fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> =
{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',
type: formConfig.watch('type'),
};

const [, setObjectViews] = useState<View[]>([]);
const [, setRelationObjectViews] = useState<View[]>([]);

Expand Down Expand Up @@ -209,7 +200,11 @@ export const SettingsObjectNewFieldConfigure = () => {
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={fieldMetadataItem}
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'New Field',
type: fieldType as FieldMetadataType,
}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider using a separate variable for the fieldMetadataItem object to improve readability

objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
Expand Down
Loading