Refactored table unnamed cells behaviour (#9264)

Closes: #7851 

[Screencast from 2024-12-28
00-53-55.webm](https://github.com/user-attachments/assets/17b05ebf-d375-4e19-a4e8-699bce876f5d)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx

@@ -1,6 +1,7 @@
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { isNonEmptyString } from '@sniptt/guards';
 import { AvatarChip, AvatarChipVariant, ChipSize } from 'twenty-ui';
 
 export type RecordIdentifierChipProps = {
@@ -27,6 +28,11 @@ export const RecordIdentifierChip = ({
 
   const { Icon: LeftIcon, IconColor: LeftIconColor } =
     useGetStandardObjectIcon(objectNameSingular);
+
+  if (!isNonEmptyString(recordChipData.name.trim())) {
+    return null;
+  }
+
   return (
     <AvatarChip
       placeholderColorSeed={record.id}

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -1,3 +1,4 @@
+import { Theme, withTheme } from '@emotion/react';
 import { styled } from '@linaria/react';
 import { Ref } from 'react';
 
@@ -21,12 +22,18 @@ const StyledInnerContainer = styled.div`
   white-space: nowrap;
 `;
 
+const StyledEmptyPlaceholderField = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.light};
+  padding-left: 4px;
+`);
+
 export type EditableCellDisplayContainerProps = {
   softFocus?: boolean;
   onClick?: () => void;
   scrollRef?: Ref<HTMLDivElement>;
   isHovered?: boolean;
   onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  placeholderForEmptyCell?: string;
 };
 
 export const RecordTableCellDisplayContainer = ({
@@ -35,6 +42,7 @@ export const RecordTableCellDisplayContainer = ({
   onClick,
   scrollRef,
   onContextMenu,
+  placeholderForEmptyCell,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
   <StyledOuterContainer
     data-testid={
@@ -45,6 +53,12 @@ export const RecordTableCellDisplayContainer = ({
     hasSoftFocus={softFocus}
     onContextMenu={onContextMenu}
   >
-    <StyledInnerContainer>{children}</StyledInnerContainer>
+    {placeholderForEmptyCell ? (
+      <StyledEmptyPlaceholderField>
+        {'Set ' + placeholderForEmptyCell}
+      </StyledEmptyPlaceholderField>
+    ) : (
+      <StyledInnerContainer>{children}</StyledInnerContainer>
+    )}
   </StyledOuterContainer>
 );

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx

@@ -33,7 +33,7 @@ export const RecordTableCellSoftFocusMode = ({
   editModeContent,
   nonEditModeContent,
 }: RecordTableCellSoftFocusModeProps) => {
-  const { columnIndex } = useContext(RecordTableCellContext);
+  const { columnIndex, columnDefinition } = useContext(RecordTableCellContext);
   const { recordId } = useContext(FieldContext);
 
   const { onActionMenuDropdownOpened } = useRecordTableBodyContextOrThrow();
@@ -128,7 +128,11 @@ export const RecordTableCellSoftFocusMode = ({
   };
 
   const handleButtonClick = () => {
-    handleClick();
+    if (!isFieldInputOnly && isFirstColumn) {
+      openTableCell(undefined, false, true);
+    } else {
+      openTableCell();
+    }
     /*
     Disabling sidepanel access for now, TODO: launch
     if (!isFieldInputOnly) {
@@ -148,13 +152,13 @@ export const RecordTableCellSoftFocusMode = ({
     : customButtonIcon;
 
   const showButton =
-    isDefined(buttonIcon) &&
-    !editModeContentOnly &&
-    (!isFirstColumn || !isEmpty) &&
-    !isFieldReadOnly;
+    isDefined(buttonIcon) && !editModeContentOnly && !isFieldReadOnly;
 
   const dontShowContent = isEmpty && isFieldReadOnly;
 
+  const showPlaceholder =
+    !editModeContentOnly && !isFieldReadOnly && isFirstColumn && isEmpty;
+
   return (
     <>
       <RecordTableCellDisplayContainer
@@ -162,6 +166,9 @@ export const RecordTableCellSoftFocusMode = ({
         scrollRef={scrollRef}
         softFocus
         onContextMenu={handleActionMenuDropdown}
+        placeholderForEmptyCell={
+          showPlaceholder ? columnDefinition.label : undefined
+        }
       >
         {dontShowContent ? (
           <></>

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell.ts

@@ -43,6 +43,7 @@ export const useOpenRecordTableCellFromCell = () => {
   const openTableCell = (
     initialValue?: string,
     isActionButtonClick = false,
+    isNavigating = false,
   ) => {
     onOpenTableCell({
       cellPosition,
@@ -54,6 +55,7 @@ export const useOpenRecordTableCellFromCell = () => {
       objectNameSingular,
       initialValue,
       isActionButtonClick,
+      isNavigating,
     });
   };
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts

@@ -42,6 +42,7 @@ export type OpenTableCellArgs = {
   fieldDefinition: FieldDefinition<FieldMetadata>;
   recordId: string;
   isActionButtonClick: boolean;
+  isNavigating: boolean;
 };
 
 export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
@@ -84,6 +85,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
         fieldDefinition,
         recordId,
         isActionButtonClick,
+        isNavigating,
       }: OpenTableCellArgs) => {
         if (isReadOnly) {
           return;
@@ -106,7 +108,10 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
           fieldValue,
         });
 
-        if (isFirstColumnCell && !isEmpty && !isActionButtonClick) {
+        if (
+          (isFirstColumnCell && !isEmpty && !isActionButtonClick) ||
+          isNavigating
+        ) {
           leaveTableFocus();
 
           navigate(indexIdentifierUrl(recordId));