[ui-storagebrowser] adds file preview and save for files (#3869)

* [ui-storagebrowser] adds file preview and save for files

* disable edit as soon as save button is clicked

desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss

@@ -20,6 +20,7 @@
   .hue-storage-file-page {
     display: flex;
     flex: 1;
+    height: 100%;
     flex-direction: column;
     gap: vars.$fluidx-spacing-s;
     padding: vars.$fluidx-spacing-s 0;
@@ -84,20 +85,47 @@
       gap: vars.$fluidx-spacing-s;
     }
 
-    .preview__textarea {
-      resize: none;
-      width: 100%;
-      height: 100%;
-      border: none;
-      border-radius: 0;
-      padding: vars.$fluidx-spacing-s;
-      box-shadow: none;
-    }
+    .preview__content {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      background-color: vars.$fluidx-gray-040;
+
+      .preview__textarea {
+        resize: none;
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 0;
+        padding: vars.$fluidx-spacing-s;
+        box-shadow: none;
+      }
 
-    .preview__textarea[readonly] {
-      cursor: text;
-      color: vars.$fluidx-black;
-      background-color: vars.$fluidx-white;
+      .preview__textarea[readonly] {
+        cursor: text;
+        color: vars.$fluidx-black;
+        background-color: vars.$fluidx-white;
+      }
+
+      .preview__document {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      audio {
+        width: 90%;
+      }
+
+      video {
+        height: 90%;
+      }
+
+      .preview__unsupported {
+        font-size: vars.$font-size-lg;
+      }
     }
   }
 }

desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx

@@ -34,8 +34,14 @@ jest.mock('../../../utils/huePubSub', () => ({
   publish: jest.fn()
 }));
 
+const mockSave = jest.fn();
+jest.mock('../../../api/utils', () => ({
+  post: () => mockSave()
+}));
+
 // Mock data for fileData
 const mockFileData: PathAndFileData = {
+  editable: true,
   path: '/path/to/file.txt',
   stats: {
     size: 123456,
@@ -50,7 +56,8 @@ const mockFileData: PathAndFileData = {
   rwx: 'rwxr-xr-x',
   breadcrumbs: [],
   view: {
-    contents: 'Initial file content'
+    contents: 'Initial file content',
+    compression: 'none'
   },
   files: [],
   page: {
@@ -92,6 +99,22 @@ describe('StorageFilePage', () => {
     expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
   });
 
+  it('hide edit button when editable is false', () => {
+    render(<StorageFilePage fileData={{ ...mockFileData, editable: false }} />);
+
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull();
+  });
+
+  it('hide edit button when editable is false', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, view: { ...mockFileData.view, compression: 'zip' } }}
+      />
+    );
+
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull();
+  });
+
   it('shows save and cancel buttons when editing', async () => {
     const user = userEvent.setup();
     render(<StorageFilePage fileData={mockFileData} />);
@@ -191,4 +214,76 @@ describe('StorageFilePage', () => {
     expect(screen.queryByRole('button', { name: 'Download' })).toBeNull();
     expect(screen.queryByRole('link', { name: 'Download' })).toBeNull();
   });
+
+  it('renders a textarea for text files', () => {
+    render(
+      <StorageFilePage
+        fileData={{
+          ...mockFileData,
+          view: { contents: 'Text file content' },
+          path: '/path/to/textfile.txt'
+        }}
+      />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveValue('Text file content');
+  });
+
+  it('renders an image for image files', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, path: '/path/to/imagefile.png', view: { contents: '' } }}
+      />
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', expect.stringContaining('imagefile.png'));
+  });
+
+  it('renders a preview button for document files', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, path: '/path/to/documentfile.pdf', view: { contents: '' } }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /preview document/i })).toBeInTheDocument();
+  });
+
+  it('renders an audio player for audio files', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, path: '/path/to/audiofile.mp3', view: { contents: '' } }}
+      />
+    );
+
+    const audio = screen.getByTestId('preview__content__audio'); // audio tag can't be access using getByRole
+    expect(audio).toBeInTheDocument();
+    expect(audio.children[0]).toHaveAttribute('src', expect.stringContaining('audiofile.mp3'));
+  });
+
+  it('renders a video player for video files', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, path: '/path/to/videofile.mp4', view: { contents: '' } }}
+      />
+    );
+
+    const video = screen.getByTestId('preview__content__video'); // video tag can't be access using getByRole
+    expect(video).toBeInTheDocument();
+    expect(video.children[0]).toHaveAttribute('src', expect.stringContaining('videofile.mp4'));
+  });
+
+  it('displays a message for unsupported file types', () => {
+    render(
+      <StorageFilePage
+        fileData={{ ...mockFileData, path: '/path/to/unsupportedfile.xyz', view: { contents: '' } }}
+      />
+    );
+
+    expect(screen.getByText(/preview not available for this file/i)).toBeInTheDocument();
+  });
 });