Skip to content

Commit

Permalink
Don't display overlay when drag even has no files
Browse files Browse the repository at this point in the history 
fixes: cockpit-project#931

As stated in https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

"If any files are included in the drag operation,
then one of the types will be the string Files."
  • Loading branch information
@tomasmatus
tomasmatus committed Feb 11, 2025
1 parent 5497760 commit 97c6626
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 23 deletions.
12 changes: 12 additions & 0 deletions src/files-folder-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ export const FilesFolderView = ({
event.preventDefault();
event.stopPropagation();

if (!event.dataTransfer?.types.includes("Files")) {
return;
}

if (dragDropCnt.current === 0) {
setDragDropActive(true);
}
Expand All @@ -104,6 +108,10 @@ export const FilesFolderView = ({
event.preventDefault();
event.stopPropagation();

if (!event.dataTransfer?.types.includes("Files")) {
return;
}

dragDropCnt.current--;
if (dragDropCnt.current === 0) {
setDragDropActive(false);
Expand All @@ -114,6 +122,10 @@ export const FilesFolderView = ({
event.preventDefault();
event.stopPropagation();

if (!event.dataTransfer?.types.includes("Files")) {
return;
}

setDragDropActive(false);
dragDropCnt.current = 0;

Expand Down
65 changes: 42 additions & 23 deletions test/check-application
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2615,24 +2615,35 @@ class TestFiles(testlib.MachineCase):

# Test drag & drop upload
b.eval_js('''
function dragFileEvent(sel, eventType, filename) {
function dragFileEvent(sel, dragType, filename) {
const el = window.ph_find(sel);
const dataTransfer = new DataTransfer();
dataTransfer.dropEffect = "move";
let dataTransfer = null;
if (filename) {
// File is added only for drop event
if (dragType === 'drop' && filename) {
// Synthetize a file DataTransfer action
const content = "Random file content: 4";
const file = new File([content], filename, { type: "text/plain" });
dataTransfer = new DataTransfer();
dataTransfer.dropEffect = "move";
Object.defineProperty(dataTransfer, 'files', {
value: [file],
writable: false,
});
}
const ev = new DragEvent(eventType, { bubbles: true, dataTransfer: dataTransfer });
// types are known in all drags event
// default to dragging an html element
let types = ['text/plain', 'text/html'];
if (filename) {
types = ['Files'];
}
Object.defineProperty(dataTransfer, 'types', {
value: types,
writable: false,
});
const ev = new DragEvent(dragType, { bubbles: true, dataTransfer: dataTransfer });
el.dispatchEvent(ev);
}''')

Expand All @@ -2641,7 +2652,7 @@ class TestFiles(testlib.MachineCase):
b.call_js_func('dragFileEvent', selector, dragType, filename)

b.wait_not_present(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
b.assert_pixels(".files-card", "drag-drop-upload-dropzone",
mock={".item-date": "Jun 19, 2024, 11:30 AM"})
Expand All @@ -2653,50 +2664,58 @@ class TestFiles(testlib.MachineCase):
b.wait_not_present(".drag-drop-upload")

# Upload same file again - warning should show up
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragover')
drag_file_event(".fileview-wrapper", 'dragover', 'drag-drop-testfile.txt')
drag_file_event(".fileview-wrapper", 'drop', 'drag-drop-testfile.txt')
b.wait_in_text("h1.pf-v5-c-modal-box__title", "Replace file drag-drop-testfile.txt?")
b.click(".pf-v5-c-modal-box button.pf-m-link")
b.wait_not_present(".pf-v5-c-modal-box")

# Drag file around to test if upload icon shows up and hides accordingly
# Drag & drop upload overlay is not dislayed when event has no files
drag_file_event(".fileview-wrapper", 'dragenter')
b.wait_not_present(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragover')
b.wait_not_present(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'drop')
b.wait_not_present(".drag-drop-upload")

# Drag file around to test if upload icon shows up and hides accordingly
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragleave')
drag_file_event(".fileview-wrapper", 'dragleave', 'drag-drop-testfile.txt')
b.wait_not_present(".drag-drop-upload")

drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
# Hover over element which is a child of .fileview-wrapper
drag_file_event(".fileview-wrapper [data-item='Downloads'] .item-name", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragleave')
drag_file_event(".fileview-wrapper [data-item='Downloads'] .item-name", 'dragenter', 'drag-drop-testfile.txt')
drag_file_event(".fileview-wrapper", 'dragleave', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
drag_file_event(".fileview-wrapper [data-item='project'] .item-name", 'dragenter')
drag_file_event(".fileview-wrapper [data-item='Downloads'] .item-name", 'dragleave')
drag_file_event(".fileview-wrapper [data-item='project'] .item-name", 'dragenter', 'drag-drop-testfile.txt')
drag_file_event(".fileview-wrapper [data-item='Downloads'] .item-name", 'dragleave', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
# Drag away from the .fileview-wrapper
drag_file_event(".fileview-wrapper [data-item='project'] .item-name", 'dragleave')
drag_file_event(".fileview-wrapper [data-item='project'] .item-name", 'dragleave', 'drag-drop-testfile.txt')
b.wait_not_present(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragleave')
drag_file_event(".fileview-wrapper", 'dragleave', 'drag-drop-testfile.txt')
b.wait_not_present(".drag-drop-upload")

# Drag & drop is disabled when upload is in progress
b.click("#upload-file-btn")
b.upload_files("#upload-file-btn + input[type='file']", [big_file])
b.wait_visible("#upload-file-btn:disabled")
b.wait_not_present(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload-blocked")
b.assert_pixels(".files-card", "drag-drop-upload-dropzone-blocked",
mock={".item-date": "Jun 19, 2024, 11:30 AM"})
drag_file_event(".fileview-wrapper", 'dragleave')
drag_file_event(".fileview-wrapper", 'dragleave', 'drag-drop-testfile.txt')
b.wait_not_present(".drag-drop-upload-blocked")
# Dropping the file does nothing
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload-blocked")
drag_file_event(".fileview-wrapper", 'drop', 'drag-drop-file-2.txt')
b.wait_not_present(".drag-drop-upload")
Expand All @@ -2709,7 +2728,7 @@ class TestFiles(testlib.MachineCase):

# Change directory and upload
b.mouse("[data-item='project']", "dblclick")
drag_file_event(".fileview-wrapper", 'dragenter')
drag_file_event(".fileview-wrapper", 'dragenter', 'drag-drop-testfile.txt')
b.wait_visible(".drag-drop-upload")
drag_file_event(".fileview-wrapper", 'drop', 'drag-drop-testfile.txt')
b.wait_in_text(".pf-v5-c-alert__title", "File uploaded")
Expand Down

0 comments on commit 97c6626

Please sign in to comment.