Skip to content

Commit

Permalink
feat: Improve text by distinguishing type in upload messages
Browse files Browse the repository at this point in the history
  • Loading branch information
cballevre committed Sep 7, 2023
1 parent a6cffd9 commit 1bc83d3
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 43 deletions.
19 changes: 12 additions & 7 deletions src/drive/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -502,14 +502,19 @@
}
},
"upload": {
"documentType": {
"file": "file",
"directory": "folder",
"element": "element"
},
"alert": {
"success": "%{smart_count} file uploaded with success. |||| %{smart_count} files uploaded with success.",
"success_conflicts": "%{smart_count} file uploaded with %{conflictNumber} conflict(s). |||| %{smart_count} files uploaded with %{conflictNumber} conflict(s).",
"success_updated": "%{smart_count} file uploaded and %{updatedCount} updated. |||| %{smart_count} files uploaded and %{updatedCount} updated.",
"success_updated_conflicts": "%{smart_count} file uploaded, %{updatedCount} updated and %{conflictCount} conflict(s). |||| %{smart_count} files uploaded, %{updatedCount} updated and %{conflictCount} conflict(s).",
"updated": "%{smart_count} file updated. |||| %{smart_count} files updated.",
"updated_conflicts": "%{smart_count} file updated with %{conflictCount} conflict(s). |||| %{smart_count} files updated with %{conflictCount} conflict(s).",
"errors": "Errors occurred during the file upload.",
"success": "%{smart_count} %{type} uploaded with success. |||| %{smart_count} %{type}s uploaded with success.",
"success_conflicts": "%{smart_count} %{type} uploaded with %{conflictNumber} conflict(s). |||| %{smart_count} %{type}s uploaded with %{conflictNumber} conflict(s).",
"success_updated": "%{smart_count} %{type} uploaded and %{updatedCount} updated. |||| %{smart_count} %{type}s uploaded and %{updatedCount} updated.",
"success_updated_conflicts": "%{smart_count} %{type} uploaded, %{updatedCount} updated and %{conflictCount} conflict(s). |||| %{smart_count} %{type}s uploaded, %{updatedCount} updated and %{conflictCount} conflict(s).",
"updated": "%{smart_count} %{type} updated. |||| %{smart_count} %{type} updated.",
"updated_conflicts": "%{smart_count} %{type} updated with %{conflictCount} conflict(s). |||| %{smart_count} %{type}s updated with %{conflictCount} conflict(s).",
"errors": "Errors occurred during the %{type} upload.",
"network": "You are currenly offline. Please try again once you're connected."
}
},
Expand Down
5 changes: 3 additions & 2 deletions src/drive/web/modules/drive/Toolbar/components/UploadItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,13 @@ const UploadItem = ({ t, isDisabled, onUpload, displayedFolder }) => {
)
}

const mapDispatchToProps = (dispatch, { sharingState, onUploaded }) => ({
const mapDispatchToProps = (dispatch, { sharingState, onUploaded, t }) => ({
onUpload: (client, vaultClient, files, displayedFolder) => {
dispatch(
uploadFiles(files, displayedFolder.id, sharingState, onUploaded, {
client,
vaultClient
vaultClient,
t
})
)
}
Expand Down
50 changes: 41 additions & 9 deletions src/drive/web/modules/navigation/duck/actions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const uploadFiles =
dirId,
sharingState,
fileUploadedCallback = () => null,
{ client, vaultClient }
{ client, vaultClient, t }
) =>
dispatch => {
dispatch(
Expand All @@ -55,19 +55,45 @@ export const uploadFiles =
conflicts,
networkErrors,
errors,
updated
updated,
t
)
),
{ client, vaultClient }
)
)
}

const getEntriesType = entries => {
const types = entries.reduce((acc, entry) => {
if (entry.isDirectory) {
acc.add('directory')
} else {
acc.add('file')
}
return acc
}, new Set())

if (types.size > 1) {
return 'element'
} else {
return types.has('directory') ? 'directory' : 'file'
}
}

const uploadQueueProcessed =
(created, quotas, conflicts, networkErrors, errors, updated) => dispatch => {
(created, quotas, conflicts, networkErrors, errors, updated, t) =>
dispatch => {
const conflictCount = conflicts.length
const createdCount = created.length
const updatedCount = updated.length
const type = t(
`upload.documentType.${getEntriesType([
...created,
...updated,
...conflicts
])}`
)
if (quotas.length > 0) {
logger.warn(`Upload module triggers a quota alert: ${quotas}`)
// quota errors have their own modal instead of a notification
Expand All @@ -82,30 +108,36 @@ const uploadQueueProcessed =
Alerter.success('upload.alert.success_updated_conflicts', {
smart_count: createdCount,
updatedCount,
conflictCount
conflictCount,
type
})
} else if (updatedCount > 0 && createdCount > 0) {
Alerter.success('upload.alert.success_updated', {
smart_count: createdCount,
updatedCount
updatedCount,
type
})
} else if (updatedCount > 0 && conflictCount > 0) {
Alerter.success('upload.alert.updated_conflicts', {
smart_count: updatedCount,
conflictCount
conflictCount,
type
})
} else if (conflictCount > 0) {
Alerter.info('upload.alert.success_conflicts', {
smart_count: createdCount,
conflictNumber: conflictCount
conflictNumber: conflictCount,
type
})
} else if (updatedCount > 0 && createdCount === 0) {
Alerter.success('upload.alert.updated', {
smart_count: updatedCount
smart_count: updatedCount,
type
})
} else {
Alerter.success('upload.alert.success', {
smart_count: createdCount
smart_count: createdCount,
type
})
}
}
Expand Down
11 changes: 7 additions & 4 deletions src/drive/web/modules/upload/Dropzone.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import UIDropzone from 'react-dropzone'
import { compose } from 'redux'
import { withVaultClient } from 'cozy-keys-lib'
import { withClient } from 'cozy-client'
import { translate } from 'cozy-ui/transpiled/react/I18n'

import { uploadFiles } from 'drive/web/modules/navigation/duck'

Expand All @@ -25,11 +26,11 @@ export class Dropzone extends Component {
this.setState(state => ({ ...state, dropzoneActive: false }))

onDrop = async (files, _, evt) => {
const { uploadFiles, client, vaultClient } = this.props
const { uploadFiles, client, vaultClient, t } = this.props
this.setState(state => ({ ...state, dropzoneActive: false }))
if (!canDrop(evt)) return
const filesToUpload = canHandleFolders(evt) ? evt.dataTransfer.items : files
uploadFiles(filesToUpload, { client, vaultClient })
uploadFiles(filesToUpload, { client, vaultClient, t })
}

render() {
Expand Down Expand Up @@ -69,16 +70,18 @@ const canDrop = evt => {
}

const mapDispatchToProps = (dispatch, { displayedFolder, sharingState }) => ({
uploadFiles: (files, { client, vaultClient }) =>
uploadFiles: (files, { client, vaultClient, t }) =>
dispatch(
uploadFiles(files, displayedFolder.id, sharingState, () => null, {
client,
vaultClient
vaultClient,
t
})
)
})

export default compose(
translate(),
withSharingState,
withClient,
withVaultClient,
Expand Down
8 changes: 6 additions & 2 deletions src/drive/web/modules/upload/UploadButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import withSharingState from 'cozy-sharing/dist/hoc/withSharingState'
import Icon from 'cozy-ui/transpiled/react/Icon'
import FileInput from 'cozy-ui/transpiled/react/FileInput'
import UploadIcon from 'cozy-ui/transpiled/react/Icons/Upload'
import { translate } from 'cozy-ui/transpiled/react/I18n'

import { uploadFiles } from 'drive/web/modules/navigation/duck'

Expand Down Expand Up @@ -43,14 +44,17 @@ UploadButton.defaultProps = {

const mapDispatchToProps = (
dispatch,
{ displayedFolder, sharingState, onUploaded }
{ displayedFolder, sharingState, onUploaded, t }
) => ({
onUpload: files => {
dispatch(uploadFiles(files, displayedFolder.id, sharingState, onUploaded))
dispatch(
uploadFiles(files, displayedFolder.id, sharingState, onUploaded, { t })
)
}
})

export default compose(
translate(),
withSharingState,
connect(null, mapDispatchToProps)
)(UploadButton)
55 changes: 36 additions & 19 deletions src/drive/web/modules/upload/__snapshots__/Dropzone.spec.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -98,39 +98,31 @@ exports[`Dropzone should match snapshot 1`] = `
<BreakpointsProvider>
<PushBannerProvider>
<FabProvider>
<WithSharingState(withClient(withVaultClient(Connect(Dropzone))))
<withI18n(WithSharingState(withClient(withVaultClient(Connect(Dropzone)))))
displayedFolder={
Object {
"id": "directory-foobar0",
}
}
>
<withClient(withVaultClient(Connect(Dropzone)))
<WithSharingState(withClient(withVaultClient(Connect(Dropzone))))
displayedFolder={
Object {
"id": "directory-foobar0",
}
}
sharingState={
Object {
"getRecipients": [MockFunction],
"getSharingLink": [MockFunction],
"hasWriteAccess": [MockFunction],
"refresh": [MockFunction],
}
}
f={[Function]}
lang="en"
t={[Function]}
>
<withVaultClient(Connect(Dropzone))
client={
CozyClient {
"uri": undefined,
}
}
<withClient(withVaultClient(Connect(Dropzone)))
displayedFolder={
Object {
"id": "directory-foobar0",
}
}
f={[Function]}
lang="en"
sharingState={
Object {
"getRecipients": [MockFunction],
Expand All @@ -139,9 +131,34 @@ exports[`Dropzone should match snapshot 1`] = `
"refresh": [MockFunction],
}
}
/>
</withClient(withVaultClient(Connect(Dropzone)))>
</WithSharingState(withClient(withVaultClient(Connect(Dropzone))))>
t={[Function]}
>
<withVaultClient(Connect(Dropzone))
client={
CozyClient {
"uri": undefined,
}
}
displayedFolder={
Object {
"id": "directory-foobar0",
}
}
f={[Function]}
lang="en"
sharingState={
Object {
"getRecipients": [MockFunction],
"getSharingLink": [MockFunction],
"hasWriteAccess": [MockFunction],
"refresh": [MockFunction],
}
}
t={[Function]}
/>
</withClient(withVaultClient(Connect(Dropzone)))>
</WithSharingState(withClient(withVaultClient(Connect(Dropzone))))>
</withI18n(WithSharingState(withClient(withVaultClient(Connect(Dropzone)))))>
</FabProvider>
</PushBannerProvider>
</BreakpointsProvider>
Expand Down

0 comments on commit 1bc83d3

Please sign in to comment.