Playwright stage 1 - add data-testid attribute

packages/twenty-front/src/modules/action-menu/components/ActionMenuBarEntry.tsx

@@ -41,6 +41,10 @@ export const ActionMenuBarEntry = ({ entry }: ActionMenuBarEntryProps) => {
     <StyledButton
       accent={entry.accent ?? 'default'}
       onClick={() => entry.onClick?.()}
+      data-testid={entry.label
+        .toLowerCase()
+        .replace(/ /g, '-')
+        .concat('-button')}
     >
       {entry.Icon && <entry.Icon size={theme.icon.size.md} />}
       <StyledButtonLabel>{entry.label}</StyledButtonLabel>

packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx

@@ -75,6 +75,7 @@ export const CalendarDayCardContent = ({
         delay: Math.max(0, dayEndsIn),
         duration: theme.animation.duration.fast,
       }}
+      data-testid="calendar-row"
     >
       <StyledDayContainer>
         <StyledWeekDay>{weekDayLabel}</StyledWeekDay>

packages/twenty-front/src/modules/activities/components/ActivityRow.tsx

@@ -17,9 +17,11 @@ export const ActivityRow = ({
   children,
   onClick,
   disabled,
+  testId,
 }: React.PropsWithChildren<{
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   disabled?: boolean;
+  testId?: string;
 }>) => {
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (disabled !== true) {
@@ -28,7 +30,11 @@ export const ActivityRow = ({
   };
 
   return (
-    <StyledRowContent onClick={handleClick} clickable={disabled !== true}>
+    <StyledRowContent
+      onClick={handleClick}
+      clickable={disabled !== true}
+      data-testid={testId}
+    >
       {children}
     </StyledRowContent>
   );

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -128,6 +128,7 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
     <ActivityRow
       onClick={(event) => handleThreadClick(event)}
       disabled={isDisabled}
+      testId="email-row"
     >
       <StyledHeading unread={!thread.read}>
         <StyledParticipantsContainer>

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -48,7 +48,11 @@ export const AttachmentDropdown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          testId="attachment-options-dropdown"
+        />
       }
       dropdownComponents={
         <DropdownMenu width="160px">

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx

@@ -125,7 +125,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
 
   return (
     <FieldContext.Provider value={fieldContext as GenericFieldContextType}>
-      <ActivityRow disabled>
+      <ActivityRow disabled testId="attachment-row">
         <StyledLeftContent>
           <AttachmentIcon attachmentType={attachment.type} />
           {isEditing ? (
@@ -135,6 +135,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
               onBlur={handleOnBlur}
               autoFocus
               onKeyDown={handleOnKeyDown}
+              dataTestId="file-name-input"
             />
           ) : (
             <StyledLinkContainer>

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -96,6 +96,7 @@ export const Attachments = ({
               title="Add file"
               variant="secondary"
               onClick={handleUploadFileClick}
+              dataTestId="add-file-button"
             />
           </AnimatedPlaceholderEmptyContainer>
         )}
@@ -121,6 +122,7 @@ export const Attachments = ({
             variant="secondary"
             title="Add file"
             onClick={handleUploadFileClick}
+            dataTestId="add-file-button"
           ></Button>
         }
       />

packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx

@@ -81,7 +81,7 @@ export const NoteCard = ({
   });
 
   return (
-    <StyledCard isSingleNote={isSingleNote}>
+    <StyledCard isSingleNote={isSingleNote} data-testid="note-card">
       <StyledCardDetailsContainer
         onClick={() => openActivityRightDrawer(note.id)}
       >

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -66,6 +66,7 @@ export const Notes = ({
               targetableObjects: [targetableObject],
             })
           }
+          dataTestId="add-note-button"
         />
       </AnimatedPlaceholderEmptyContainer>
     );

packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -30,6 +30,7 @@ export const AddTaskButton = ({
           targetableObjects: activityTargetableObjects,
         })
       }
+      data-testid="add-task-button"
     ></Button>
   );
 };

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -83,6 +83,7 @@ export const TaskGroups = ({ targetableObjects }: TaskGroupsProps) => {
               targetableObjects: targetableObjects ?? [],
             })
           }
+          dataTestId="add-task-button"
         />
       </AnimatedPlaceholderEmptyContainer>
     );

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -93,6 +93,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
       onClick={() => {
         openActivityRightDrawer(task.id);
       }}
+      testId="task-row"
     >
       <StyledLeftSideContainer>
         <StyledCheckboxContainer

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

@@ -61,13 +61,8 @@ export const RecordInlineCellDisplayMode = ({
 }: React.PropsWithChildren<unknown>) => {
   const { isFocused } = useFieldFocus();
 
-  const {
-    editModeContentOnly,
-
-    showLabel,
-    label,
-    buttonIcon,
-  } = useRecordInlineCellContext();
+  const { editModeContentOnly, showLabel, label, buttonIcon } =
+    useRecordInlineCellContext();
 
   const isDisplayModeContentEmpty = useIsFieldEmpty();
   const showEditButton =

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -165,6 +165,10 @@ export const RecordDetailRelationSection = ({
   return (
     <RecordDetailSection>
       <RecordDetailSectionHeader
+        testId={fieldDefinition.label
+          .toLowerCase()
+          .replace(' ', '-')
+          .concat('-header')}
         title={fieldDefinition.label}
         link={
           isToManyObjects
@@ -191,6 +195,10 @@ export const RecordDetailRelationSection = ({
                     className="displayOnHover"
                     Icon={isToOneObject ? IconPencil : IconPlus}
                     accent="tertiary"
+                    testId={fieldDefinition.label
+                      .toLowerCase()
+                      .replace(' ', '-')
+                      .concat('-dropdown')}
                   />
                 }
                 dropdownComponents={

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx

@@ -39,6 +39,7 @@ type RecordDetailSectionHeaderProps = {
   rightAdornment?: React.ReactNode;
   hideRightAdornmentOnMouseLeave?: boolean;
   areRecordsAvailable?: boolean;
+  testId?: string;
 };
 
 export const RecordDetailSectionHeader = ({
@@ -47,6 +48,7 @@ export const RecordDetailSectionHeader = ({
   rightAdornment,
   hideRightAdornmentOnMouseLeave = true,
   areRecordsAvailable = false,
+  testId,
 }: RecordDetailSectionHeaderProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -55,6 +57,7 @@ export const RecordDetailSectionHeader = ({
       areRecordsAvailable={areRecordsAvailable}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      data-testid={testId}
     >
       <StyledTitle>
         <StyledTitleLabel>{title}</StyledTitleLabel>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx

@@ -99,7 +99,11 @@ export const SettingsAccountsBlocklistInput = ({
             )}
           />
         </StyledLinkContainer>
-        <Button title="Add to blocklist" type="submit" />
+        <Button
+          title="Add to blocklist"
+          type="submit"
+          dataTestId="add-blocklist-button"
+        />
       </StyledContainer>
     </form>
   );

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -70,6 +70,7 @@ export const SettingsAccountsCalendarChannelDetails = ({
               title: 'Auto-creation',
               description: 'Automatically create contacts for people.',
               onToggle: handleContactAutoCreationToggle,
+              testId: 'auto-creation-toggle',
             },
           ]}
         />

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

@@ -25,7 +25,7 @@ export const SettingsAccountsConnectedAccountsRowRightContainer = ({
   );
 
   return (
-    <StyledRowRightContainer>
+    <StyledRowRightContainer data-testid={account.handle}>
       {status === SyncStatus.FAILED && (
         <Status color="red" text="Sync failed" weight="medium" />
       )}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -107,12 +107,14 @@ export const SettingsAccountsMessageChannelDetails = ({
                 'Don’t create contacts from/to Gmail, Outlook emails',
               value: !!messageChannel.excludeNonProfessionalEmails,
               onToggle: handleIsNonProfessionalEmailExcludedToggle,
+              testId: 'exclude-non-professional-emails-toggle',
             },
             {
               title: 'Exclude group emails',
               description: 'Don’t sync emails from team@ support@ noreply@...',
               value: !!messageChannel.excludeGroupEmails,
               onToggle: handleIsGroupEmailExcludedToggle,
+              testId: 'exclude-group-emails-toggle',
             },
           ]}
         />

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -9,6 +9,7 @@ type Parameter = {
   title: string;
   description: string;
   onToggle: (value: boolean) => void;
+  testId: string;
 };
 
 type SettingsAccountsToggleSettingCardProps = {
@@ -55,7 +56,11 @@ export const SettingsAccountsToggleSettingCard = ({
           <StyledTitle>{parameter.title}</StyledTitle>
           <StyledDescription>{parameter.description}</StyledDescription>
         </div>
-        <StyledToggle value={parameter.value} onChange={parameter.onToggle} />
+        <StyledToggle
+          value={parameter.value}
+          onChange={parameter.onToggle}
+          testId={parameter.testId}
+        />
       </StyledCardContent>
     ))}
   </Card>

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -15,6 +15,7 @@ export const CancelButton = ({
       accent="tertiary"
       onClick={onCancel}
       disabled={disabled}
+      testId="cancel-button"
     />
   );
 };

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -17,6 +17,7 @@ export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
       disabled={disabled}
       onClick={onSave}
       Icon={IconDeviceFloppy}
+      dataTestId="save-button"
     />
   );
 };

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -54,6 +54,7 @@ export const SettingsDataModelFieldBooleanForm = ({
         defaultValue={initialDefaultValue}
         render={({ field: { onChange, value } }) => (
           <Select
+            dataTestId="boolean-default-select"
             className={className}
             fullWidth
             // TODO: temporary fix - disabling edition because after editing the defaultValue,

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx

@@ -40,6 +40,7 @@ export const SettingsDataModelFieldDescriptionForm = ({
           value={value ?? undefined}
           onChange={onChange}
           disabled={disabled}
+          testId="field-description"
         />
       )}
     />

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx

@@ -76,6 +76,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
             disabled={disabled}
             maxLength={maxLength}
             fullWidth
+            dataTestId="field-name-input"
           />
         )}
       />

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx

@@ -84,6 +84,7 @@ export const SettingsDataModelFieldToggle = ({
           value={value}
           onChange={onChange}
           toggleSize="small"
+          testId="relative-datetime-toggle"
         />
       </StyledGroup>
     </StyledContainer>

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx

@@ -108,6 +108,7 @@ export const SettingsObjectNewFieldSelector = ({
           placeholder="Search a type"
           value={searchQuery}
           onChange={setSearchQuery}
+          dataTestId="field-type-search-input"
         />
       </Section>
       <Controller
@@ -127,7 +128,10 @@ export const SettingsObjectNewFieldSelector = ({
                   {fieldTypeConfigs
                     .filter(([, config]) => config.category === category)
                     .map(([key, config]) => (
-                      <StyledCardContainer key={key}>
+                      <StyledCardContainer
+                        key={key}
+                        data-testid={key.toLowerCase()}
+                      >
                         <UndecoratedLink
                           to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
                           fullWidth

packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx

@@ -61,6 +61,7 @@ export const SettingsDataModelFieldCurrencyForm = ({
             value={value}
             options={OPTIONS}
             onChange={onChange}
+            dataTestId="currency-unit-select"
           />
         )}
       />

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput.tsx

@@ -146,19 +146,22 @@ export const SettingsDataModelFieldNumberDecimalsInput = ({
               onClick={handleDecrementCounter}
               Icon={IconMinus}
               disabled={disabled}
+              dataTestId="decrement-decimals-button"
             />
             <StyledTextInput
               name="decimals"
               fullWidth
               value={value.toString()}
               onChange={(value) => handleTextInputChange(value)}
               disabled={disabled}
+              dataTestId="decimals-number-input"
             />
             <StyledControlButton
               variant="secondary"
               onClick={handleIncrementCounter}
               Icon={IconPlus}
               disabled={disabled}
+              dataTestId="increment-decimals-button"
             />
           </StyledCounterControlsIcons>
         </StyledCounterInnerContainer>

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx

@@ -122,6 +122,7 @@ export const SettingsDataModelFieldRelationForm = ({
               value={value}
               options={RELATION_TYPE_OPTIONS}
               onChange={onChange}
+              dataTestId="relation-type-select"
             />
           )}
         />
@@ -144,6 +145,7 @@ export const SettingsDataModelFieldRelationForm = ({
                   Icon: getIcon(objectMetadataItem.icon),
                 }))}
               onChange={onChange}
+              dataTestId="object-destination-select"
             />
           )}
         />
@@ -178,6 +180,7 @@ export const SettingsDataModelFieldRelationForm = ({
               onChange={onChange}
               fullWidth
               maxLength={FIELD_NAME_MAXIMUM_LENGTH}
+              dataTestId="relation-name-input"
             />
           )}
         />

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx

@@ -339,6 +339,7 @@ export const SettingsDataModelFieldSelectForm = ({
                 title="Add option"
                 Icon={IconPlus}
                 onClick={handleAddOption}
+                testId="add-option-button"
               />
             </StyledFooter>
           </>