fix: Documents in Recycle Bin should not be editable(WPB-23547)

apps/webapp/src/script/components/FileFullscreenModal/FileEditor/FileEditor.tsx

@@ -44,6 +44,7 @@ interface FileEditorProps {
 export const FileEditor = ({id}: FileEditorProps) => {
   const cellsRepository = container.resolve(CellsRepository);
   const [node, setNode] = useState<Node | null>(null);
+  const [isRecycled, setIsRecycled] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [isError, setIsError] = useState(false);
   const hasShownErrorModal = useRef(false);
@@ -53,6 +54,14 @@ export const FileEditor = ({id}: FileEditorProps) => {
       setIsLoading(true);
       setIsError(false);
       const fetchedNode = await cellsRepository.getNode({uuid: id, flags: ['WithEditorURLs']});
+
+      if (fetchedNode.IsRecycled) {
+        setIsRecycled(true);
+        setNode(null);
+        return false;
+      }
+
+      setIsRecycled(false);
       setNode(fetchedNode);
       return true;
     } catch (err: unknown) {
@@ -98,7 +107,7 @@ export const FileEditor = ({id}: FileEditorProps) => {
   }, [node, fetchNode]);
 
   useEffect(() => {
-    if (isLoading || (!isError && node)) {
+    if (isLoading || isRecycled || (!isError && node)) {
       return;
     }
 
@@ -122,18 +131,22 @@ export const FileEditor = ({id}: FileEditorProps) => {
         title: t('fileFullscreenModal.editor.errorTitle'),
       },
     });
-  }, [handleRetry, isError, isLoading, node]);
+  }, [handleRetry, isError, isLoading, isRecycled, node]);
 
   useEffect(() => {
-    if (!isLoading && !isError && node) {
+    if (!isLoading && !isError && node && !isRecycled) {
       hasShownErrorModal.current = false;
     }
-  }, [isError, isLoading, node]);
+  }, [isError, isLoading, isRecycled, node]);
 
   if (isLoading) {
     return <FileLoader />;
   }
 
+  if (isRecycled) {
+    return null;
+  }
+
   const urlValidation = validateCollaboraUrl(
     Maybe.of(node?.EditorURLs?.collabora?.Url),
     Config.getConfig().CELLS_PYDIO_URL,

apps/webapp/src/script/components/FileFullscreenModal/FileFullscreenModal.test.tsx

@@ -280,4 +280,40 @@ describe('FileFullscreenModal - File Version Restore', () => {
       expect(screen.getByTestId('image-view')).toBeInTheDocument();
     });
   });
+
+  describe('Behavior for Recycled Files', () => {
+    it('should not allow editing if file is in recycle bin', () => {
+      render(<FileFullscreenModal {...defaultProps} isEditMode checkIsInRecycleBin={() => true} />);
+
+      expect(screen.queryByTestId('file-editor')).not.toBeInTheDocument();
+      expect(screen.getByTestId('no-preview')).toBeInTheDocument();
+    });
+
+    it('should keep view mode when edit mode prop changes while file is in recycle bin', () => {
+      const {rerender} = render(
+        <FileFullscreenModal {...defaultProps} isEditMode={false} checkIsInRecycleBin={() => true} />,
+      );
+
+      expect(screen.queryByTestId('file-editor')).not.toBeInTheDocument();
+
+      rerender(<FileFullscreenModal {...defaultProps} isEditMode checkIsInRecycleBin={() => true} />);
+
+      expect(screen.queryByTestId('file-editor')).not.toBeInTheDocument();
+      expect(screen.getByTestId('no-preview')).toBeInTheDocument();
+    });
+
+    it('should be editable and previewable if file is not in recycle bin', () => {
+      const {rerender} = render(
+        <FileFullscreenModal {...defaultProps} isEditMode checkIsInRecycleBin={() => false} />,
+      );
+
+      expect(screen.getByTestId('file-editor')).toBeInTheDocument();
+      expect(screen.queryByTestId('no-preview')).not.toBeInTheDocument();
+
+      rerender(<FileFullscreenModal {...defaultProps} isEditMode={false} checkIsInRecycleBin={() => false} />);
+
+      expect(screen.queryByTestId('file-editor')).not.toBeInTheDocument();
+      expect(screen.getByTestId('no-preview')).toBeInTheDocument();
+    });
+  });
 });

apps/webapp/src/script/components/FileFullscreenModal/FileFullscreenModal.tsx

@@ -21,6 +21,7 @@ import {useEffect, useState} from 'react';
 
 import {Maybe} from 'true-myth';
 
+import {isInRecycleBin} from 'Components/Conversation/ConversationCells/common/recycleBin/recycleBin';
 import {PDFViewer} from 'Components/FileFullscreenModal/PdfViewer/PdfViewer';
 import {FullscreenModal} from 'Components/FullscreenModal/FullscreenModal';
 import {isFileEditable} from 'Util/fileTypeUtil';
@@ -49,6 +50,7 @@ interface FileFullscreenModalProps {
   timestamp: number;
   badges?: string[];
   isEditMode?: boolean;
+  checkIsInRecycleBin?: () => boolean;
 }
 
 export const FileFullscreenModal = ({
@@ -63,9 +65,11 @@ export const FileFullscreenModal = ({
   senderName,
   timestamp,
   badges,
-  isEditMode,
+  isEditMode = false,
+  checkIsInRecycleBin = isInRecycleBin,
 }: FileFullscreenModalProps) => {
-  const [isEditableState, setIsEditableState] = useState(isEditMode);
+  const notInRecycleBin = !checkIsInRecycleBin();
+  const [isEditableState, setIsEditableState] = useState(isEditMode && notInRecycleBin);
   const [refreshKey, setRefreshKey] = useState(0);
   const isEditable = isFileEditable(fileExtension);
 
@@ -79,8 +83,8 @@ export const FileFullscreenModal = ({
   };
 
   useEffect(() => {
-    setIsEditableState(!!isEditMode);
-  }, [isEditMode]);
+    setIsEditableState(isEditMode && notInRecycleBin);
+  }, [isEditMode, notInRecycleBin]);
 
   return (
     <FullscreenModal id={id} isOpen={isOpen} onClose={onCloseModal}>

apps/webapp/src/script/components/FileFullscreenModal/FileHeader/FileHeader.tsx

@@ -31,6 +31,7 @@ import {
 } from '@wireapp/react-ui-kit';
 
 import {FileTypeIcon} from 'Components/Conversation/common/FileTypeIcon/FileTypeIcon';
+import {isInRecycleBin} from 'Components/Conversation/ConversationCells/common/recycleBin/recycleBin';
 import {EditIcon} from 'Components/Icon';
 import {iconStyles} from 'Components/MessagesList/Message/ContentMessage/asset/MultipartAssets/FileAssetCard/common/FileAssetOptions/FileAssetOptions.styles';
 import {MessageTime} from 'Components/MessagesList/Message/MessageTime';
@@ -83,6 +84,7 @@ export const FileHeader = ({
 }: FileHeaderProps) => {
   const timeAgo = useRelativeTimestamp(timestamp);
   const fileNameWithExtension = getFileNameWithExtension(fileName, fileExtension);
+  const isRecycleBin = isInRecycleBin();
   const cellsRepository = container.resolve(CellsRepository);
   const {showModal} = useFileHistoryModal();
 
@@ -125,28 +127,32 @@ export const FileHeader = ({
             <ShowIcon width={16} height={16} />
             Viewing
           </button>
-          <button
-            title="Editing"
-            aria-label="Editing"
-            className={isInEditMode ? 'active' : ''}
-            onClick={() => onEditModeChange(true)}
-          >
-            <EditIcon width={14} height={14} />
-            Editing
-          </button>
+          {!isRecycleBin && (
+            <button
+              title="Editing"
+              aria-label="Editing"
+              className={isInEditMode ? 'active' : ''}
+              onClick={() => onEditModeChange(true)}
+            >
+              <EditIcon width={14} height={14} />
+              Editing
+            </button>
+          )}
         </div>
       )}
       <div css={actionButtonsStyles}>
-        <Button
-          variant={ButtonVariant.TERTIARY}
-          css={downloadButtonStyles}
-          onClick={handleFileDownload}
-          disabled={!fileUrl}
-          aria-label={t('cells.imageFullScreenModal.downloadButton')}
-        >
-          <DownloadIcon />
-        </Button>
-        {isEditable && (
+        {!isRecycleBin && (
+          <Button
+            variant={ButtonVariant.TERTIARY}
+            css={downloadButtonStyles}
+            onClick={handleFileDownload}
+            disabled={!fileUrl}
+            aria-label={t('cells.imageFullScreenModal.downloadButton')}
+          >
+            <DownloadIcon />
+          </Button>
+        )}
+        {!isRecycleBin && isEditable && (
           <DropdownMenu>
             <DropdownMenu.Trigger asChild>
               <Button variant={ButtonVariant.TERTIARY} css={downloadButtonStyles} aria-label={t('cells.options.label')}>