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

Prefill Relation Fields with Initiating Object Icon and Name #7363

Merged
merged 4 commits into from
Oct 10, 2024
Merged

Prefill Relation Fields with Initiating Object Icon and Name #7363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b693f7d
Prefill Relation Fields with Initiating Object Icon and Name
invalid-email-address Sep 30, 2024
21e46e4
dynamically prefilling relation label and icon source
invalid-email-address Oct 1, 2024
3e9416b
Merge branch 'main' into issue7355
lucasbordeau Oct 9, 2024
e1dafe0
Fix lint
lucasbordeau Oct 9, 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: 37 additions & 1 deletion ...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,10 +3,14 @@ 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 @@ -32,19 +36,47 @@ 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 @@ -55,7 +87,10 @@ export const SettingsDataModelFieldIconLabelForm = ({
<IconPicker
disabled={disabled}
selectedIconKey={value ?? ''}
onChange={({ iconKey }) => onChange(iconKey)}
onChange={({ iconKey }) => {
setIconEditedManually(true);
onChange(iconKey);
}}
variant="primary"
/>
)}
Expand All @@ -69,6 +104,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
placeholder="Employees"
value={value}
onChange={(e) => {
setLabelEditedManually(true);
onChange(e);
trigger('label');
}}
Expand Down
37 changes: 33 additions & 4 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 @@ -10,11 +10,13 @@ import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fi
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 @@ -39,6 +41,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer<

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

const StyledContainer = styled.div`
Expand Down Expand Up @@ -79,26 +82,49 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES)

export const SettingsDataModelFieldRelationForm = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldRelationFormProps) => {
const { control, watch: watchFormValue } =
useFormContext<SettingsDataModelFieldRelationFormValues>();
const {
control,
watch: watchFormValue,
setValue,
} = useFormContext<SettingsDataModelFieldRelationFormValues>();
const { getIcon } = useIcons();
const { objectMetadataItems, findObjectMetadataItemById } =
useFilteredObjectMetadataItems();

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

const {
disableFieldEdition,
disableRelationEdition,
initialRelationFieldMetadataItem,
initialRelationObjectMetadataItem,
initialRelationType,
} = useRelationSettingsFormInitialValues({ fieldMetadataItem });
} = useRelationSettingsFormInitialValues({
fieldMetadataItem,
objectMetadataItem,
});

const selectedObjectMetadataItem = findObjectMetadataItemById(
watchFormValue('relation.objectMetadataId'),
);

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 @@ -169,7 +195,10 @@ export const SettingsDataModelFieldRelationForm = ({
disabled={disableFieldEdition}
placeholder="Field name"
value={value}
onChange={onChange}
onChange={(newValue) => {
setLabelEditedManually(true);
onChange(newValue);
}}
fullWidth
maxLength={FIELD_NAME_MAXIMUM_LENGTH}
/>
Expand Down
1 change: 1 addition & 0 deletions ...model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
form={
<SettingsDataModelFieldRelationForm
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>
}
/>
Expand Down
21 changes: 15 additions & 6 deletions ...s/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@ import { useMemo } from 'react';

import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { RelationDefinitionType } from '~/generated-metadata/graphql';

export const useRelationSettingsFormInitialValues = ({
fieldMetadataItem,
objectMetadataItem,
}: {
fieldMetadataItem?: Pick<FieldMetadataItem, 'type' | 'relationDefinition'>;
objectMetadataItem?: SettingsDataModelFieldPreviewCardProps['objectMetadataItem'];
}) => {
const { objectMetadataItems } = useFilteredObjectMetadataItems();

Expand All @@ -28,11 +30,13 @@ export const useRelationSettingsFormInitialValues = ({
const initialRelationObjectMetadataItem = useMemo(
() =>
relationObjectMetadataItemFromFieldMetadata ??
objectMetadataItems.find(
({ nameSingular }) => nameSingular === CoreObjectNameSingular.Person,
) ??
objectMetadataItem ??
objectMetadataItems.filter(isObjectMetadataAvailableForRelation)[0],
[objectMetadataItems, relationObjectMetadataItemFromFieldMetadata],
[
objectMetadataItem,
objectMetadataItems,
relationObjectMetadataItemFromFieldMetadata,
],
);

const initialRelationType =
Expand All @@ -44,7 +48,12 @@ export const useRelationSettingsFormInitialValues = ({
disableRelationEdition: !!relationFieldMetadataItem,
initialRelationFieldMetadataItem: relationFieldMetadataItem ?? {
icon: initialRelationObjectMetadataItem.icon ?? 'IconUsers',
label: '',
label: [
RelationDefinitionType.ManyToMany,
RelationDefinitionType.ManyToOne,
].includes(initialRelationType)
? initialRelationObjectMetadataItem.labelPlural
: initialRelationObjectMetadataItem.labelSingular,
},
Comment on lines +51 to 57
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 extracting this logic into a separate function for better readability and maintainability

initialRelationObjectMetadataItem,
initialRelationType,
Expand Down
15 changes: 10 additions & 5 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,6 +2,7 @@ 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 @@ -47,6 +48,7 @@ export const SettingsObjectNewFieldConfigure = () => {

const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();

const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
Expand All @@ -67,6 +69,13 @@ 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 @@ -198,11 +207,7 @@ export const SettingsObjectNewFieldConfigure = () => {
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'New Field',
type: fieldType as FieldMetadataType,
}}
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
Expand Down
Loading