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

cloudera · Oct 16, 2024 · ab95c54 · ab95c54
1 parent 59fad96
commit ab95c54
Show file tree

Hide file tree

Showing 5 changed files with 301 additions and 81 deletions.
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss b/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;
+      }
     }
   }
 }
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
@@ -34,6 +34,11 @@ jest.mock('../../../utils/huePubSub', () => ({
   publish: jest.fn()
 }));
 
+const mockSave = jest.fn();
+jest.mock('../../../api/utils', () => ({
+  post: () => mockSave()
+}));
+
 // Mock data for fileData
 const mockFileData: PathAndFileData = {
   path: '/path/to/file.txt',
@@ -191,4 +196,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();
+  });
 });