Issue6335: RecordInlineCell tree refactor with RecordInlineCellContext (#6537)

Fixes [#6335](https://github.com/twentyhq/twenty/issues/6335)

This pull request is for issue
[#6335](https://github.com/twentyhq/twenty/issues/6335): Refactor
RecordInlineCell tree with a Context to avoid props drilling. For the
refactoring, this PR made changes as below:

- Created new script RecordInlineCellContext.tsx: Defining a context to
pass in useContext()
- Updated RecordInlineCell.tsx: Passing the necessary props as context
values, wrapping with RecordInlineCellContext.Provider
- Updated RecordInlineCellContainer.tsx: Passing the props to
RecordInlineContainer as RecordInlineCellContext
- Updated RecordInlineCellDisplayMode.tsx: retrieves values from
useRecordInlineCellContext instead of directly assigning them
- RecordInlineCellValue.tsx: Removed values passed through
<RecordInlineCellDisplayMode> as they are now retrieved through
useRecordInlineCellContext + Removed the null check for
RecordInlineCellContextProps.

Using RecordInlineCellContext, I believe the context goes to the top of
the hierarchy and passed to the required layers without going through
several layers. However, please let me know if I understood the issue
incorrectly or it is not solved properly.

Thank you in advance for your review!

---------

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

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -14,6 +14,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
 import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
 import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
+import { RecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
@@ -65,30 +66,36 @@ export const ActivityTargetsInlineCell = ({
       <FieldFocusContextProvider>
         {ActivityTargetsContextProvider && (
           <ActivityTargetsContextProvider>
-            <RecordInlineCellContainer
+            <RecordInlineCellContext.Provider
-              buttonIcon={IconPencil}
+              value={{
-              customEditHotkeyScope={{
+                buttonIcon: IconPencil,
-                scope: ActivityEditorHotkeyScope.ActivityTargets,
+                customEditHotkeyScope: {
+                  scope: ActivityEditorHotkeyScope.ActivityTargets,
+                },
+                IconLabel: showLabel ? IconArrowUpRight : undefined,
+                showLabel: showLabel,
+                readonly: readonly,
+                labelWidth: fieldDefinition?.labelWidth,
+                editModeContent: (
+                  <ActivityTargetInlineCellEditMode
+                    activity={activity}
+                    activityTargetWithTargetRecords={
+                      activityTargetObjectRecords
+                    }
+                    activityObjectNameSingular={activityObjectNameSingular}
+                  />
+                ),
+                label: 'Relations',
+                displayModeContent: (
+                  <ActivityTargetChips
+                    activityTargetObjectRecords={activityTargetObjectRecords}
+                    maxWidth={maxWidth}
+                  />
+                ),
               }}
-              IconLabel={showLabel ? IconArrowUpRight : undefined}
+            >
-              showLabel={showLabel}
+              <RecordInlineCellContainer />
-              readonly={readonly}
+            </RecordInlineCellContext.Provider>
-              labelWidth={fieldDefinition?.labelWidth}
-              editModeContent={
-                <ActivityTargetInlineCellEditMode
-                  activity={activity}
-                  activityTargetWithTargetRecords={activityTargetObjectRecords}
-                  activityObjectNameSingular={activityObjectNameSingular}
-                />
-              }
-              label="Relations"
-              displayModeContent={
-                <ActivityTargetChips
-                  activityTargetObjectRecords={activityTargetObjectRecords}
-                  maxWidth={maxWidth}
-                />
-              }
-            />
           </ActivityTargetsContextProvider>
         )}
       </FieldFocusContextProvider>

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

@@ -16,6 +16,10 @@ import { useInlineCell } from '../hooks/useInlineCell';
 import { useIsFieldReadOnly } from '@/object-record/record-field/hooks/useIsFieldReadOnly';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { RecordInlineCellContainer } from './RecordInlineCellContainer';
+import {
+  RecordInlineCellContext,
+  RecordInlineCellContextProps,
+} from './RecordInlineCellContext';
 
 type RecordInlineCellProps = {
   readonly?: boolean;
@@ -23,7 +27,6 @@ type RecordInlineCellProps = {
   isCentered?: boolean;
 };
 
-// TODO: refactor props drilling with a RecordInlineCellContext
 export const RecordInlineCell = ({
   readonly,
   loading,
@@ -75,48 +78,46 @@ export const RecordInlineCell = ({
 
   const { getIcon } = useIcons();
 
+  const RecordInlineCellContextValue: RecordInlineCellContextProps = {
+    readonly: cellIsReadOnly,
+    buttonIcon: buttonIcon,
+    customEditHotkeyScope: isFieldRelation(fieldDefinition)
+      ? { scope: RelationPickerHotkeyScope.RelationPicker }
+      : undefined,
+    IconLabel: fieldDefinition.iconName
+      ? getIcon(fieldDefinition.iconName)
+      : undefined,
+    label: fieldDefinition.label,
+    labelWidth: fieldDefinition.labelWidth,
+    showLabel: fieldDefinition.showLabel,
+    isCentered: isCentered,
+    editModeContent: (
+      <FieldInput
+        recordFieldInputdId={getRecordFieldInputId(
+          recordId,
+          fieldDefinition?.metadata?.fieldName,
+        )}
+        onEnter={handleEnter}
+        onCancel={handleCancel}
+        onEscape={handleEscape}
+        onSubmit={handleSubmit}
+        onTab={handleTab}
+        onShiftTab={handleShiftTab}
+        onClickOutside={handleClickOutside}
+        isReadOnly={cellIsReadOnly}
+      />
+    ),
+    displayModeContent: <FieldDisplay />,
+    isDisplayModeFixHeight: undefined,
+    editModeContentOnly: isFieldInputOnly,
+    loading: loading,
+  };
+
   return (
     <FieldFocusContextProvider>
-      <RecordInlineCellContainer
+      <RecordInlineCellContext.Provider value={RecordInlineCellContextValue}>
-        readonly={cellIsReadOnly}
+        <RecordInlineCellContainer />
-        buttonIcon={buttonIcon}
+      </RecordInlineCellContext.Provider>
-        customEditHotkeyScope={
-          isFieldRelation(fieldDefinition)
-            ? {
-                scope: RelationPickerHotkeyScope.RelationPicker,
-              }
-            : undefined
-        }
-        IconLabel={
-          fieldDefinition.iconName
-            ? getIcon(fieldDefinition.iconName)
-            : undefined
-        }
-        label={fieldDefinition.label}
-        labelWidth={fieldDefinition.labelWidth}
-        showLabel={fieldDefinition.showLabel}
-        isCentered={isCentered}
-        editModeContent={
-          <FieldInput
-            recordFieldInputdId={getRecordFieldInputId(
-              recordId,
-              fieldDefinition?.metadata?.fieldName,
-            )}
-            onEnter={handleEnter}
-            onCancel={handleCancel}
-            onEscape={handleEscape}
-            onSubmit={handleSubmit}
-            onTab={handleTab}
-            onShiftTab={handleShiftTab}
-            onClickOutside={handleClickOutside}
-            isReadOnly={cellIsReadOnly}
-          />
-        }
-        displayModeContent={<FieldDisplay />}
-        isDisplayModeFixHeight
-        editModeContentOnly={isFieldInputOnly}
-        loading={loading}
-      />
     </FieldFocusContextProvider>
   );
 };

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

@@ -10,6 +10,8 @@ import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInput
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
+import { useRecordInlineCellContext } from './RecordInlineCellContext';
+
 const StyledIconContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -78,23 +80,10 @@ export type RecordInlineCellContainerProps = {
   isCentered?: boolean;
 };
 
-// TODO: refactor props drilling with a RecordInlineCellContext
+export const RecordInlineCellContainer = () => {
-export const RecordInlineCellContainer = ({
+  const { readonly, IconLabel, label, labelWidth, showLabel } =
-  readonly,
+    useRecordInlineCellContext();
-  IconLabel,
+
-  label,
-  labelWidth,
-  showLabel,
-  buttonIcon,
-  editModeContent,
-  displayModeContent,
-  customEditHotkeyScope,
-  editModeContentOnly,
-  isDisplayModeFixHeight,
-  disableHoverEffect,
-  loading = false,
-  isCentered,
-}: RecordInlineCellContainerProps) => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
   const { setIsFocused } = useFieldFocus();
@@ -149,22 +138,7 @@ export const RecordInlineCellContainer = ({
         </StyledLabelAndIconContainer>
       )}
       <StyledValueContainer>
-        <RecordInlineCellValue
+        <RecordInlineCellValue />
-          {...{
-            displayModeContent,
-            customEditHotkeyScope,
-            disableHoverEffect,
-            editModeContent,
-            editModeContentOnly,
-            isDisplayModeFixHeight,
-            buttonIcon,
-            label,
-            loading,
-            readonly,
-            showLabel,
-            isCentered,
-          }}
-        />
       </StyledValueContainer>
     </StyledInlineCellBaseContainer>
   );

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

@@ -0,0 +1,47 @@
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { createContext, ReactElement, useContext } from 'react';
+import { IconComponent } from 'twenty-ui';
+
+export type RecordInlineCellContextProps = {
+  readonly?: boolean;
+  IconLabel?: IconComponent;
+  label?: string;
+  labelWidth?: number;
+  showLabel?: boolean;
+  buttonIcon?: IconComponent;
+  editModeContent?: ReactElement;
+  editModeContentOnly?: boolean;
+  displayModeContent?: ReactElement;
+  customEditHotkeyScope?: HotkeyScope;
+  isDisplayModeFixHeight?: boolean;
+  disableHoverEffect?: boolean;
+  loading?: boolean;
+  isCentered?: boolean;
+};
+
+const defaultRecordInlineCellContextProp: RecordInlineCellContextProps = {
+  readonly: false,
+  IconLabel: undefined,
+  label: '',
+  labelWidth: 0,
+  showLabel: false,
+  buttonIcon: undefined,
+  editModeContent: undefined,
+  editModeContentOnly: false,
+  displayModeContent: undefined,
+  customEditHotkeyScope: undefined,
+  isDisplayModeFixHeight: false,
+  disableHoverEffect: false,
+  loading: false,
+  isCentered: false,
+};
+
+export const RecordInlineCellContext =
+  createContext<RecordInlineCellContextProps>(
+    defaultRecordInlineCellContextProp,
+  );
+
+export const useRecordInlineCellContext = (): RecordInlineCellContextProps => {
+  const context = useContext(RecordInlineCellContext);
+  return context;
+};

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

@@ -4,14 +4,17 @@ import styled from '@emotion/styled';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
 import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
-import { RecordInlineCellContainerProps } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
+import {
+  RecordInlineCellContextProps,
+  useRecordInlineCellContext,
+} from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { RecordInlineCellButton } from '@/object-record/record-inline-cell/components/RecordInlineCellEditButton';
 
 const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
   Pick<
-    RecordInlineCellDisplayModeProps,
+    RecordInlineCellContextProps,
-    'disableHoverEffect' | 'isDisplayModeFixHeight' | 'isHovered'
+    'isDisplayModeFixHeight' | 'disableHoverEffect'
-  >
+  > & { isHovered?: boolean }
 >`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -53,23 +56,19 @@ const StyledEmptyField = styled.div`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
-type RecordInlineCellDisplayModeProps = {
-  disableHoverEffect?: boolean;
-  isDisplayModeFixHeight?: boolean;
-  isHovered?: boolean;
-  emptyPlaceholder?: string;
-} & Pick<RecordInlineCellContainerProps, 'buttonIcon' | 'editModeContentOnly'>;
-
 export const RecordInlineCellDisplayMode = ({
   children,
-  disableHoverEffect,
+}: React.PropsWithChildren<unknown>) => {
-  isDisplayModeFixHeight,
-  emptyPlaceholder = 'Empty',
-  isHovered,
-  buttonIcon,
-  editModeContentOnly,
-}: React.PropsWithChildren<RecordInlineCellDisplayModeProps>) => {
   const { isFocused } = useFieldFocus();
+
+  const {
+    editModeContentOnly,
+
+    showLabel,
+    label,
+    buttonIcon,
+  } = useRecordInlineCellContext();
+
   const isDisplayModeContentEmpty = useIsFieldEmpty();
   const showEditButton =
     buttonIcon &&
@@ -81,17 +80,15 @@ export const RecordInlineCellDisplayMode = ({
 
   const shouldDisplayEditModeOnFocus = isFocused && isFieldInputOnly;
 
+  const emptyPlaceHolder = showLabel ? 'Empty' : label;
+
   return (
     <>
-      <StyledRecordInlineCellNormalModeOuterContainer
+      <StyledRecordInlineCellNormalModeOuterContainer isHovered={isFocused}>
-        disableHoverEffect={disableHoverEffect}
-        isDisplayModeFixHeight={isDisplayModeFixHeight}
-        isHovered={isHovered}
-      >
         <StyledRecordInlineCellNormalModeInnerContainer>
           {(isDisplayModeContentEmpty && !shouldDisplayEditModeOnFocus) ||
           !children ? (
-            <StyledEmptyField>{emptyPlaceholder}</StyledEmptyField>
+            <StyledEmptyField>{emptyPlaceHolder}</StyledEmptyField>
           ) : (
             children
           )}

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

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
+import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
-import { RecordInlineCellContainerProps } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
 import { RecordInlineCellDisplayMode } from '@/object-record/record-inline-cell/components/RecordInlineCellDisplayMode';
 import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
 import { RecordInlineCellSkeletonLoader } from '@/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader';
@@ -29,37 +28,16 @@ const StyledClickableContainer = styled.div<{
     `};
 `;
 
-type RecordInlineCellValueProps = Pick<
+export const RecordInlineCellValue = () => {
-  RecordInlineCellContainerProps,
+  const {
-  | 'displayModeContent'
+    displayModeContent,
-  | 'customEditHotkeyScope'
+    customEditHotkeyScope,
-  | 'editModeContent'
+    editModeContent,
-  | 'editModeContentOnly'
+    editModeContentOnly,
-  | 'isDisplayModeFixHeight'
+    readonly,
-  | 'disableHoverEffect'
+    loading,
-  | 'readonly'
+    isCentered,
-  | 'buttonIcon'
+  } = useRecordInlineCellContext();
-  | 'loading'
-  | 'showLabel'
-  | 'label'
-  | 'isCentered'
->;
-
-export const RecordInlineCellValue = ({
-  displayModeContent,
-  customEditHotkeyScope,
-  disableHoverEffect,
-  editModeContent,
-  editModeContentOnly,
-  isDisplayModeFixHeight,
-  readonly,
-  buttonIcon,
-  loading,
-  showLabel,
-  label,
-  isCentered,
-}: RecordInlineCellValueProps) => {
-  const { isFocused } = useFieldFocus();
 
   const { isInlineCellInEditMode, openInlineCell } = useInlineCell();
 
@@ -80,12 +58,7 @@ export const RecordInlineCellValue = ({
       )}
       {editModeContentOnly ? (
         <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
-          <RecordInlineCellDisplayMode
+          <RecordInlineCellDisplayMode>
-            disableHoverEffect={disableHoverEffect}
-            isDisplayModeFixHeight={isDisplayModeFixHeight}
-            isHovered={isFocused}
-            emptyPlaceholder={showLabel ? 'Empty' : label}
-          >
             {editModeContent}
           </RecordInlineCellDisplayMode>
         </StyledClickableContainer>
@@ -95,14 +68,7 @@ export const RecordInlineCellValue = ({
           onClick={handleDisplayModeClick}
           isCentered={isCentered}
         >
-          <RecordInlineCellDisplayMode
+          <RecordInlineCellDisplayMode>
-            disableHoverEffect={disableHoverEffect}
-            isDisplayModeFixHeight={isDisplayModeFixHeight}
-            isHovered={isFocused}
-            emptyPlaceholder={showLabel ? 'Empty' : label}
-            buttonIcon={buttonIcon}
-            editModeContentOnly={editModeContentOnly}
-          >
             {displayModeContent}
           </RecordInlineCellDisplayMode>
         </StyledClickableContainer>