fix: show disabled file chip when file no longer exists in timeline

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx

@@ -1,9 +1,13 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
-import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { type FieldFilesValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
+import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
 export const EventFieldDiffValueEffect = ({
@@ -22,22 +26,50 @@ export const EventFieldDiffValueEffect = ({
     diffArtificialRecordStoreId,
   );
 
+  const { recordId } = useContext(TimelineActivityContext);
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
   useEffect(() => {
     if (!isDefined(diffRecord)) return;
 
+    let fieldValue: typeof diffRecord = diffRecord;
+
+    if (
+      fieldMetadataItem.type === FieldMetadataType.FILES &&
+      isDefined(recordStore) &&
+      Array.isArray(diffRecord)
+    ) {
+      const currentFiles = Array.isArray(recordStore[fieldMetadataItem.name])
+        ? (recordStore[fieldMetadataItem.name] as FieldFilesValue[])
+        : [];
+      const currentFileMap = new Map(
+        currentFiles.map((file) => [file.fileId, file]),
+      );
+
+      fieldValue = (diffRecord as FieldFilesValue[]).map((file) => {
+        const currentFile = currentFileMap.get(file.fileId);
+        if (isDefined(currentFile)) {
+          return currentFile;
+        }
+        return { ...file, isDeleted: true, url: undefined };
+      });
+    }
+
     const forgedObjectRecord = {
       __typename: mainObjectMetadataItem.nameSingular,
       id: diffArtificialRecordStoreId,
-      [fieldMetadataItem.name]: diffRecord,
+      [fieldMetadataItem.name]: fieldValue,
     };
 
     setRecordStore(forgedObjectRecord);
   }, [
     diffRecord,
     diffArtificialRecordStoreId,
     fieldMetadataItem.name,
+    fieldMetadataItem.type,
     mainObjectMetadataItem.nameSingular,
     setRecordStore,
+    recordStore,
   ]);
 
   return <></>;

packages/twenty-front/src/modules/object-record/record-field/ui/types/FieldMetadata.ts

@@ -335,4 +335,5 @@ export type FieldFilesValue = {
   extension?: string;
   url?: string;
   fileCategory?: FileCategory;
+  isDeleted?: boolean;
 };

packages/twenty-front/src/modules/ui/field/display/components/FileChip.tsx

@@ -1,18 +1,37 @@
 import { styled } from '@linaria/react';
+import { t } from '@lingui/core/macro';
+import { useId, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { FileIcon } from '@/file/components/FileIcon';
 import { type FieldFilesValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { getFileCategoryFromExtension } from '@/object-record/record-field/ui/utils/getFileCategoryFromExtension';
 import { Chip, ChipVariant } from 'twenty-ui/components';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const MAX_WIDTH = 120;
 
-const StyledClickableContainer = styled.div<{ clickable: boolean }>`
-  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'inherit')};
+const StyledClickableContainer = styled.div<{
+  clickable: boolean;
+  isDeleted: boolean;
+}>`
+  cursor: ${({ clickable, isDeleted }) =>
+    isDeleted ? 'not-allowed' : clickable ? 'pointer' : 'inherit'};
   display: inline-flex;
   min-width: 0;
 `;
 
+const StyledDeletedLabel = styled.span`
+  color: ${themeCssVariables.font.color.secondary};
+  font-size: inherit;
+  max-width: ${MAX_WIDTH}px;
+  overflow: hidden;
+  text-decoration: line-through;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 type FileChipProps = {
   file: FieldFilesValue;
   onClick: (file: FieldFilesValue) => void;
@@ -24,7 +43,11 @@ export const FileChip = ({
   onClick,
   forceDisableClick,
 }: FileChipProps) => {
-  const isClickable = forceDisableClick !== true;
+  const isDeleted = file.isDeleted === true;
+  const isClickable = forceDisableClick !== true && !isDeleted;
+  const tooltipAnchorId = useId();
+  const tooltipAnchorSelect = `[data-tooltip-anchor="${tooltipAnchorId}"]`;
+  const [shouldShowTooltip, setShouldShowTooltip] = useState(false);
 
   const handleMouseDown = (event: React.MouseEvent): void => {
     if (!isClickable) {
@@ -45,17 +68,43 @@ export const FileChip = ({
   );
 
   return (
-    <StyledClickableContainer
-      clickable={isClickable}
-      onMouseDown={handleMouseDown}
-    >
-      <Chip
-        label={file.label ?? ''}
-        maxWidth={MAX_WIDTH}
-        leftComponent={fileIcon}
-        variant={ChipVariant.Highlighted}
+    <>
+      <StyledClickableContainer
+        data-tooltip-anchor={tooltipAnchorId}
         clickable={isClickable}
-      />
-    </StyledClickableContainer>
+        isDeleted={isDeleted}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={() => isDeleted && setShouldShowTooltip(true)}
+        onMouseLeave={() => setShouldShowTooltip(false)}
+      >
+        <Chip
+          label={isDeleted ? '' : (file.label ?? '')}
+          isLabelHidden={isDeleted}
+          maxWidth={isDeleted ? undefined : MAX_WIDTH}
+          leftComponent={fileIcon}
+          rightComponent={
+            isDeleted ? (
+              <StyledDeletedLabel>{file.label}</StyledDeletedLabel>
+            ) : undefined
+          }
+          variant={ChipVariant.Highlighted}
+          clickable={isClickable}
+        />
+      </StyledClickableContainer>
+      {isDeleted &&
+        shouldShowTooltip &&
+        createPortal(
+          <AppTooltip
+            anchorSelect={tooltipAnchorSelect}
+            content={t`File no longer exists`}
+            delay={TooltipDelay.shortDelay}
+            isOpen={true}
+            noArrow
+            place={TooltipPosition.Top}
+            positionStrategy="fixed"
+          />,
+          document.body,
+        )}
+    </>
   );
 };