From f69ec8af682a690fc967b1f64df237534d8cd389 Mon Sep 17 00:00:00 2001
From: Ram Prasad Agarwal <work.ramprasad@gmail.com>
Date: Sat, 1 Feb 2025 06:02:09 +0530
Subject: [PATCH 1/2] [ui-storagebrowser] fixes the preview for non-text files

---
 .../StorageBrowserActions.util.ts             |  5 ++--
 .../StorageFilePage/StorageFilePage.scss      |  2 +-
 .../StorageFilePage/StorageFilePage.test.tsx  | 24 +++++++++++++------
 .../StorageFilePage/StorageFilePage.tsx       | 14 +++++------
 .../StorageFilePage/StorageFilePage.util.ts   |  9 +++----
 .../js/utils/constants/storageBrowser.ts      | 13 ++++++----
 6 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.util.ts b/desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.util.ts
index d251d69743c..93843fc154d 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.util.ts
+++ b/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 => {
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss
index 0e88bce73be..17334fe81fe 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss
+++ b/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;
       }
     }
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
index 204c7239f2e..d6f5cb9938c 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
+++ b/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 compresed 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();
   });
 });
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx
index 41f1b155edd..67b880dff0a 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx
+++ b/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>
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts
index da4a7a994f2..17600ededc0 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts
+++ b/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.endsWith(fileExtension)) {
+      return SUPPORTED_FILE_EXTENSIONS[fileExtension];
+    }
   }
-  return SUPPORTED_FILE_EXTENSIONS[fileExtension] ?? SupportedFileTypes.OTHER;
+  return SupportedFileTypes.OTHER;
 };
diff --git a/desktop/core/src/desktop/js/utils/constants/storageBrowser.ts b/desktop/core/src/desktop/js/utils/constants/storageBrowser.ts
index 2079d6d2982..1f7b71eae82 100644
--- a/desktop/core/src/desktop/js/utils/constants/storageBrowser.ts
+++ b/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]);

From afbe646cc53856d51d402ddd935e2d37a5eb188a Mon Sep 17 00:00:00 2001
From: Ram Prasad Agarwal <work.ramprasad@gmail.com>
Date: Thu, 6 Feb 2025 12:14:47 +0530
Subject: [PATCH 2/2] fixes the edge case for filetype

---
 .../StorageFilePage/StorageFilePage.test.tsx         |  2 +-
 .../StorageFilePage/StorageFilePage.util.test.tsx    | 12 ++++++++++++
 .../StorageFilePage/StorageFilePage.util.ts          |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
index d6f5cb9938c..2bde6551efe 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
+++ b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
@@ -305,7 +305,7 @@ describe('StorageFilePage', () => {
     expect(video.children[0]).toHaveAttribute('src', expect.stringContaining('videofile.mp4'));
   });
 
-  it('should display a message for compresed file types', () => {
+  it('should display a message for compressed file types', () => {
     render(
       <StorageFilePage
         fileStats={{
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.test.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.test.tsx
index c18316a0c1c..840fdb5d311 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.test.tsx
+++ b/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);
+  });
 });
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts
index 17600ededc0..081dfc8d429 100644
--- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts
+++ b/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts
@@ -65,7 +65,7 @@ export const getFileMetaData = (t: TFunction, fileStats: FileStats): MetaData[][
 
 export const getFileType = (fileName: string): SupportedFileTypes => {
   for (const fileExtension in SUPPORTED_FILE_EXTENSIONS) {
-    if (fileName.endsWith(fileExtension)) {
+    if (fileName.toLowerCase().endsWith(`.${fileExtension}`)) {
       return SUPPORTED_FILE_EXTENSIONS[fileExtension];
     }
   }