Fix issues with one to many activity targets

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

@@ -58,6 +58,11 @@ const StyledRightSideContainer = styled.div`
   max-width: 50%;
 `;
 
+const StyledActivityTargetsContainer = styled.div`
+  overflow: clip;
+  width: 100%;
+`;
+
 const StyledPlaceholder = styled.div`
   color: ${({ theme }) => theme.font.color.light};
 `;
@@ -125,22 +130,24 @@ export const TaskRow = ({ task }: { task: Task }) => {
           </StyledDueDate>
         )}
         {
-          <FieldContextProvider
-            objectNameSingular={CoreObjectNameSingular.Task}
-            objectRecordId={task.id}
-            fieldMetadataName="taskTargets"
-            fieldPosition={0}
-          >
-            <StopPropagationContainer>
-              <ActivityTargetsInlineCell
-                activityObjectNameSingular={CoreObjectNameSingular.Task}
-                activityRecordId={task.id}
-                showLabel={false}
-                maxWidth={200}
-                componentInstanceId={componentInstanceId}
-              />
-            </StopPropagationContainer>
-          </FieldContextProvider>
+          <StyledActivityTargetsContainer>
+            <FieldContextProvider
+              objectNameSingular={CoreObjectNameSingular.Task}
+              objectRecordId={task.id}
+              fieldMetadataName="taskTargets"
+              fieldPosition={0}
+            >
+              <StopPropagationContainer>
+                <ActivityTargetsInlineCell
+                  activityObjectNameSingular={CoreObjectNameSingular.Task}
+                  activityRecordId={task.id}
+                  showLabel={false}
+                  maxWidth={200}
+                  componentInstanceId={componentInstanceId}
+                />
+              </StopPropagationContainer>
+            </FieldContextProvider>
+          </StyledActivityTargetsContainer>
         }
       </StyledRightSideContainer>
     </ActivityRow>

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

@@ -74,15 +74,6 @@ export const RecordChip = ({
 
   // TODO temporary until we create a record show page for Workspaces members
 
-  const avatarChip = (
-    <AvatarChip
-      placeholder={recordChipData.name}
-      placeholderColorSeed={record.id}
-      avatarType={recordChipData.avatarType}
-      avatarUrl={recordChipData.avatarUrl ?? ''}
-    />
-  );
-
   if (
     forceDisableClick ||
     objectNameSingular === CoreObjectNameSingular.WorkspaceMember
@@ -94,7 +85,16 @@ export const RecordChip = ({
         maxWidth={maxWidth}
         className={className}
         variant={ChipVariant.Transparent}
-        leftComponent={isIconHidden ? null : avatarChip}
+        leftComponent={
+          isIconHidden ? null : (
+            <AvatarChip
+              placeholder={recordChipData.name}
+              placeholderColorSeed={record.id}
+              avatarType={recordChipData.avatarType}
+              avatarUrl={recordChipData.avatarUrl ?? ''}
+            />
+          )
+        }
       />
     );
   }
@@ -105,7 +105,16 @@ export const RecordChip = ({
       maxWidth={maxWidth}
       label={recordChipData.name}
       isLabelHidden={isLabelHidden}
-      leftComponent={isIconHidden ? null : avatarChip}
+      leftComponent={
+        isIconHidden ? null : (
+          <AvatarChip
+            placeholder={recordChipData.name}
+            placeholderColorSeed={record.id}
+            avatarType={recordChipData.avatarType}
+            avatarUrl={recordChipData.avatarUrl ?? ''}
+          />
+        )
+      }
       className={className}
       variant={
         variant ??

packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/generateActivityTargetGqlFields.ts

@@ -0,0 +1,68 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
+import { generateDepthRecordGqlFieldsFromFields } from '@/object-record/graphql/record-gql-fields/utils/generateDepthRecordGqlFieldsFromFields';
+import { isDefined } from 'twenty-shared/utils';
+
+export type GenerateDepthRecordGqlFields = {
+  objectMetadataItems: ObjectMetadataItem[];
+  activityObjectNameSingular:
+    | CoreObjectNameSingular.Note
+    | CoreObjectNameSingular.Task;
+  depth: 0 | 1;
+  shouldOnlyLoadActivityIdentifiers?: boolean;
+};
+
+export const generateActivityTargetGqlFields = ({
+  objectMetadataItems,
+  activityObjectNameSingular,
+  depth,
+  shouldOnlyLoadActivityIdentifiers = true,
+}: GenerateDepthRecordGqlFields) => {
+  const isNote = activityObjectNameSingular === CoreObjectNameSingular.Note;
+  const activityTargetNameSingular = isNote
+    ? CoreObjectNameSingular.NoteTarget
+    : CoreObjectNameSingular.TaskTarget;
+
+  const activityTargetObjectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) =>
+      objectMetadataItem.nameSingular === activityTargetNameSingular,
+  );
+
+  const activityObjectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) =>
+      objectMetadataItem.nameSingular === activityObjectNameSingular,
+  );
+
+  if (
+    !isDefined(activityTargetObjectMetadataItem) ||
+    !isDefined(activityObjectMetadataItem)
+  ) {
+    return {};
+  }
+
+  if (shouldOnlyLoadActivityIdentifiers) {
+    const activityLabelIdentifierFieldMetadataItem =
+      getLabelIdentifierFieldMetadataItem(activityObjectMetadataItem);
+
+    return {
+      id: true,
+      [activityObjectNameSingular]: {
+        id: true,
+        ...(isDefined(activityLabelIdentifierFieldMetadataItem)
+          ? { [activityLabelIdentifierFieldMetadataItem.name]: true }
+          : {}),
+      },
+    };
+  } else {
+    return {
+      ...generateDepthRecordGqlFieldsFromFields({
+        depth,
+        fields: activityTargetObjectMetadataItem.fields,
+        objectMetadataItems,
+        shouldOnlyLoadRelationIdentifiers: false,
+      }),
+      [activityObjectNameSingular]: true,
+    };
+  }
+};

packages/twenty-front/src/modules/object-record/hooks/__tests__/useRecordIndexTableQuery.test.tsx

@@ -59,61 +59,12 @@ const mocks: MockedResponse[] = [
                   edges {
                     node {
                       __typename
-                      company {
-                        __typename
-                        domainName {
-                          primaryLinkUrl
-                          primaryLinkLabel
-                          secondaryLinks
-                        }
-                        id
-                        name
-                      }
-                      companyId
-                      createdAt
-                      deletedAt
                       id
                       note {
                         __typename
                         id
                         title
                       }
-                      noteId
-                      opportunity {
-                        __typename
-                        id
-                        name
-                      }
-                      opportunityId
-                      person {
-                        __typename
-                        avatarUrl
-                        id
-                        name {
-                          firstName
-                          lastName
-                        }
-                      }
-                      personId
-                      pet {
-                        __typename
-                        id
-                        name
-                      }
-                      petId
-                      rocket {
-                        __typename
-                        id
-                        name
-                      }
-                      rocketId
-                      surveyResult {
-                        __typename
-                        id
-                        name
-                      }
-                      surveyResultId
-                      updatedAt
                     }
                   }
                 }
@@ -122,61 +73,12 @@ const mocks: MockedResponse[] = [
                   edges {
                     node {
                       __typename
-                      company {
-                        __typename
-                        domainName {
-                          primaryLinkUrl
-                          primaryLinkLabel
-                          secondaryLinks
-                        }
-                        id
-                        name
-                      }
-                      companyId
-                      createdAt
-                      deletedAt
                       id
-                      opportunity {
-                        __typename
-                        id
-                        name
-                      }
-                      opportunityId
-                      person {
-                        __typename
-                        avatarUrl
-                        id
-                        name {
-                          firstName
-                          lastName
-                        }
-                      }
-                      personId
-                      pet {
-                        __typename
-                        id
-                        name
-                      }
-                      petId
-                      rocket {
-                        __typename
-                        id
-                        name
-                      }
-                      rocketId
-                      surveyResult {
-                        __typename
-                        id
-                        name
-                      }
-                      surveyResultId
                       task {
                         __typename
                         id
                         title
                       }
-                      taskId
-                      updatedAt
                     }
                   }
                 }

packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordsFieldVisibleGqlFields.ts

@@ -1,12 +1,11 @@
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getImageIdentifierFieldMetadataItem } from '@/object-metadata/utils/getImageIdentifierFieldMetadataItem';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
 import { hasObjectMetadataItemPositionField } from '@/object-metadata/utils/hasObjectMetadataItemPositionField';
+import { generateActivityTargetGqlFields } from '@/object-record/graphql/record-gql-fields/utils/generateActivityTargetGqlFields';
 import { generateDepthRecordGqlFieldsFromFields } from '@/object-record/graphql/record-gql-fields/utils/generateDepthRecordGqlFieldsFromFields';
-import { generateDepthRecordGqlFieldsFromObject } from '@/object-record/graphql/record-gql-fields/utils/generateDepthRecordGqlFieldsFromObject';
 import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
@@ -29,15 +28,6 @@ export const useRecordsFieldVisibleGqlFields = ({
     useRecordIndexContextOrThrow();
 
   const { objectMetadataItems } = useObjectMetadataItems();
-  const { objectMetadataItem: noteTargetObjectMetadataItem } =
-    useObjectMetadataItem({
-      objectNameSingular: CoreObjectNameSingular.NoteTarget,
-    });
-
-  const { objectMetadataItem: taskTargetObjectMetadataItem } =
-    useObjectMetadataItem({
-      objectNameSingular: CoreObjectNameSingular.TaskTarget,
-    });
 
   const allDepthOneGqlFields = generateDepthRecordGqlFieldsFromFields({
     objectMetadataItems,
@@ -75,15 +65,17 @@ export const useRecordsFieldVisibleGqlFields = ({
     createdAt: true,
     updatedAt: true,
     deletedAt: true,
-    noteTargets: generateDepthRecordGqlFieldsFromObject({
-      objectMetadataItem: noteTargetObjectMetadataItem,
+    noteTargets: generateActivityTargetGqlFields({
+      activityObjectNameSingular: CoreObjectNameSingular.Note,
+      depth: 0,
       objectMetadataItems,
-      depth: 1,
+      shouldOnlyLoadActivityIdentifiers: true,
     }),
-    taskTargets: generateDepthRecordGqlFieldsFromObject({
+    taskTargets: generateActivityTargetGqlFields({
+      activityObjectNameSingular: CoreObjectNameSingular.Task,
+      depth: 0,
       objectMetadataItems,
-      objectMetadataItem: taskTargetObjectMetadataItem,
-      depth: 1,
+      shouldOnlyLoadActivityIdentifiers: true,
     }),
   };
 };

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

@@ -46,14 +46,6 @@ const StyledValueContainer = styled.div<{ readonly: boolean }>`
   min-width: 0;
   position: relative;
   width: 100%;
-
-  ${({ readonly }) =>
-    !readonly &&
-    `
-    &:hover .record-inline-cell-value-display {
-      opacity: 0;
-    }
-  `}
 `;
 
 const StyledLabelContainer = styled.div<{ width?: number }>`
@@ -123,7 +115,7 @@ export const RecordInlineCellContainer = () => {
               <IconLabel stroke={theme.icon.stroke.sm} />
             </StyledIconContainer>
           )}
-          {showLabel && label && (
+          {label && (
             <StyledLabelContainer width={labelWidth}>
               <OverflowingTextWithTooltip text={label} displayedMaxRows={1} />
             </StyledLabelContainer>
@@ -144,7 +136,7 @@ export const RecordInlineCellContainer = () => {
       )}
 
       <StyledValueContainer readonly={readonly ?? false} id={anchorId}>
-        <RecordInlineCellValue className="record-inline-cell-value-display" />
+        <RecordInlineCellValue />
       </StyledValueContainer>
     </StyledInlineCellBaseContainer>
   );