Sfoglia il codice sorgente

[ui-storagebrowser] avoids unwanted api calls for non-editable file (#3933)

* ui-storagebrwoser] avoids unwanted api calls for non-editable file

* fix mock for datetime

* fixes the getFileType return type

* fixes lowercasing
Ram Prasad Agarwal 1 anno fa
parent
commit
8f5b89463d

+ 5 - 10
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx

@@ -23,7 +23,7 @@ import {
 import './StorageFilePage.scss';
 import { i18nReact } from '../../../utils/i18nReact';
 import Button, { PrimaryButton } from 'cuix/dist/components/Button';
-import { getFileMetaData } from './StorageFilePage.util';
+import { getFileMetaData, getFileType } from './StorageFilePage.util';
 import {
   DOWNLOAD_API_URL,
   FILE_PREVIEW_API_URL,
@@ -48,6 +48,8 @@ interface StorageFilePageProps {
 
 const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps): JSX.Element => {
   const config = getLastKnownConfig();
+  const fileType = getFileType(fileName);
+
   const { t } = i18nReact.useTranslation();
 
   const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -65,7 +67,8 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
       skip:
         fileStats.path === '' ||
         fileStats.path === undefined ||
-        fileStats?.type !== BrowserViewType.file
+        fileStats?.type !== BrowserViewType.file ||
+        EDITABLE_FILE_FORMATS[fileType] === undefined
     }
   );
 
@@ -106,14 +109,6 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
 
   const filePreviewUrl = `${DOWNLOAD_API_URL}${fileStats.path}?disposition=inline`;
 
-  const fileType = useMemo(() => {
-    const fileExtension = fileName?.split('.')?.pop()?.toLocaleLowerCase();
-    if (!fileExtension) {
-      return SupportedFileTypes.OTHER;
-    }
-    return SUPPORTED_FILE_EXTENSIONS[fileExtension] ?? SupportedFileTypes.OTHER;
-  }, [fileName]);
-
   const isEditingEnabled =
     !isEditing &&
     config?.storage_browser.max_file_editor_size &&

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

@@ -0,0 +1,99 @@
+import { SupportedFileTypes } from '../../../utils/constants/storageBrowser';
+import { getFileMetaData, getFileType } from './StorageFilePage.util';
+
+jest.mock('../../../utils/dateTimeUtils', () => ({
+  ...jest.requireActual('../../../utils/dateTimeUtils'),
+  formatTimestamp: () => 'November 25, 2021 at 00:00 AM'
+}));
+
+describe('getFileMetaData', () => {
+  const defaultFileStats = {
+    atime: 1637859451,
+    blockSize: 1024,
+    group: 'group1',
+    mode: 16384,
+    mtime: 1637859451,
+    path: '/path/to/file',
+    replication: 1,
+    rwx: 'rwxr-xr-x',
+    size: 1024,
+    type: 'file',
+    user: 'user1'
+  };
+  const mockTranslation = jest.fn((key: string) => key);
+
+  it('should return correct metadata structure', () => {
+    const result = getFileMetaData(mockTranslation, defaultFileStats);
+
+    expect(result[0][0]).toEqual({
+      name: 'size',
+      label: 'Size',
+      value: '1.00 KB'
+    });
+    expect(result[0][1]).toEqual({
+      name: 'user',
+      label: 'Created By',
+      value: 'user1'
+    });
+
+    expect(result[1][0]).toEqual({
+      name: 'group',
+      label: 'Group',
+      value: 'group1'
+    });
+    expect(result[1][1]).toEqual({
+      name: 'permissions',
+      label: 'Permissions',
+      value: 'rwxr-xr-x'
+    });
+    expect(result[1][2]).toEqual({
+      name: 'mtime',
+      label: 'Last Modified',
+      value: 'November 25, 2021 at 00:00 AM'
+    });
+  });
+});
+
+describe('getFileType', () => {
+  it('should return the correct file type for supported extensions', () => {
+    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);
+    expect(result).toBe(SupportedFileTypes.TEXT);
+  });
+
+  it('should return the correct file type for document extensions', () => {
+    const fileName = 'document.pdf';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.DOCUMENT);
+  });
+
+  it('should return the correct file type for audio extensions', () => {
+    const fileName = 'audio.mp3';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.AUDIO);
+  });
+
+  it('should return the correct file type for video extensions', () => {
+    const fileName = 'video.mp4';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.VIDEO);
+  });
+
+  it('should return OTHER for unsupported extensions', () => {
+    const fileName = 'file.xyz';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.OTHER);
+  });
+
+  it('should return OTHER if file has no extension', () => {
+    const fileName = 'fileWithoutExtension';
+    const result = getFileType(fileName);
+    expect(result).toBe(SupportedFileTypes.OTHER);
+  });
+});

+ 13 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.util.ts

@@ -18,6 +18,10 @@ import { TFunction } from 'i18next';
 import { FileStats } from '../../../reactComponents/FileChooser/types';
 import { formatTimestamp } from '../../../utils/dateTimeUtils';
 import formatBytes from '../../../utils/formatBytes';
+import {
+  SUPPORTED_FILE_EXTENSIONS,
+  SupportedFileTypes
+} from '../../../utils/constants/storageBrowser';
 
 export type MetaData = {
   name: string;
@@ -53,8 +57,16 @@ export const getFileMetaData = (t: TFunction, fileStats: FileStats): MetaData[][
       {
         name: 'mtime',
         label: t('Last Modified'),
-        value: fileStats.mtime ? formatTimestamp(new Date(fileStats.mtime * 1000)) : '-'
+        value: formatTimestamp(new Date(fileStats.mtime * 1000))
       }
     ]
   ];
 };
+
+export const getFileType = (fileName: string): SupportedFileTypes => {
+  const fileExtension = fileName?.split('.')?.pop()?.toLowerCase();
+  if (!fileExtension) {
+    return SupportedFileTypes.OTHER;
+  }
+  return SUPPORTED_FILE_EXTENSIONS[fileExtension] ?? SupportedFileTypes.OTHER;
+};

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

@@ -36,7 +36,7 @@ export enum FileUploadStatus {
   Failed = 'Failed'
 }
 
-export const SUPPORTED_FILE_EXTENSIONS = {
+export const SUPPORTED_FILE_EXTENSIONS: Record<string, SupportedFileTypes> = {
   png: SupportedFileTypes.IMAGE,
   jpg: SupportedFileTypes.IMAGE,
   jpeg: SupportedFileTypes.IMAGE,