From b4e2ada3b072d3c9c9de93f83383785f448e613b Mon Sep 17 00:00:00 2001 From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com> Date: Thu, 8 Aug 2024 22:00:02 +0530 Subject: [PATCH] Fixes Empty Label Identifer Preview in Settings/DataModel/Object/Edit (#6370) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixes #6143 --------- Co-authored-by: Félix Malfait --- .../SettingsDataModelFieldPreview.tsx | 5 +- .../SettingsDataModelSetFieldValueEffect.tsx | 40 +++++- .../SettingsDataModelSetRecordEffect.tsx | 21 ++- .../preview/states/previewRecordIdState.ts | 6 + ...SettingsDataModelObjectIdentifiersForm.tsx | 15 ++- ...ettingsDataModelObjectSettingsFormCard.tsx | 5 +- .../modules/ui/input/components/Select.tsx | 2 +- .../data-model/SettingsObjectEdit.tsx | 124 +++++++++--------- .../repository/workspace.repository.ts | 2 +- .../services/create-company.service.ts | 8 +- .../services/create-contact.service.ts | 6 +- 11 files changed, 149 insertions(+), 85 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index dcffc95b6..31b78cd0d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -96,7 +96,10 @@ export const SettingsDataModelFieldPreview = ({ return ( <> {previewRecord ? ( - + ) : ( { + const previewRecordId = useRecoilValue(previewRecordIdState); + + const upsertedPreviewRecord = useRecoilValue( + recordStoreFamilyState(previewRecordId ?? ''), + ); + const setFieldValue = useSetRecoilState( recordStoreFamilySelector({ recordId, fieldName, }), ); - const setRecordFieldValue = useSetRecordFieldValue(); useEffect(() => { - setFieldValue(value); - setRecordFieldValue(recordId, fieldName, value); - }, [value, setFieldValue, setRecordFieldValue, recordId, fieldName]); + if ( + isDefined(upsertedPreviewRecord) && + !!upsertedPreviewRecord[fieldName] + ) { + setFieldValue(upsertedPreviewRecord[fieldName]); + setRecordFieldValue( + recordId, + fieldName, + upsertedPreviewRecord[fieldName], + ); + } else { + setFieldValue(value); + setRecordFieldValue(recordId, fieldName, value); + } + }, [ + value, + setFieldValue, + setRecordFieldValue, + recordId, + fieldName, + upsertedPreviewRecord, + ]); return null; }; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx index 7ef2d28c7..e5ceaf22f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx @@ -1,20 +1,35 @@ -import { useEffect } from 'react'; - +import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { previewRecordIdState } from '@/settings/data-model/fields/preview/states/previewRecordIdState'; +import { useEffect } from 'react'; +import { useSetRecoilState } from 'recoil'; type SettingsDataModelSetRecordEffectProps = { record: ObjectRecord; + fieldName: string; }; export const SettingsDataModelSetRecordEffect = ({ record, + fieldName, }: SettingsDataModelSetRecordEffectProps) => { const { upsertRecords: upsertRecordsInStore } = useUpsertRecordsInStore(); + const setRecordFieldValue = useSetRecordFieldValue(); + + const setPreviewRecordId = useSetRecoilState(previewRecordIdState); useEffect(() => { upsertRecordsInStore([record]); - }, [record, upsertRecordsInStore]); + setRecordFieldValue(record.id, fieldName, record[fieldName]); + setPreviewRecordId(record.id); + }, [ + record, + upsertRecordsInStore, + setRecordFieldValue, + fieldName, + setPreviewRecordId, + ]); return null; }; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts new file mode 100644 index 000000000..3d37a853a --- /dev/null +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts @@ -0,0 +1,6 @@ +import { createState } from 'twenty-ui'; + +export const previewRecordIdState = createState({ + key: 'previewRecordId', + defaultValue: null, +}); diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx index 5a7b7cb1f..29f5512e5 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx @@ -1,7 +1,7 @@ +import styled from '@emotion/styled'; import { useMemo } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; -import styled from '@emotion/styled'; -import { IconCircleOff, useIcons } from 'twenty-ui'; +import { IconCircleOff, isDefined, useIcons } from 'twenty-ui'; import { z } from 'zod'; import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes'; @@ -22,6 +22,7 @@ export type SettingsDataModelObjectIdentifiersFormValues = z.infer< type SettingsDataModelObjectIdentifiersFormProps = { objectMetadataItem: ObjectMetadataItem; + defaultLabelIdentifierFieldMetadataId: string; }; const StyledContainer = styled.div` @@ -31,6 +32,7 @@ const StyledContainer = styled.div` export const SettingsDataModelObjectIdentifiersForm = ({ objectMetadataItem, + defaultLabelIdentifierFieldMetadataId, }: SettingsDataModelObjectIdentifiersFormProps) => { const { control } = useFormContext(); @@ -58,7 +60,6 @@ export const SettingsDataModelObjectIdentifiersForm = ({ label: 'None', value: null, }; - return ( {[ @@ -77,7 +78,13 @@ export const SettingsDataModelObjectIdentifiersForm = ({ key={fieldName} name={fieldName} control={control} - defaultValue={objectMetadataItem[fieldName]} + defaultValue={ + fieldName === 'labelIdentifierFieldMetadataId' + ? isDefined(objectMetadataItem[fieldName]) + ? objectMetadataItem[fieldName] + : defaultLabelIdentifierFieldMetadataId + : objectMetadataItem[fieldName] + } render={({ field: { onBlur, onChange, value } }) => { return (