Fix Field widget glitches (#16866)

## LinkedIn + Boolean bugs


https://github.com/user-attachments/assets/6520ed94-5f60-404c-a43e-50b175510cab

## Hide Pen button for boolean fields (& rating)


https://github.com/user-attachments/assets/89a6ca35-8797-4621-adf4-59d2dc7d4625

Closes https://github.com/twentyhq/core-team-issues/issues/2024

packages/twenty-front/src/modules/object-record/record-field/ui/hooks/useIsFieldInputOnly.ts

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
 
 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
-import { isFieldBoolean } from '@/object-record/record-field/ui/types/guards/isFieldBoolean';
-import { isFieldRating } from '@/object-record/record-field/ui/types/guards/isFieldRating';
+import { isFieldInputOnly } from '@/object-record/record-field/ui/types/guards/isFieldInputOnly';
 
 export const useIsFieldInputOnly = () => {
   const { fieldDefinition } = useContext(FieldContext);
 
-  return isFieldBoolean(fieldDefinition) || isFieldRating(fieldDefinition);
+  return isFieldInputOnly(fieldDefinition);
 };

packages/twenty-front/src/modules/object-record/record-field/ui/types/guards/isFieldInputOnly.ts

@@ -0,0 +1,10 @@
+import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
+import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
+import { isFieldBoolean } from '@/object-record/record-field/ui/types/guards/isFieldBoolean';
+import { isFieldRating } from '@/object-record/record-field/ui/types/guards/isFieldRating';
+
+export const isFieldInputOnly = (
+  fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type'>,
+): boolean => {
+  return isFieldBoolean(fieldDefinition) || isFieldRating(fieldDefinition);
+};

packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts

@@ -266,6 +266,30 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
           updatedAt: new Date().toISOString(),
           deletedAt: null,
         },
+        {
+          __typename: 'PageLayoutWidget',
+          id: 'company-widget-visa',
+          pageLayoutTabId: 'company-tab-fields',
+          title: 'Visa Sponsorship',
+          type: WidgetType.FIELD,
+          objectMetadataId: null,
+          gridPosition: {
+            __typename: 'GridPosition',
+            row: 2,
+            column: 0,
+            rowSpan: 1,
+            columnSpan: 12,
+          },
+          configuration: {
+            __typename: 'FieldConfiguration',
+            configurationType: WidgetConfigurationType.FIELD,
+            fieldMetadataId: 'visaSponsorship',
+            layout: 'FIELD',
+          },
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+        },
       ],
     },
     {

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx

@@ -10,6 +10,7 @@ import {
   type GenericFieldContextType,
 } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
+import { isFieldInputOnly } from '@/object-record/record-field/ui/types/guards/isFieldInputOnly';
 import { isFieldMorphRelation } from '@/object-record/record-field/ui/types/guards/isFieldMorphRelation';
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { useRecordShowContainerActions } from '@/object-record/record-show/hooks/useRecordShowContainerActions';
@@ -19,11 +20,11 @@ import { FieldWidgetEditAction } from '@/page-layout/widgets/field/components/Fi
 import { FieldWidgetRelationEditAction } from '@/page-layout/widgets/field/components/FieldWidgetRelationEditAction';
 import { getFieldWidgetInstanceId } from '@/page-layout/widgets/field/utils/getFieldWidgetInstanceId';
 import { isFieldWidget } from '@/page-layout/widgets/field/utils/isFieldWidget';
+import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
-import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 
 export const WidgetActionFieldEdit = () => {
   const widget = useCurrentWidget();
@@ -89,6 +90,10 @@ export const WidgetActionFieldEdit = () => {
     );
   }
 
+  if (isFieldInputOnly(fieldDefinition)) {
+    return null;
+  }
+
   const recordFieldInputInstanceId = getRecordFieldInputInstanceId({
     recordId: targetRecord.id,
     fieldName: fieldMetadataItem.name,

packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetCellHoveredContent.tsx

@@ -5,6 +5,7 @@ import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/c
 import { RecordInlineCellDisplayMode } from '@/object-record/record-inline-cell/components/RecordInlineCellDisplayMode';
 import { RecordInlineCellHoveredPortalContent } from '@/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { FieldWidgetInputContextProvider } from '@/page-layout/widgets/field/components/FieldWidgetInputContextProvider';
 import { useOpenFieldWidgetFieldInputEditMode } from '@/page-layout/widgets/field/hooks/useOpenFieldWidgetFieldInputEditMode';
 import { useContext } from 'react';
 
@@ -42,7 +43,13 @@ export const FieldWidgetCellHoveredContent = ({
       onMouseLeave={onMouseLeave}
     >
       <RecordInlineCellDisplayMode isHovered={true} onClick={handleClick}>
-        {editModeContentOnly ? <FieldInput /> : <FieldDisplay />}
+        {editModeContentOnly ? (
+          <FieldWidgetInputContextProvider>
+            <FieldInput />
+          </FieldWidgetInputContextProvider>
+        ) : (
+          <FieldDisplay />
+        )}
       </RecordInlineCellDisplayMode>
     </RecordInlineCellHoveredPortalContent>
   );

packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetInlineCell.tsx

@@ -175,6 +175,8 @@ export const FieldWidgetInlineCell = ({
   const RecordInlineCellContextValue: RecordInlineCellContextProps = {
     readonly: isReadOnly,
     buttonIcon: buttonIcon,
+    label: fieldDefinition.label,
+    labelWidth: fieldDefinition.labelWidth,
     editModeContent: <FieldInput />,
     displayModeContent: <FieldDisplay />,
     isDisplayModeFixHeight: isDisplayModeFixHeight,