Skip to content

[ui-storagebrowser] fixes file preview for non-readable file #4061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[ui-storagebrowser] fixes file preview for non-readable file #4061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf6fd36
[ui-storagebrowser] fixes file preview for non-readable file
ramprasadagarwal Mar 17, 2025
7808e30
Merge branch 'master' of github.com:cloudera/hue into feat/storage-br…
ramprasadagarwal Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/filebrowser/src/filebrowser/api.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,7 @@ def display(request):

# Get contents as string for text mode, or at least try
file_contents = None
is_content_readable = True
if isinstance(contents, str):
file_contents = contents
mode = 'text'
Expand All @@ -410,14 +411,15 @@ def display(request):
file_contents = contents.decode(encoding)
mode = 'text'
except UnicodeDecodeError:
file_contents = contents
is_content_readable = False

data = {
'contents': file_contents,
'offset': offset,
'length': length,
'end': offset + len(contents),
'mode': mode,
"is_content_readable": is_content_readable
}

return JsonResponse(data)
Expand Down
2 changes: 1 addition & 1 deletion desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
height: 90%;
}

.preview__compressed {
.preview__unsupported {
font-size: vars.$font-size-lg;
}
}
Expand Down
32 changes: 12 additions & 20 deletions desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ jest.mock('../../../api/utils', () => ({
post: () => mockSave()
}));

const mockData = jest.fn().mockReturnValue({
contents: 'Initial file content',
compression: 'none'
});
let mockData = {
isContentReadable: true,
contents: 'Initial file content'
};

jest.mock('../../../utils/hooks/useLoadData/useLoadData', () => {
return jest.fn(() => ({
data: mockData(),
data: mockData,
loading: false
}));
});
Expand Down Expand Up @@ -108,19 +108,6 @@ describe('StorageFilePage', () => {
expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
});

// TODO: fix this test when mocking of useLoadData onSuccess callback is mproperly mocked
it.skip('should hide edit button when compression is available', async () => {
mockData.mockImplementation(() => ({
contents: 'Initial file content',
compression: 'zip'
}));
render(
<StorageFilePage fileName={mockFileName} fileStats={mockFileStats} onReload={mockReload} />
);

expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull();
});

it('should show save and cancel buttons when editing', async () => {
const user = userEvent.setup();
render(
Expand Down Expand Up @@ -305,7 +292,12 @@ describe('StorageFilePage', () => {
expect(video.children[0]).toHaveAttribute('src', expect.stringContaining('videofile.mp4'));
});

it('should display a message for compressed file types', () => {
it('should display a message for unsupported file types', () => {
mockData = {
isContentReadable: false,
contents: ''
};
Comment on lines +296 to +299
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could potentially change the outcome of other tests relying on mockData. Perhaps resetting it in an "beforeEach"..


render(
<StorageFilePage
fileStats={{
Expand All @@ -317,6 +309,6 @@ describe('StorageFilePage', () => {
/>
);

expect(screen.getByText(/preview not available for compressed file/i)).toBeInTheDocument();
expect(screen.getByText(/Preview is not available for this file/i)).toBeInTheDocument();
});
});
18 changes: 9 additions & 9 deletions desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ const StorageFilePage = ({ fileStats, onReload }: StorageFilePageProps): JSX.Ele
config?.storage_browser.max_file_editor_size &&
config?.storage_browser.max_file_editor_size > fileStats.size &&
EDITABLE_FILE_FORMATS.has(fileType) &&
data?.isContentReadable &&
!inTrash(fileStats.path);

const pageStats = {
Expand Down Expand Up @@ -199,7 +200,7 @@ const StorageFilePage = ({ fileStats, onReload }: StorageFilePageProps): JSX.Ele
</div>

<div className="preview__content">
{[SupportedFileTypes.TEXT, SupportedFileTypes.OTHER].includes(fileType) && (
{data?.isContentReadable === true && (
<div className="preview__editable-file">
<textarea
value={fileContent}
Expand All @@ -213,6 +214,13 @@ const StorageFilePage = ({ fileStats, onReload }: StorageFilePageProps): JSX.Ele
</div>
)}

{(data?.isContentReadable === false ||
fileType === SupportedFileTypes.COMPRESSED) && (
<div className="preview__unsupported">
{t('Preview is not available for this file.')}
</div>
)}

{fileType === SupportedFileTypes.IMAGE && <img src={filePreviewUrl} alt={fileName} />}

{fileType === SupportedFileTypes.DOCUMENT && (
Expand Down Expand Up @@ -245,14 +253,6 @@ const StorageFilePage = ({ fileStats, onReload }: StorageFilePageProps): JSX.Ele
<track kind="captions" src="" srcLang="en" label="English" />
</video>
)}

{fileType === SupportedFileTypes.COMPRESSED && (
<div className="preview__compresed">
{t(
'Preview not available for compressed file. Please download the file to view.'
)}
</div>
)}
</div>
</div>
</LoadingErrorWrapper>
Expand Down
1 change: 1 addition & 0 deletions desktop/core/src/desktop/js/apps/storageBrowser/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export interface FilePreview {
length: number;
mode: string;
offset: number;
isContentReadable: boolean;
}

export interface ListDirectory {
Expand Down