fixed issue Display field name on Kanbans & Shows (#3427)

* fixed issue Display field name on Kanbans & Shows

* Fixes according to review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition.ts

@@ -7,15 +7,21 @@ import { FieldMetadataItem } from '../types/FieldMetadataItem';
 
 import { parseFieldType } from './parseFieldType';
 
+type FieldMetadataItemAsColumnDefinitionProps = {
+  position: number;
+  field: FieldMetadataItem;
+  objectMetadataItem: ObjectMetadataItem;
+  showLabel?: boolean;
+  labelWidth?: number;
+};
+
 export const formatFieldMetadataItemAsColumnDefinition = ({
   position,
   field,
   objectMetadataItem,
-}: {
-  position: number;
-  field: FieldMetadataItem;
-  objectMetadataItem: ObjectMetadataItem;
-}): ColumnDefinition<FieldMetadata> => {
+  showLabel,
+  labelWidth,
+}: FieldMetadataItemAsColumnDefinitionProps): ColumnDefinition<FieldMetadata> => {
   const relationObjectMetadataItem =
     field.toRelationMetadata?.fromObjectMetadata ||
     field.fromRelationMetadata?.toObjectMetadata;
@@ -28,6 +34,8 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
     position,
     fieldMetadataId: field.id,
     label: field.label,
+    showLabel,
+    labelWidth,
     size: 100,
     type: parseFieldType(field.type),
     metadata: {

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

@@ -268,6 +268,8 @@ export const RecordShowPage = () => {
                                 field: fieldMetadataItem,
                                 position: index,
                                 objectMetadataItem,
+                                showLabel: true,
+                                labelWidth: 90,
                               }),
                             useUpdateRecord: useUpdateOneObjectRecordMutation,
                             hotkeyScope: InlineCellHotkeyScope.InlineCell,

packages/twenty-front/src/modules/object-record/field/types/FieldDefinition.ts

@@ -10,6 +10,8 @@ export type FieldDefinitionRelationType =
 export type FieldDefinition<T extends FieldMetadata> = {
   fieldMetadataId: string;
   label: string;
+  showLabel?: boolean;
+  labelWidth?: number;
   iconName: string;
   type: FieldType;
   metadata: T;

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -74,6 +74,9 @@ export const RecordInlineCell = () => {
       IconLabel={
         fieldDefinition.iconName ? getIcon(fieldDefinition.iconName) : undefined
       }
+      label={fieldDefinition.label}
+      labelWidth={fieldDefinition.labelWidth}
+      showLabel={fieldDefinition.showLabel}
       editModeContent={
         <FieldInput
           onEnter={handleEnter}

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useInlineCell } from '../hooks/useInlineCell';
@@ -38,13 +39,10 @@ const StyledValueContainer = styled.div`
   display: flex;
 `;
 
-const StyledLabel = styled.div<
-  Pick<RecordInlineCellContainerProps, 'labelFixedWidth'>
->`
-  align-items: center;
-
-  width: ${({ labelFixedWidth }) =>
-    labelFixedWidth ? `${labelFixedWidth}px` : 'fit-content'};
+const StyledLabelContainer = styled.div<{ width?: number }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  width: ${({ width }) => width}px;
 `;
 
 const StyledEditButtonContainer = styled(motion.div)`
@@ -74,7 +72,8 @@ const StyledInlineCellBaseContainer = styled.div`
 type RecordInlineCellContainerProps = {
   IconLabel?: IconComponent;
   label?: string;
-  labelFixedWidth?: number;
+  labelWidth?: number;
+  showLabel?: boolean;
   buttonIcon?: IconComponent;
   editModeContent?: React.ReactNode;
   editModeContentOnly?: boolean;
@@ -88,7 +87,8 @@ type RecordInlineCellContainerProps = {
 export const RecordInlineCellContainer = ({
   IconLabel,
   label,
-  labelFixedWidth,
+  labelWidth,
+  showLabel,
   buttonIcon,
   editModeContent,
   displayModeContent,
@@ -133,8 +133,10 @@ export const RecordInlineCellContainer = ({
               <IconLabel stroke={theme.icon.stroke.sm} />
             </StyledIconContainer>
           )}
-          {label && (
-            <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
+          {showLabel && label && (
+            <StyledLabelContainer width={labelWidth}>
+              <EllipsisDisplay maxWidth={labelWidth}>{label}</EllipsisDisplay>
+            </StyledLabelContainer>
           )}
         </StyledLabelAndIconContainer>
       )}
@@ -148,6 +150,7 @@ export const RecordInlineCellContainer = ({
               isDisplayModeContentEmpty={isDisplayModeContentEmpty}
               isDisplayModeFixHeight={isDisplayModeFixHeight}
               isHovered={isHovered}
+              emptyPlaceholder={showLabel ? 'Empty' : label}
             >
               {editModeContent}
             </RecordInlineCellDisplayMode>
@@ -159,6 +162,7 @@ export const RecordInlineCellContainer = ({
               isDisplayModeContentEmpty={isDisplayModeContentEmpty}
               isDisplayModeFixHeight={isDisplayModeFixHeight}
               isHovered={isHovered}
+              emptyPlaceholder={showLabel ? 'Empty' : label}
             >
               {displayModeContent}
             </RecordInlineCellDisplayMode>

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -55,6 +55,7 @@ type RecordInlineCellDisplayModeProps = {
   disableHoverEffect?: boolean;
   isDisplayModeFixHeight?: boolean;
   isHovered?: boolean;
+  emptyPlaceholder?: string;
 };
 
 export const RecordInlineCellDisplayMode = ({
@@ -62,6 +63,7 @@ export const RecordInlineCellDisplayMode = ({
   isDisplayModeContentEmpty,
   disableHoverEffect,
   isDisplayModeFixHeight,
+  emptyPlaceholder = 'Empty',
   isHovered,
 }: React.PropsWithChildren<RecordInlineCellDisplayModeProps>) => (
   <StyledRecordInlineCellNormalModeOuterContainer
@@ -72,7 +74,7 @@ export const RecordInlineCellDisplayMode = ({
   >
     <StyledRecordInlineCellNormalModeInnerContainer>
       {isDisplayModeContentEmpty || !children ? (
-        <StyledEmptyField>{'Empty'}</StyledEmptyField>
+        <StyledEmptyField>{emptyPlaceholder}</StyledEmptyField>
       ) : (
         children
       )}