[Bugfix] file attachment panel shows paths WVR-3135 (#7327)

src/components/FileAttachmentPanel/FileAttachmentPanel.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getFileAttachments } from 'helpers/getFileAttachments';
+import { getFileAttachments, getEmbeddedFileData } from 'helpers/getFileAttachments';
+import Spinner from '../Spinner';
 import { saveAs } from 'file-saver';
 import Icon from 'components/Icon';
 import core from 'core';
@@ -10,11 +11,24 @@ import { getIsMultiTab, getTabManager } from 'src/redux/selectors/exposedSelecto
 import actions from 'actions';
 import DataElements from 'src/constants/dataElement';
 
-const renderAttachment = (filename, onClickCallback, key) => {
+const getActualFileName = (filename) => {
+  const fileNameRegex = /[^\\\/]+$/g;
+  return filename.match(fileNameRegex)[0];
+};
+
+const renderAttachment = (filename, onClickCallback, key, showFileIdProcessSpinner) => {
+  filename = getActualFileName(filename);
   const fileExtension = filename.split('.').pop().toUpperCase();
+  if (showFileIdProcessSpinner === key) {
+    return (
+      <li onClick={onClickCallback} key={key}>
+        <div className='embedSpinner'>{`[${fileExtension}] ${filename}`}<Spinner height={15} width={15}/></div>
+      </li>
+    );
+  }
   return (
     <li onClick={onClickCallback} key={key}>
-      <span>{`[${fileExtension}] ${filename}`}</span>
+      {`[${fileExtension}] ${filename}`}
     </li>
   );
 };
@@ -28,6 +42,7 @@ const FileAttachmentPanel = () => {
   });
   const isMultiTab = useSelector(getIsMultiTab);
   const tabManager = useSelector(getTabManager);
+  const [showFileIdProcessSpinner, setFileIdProcessSpinner] = useState(null);
 
   useEffect(() => {
     const updateFileAttachments = async () => {
@@ -60,7 +75,7 @@ const FileAttachmentPanel = () => {
       dispatch(actions.openElement(DataElements.LOADING_MODAL));
       setTimeout(async () => {
         const blob = await fileAttachmentAnnot.getFileData();
-        const filename = fileAttachmentAnnot.filename;
+        const filename = getActualFileName(fileAttachmentAnnot.filename);
         const newTabId = await tabManager.addTab(blob, { filename });
         dispatch(actions.closeElement(DataElements.LOADING_MODAL));
         dispatch(actions.closeElement(DataElements.LEFT_PANEL));
@@ -77,12 +92,18 @@ const FileAttachmentPanel = () => {
         {fileAttachments.embeddedFiles.length ? <p className="title">{t('message.embeddedFiles')}</p> : null}
         <ul className="downloadable">
           {fileAttachments.embeddedFiles.map((file, idx) => renderAttachment(
-            file.filename,
+            getActualFileName(file.filename),
             () => {
-              saveAs(file.blob, file.filename);
+              setFileIdProcessSpinner(`embeddedFile_${idx}`);
+              getEmbeddedFileData(file.fileObject).then((blob) => {
+                saveAs(blob, getActualFileName(file.filename));
+              }).finally(() => {
+                setFileIdProcessSpinner(null);
+              });
             },
             `embeddedFile_${idx}`,
-          ),
+            showFileIdProcessSpinner
+          )
           )}
         </ul>
       </div>
@@ -95,7 +116,7 @@ const FileAttachmentPanel = () => {
             </p>
             <ul className="downloadable">
               {fileAttachmentAnnotsPerPage.map((fileAttachmentAnnot, idx) => renderAttachment(
-                fileAttachmentAnnot.filename,
+                getActualFileName(fileAttachmentAnnot.filename),
                 async () => {
                   core.setCurrentPage(fileAttachmentAnnot['PageNumber']);
                   core.selectAnnotation(fileAttachmentAnnot);

src/components/FileAttachmentPanel/FileAttachmentPanel.spec.js

@@ -61,9 +61,15 @@ jest.mock('helpers/getFileAttachments', () => {
       fileAttachmentAnnotations: {
         1: [
           {
-            filename: 'mock 1',
+            filename: 'C:\\Windows\\TEMP\\mock 1.pdf',
             getFileData: () => ({
-              filename: 'mock 1'
+              filename: 'C:\\Windows\\TEMP\\mock 1.pdf'
+            })
+          },
+          {
+            filename: 'C:/Windows/TEMP/mock 2.docx',
+            getFileData: () => ({
+              filename: 'C:/Windows/TEMP/mock 2.docx'
             })
           }
         ]
@@ -73,6 +79,26 @@ jest.mock('helpers/getFileAttachments', () => {
 });
 
 describe('File attachment panel', () => {
+  it('should rener file names correctly', async () => {
+    await act(async () => {
+      const store = configureStore({ reducer: (state = initialState) => state });
+      const component = render(
+        <Provider store={store}>
+          <FileAttachmentPanel />
+        </Provider>
+      );
+
+      await waitFor(() => component.getByText('[PDF] mock 1.pdf'));
+
+      const button = component.getByText('[PDF] mock 1.pdf');
+      expect(button).toBeInTheDocument();
+
+      await waitFor(() => component.getByText('[DOCX] mock 2.docx'));
+
+      const button2 = component.getByText('[DOCX] mock 2.docx');
+      expect(button2).toBeInTheDocument();
+    });
+  });
   it('should trigger open new tab function in multi tab mode', async () => {
     await act(async () => {
       const store = configureStore({ reducer: (state = initialState) => state });
@@ -82,9 +108,9 @@ describe('File attachment panel', () => {
         </Provider>
       );
 
-      await waitFor(() => component.getByText('[MOCK 1] mock 1'));
+      await waitFor(() => component.getByText('[PDF] mock 1.pdf'));
 
-      const button = component.getByText('[MOCK 1] mock 1');
+      const button = component.getByText('[PDF] mock 1.pdf');
       expect(button).toBeInTheDocument();
 
       button.click();