Remove reference to data-testid from styling (#10407)

Fixes https://github.com/twentyhq/core-team-issues/issues/204

---------

Co-authored-by: ad-elias <elias@autodiligence.com>

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

@@ -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,
@@ -76,6 +78,7 @@ 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,4 +1,5 @@
 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';
@@ -7,6 +8,8 @@ export const ChipFieldDisplay = () => {
   const { recordValue, objectNameSingular, labelIdentifierLink } =
     useChipFieldDisplay();
 
+  const isChipFieldDisplayLabelHidden = useIsChipFieldDisplayLabelHidden();
+
   if (!isDefined(recordValue)) {
     return null;
   }
@@ -17,6 +20,7 @@ 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,6 +5,7 @@ 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';
@@ -22,18 +23,25 @@ const meta: Meta = {
       )!;
 
       return (
-        <RecordIndexContextProvider
+        <RecordTableComponentInstanceContext.Provider
           value={{
-            indexIdentifierUrl: () => '',
+            instanceId,
-            onIndexRecordsLoaded: () => {},
+            onColumnsChange: () => {},
-            objectNamePlural: CoreObjectNamePlural.Company,
-            objectNameSingular: CoreObjectNameSingular.Company,
-            objectMetadataItem: companyObjectMetadataItem,
-            recordIndexId: instanceId,
           }}
         >
-          <Story />
+          <RecordIndexContextProvider
-        </RecordIndexContextProvider>
+            value={{
+              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

@@ -0,0 +1,22 @@
+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,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;

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 } 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;
 

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

@@ -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

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

@@ -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>
   );

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

@@ -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}