Revert "Remove reference to data-testid from styling" (#10635)

Reverts twentyhq/twenty#10407

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

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

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

@@ -1,5 +1,4 @@
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { useIsChipFieldDisplayLabelHidden } from '@/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden';
 import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
 import { isDefined } from 'twenty-shared';
 import { ChipSize } from 'twenty-ui';
@@ -8,8 +7,6 @@ export const ChipFieldDisplay = () => {
   const { recordValue, objectNameSingular, labelIdentifierLink } =
     useChipFieldDisplay();
 
-  const isChipFieldDisplayLabelHidden = useIsChipFieldDisplayLabelHidden();
-
   if (!isDefined(recordValue)) {
     return null;
   }
@@ -20,7 +17,6 @@ export const ChipFieldDisplay = () => {
       record={recordValue}
       size={ChipSize.Small}
       to={labelIdentifierLink}
-      isLabelHidden={isChipFieldDisplayLabelHidden}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx

@@ -5,7 +5,6 @@ import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlur
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ChipFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ChipFieldDisplay';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
-import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
 import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -23,25 +22,18 @@ const meta: Meta = {
       )!;
 
       return (
-        <RecordTableComponentInstanceContext.Provider
+        <RecordIndexContextProvider
           value={{
-            instanceId,
+            indexIdentifierUrl: () => '',
-            onColumnsChange: () => {},
+            onIndexRecordsLoaded: () => {},
+            objectNamePlural: CoreObjectNamePlural.Company,
+            objectNameSingular: CoreObjectNameSingular.Company,
+            objectMetadataItem: companyObjectMetadataItem,
+            recordIndexId: instanceId,
           }}
         >
-          <RecordIndexContextProvider
+          <Story />
-            value={{
+        </RecordIndexContextProvider>
-              indexIdentifierUrl: () => '',
-              onIndexRecordsLoaded: () => {},
-              objectNamePlural: CoreObjectNamePlural.Company,
-              objectNameSingular: CoreObjectNameSingular.Company,
-              objectMetadataItem: companyObjectMetadataItem,
-              recordIndexId: instanceId,
-            }}
-          >
-            <Story />
-          </RecordIndexContextProvider>
-        </RecordTableComponentInstanceContext.Provider>
       );
     },
     MemoryRouterDecorator,

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts

@@ -1,22 +0,0 @@
-import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
-import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useContext } from 'react';
-import { useIsMobile } from 'twenty-ui';
-
-export const useIsChipFieldDisplayLabelHidden = () => {
-  const isMobile = useIsMobile();
-
-  const isRecordTableScrolledLeft = useRecoilComponentValueV2(
-    isRecordTableScrolledLeftComponentState,
-  );
-
-  const { columnDefinition } = useContext(RecordTableCellContext);
-
-  const isLabelIdentifierInRecordTable = columnDefinition?.isLabelIdentifier;
-
-  const isLabelHidden =
-    isMobile && !isRecordTableScrolledLeft && isLabelIdentifierInRecordTable;
-
-  return isLabelHidden;
-};

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

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledTbody = styled.tbody`
   &.first-columns-sticky {
@@ -21,6 +22,18 @@ 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;

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

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

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

@@ -8,7 +8,6 @@ export type LinkAvatarChipProps = Omit<AvatarChipsCommonProps, 'clickable'> & {
   to: string;
   onClick?: LinkChipProps['onClick'];
   variant?: AvatarChipVariant;
-  isLabelHidden?: boolean;
 };
 
 export const LinkAvatarChip = ({
@@ -25,13 +24,11 @@ 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

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

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

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

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