add listeners to dropzone element

cockpit-project · Dec 3, 2024 · fb47459 · fb47459
1 parent f21ef6b
commit fb47459
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 66 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -11,7 +11,8 @@
 
 // Passthrough for layout and styling purposes, to enable main page parts to participate in the grid
 .pf-v5-c-page__main-section,
-.files-view-stack {
+.files-view-stack,
+.upload-drop-zone {
     display: contents;
 }
 
@@ -22,8 +23,8 @@
 .drag-drop-upload {
     position: absolute;
     z-index: 10;
-    border: dashed var(--pf-v5-global--link--Color);
-    background: rgb(255 255 255 / 80%);
+    border: 3px dashed var(--pf-v5-global--link--Color);
+    background: rgb(from var(--pf-v5-global--BackgroundColor--100) r g b / 80%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,12 +51,12 @@
 }
 
 .files-empty-state,
-.files-view-stack > .pf-v5-c-card,
+.files-view-stack > .upload-drop-zone > .pf-v5-c-card,
 .files-view-stack > .files-footer-info {
     grid-column: content;
 }
 
-.files-view-stack > .pf-v5-c-card {
+.files-view-stack > .upload-drop-zone > .pf-v5-c-card {
     overflow: auto;
 }
 

diff --git a/src/files-folder-view.tsx b/src/files-folder-view.tsx
@@ -65,7 +65,7 @@ export const FilesFolderView = ({
     selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
     clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>,
 }) => {
-    const filesCardRef = useRef<HTMLDivElement>(null);
+    const dropzoneRef = useRef<HTMLDivElement>(null);
     const [currentFilter, setCurrentFilter] = useState("");
     const [isGrid, setIsGrid] = useState(localStorage.getItem("files:isGrid") !== "false");
     const [sortBy, setSortBy] = useState(as_sort(localStorage.getItem("files:sort")));
@@ -82,7 +82,7 @@ export const FilesFolderView = ({
     }, [path]);
 
     useEffect(() => {
-        let filesCardElem: HTMLDivElement | null = null;
+        let dropzoneElem: HTMLDivElement | null = null;
         const isUploading = Object.keys(uploadedFiles).length !== 0;
 
         // counter to manage current status of drag&drop
@@ -95,13 +95,12 @@ export const FilesFolderView = ({
             event.stopPropagation();
 
             // disable drag & drop when upload is in progress
-            if (!isUploading && filesCardElem !== null) {
+            if (!isUploading && dropzoneElem !== null) {
                 console.log("dragenter", event);
                 if (dragDropCnt === 0) {
                     setDragDropActive(true);
                 }
                 dragDropCnt++;
-                filesCardElem.classList.add("files-drag-hover");
             }
         };
 
@@ -111,8 +110,7 @@ export const FilesFolderView = ({
 
             console.log("dragleave", event);
             dragDropCnt--;
-            if (filesCardElem !== null && dragDropCnt === 0) {
-                filesCardElem.classList.remove("files-drag-hover");
+            if (dragDropCnt === 0) {
                 setDragDropActive(false);
             }
         };
@@ -130,77 +128,76 @@ export const FilesFolderView = ({
             dispatchEvent(new CustomEvent('files-drop', { detail: event.dataTransfer.files }));
             setDragDropActive(false);
             dragDropCnt = 0;
-            if (filesCardElem !== null) {
-                filesCardElem.classList.remove("files-drag-hover");
-            }
         };
 
         const handleDragOver = (event: DragEvent) => {
             event.preventDefault();
             event.stopPropagation();
         };
 
-        if (filesCardRef.current) {
-            filesCardElem = filesCardRef.current;
-            filesCardElem.addEventListener("dragenter", handleDragEnter);
-            filesCardElem.addEventListener("dragleave", handleDragLeave);
-            filesCardElem.addEventListener("dragover", handleDragOver, false);
-            filesCardElem.addEventListener("drop", handleDrop, false);
+        if (dropzoneRef.current) {
+            dropzoneElem = dropzoneRef.current;
+            dropzoneElem.addEventListener("dragenter", handleDragEnter);
+            dropzoneElem.addEventListener("dragleave", handleDragLeave);
+            dropzoneElem.addEventListener("dragover", handleDragOver, false);
+            dropzoneElem.addEventListener("drop", handleDrop, false);
         }
 
         return () => {
-            if (filesCardElem) {
-                filesCardElem.removeEventListener("dragenter", handleDragEnter);
-                filesCardElem.removeEventListener("dragover", handleDragOver);
-                filesCardElem.removeEventListener("dragleave", handleDragLeave);
-                filesCardElem.removeEventListener("drop", handleDrop);
+            if (dropzoneElem) {
+                dropzoneElem.removeEventListener("dragenter", handleDragEnter);
+                dropzoneElem.removeEventListener("dragover", handleDragOver);
+                dropzoneElem.removeEventListener("dragleave", handleDragLeave);
+                dropzoneElem.removeEventListener("drop", handleDrop);
             }
         };
     }, [uploadedFiles]);
 
     return (
         <UploadContext.Provider value={{ uploadedFiles, setUploadedFiles }}>
-            <Card className="files-card" ref={filesCardRef}>
-                {dragDropActive &&
-                    <div className="drag-drop-upload">
-                        <EmptyStatePanel
-                          icon={UploadIcon}
-                          title={_("Drop file to upload")}
-                        />
-                    </div>}
-                <FilesCardHeader
-                  currentFilter={currentFilter}
-                  onFilterChange={onFilterChange}
-                  isGrid={isGrid}
-                  setIsGrid={setIsGrid}
-                  sortBy={sortBy}
-                  setSortBy={setSortBy}
-                  path={path}
-                  showHidden={showHidden}
-                  setShowHidden={setShowHidden}
-                  selected={selected}
-                  setSelected={setSelected}
-                  clipboard={clipboard}
-                  setClipboard={setClipboard}
-                />
-                <FilesCardBody
-                  files={files}
-                  currentFilter={currentFilter}
-                  path={path}
-                  isGrid={isGrid}
-                  sortBy={sortBy}
-                  setSortBy={setSortBy}
-                  selected={selected}
-                  setSelected={setSelected}
-                  loadingFiles={loadingFiles}
-                  clipboard={clipboard}
-                  setClipboard={setClipboard}
-                  showHidden={showHidden}
-                  setShowHidden={setShowHidden}
-                  setCurrentFilter={setCurrentFilter}
-                  setDragDropActive={setDragDropActive}
-                />
-            </Card>
+            <div className="upload-drop-zone" ref={dropzoneRef}>
+                <Card className="files-card">
+                    <FilesCardHeader
+                      currentFilter={currentFilter}
+                      onFilterChange={onFilterChange}
+                      isGrid={isGrid}
+                      setIsGrid={setIsGrid}
+                      sortBy={sortBy}
+                      setSortBy={setSortBy}
+                      path={path}
+                      showHidden={showHidden}
+                      setShowHidden={setShowHidden}
+                      selected={selected}
+                      setSelected={setSelected}
+                      clipboard={clipboard}
+                      setClipboard={setClipboard}
+                    />
+                    <FilesCardBody
+                      files={files}
+                      currentFilter={currentFilter}
+                      path={path}
+                      isGrid={isGrid}
+                      sortBy={sortBy}
+                      setSortBy={setSortBy}
+                      selected={selected}
+                      setSelected={setSelected}
+                      loadingFiles={loadingFiles}
+                      clipboard={clipboard}
+                      setClipboard={setClipboard}
+                      showHidden={showHidden}
+                      setShowHidden={setShowHidden}
+                      setCurrentFilter={setCurrentFilter}
+                      setDragDropActive={setDragDropActive}
+                    />
+                    {dragDropActive &&
+                        <div className="drag-drop-upload">
+                            <EmptyStatePanel
+                              icon={UploadIcon}
+                              title={_("Drop file to upload")}
+                            />
+                        </div>}
+                </Card>
+            </div>
         </UploadContext.Provider>
     );
 };
diff --git a/test/check-application b/test/check-application
@@ -2180,6 +2180,7 @@ class TestFiles(testlib.MachineCase):
                 b.wait_visible(selector)
                 b.call_js_func('dragFileEvent', selector, dragType, filename)
 
+            b.wait_not_present(".drag-drop-upload")
             drag_file_event(".fileview-wrapper", 'dragenter')
             b.wait_visible(".drag-drop-upload")
             # TODO add pixeltest here when we have a design what the UI should look like during drag events