Fixed pending row edit mode (twentyhq#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.

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();
 

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
     />
   );
 };

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,
       }}
     >
       <RecordValueSetterEffect recordId={recordId} />

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<RecordTableRowContextProps>(

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();