From 8ee98e0fda2feaddbb785e153c9b7efdb37475b4 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 27 May 2024 13:40:53 +0200 Subject: [PATCH] Fixed pending row edit mode (#5592) This PR fixes creation on table. With the recent optimization refactor, we now use a custom event to trigger edit and soft focus mode on a table cell. There's a specific case when we create a pending row to allow creating a new record, where the custom event gets triggered before the cell exists, so it cannot listen and put itself in edit mode. The fix is passing down a new isPendingRow in the context, so the identifier cell on a pending row can put itself in edit mode during its first render. --- .../components/RecordValueSetterEffect.tsx | 1 + .../record-table/components/RecordTablePendingRow.tsx | 1 + .../record-table/components/RecordTableRow.tsx | 8 +++++++- .../record-table/contexts/RecordTableRowContext.ts | 1 + .../components/RecordTableCellContainer.tsx | 11 +++++++++-- 5 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx index c746646e4..4a80a0cd4 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx @@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil'; import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +// TODO: should be optimized and put higher up export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => { const setRecordValue = useSetRecordValue(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTablePendingRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTablePendingRow.tsx index 2c05409d3..cde96d52e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTablePendingRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTablePendingRow.tsx @@ -14,6 +14,7 @@ export const RecordTablePendingRow = () => { key={pendingRecordId} recordId={pendingRecordId} rowIndex={-1} + isPendingRow /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 1d2c5b5ce..1441c109a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -17,13 +17,18 @@ import { CheckboxCell } from './CheckboxCell'; type RecordTableRowProps = { recordId: string; rowIndex: number; + isPendingRow?: boolean; }; const StyledTd = styled.td` background-color: ${({ theme }) => theme.background.primary}; `; -export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => { +export const RecordTableRow = ({ + recordId, + rowIndex, + isPendingRow, +}: RecordTableRowProps) => { const { visibleTableColumnsSelector, isRowSelectedFamilyState } = useRecordTableStates(); const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId)); @@ -51,6 +56,7 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => { }) + recordId, isSelected: currentRowSelected, isReadOnly: objectMetadataItem.isRemote ?? false, + isPendingRow, }} > diff --git a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts index 4322e26f7..76f285839 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts @@ -6,6 +6,7 @@ export type RecordTableRowContextProps = { rowIndex: number; isSelected: boolean; isReadOnly: boolean; + isPendingRow?: boolean; }; export const RecordTableRowContext = createContext( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 9d302bda9..18b245035 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -1,6 +1,7 @@ import React, { ReactElement, useContext, useEffect, useState } from 'react'; import { clsx } from 'clsx'; +import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; @@ -37,12 +38,18 @@ export const RecordTableCellContainer = ({ }: RecordTableCellContainerProps) => { const { setIsFocused } = useFieldFocus(); - const { isSelected, recordId } = useContext(RecordTableRowContext); + const { isSelected, recordId, isPendingRow } = useContext( + RecordTableRowContext, + ); + const { isLabelIdentifier } = useContext(FieldContext); const { onContextMenu, onCellMouseEnter } = useContext(RecordTableContext); + const shouldBeInitiallyInEditMode = + isPendingRow === true && isLabelIdentifier; + const [isHovered, setIsHovered] = useState(false); const [hasSoftFocus, setHasSoftFocus] = useState(false); - const [isInEditMode, setIsInEditMode] = useState(false); + const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode); const cellPosition = useCurrentTableCellPosition();