mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix mobile table styling outside record table (#10407) (#10663)

Browse Source 
Fix to issue #10407 now including a fix to `ChipFieldDisplay` [throwing
an error outside a record
table](https://twenty-v7.sentry.io/issues/6350031213/?project=4507072563183616&referrer=github-pr-bot).

This works now, but refactoring is needed before merging.

Fixes #10407

---------

Co-authored-by: ad-elias <elias@autodiligence.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
eliasylonen
2025-04-01 17:11:31 +02:00
committed by GitHub
parent 8385e2d08b
commit 51ea241a1c
12 changed files with 142 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -22,6 +22,7 @@ export type RecordChipProps = {
maxWidth?: number;
to?: string | undefined;
size?: ChipSize;
isLabelHidden?: boolean;
};
export const RecordChip = ({
@ -33,6 +34,7 @@ export const RecordChip = ({
to,
size,
forceDisableClick = false,
isLabelHidden = false,
}: RecordChipProps) => {
const { recordChipData } = useRecordChipData({
objectNameSingular,
@ -74,6 +76,7 @@ export const RecordChip = ({
maxWidth={maxWidth}
placeholderColorSeed={record.id}
name={recordChipData.name}
isLabelHidden={isLabelHidden}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
className={className}

3
packages/twenty-front/src/modules/object-record/record-field/components/FieldContextProvider.tsx
View File

@ -14,6 +14,7 @@ export const FieldContextProvider = ({
fieldMetadataName,
fieldPosition,
isLabelIdentifier = false,
isLabelHidden,
objectNameSingular,
objectRecordId,
customUseUpdateOneObjectHook,
@ -24,6 +25,7 @@ export const FieldContextProvider = ({
fieldMetadataName: string;
fieldPosition: number;
isLabelIdentifier?: boolean;
isLabelHidden?: boolean;
objectNameSingular: string;
objectRecordId: string;
customUseUpdateOneObjectHook?: RecordUpdateHook;
@ -63,6 +65,7 @@ export const FieldContextProvider = ({
value={{
recordId: objectRecordId,
isLabelIdentifier,
isLabelHidden,
fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
field: fieldMetadataItem,
showLabel: true,

1
packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
View File

@ -34,6 +34,7 @@ export type GenericFieldContextType = {
isDisplayModeFixHeight?: boolean;
onOpenEditMode?: () => void;
onCloseEditMode?: () => void;
isLabelHidden?: boolean;
};
export const FieldContext = createContext<GenericFieldContextType>(

9
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -4,8 +4,12 @@ import { ChipSize } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
export const ChipFieldDisplay = () => {
const { recordValue, objectNameSingular, labelIdentifierLink } =
useChipFieldDisplay();
const {
recordValue,
objectNameSingular,
labelIdentifierLink,
isLabelHidden,
} = useChipFieldDisplay();
if (!isDefined(recordValue)) {
return null;
@ -17,6 +21,7 @@ export const ChipFieldDisplay = () => {
record={recordValue}
size={ChipSize.Small}
to={labelIdentifierLink}
isLabelHidden={isLabelHidden}
/>
);
};

10
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
View File

@ -12,8 +12,13 @@ import { FieldContext } from '../../contexts/FieldContext';
import { isDefined } from 'twenty-shared/utils';
export const useChipFieldDisplay = () => {
const { recordId, fieldDefinition, isLabelIdentifier, labelIdentifierLink } =
useContext(FieldContext);
const {
recordId,
fieldDefinition,
isLabelIdentifier,
labelIdentifierLink,
isLabelHidden,
} = useContext(FieldContext);
const { chipGeneratorPerObjectPerField } = useContext(
PreComputedChipGeneratorsContext,
@ -42,5 +47,6 @@ export const useChipFieldDisplay = () => {
recordValue,
isLabelIdentifier,
labelIdentifierLink,
isLabelHidden,
};
};

13
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
View File

@ -1,5 +1,4 @@
import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledTbody = styled.tbody`
&.first-columns-sticky {
@ -22,18 +21,6 @@ const StyledTbody = styled.tbody`
z-index: 5;
transition: 0.3s ease;
@media (max-width: ${MOBILE_VIEWPORT}px) {
& [data-testid='editable-cell-display-mode'] {
[data-testid='tooltip'] {
display: none;
}
[data-testid='chip'] {
gap: 0;
}
}
}
&:not(.disable-shadow)::after {
content: '';
position: absolute;

95
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContext.tsx Normal file
View File

@ -0,0 +1,95 @@
import { ReactNode, useContext } from 'react';
import { useIsMobile } from 'twenty-ui';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { isRecordTableScrolledLeftComponentState } from '../../states/isRecordTableScrolledLeftComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
export const RecordTableCellFieldContext = ({
children,
}: {
children: ReactNode;
}) => {
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
const { columnDefinition } = useContext(RecordTableCellContext);
const { recordId } = useRecordTableRowContextOrThrow();
const updateRecord = useContext(RecordUpdateContext);
const isMobile = useIsMobile();
const isRecordTableScrolledLeft = useRecoilComponentValueV2(
isRecordTableScrolledLeftComponentState,
);
const isLabelHidden =
isMobile &&
columnDefinition?.isLabelIdentifier &&
!isRecordTableScrolledLeft;
const computedHotkeyScope = (
columnDefinition: ColumnDefinition<FieldMetadata>,
) => {
if (isFieldRelation(columnDefinition)) {
if (
columnDefinition.metadata.relationType ===
RelationDefinitionType.MANY_TO_ONE
) {
return SingleRecordPickerHotkeyScope.SingleRecordPicker;
}
if (
columnDefinition.metadata.relationType ===
RelationDefinitionType.ONE_TO_MANY
) {
return MultipleRecordPickerHotkeyScope.MultipleRecordPicker;
}
return SingleRecordPickerHotkeyScope.SingleRecordPicker;
}
if (isFieldSelect(columnDefinition)) {
return SelectFieldHotkeyScope.SelectField;
}
return TableHotkeyScope.CellEditMode;
};
const customHotkeyScope = computedHotkeyScope(columnDefinition);
return (
<FieldContext.Provider
value={{
recordId,
fieldDefinition: columnDefinition,
useUpdateRecord: () => [updateRecord, {}],
hotkeyScope: customHotkeyScope,
labelIdentifierLink: indexIdentifierUrl(recordId),
isLabelIdentifier: isLabelIdentifierField({
fieldMetadataItem: {
id: columnDefinition.fieldMetadataId,
name: columnDefinition.metadata.fieldName,
},
objectMetadataItem,
}),
displayedMaxRows: 1,
isLabelHidden,
}}
>
{children}
</FieldContext.Provider>
);
};

90
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
View File

@ -1,104 +1,32 @@
import { ReactNode, useContext } from 'react';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { RecordTableCellFieldContext } from './RecordTableCellFieldContext';
export const RecordTableCellFieldContextWrapper = ({
children,
}: {
children: ReactNode;
}) => {
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
const { columnDefinition } = useContext(RecordTableCellContext);
const { recordId } = useRecordTableRowContextOrThrow();
const updateRecord = useContext(RecordUpdateContext);
if (isUndefinedOrNull(columnDefinition)) {
return null;
}
// TODO: deprecate this and use useOpenFieldInput hooks to set the hotkey scope
const computedHotkeyScope = (
columnDefinition: ColumnDefinition<FieldMetadata>,
) => {
if (isFieldRelation(columnDefinition)) {
if (
columnDefinition.metadata.relationType ===
RelationDefinitionType.MANY_TO_ONE
) {
return SingleRecordPickerHotkeyScope.SingleRecordPicker;
}
if (
columnDefinition.metadata.relationType ===
RelationDefinitionType.ONE_TO_MANY
) {
return MultipleRecordPickerHotkeyScope.MultipleRecordPicker;
}
return SingleRecordPickerHotkeyScope.SingleRecordPicker;
}
if (isFieldSelect(columnDefinition)) {
return SelectFieldHotkeyScope.SelectField;
}
return TableHotkeyScope.CellEditMode;
};
const customHotkeyScope = computedHotkeyScope(columnDefinition);
const instanceId = getRecordFieldInputId(
recordId,
columnDefinition.metadata.fieldName,
'record-table-cell',
);
return (
<FieldContext.Provider
value={{
recordId,
fieldDefinition: columnDefinition,
useUpdateRecord: () => [updateRecord, {}],
hotkeyScope: customHotkeyScope,
labelIdentifierLink: indexIdentifierUrl(recordId),
isLabelIdentifier: isLabelIdentifierField({
fieldMetadataItem: {
id: columnDefinition.fieldMetadataId,
name: columnDefinition.metadata.fieldName,
},
objectMetadataItem,
}),
displayedMaxRows: 1,
}}
>
<RecordFieldComponentInstanceContext.Provider
value={{
instanceId: getRecordFieldInputId(
recordId,
columnDefinition.metadata.fieldName,
'record-table-cell',
),
}}
>
{children}
</RecordFieldComponentInstanceContext.Provider>
</FieldContext.Provider>
<RecordFieldComponentInstanceContext.Provider value={{ instanceId }}>
<RecordTableCellFieldContext>{children}</RecordTableCellFieldContext>
</RecordFieldComponentInstanceContext.Provider>
);
};

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

@ -1,6 +1,6 @@
import { ReactElement, useContext, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { IconArrowUpRight } from 'twenty-ui';
import { IconArrowUpRight, useIsMobile } from 'twenty-ui';
import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
@ -80,8 +80,12 @@ export const RecordTableCellSoftFocusMode = ({
? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now
: customButtonIcon;
const isMobile = useIsMobile();
const showButton =
isDefined(buttonIcon) && !editModeContentOnly && !isFieldReadOnly;
isDefined(buttonIcon) &&
!editModeContentOnly &&
!isFieldReadOnly &&
!(isMobile && isFirstColumn);
const dontShowContent = isEmpty && isFieldReadOnly;

3
packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx
View File

@ -8,6 +8,7 @@ export type LinkAvatarChipProps = Omit<AvatarChipsCommonProps, 'clickable'> & {
to: string;
onClick?: LinkChipProps['onClick'];
variant?: AvatarChipVariant;
isLabelHidden?: boolean;
};
export const LinkAvatarChip = ({
@ -24,11 +25,13 @@ export const LinkAvatarChip = ({
placeholderColorSeed,
size,
variant,
isLabelHidden,
}: LinkAvatarChipProps) => (
<LinkChip
to={to}
onClick={onClick}
label={name}
isLabelHidden={isLabelHidden}
variant={
//Regular but Highlighted -> missleading
variant === AvatarChipVariant.Regular

6
packages/twenty-ui/src/display/chip/components/Chip.tsx
View File

@ -26,6 +26,7 @@ export type ChipProps = {
disabled?: boolean;
clickable?: boolean;
label: string;
isLabelHidden?: boolean;
maxWidth?: number;
variant?: ChipVariant;
accent?: ChipAccent;
@ -124,6 +125,7 @@ const StyledContainer = withTheme(styled.div<
export const Chip = ({
size = ChipSize.Small,
label,
isLabelHidden = false,
disabled = false,
clickable = true,
variant = ChipVariant.Regular,
@ -145,7 +147,9 @@ export const Chip = ({
maxWidth={maxWidth}
>
{leftComponent?.()}
<OverflowingTextWithTooltip size={size} text={label} />
{!isLabelHidden && (
<OverflowingTextWithTooltip size={size} text={label} />
)}
{rightComponent?.()}
</StyledContainer>
);

2
packages/twenty-ui/src/display/chip/components/LinkChip.tsx
View File

@ -27,6 +27,7 @@ export const LinkChip = ({
to,
size = ChipSize.Small,
label,
isLabelHidden = false,
variant = ChipVariant.Regular,
leftComponent = null,
rightComponent = null,
@ -40,6 +41,7 @@ export const LinkChip = ({
<Chip
size={size}
label={label}
isLabelHidden={isLabelHidden}
clickable={true}
variant={variant}
leftComponent={leftComponent}