10078526217

Committed 24 Jul 2024 02:24PM UTC coverage: 97.663% (-0.02%) from 97.682%

Build # 10078526217

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #418 from IQSS/feature/417-integrate-file-upload-page-with-use-cases

Feature/417 integrate file upload page with use cases (early implementation)

Run Details

970 of 1007 branches covered (96.33%)

Branch coverage included in aggregate %.

201 of 208 new or added lines in 7 files covered. (96.63%)

1 existing line in 1 file now uncovered.

2750 of 2802 relevant lines covered (98.14%)

8640.05 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.53

/src/sections/upload-dataset-files/FileUploader.tsx

import { Button, Card, ProgressBar, useTheme } from '@iqss/dataverse-design-system'
import cn from 'classnames'
import { ChangeEventHandler, DragEventHandler, useEffect, useRef, useState } from 'react'
import { Plus, X } from 'react-bootstrap-icons'
import { FileUploadTools, FileUploaderState } from '../../files/domain/models/FileUploadState'
import styles from './FileUploader.module.scss'

export interface FileUploaderProps {
  upload: (files: File[]) => void
  cancelTitle: string
  info: string
  selectText: string
  fileUploaderState: FileUploaderState
  cancelUpload: (file: File) => void
  cleanFileState: (file: File) => void
}

export function FileUploader({
  upload,
  cancelTitle,
  info,
  selectText,
  fileUploaderState,
  cancelUpload,
  cleanFileState
}: FileUploaderProps) {
  const theme = useTheme()
  const [files, setFiles] = useState<File[]>([])
  const [bgColor, setBackgroundColor] = useState(theme.color.primaryTextColor)

  const addFiles = (selectedFiles: FileList | null) => {
    if (selectedFiles && selectedFiles.length > 0) {
      setFiles((alreadyAdded) => {
        const selectedFilesArray = Array.from(selectedFiles)
        const selectedFilesSet = new Set(selectedFilesArray.map((x) => FileUploadTools.key(x)))
        const alreadyAddedFiltered = alreadyAdded.filter(
          /* istanbul ignore next */
          (x) => !selectedFilesSet.has(FileUploadTools.key(x))
        )
        return [...alreadyAddedFiltered, ...selectedFilesArray]
      })
    }
  }

  const addFile = (file: File) => {
    if (!files.some((x) => FileUploadTools.key(x) === FileUploadTools.key(file))) {
      setFiles((oldFiles) => [...oldFiles, file])
    }
  }

  // waiting on the possibility to test folder drop: https://github.com/cypress-io/cypress/issues/19696
  const addFromDir = (dir: FileSystemDirectoryEntry) => {
    /* istanbul ignore next */
    const reader = dir.createReader()
    reader.readEntries((entries) => {
      entries.forEach((entry) => {
        if (entry.isFile) {
          const fse = entry as FileSystemFileEntry
          fse.file((f) => addFile(f))
        } else if (entry.isDirectory) {
          addFromDir(entry as FileSystemDirectoryEntry)
        }
      })
    })
  }

  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    addFiles(event.target.files)
  }

  const handleDragEnter: DragEventHandler<HTMLDivElement> = () => {
    setBackgroundColor(theme.color.infoBoxColor)
  }

  const handleDragLeave: DragEventHandler<HTMLDivElement> = () => {
    setBackgroundColor(theme.color.primaryTextColor)
  }

  /* istanbul ignore next */
  const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {
    event.preventDefault()
    setBackgroundColor(theme.color.infoBoxColor)
  }

  const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
    event.preventDefault()
    setBackgroundColor(theme.color.primaryTextColor)
    const droppedItems = event.dataTransfer.items
    let ok = false
    if (droppedItems.length > 0) {
      Array.from(droppedItems).forEach((i) => {
        if (i.webkitGetAsEntry()?.isDirectory) {
          ok = true
          addFromDir(i.webkitGetAsEntry() as FileSystemDirectoryEntry)
        } else if (i.webkitGetAsEntry()?.isFile) {
          ok = true
          const fse = i.webkitGetAsEntry() as FileSystemFileEntry
          fse.file((f) => addFile(f))
        }
      })
    }
    const selectedFiles = event.dataTransfer.files
    if (!ok && selectedFiles && selectedFiles.length > 0) {
      addFiles(selectedFiles)
    }
  }

  useEffect(() => {
    upload(files)
  }, [files, upload])

  useEffect(() => {
    setFiles((newFiles) =>
      newFiles.filter((x) => {
        const res = !FileUploadTools.get(x, fileUploaderState).removed
        if (!res) {
          cleanFileState(x)
        }
        return res
      })
    )
  }, [fileUploaderState, cleanFileState])

  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <Card>
      <Card.Header>
        <Button variant="secondary" onClick={() => inputRef.current?.click()}>
          <Plus></Plus> {selectText}
        </Button>
      </Card.Header>
      <Card.Body>
        <div
          className={styles.file_uploader}
          onDrop={handleDrop}
          onDragOver={handleDragOver}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          data-testid="drag-and-drop"
          style={{ backgroundColor: bgColor }}>
          <div>
            <input
              ref={inputRef}
              type="file"
              id="filePicker"
              onChange={handleChange}
              multiple
              hidden
            />
          </div>
          {files.filter((x) => !FileUploadTools.get(x, fileUploaderState).done).length > 0 ? (
            <div className={styles.files}>
              {files
                .filter((x) => !FileUploadTools.get(x, fileUploaderState).done)
                .map((file) => (
                  <div className={styles.file} key={FileUploadTools.key(file)}>
                    <div
                      className={cn(styles.file_name, {
                        [styles.failed]: FileUploadTools.get(file, fileUploaderState).failed
                      })}>
                      {file.webkitRelativePath ? file.webkitRelativePath : file.name}
                    </div>
                    <div className={styles.file_size}>
                      {FileUploadTools.get(file, fileUploaderState).fileSizeString}
                    </div>
                    <div className={styles.upload_progress}>
                      {FileUploadTools.get(file, fileUploaderState).progressHidden ? null : (
                        <ProgressBar now={FileUploadTools.get(file, fileUploaderState).progress} />
                      )}
                    </div>
                    <div className={styles.cancel_upload}>
                      <Button
                        variant="secondary"
                        {...{ size: 'sm' }}
                        withSpacing
                        onClick={() => cancelUpload(file)}>
                        <X className={styles.icon} title={cancelTitle} />
                      </Button>
                    </div>
                  </div>
                ))}
            </div>
          ) : (
            <div className={styles.info}>{info}</div>
          )}
        </div>
      </Card.Body>
    </Card>
  )
}

1	import { Button, Card, ProgressBar, useTheme } from '@iqss/dataverse-design-system'
2	import cn from 'classnames'
3	import { ChangeEventHandler, DragEventHandler, useEffect, useRef, useState } from 'react'
4	import { Plus, X } from 'react-bootstrap-icons'
5	import { FileUploadTools, FileUploaderState } from '../../files/domain/models/FileUploadState'
6	import styles from './FileUploader.module.scss'
7
8	export interface FileUploaderProps {
9	upload: (files: File[]) => void
10	cancelTitle: string
11	info: string
12	selectText: string
13	fileUploaderState: FileUploaderState
14	cancelUpload: (file: File) => void
15	cleanFileState: (file: File) => void
16	}
17
18	export function FileUploader({	20✔
19	upload,
20	cancelTitle,
21	info,
22	selectText,
23	fileUploaderState,
24	cancelUpload,
25	cleanFileState
26	}: FileUploaderProps) {	3,646✔
27	const theme = useTheme()	3,646✔
28	const [files, setFiles] = useState<File[]>([])	3,646✔
29	const [bgColor, setBackgroundColor] = useState(theme.color.primaryTextColor)	3,646✔
30
31	const addFiles = (selectedFiles: FileList \| null) => {	3,646✔
32	if (selectedFiles && selectedFiles.length > 0) {	14✔
33	setFiles((alreadyAdded) => {	14✔
34	const selectedFilesArray = Array.from(selectedFiles)	14✔
35	const selectedFilesSet = new Set(selectedFilesArray.map((x) => FileUploadTools.key(x)))	14✔
36	const alreadyAddedFiltered = alreadyAdded.filter(	14✔
37	/* istanbul ignore next */
38	(x) => !selectedFilesSet.has(FileUploadTools.key(x))
39	)
40	return [...alreadyAddedFiltered, ...selectedFilesArray]	14✔
41	})
42	}
43	}
44
45	const addFile = (file: File) => {	3,646✔
46	if (!files.some((x) => FileUploadTools.key(x) === FileUploadTools.key(file))) {	2,062✔
47	setFiles((oldFiles) => [...oldFiles, file])	399✔
48	}
49	}
50
51	// waiting on the possibility to test folder drop: https://github.com/cypress-io/cypress/issues/19696
52	const addFromDir = (dir: FileSystemDirectoryEntry) => {	3,646✔
53	/* istanbul ignore next */
UNCOV 54	const reader = dir.createReader()	×
NEW 55	reader.readEntries((entries) => {	×
NEW 56	entries.forEach((entry) => {	×
NEW 57	if (entry.isFile) {	×
NEW 58	const fse = entry as FileSystemFileEntry	×
NEW 59	fse.file((f) => addFile(f))	×
NEW 60	} else if (entry.isDirectory) {	×
NEW 61	addFromDir(entry as FileSystemDirectoryEntry)	×
62	}
63	})
64	})
65	}
66
67	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {	3,646✔
68	addFiles(event.target.files)	14✔
69	}
70
71	const handleDragEnter: DragEventHandler<HTMLDivElement> = () => {	3,646✔
72	setBackgroundColor(theme.color.infoBoxColor)	446✔
73	}
74
75	const handleDragLeave: DragEventHandler<HTMLDivElement> = () => {	3,646✔
76	setBackgroundColor(theme.color.primaryTextColor)	×
77	}
78
79	/* istanbul ignore next */
80	const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {	3,646✔
81	event.preventDefault()	446✔
82	setBackgroundColor(theme.color.infoBoxColor)	446✔
83	}
84
85	const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {	3,646✔
86	event.preventDefault()	446✔
87	setBackgroundColor(theme.color.primaryTextColor)	446✔
88	const droppedItems = event.dataTransfer.items	446✔
89	let ok = false	446✔
90	if (droppedItems.length > 0) {	446✔
91	Array.from(droppedItems).forEach((i) => {	446✔
92	if (i.webkitGetAsEntry()?.isDirectory) {	446!
93	ok = true	×
94	addFromDir(i.webkitGetAsEntry() as FileSystemDirectoryEntry)	×
95	} else if (i.webkitGetAsEntry()?.isFile) {	446✔
96	ok = true	446✔
97	const fse = i.webkitGetAsEntry() as FileSystemFileEntry	446✔
98	fse.file((f) => addFile(f))	446✔
99	}
100	})
101	}
102	const selectedFiles = event.dataTransfer.files	446✔
103	if (!ok && selectedFiles && selectedFiles.length > 0) {	446!
104	addFiles(selectedFiles)	×
105	}
106	}
107
108	useEffect(() => {	3,646✔
109	upload(files)	3,421✔
110	}, [files, upload])
111
112	useEffect(() => {	3,646✔
113	setFiles((newFiles) =>	1,655✔
114	newFiles.filter((x) => {	1,655✔
115	const res = !FileUploadTools.get(x, fileUploaderState).removed	7,536✔
116	if (!res) {	7,536✔
117	cleanFileState(x)	79✔
118	}
119	return res	7,536✔
120	})
121	)
122	}, [fileUploaderState, cleanFileState])
123
124	const inputRef = useRef<HTMLInputElement>(null)	3,646✔
125
126	return (	3,646✔
127	<Card>
128	<Card.Header>
129	<Button variant="secondary" onClick={() => inputRef.current?.click()}>	14✔
130	<Plus></Plus> {selectText}
131	</Button>
132	</Card.Header>
133	<Card.Body>
134	<div
135	className={styles.file_uploader}
136	onDrop={handleDrop}
137	onDragOver={handleDragOver}
138	onDragEnter={handleDragEnter}
139	onDragLeave={handleDragLeave}
140	data-testid="drag-and-drop"
141	style={{ backgroundColor: bgColor }}>
142	<div>
143	<input
144	ref={inputRef}
145	type="file"
146	id="filePicker"
147	onChange={handleChange}
148	multiple
149	hidden
150	/>
151	</div>
152	{files.filter((x) => !FileUploadTools.get(x, fileUploaderState).done).length > 0 ? (	18,125✔
153	<div className={styles.files}>
154	{files
155	.filter((x) => !FileUploadTools.get(x, fileUploaderState).done)	17,477✔
156	.map((file) => (
157	<div className={styles.file} key={FileUploadTools.key(file)}>	17,041✔
158	<div
159	className={cn(styles.file_name, {
160	[styles.failed]: FileUploadTools.get(file, fileUploaderState).failed
161	})}>
162	{file.webkitRelativePath ? file.webkitRelativePath : file.name}	17,041!
163	</div>
164	<div className={styles.file_size}>
165	{FileUploadTools.get(file, fileUploaderState).fileSizeString}
166	</div>
167	<div className={styles.upload_progress}>
168	{FileUploadTools.get(file, fileUploaderState).progressHidden ? null : (	17,041✔
169	<ProgressBar now={FileUploadTools.get(file, fileUploaderState).progress} />
170	)}
171	</div>
172	<div className={styles.cancel_upload}>
173	<Button
174	variant="secondary"
175	{...{ size: 'sm' }}
176	withSpacing
177	onClick={() => cancelUpload(file)}>	15✔
178	<X className={styles.icon} title={cancelTitle} />
179	</Button>
180	</div>
181	</div>
182	))}
183	</div>
184	) : (
185	<div className={styles.info}>{info}</div>
186	)}
187	</div>
188	</Card.Body>
189	</Card>
190	)
191	}	20✔

IQSS / dataverse-frontend / 10078526217

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous