Browse Source

[ui-storagebrowser] fixes the preview for non-text files (#3981)

Ram Prasad Agarwal 9 months ago
parent
commit
6882626406

+ 3 - 2
desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.util.ts

@@ -33,8 +33,9 @@ import {
   isOFSRoot,
   inTrash
 } from '../../../../utils/storageBrowserUtils';
-import { SUPPORTED_COMPRESSED_FILE_EXTENTION } from '../../../../utils/constants/storageBrowser';
+import { SupportedFileTypes } from '../../../../utils/constants/storageBrowser';
 import { TFunction } from 'i18next';
+import { getFileType } from '../../StorageFilePage/StorageFilePage.util';
 
 export enum ActionType {
   Copy = 'copy',
@@ -61,7 +62,7 @@ const isValidFileOrFolder = (filePath: string): boolean => {
 };
 
 const isFileCompressed = (filePath: string): boolean => {
-  return SUPPORTED_COMPRESSED_FILE_EXTENTION.some(ext => filePath.endsWith(ext));
+  return getFileType(filePath) === SupportedFileTypes.COMPRESSED;
 };
 
 const isActionEnabled = (file: StorageDirectoryTableData, action: ActionType): boolean => {

+ 1 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss

@@ -130,7 +130,7 @@
         height: 90%;
       }
 
-      .preview__unsupported {
+      .preview__compressed {
         font-size: vars.$font-size-lg;
       }
     }

+ 17 - 7
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx

@@ -230,15 +230,25 @@ describe('StorageFilePage', () => {
     expect(screen.queryByRole('link', { name: 'Download' })).toBeNull();
   });
 
-  // TODO: fix this test when mocking of useLoadData onSuccess callback is mproperly mocked
-  it.skip('should render a textarea for text files', () => {
+  // TODO: fix this test when mocking of useLoadData onSuccess callback is properly mocked
+  it('should render a textarea for text files', () => {
     render(
       <StorageFilePage fileName={mockFileName} fileStats={mockFileStats} onReload={mockReload} />
     );
 
     const textarea = screen.getByRole('textbox');
     expect(textarea).toBeInTheDocument();
-    expect(textarea).toHaveValue('Initial file content');
+    // expect(textarea).toHaveValue('Initial file content');
+  });
+
+  it('should render a textarea for other files', () => {
+    render(
+      <StorageFilePage fileName={'dockerfile'} fileStats={mockFileStats} onReload={mockReload} />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+    // expect(textarea).toHaveValue('Initial file content');
   });
 
   it('should render an image for image files', () => {
@@ -295,18 +305,18 @@ describe('StorageFilePage', () => {
     expect(video.children[0]).toHaveAttribute('src', expect.stringContaining('videofile.mp4'));
   });
 
-  it('should display a message for unsupported file types', () => {
+  it('should display a message for compressed file types', () => {
     render(
       <StorageFilePage
         fileStats={{
           ...mockFileStats,
-          path: '/path/to/unsupportedfile.xyz'
+          path: '/path/to/compressed.zip'
         }}
-        fileName="unsupportedfile.xyz"
+        fileName="compressed.zip"
         onReload={mockReload}
       />
     );
 
-    expect(screen.getByText(/preview not available for this file/i)).toBeInTheDocument();
+    expect(screen.getByText(/preview not available for compressed file/i)).toBeInTheDocument();
   });
 });

+ 6 - 8
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx

@@ -35,7 +35,6 @@ import Pagination from '../../../reactComponents/Pagination/Pagination';
 import {
   DEFAULT_PREVIEW_PAGE_SIZE,
   EDITABLE_FILE_FORMATS,
-  SUPPORTED_FILE_EXTENSIONS,
   SupportedFileTypes
 } from '../../../utils/constants/storageBrowser';
 import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
@@ -207,7 +206,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
             </div>
 
             <div className="preview__content">
-              {fileType === SupportedFileTypes.TEXT && (
+              {[SupportedFileTypes.TEXT, SupportedFileTypes.OTHER].includes(fileType) && (
                 <div className="preview__editable-file">
                   <textarea
                     value={fileContent}
@@ -252,12 +251,11 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
                 </video>
               )}
 
-              {fileType === SupportedFileTypes.OTHER && (
-                <div className="preview__unsupported">
-                  {t('Preview not available for this file. Please download the file to view.')}
-                  <br />
-                  {t(`Supported file extensions: 
-                ${Object.keys(SUPPORTED_FILE_EXTENSIONS).join(', ')}`)}
+              {fileType === SupportedFileTypes.COMPRESSED && (
+                <div className="preview__compresed">
+                  {t(
+                    'Preview not available for compressed file. Please download the file to view.'
+                  )}
                 </div>
               )}
             </div>

+ 12 - 0
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.test.tsx

@@ -61,6 +61,12 @@ describe('getFileType', () => {
     expect(result).toBe(SupportedFileTypes.IMAGE);
   });
 
+  it('should return the correct file type for supported extensions with case-sensitive', () => {
+    const fileName = 'image.JPG';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.IMAGE);
+  });
+
   it('should return the correct file type for text extensions', () => {
     const fileName = 'text.txt';
     const result = getFileType(fileName);
@@ -96,4 +102,10 @@ describe('getFileType', () => {
     const result = getFileType(fileName);
     expect(result).toBe(SupportedFileTypes.OTHER);
   });
+
+  it('should return OTHER if file has mis-spelled extension', () => {
+    const fileName = 'filepng';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.OTHER);
+  });
 });

+ 5 - 4
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts

@@ -64,9 +64,10 @@ export const getFileMetaData = (t: TFunction, fileStats: FileStats): MetaData[][
 };
 
 export const getFileType = (fileName: string): SupportedFileTypes => {
-  const fileExtension = fileName?.split('.')?.pop()?.toLowerCase();
-  if (!fileExtension) {
-    return SupportedFileTypes.OTHER;
+  for (const fileExtension in SUPPORTED_FILE_EXTENSIONS) {
+    if (fileName.toLowerCase().endsWith(`.${fileExtension}`)) {
+      return SUPPORTED_FILE_EXTENSIONS[fileExtension];
+    }
   }
-  return SUPPORTED_FILE_EXTENSIONS[fileExtension] ?? SupportedFileTypes.OTHER;
+  return SupportedFileTypes.OTHER;
 };

+ 9 - 4
desktop/core/src/desktop/js/utils/constants/storageBrowser.ts

@@ -27,6 +27,7 @@ export enum SupportedFileTypes {
   DOCUMENT = 'document',
   AUDIO = 'audio',
   VIDEO = 'video',
+  COMPRESSED = 'compressed',
   OTHER = 'other'
 }
 
@@ -59,9 +60,13 @@ export const SUPPORTED_FILE_EXTENSIONS: Record<string, SupportedFileTypes> = {
 
   mp3: SupportedFileTypes.AUDIO,
 
-  mp4: SupportedFileTypes.VIDEO
-};
+  mp4: SupportedFileTypes.VIDEO,
 
-export const EDITABLE_FILE_FORMATS = new Set([SupportedFileTypes.TEXT]);
+  zip: SupportedFileTypes.COMPRESSED,
+  'tar.gz': SupportedFileTypes.COMPRESSED,
+  tgz: SupportedFileTypes.COMPRESSED,
+  bz2: SupportedFileTypes.COMPRESSED,
+  bzip: SupportedFileTypes.COMPRESSED
+};
 
-export const SUPPORTED_COMPRESSED_FILE_EXTENTION = ['zip', 'tar.gz', 'tgz', 'bz2', 'bzip'];
+export const EDITABLE_FILE_FORMATS = new Set([SupportedFileTypes.TEXT, SupportedFileTypes.OTHER]);