cozy-ui-plus 1.1.0

package/src/UploadQueue/Item.jsx

@@ -0,0 +1,99 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { Img } from 'cozy-ui/transpiled/react/deprecated/Media'
+import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import FileUploadProgress from './FileUploadProgress'
+import Pending from './Pending'
+import { uploadStatus } from './index'
+import styles from './styles.styl'
+import { useStatusIcon } from './useStatusIcon'
+
+const Item = ({ file, status, isDirectory, progress, getMimeTypeIcon }) => {
+  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
+    uploadStatus
+  const { filename, extension } = splitFilename(file)
+  let done = false
+  let error = false
+  /**
+   * Status came from the Upload Queue, but sometimes we're using
+   * manual upload without using the Upload Queue system but we're still
+   * using the UI component. When this is the case, the file handles on
+   * his own its status.
+   */
+  const statusToUse = file.status ? file.status : status
+
+  if (statusToUse !== LOADING && statusToUse !== CANCEL) {
+    if (ERROR_STATUSES.includes(statusToUse)) {
+      error = true
+    } else if (DONE_STATUSES.includes(statusToUse)) {
+      done = true
+    }
+  }
+
+  const statusIcon = useStatusIcon(statusToUse, progress)
+
+  const isPending =
+    statusToUse !== LOADING &&
+    statusToUse !== CANCEL &&
+    !ERROR_STATUSES.includes(statusToUse) &&
+    !DONE_STATUSES.includes(statusToUse) &&
+    statusToUse === PENDING
+
+  return (
+    <ListItem
+      divider
+      data-testid="upload-queue-item"
+      className={cx({
+        [styles['upload-queue-item--done']]: done,
+        [styles['upload-queue-item--error']]: error
+      })}
+    >
+      {getMimeTypeIcon ? (
+        <ListItemIcon className="u-ta-center">
+          <Icon
+            icon={getMimeTypeIcon(isDirectory, file.name, file.type)}
+            size={32}
+            className="u-mr-1"
+          />
+        </ListItemIcon>
+      ) : null}
+      <ListItemText
+        disableTypography
+        primary={
+          <div data-testid="upload-queue-item-name" className="u-ellipsis">
+            <Typography variant="body1" className="u-ellipsis">
+              {filename}
+              {extension && (
+                <Typography
+                  component="span"
+                  variant="body1"
+                  color="textSecondary"
+                  className="u-dib"
+                >
+                  {extension}
+                </Typography>
+              )}
+            </Typography>
+          </div>
+        }
+        secondary={progress ? <FileUploadProgress progress={progress} /> : null}
+      />
+      {statusIcon && (
+        <ListItemIcon>
+          <Img>{statusIcon}</Img>
+        </ListItemIcon>
+      )}
+      {isPending && <Pending />}
+    </ListItem>
+  )
+}
+
+export default translate()(Item)

package/src/UploadQueue/Pending.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const Pending = translate()(props => (
+  <Typography variant="subtitle1" color="primary">
+    {props.t('item.pending')}
+  </Typography>
+))
+
+export default Pending

package/src/UploadQueue/Readme.md

@@ -0,0 +1,95 @@
+Dumb component to display a list of files being uploaded.
+
+On mobile, the list of files being displayed is not shown, only
+a small banner is shown.
+
+The popover attribute should be used to automatically layout
+the upload queue:
+
+- in a fixed bottom-right position on desktop
+- underneath the top-bar on mobile
+
+```jsx
+import isTesting from '../helpers/isTesting'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import UploadQueue from 'cozy-ui/transpiled/react/UploadQueue'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+
+const initialState = {
+  popover: false
+}
+
+const data = {
+  queue: [{
+    file: { name: 'Photo.jpg', type: 'file' },
+    status: 'created'
+  }, {
+    file: { name: 'Photo - conflict error.jpg', type: 'file' },
+    status: 'conflict'
+  }, {
+    file: { name: 'Photo - quota error.jpg', type: 'file' },
+    status: 'quota'
+  }, {
+    file: { name: 'Photo - network error.jpg', type: 'file' },
+    status: 'network'
+  }, {
+    file: { name: 'Photo - generic failure error.jpg', type: 'file' },
+    status: 'failed'
+  }, {
+    file: { name: 'Photo - generic failure error with a very long name - really long - 2020/04/16.txt', type: 'file' },
+    status: 'failed'
+  }, {
+    file: { name: 'File with a very long name - really long - 2020/04/16.txt', type: 'file' },
+    progress: {
+      loaded: 100,
+      total: 400,
+      speed: 135000,
+      remainingTime: 120
+    },
+    status: 'loading'
+  }, {
+    file: { name: 'Directory' },
+    status: 'pending'
+  }],
+  doneCount: 1,
+  successCount: 1
+}
+
+;
+
+<>
+  <Checkbox label="Popover" value={state.popover} onChange={() => setState({ popover: !state.popover })} />
+  <UploadQueue
+    lang='fr'
+    app='Cozy Drive'
+    getMimeTypeIcon={() => FileIcon}
+    queue={data.queue}
+    doneCount={data.doneCount}
+    successCount={data.successCount}
+    popover={state.popover}
+    purgeQueue={() => {}}
+  />
+  {isTesting() && (
+    <>
+      <UploadQueue
+        lang='fr'
+        app='Cozy Drive'
+        getMimeTypeIcon={() => FileIcon}
+        queue={data.queue}
+        doneCount={data.queue.length}
+        successCount={data.queue.length}
+        popover={false}
+      />
+      <UploadQueue
+        lang='fr'
+        app='Cozy Drive'
+        getMimeTypeIcon={() => FileIcon}
+        queue={data.queue}
+        doneCount={data.doneCount}
+        successCount={data.successCount}
+        popover={true}
+      />
+    </>
+  )}
+</>
+```

package/src/UploadQueue/RemainingTime.jsx

@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { numberOfReferencesForPluralForm } from './helpers'
+import { formatRemainingTime } from './index'
+import styles from './styles.styl'
+
+const RemainingTime = ({ durationInSec }) => {
+  const { t } = useI18n()
+
+  return (
+    <Typography
+      variant="caption"
+      className={cx(styles['upload-queue__progress-caption'], 'u-ellipsis')}
+    >
+      {t('item.remainingTime', {
+        time: formatRemainingTime(durationInSec),
+        smart_count: numberOfReferencesForPluralForm(durationInSec)
+      })}
+    </Typography>
+  )
+}
+
+export default RemainingTime

package/src/UploadQueue/helpers.js

@@ -0,0 +1,3 @@
+// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
+export const numberOfReferencesForPluralForm = durationInSec =>
+  durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2

package/src/UploadQueue/index.jsx

@@ -0,0 +1,161 @@
+import cx from 'classnames'
+import React, { Component } from 'react'
+
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
+import List from 'cozy-ui/transpiled/react/List'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import { formatLocallyDistanceToNow } from 'cozy-ui/transpiled/react/providers/I18n/format'
+import withLocales from 'cozy-ui/transpiled/react/providers/I18n/withLocales'
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
+
+import Item from './Item'
+import localeEn from './locales/en.json'
+import localeEs from './locales/es.json'
+import localeFr from './locales/fr.json'
+import localeRu from './locales/ru.json'
+import localeVi from './locales/vi.json'
+import styles from './styles.styl'
+
+const locales = {
+  en: localeEn,
+  es: localeEs,
+  fr: localeFr,
+  ru: localeRu,
+  vi: localeVi
+}
+
+const CANCEL = 'cancel'
+const PENDING = 'pending'
+const LOADING = 'loading'
+const CREATED = 'created'
+const UPDATED = 'updated'
+const FAILED = 'failed'
+const CONFLICT = 'conflict'
+const QUOTA = 'quota'
+const NETWORK = 'network'
+const DONE_STATUSES = [CREATED, UPDATED]
+const ERROR_STATUSES = [CONFLICT, NETWORK, QUOTA, FAILED]
+
+export const uploadStatus = {
+  CANCEL,
+  PENDING,
+  LOADING,
+  CREATED,
+  UPDATED,
+  FAILED,
+  CONFLICT,
+  QUOTA,
+  NETWORK,
+  DONE_STATUSES,
+  ERROR_STATUSES
+}
+
+export const formatRemainingTime = durationInSec => {
+  const later = Date.now() + durationInSec * 1000
+  return formatLocallyDistanceToNow(later)
+}
+
+const QueueLinearProgress = withStyles({
+  root: {
+    height: '2px'
+  }
+})(LinearProgress)
+
+export class UploadQueue extends Component {
+  state = {
+    collapsed: false
+  }
+
+  toggleCollapsed = () => {
+    this.setState(state => ({ collapsed: !state.collapsed }))
+  }
+
+  render() {
+    const {
+      t,
+      queue,
+      doneCount,
+      successCount,
+      purgeQueue,
+      popover,
+      getMimeTypeIcon,
+      app
+    } = this.props
+    const { collapsed } = this.state
+    return (
+      <div
+        data-testid="upload-queue"
+        className={cx(styles['upload-queue'], {
+          [styles['upload-queue--visible']]: queue.length !== 0,
+          [styles['upload-queue--collapsed']]: collapsed,
+          [styles['upload-queue--popover']]: popover
+        })}
+      >
+        <h4
+          className={styles['upload-queue-header']}
+          onDoubleClick={this.toggleCollapsed}
+        >
+          {doneCount < queue.length && (
+            <div className={styles['upload-queue-header-inner']}>
+              <Typography variant="h6" className="u-hide--mob">
+                {t('header', { smart_count: queue.length, app: app })}
+              </Typography>
+              <Typography
+                color="primary"
+                variant="h6"
+                className="u-hide--tablet"
+              >
+                {t('header_mobile', {
+                  done: doneCount,
+                  smart_count: queue.length
+                })}
+              </Typography>
+            </div>
+          )}
+          {doneCount >= queue.length && (
+            <div
+              data-testid="upload-queue-success"
+              className={styles['upload-queue-header-inner']}
+            >
+              <Typography variant="h6">
+                {t('header_done', {
+                  done: successCount,
+                  smart_count: queue.length
+                })}
+              </Typography>
+              <Button
+                subtle
+                className="u-mv-0"
+                label={t('close')}
+                onClick={purgeQueue}
+              />
+            </div>
+          )}
+        </h4>
+        <QueueLinearProgress
+          variant="determinate"
+          value={(doneCount / queue.length) * 100}
+        />
+        <div className={styles['upload-queue-content']}>
+          <List className="u-pv-0">
+            {queue.map((item, index) => (
+              <Item key={index} {...item} getMimeTypeIcon={getMimeTypeIcon} />
+            ))}
+          </List>
+        </div>
+      </div>
+    )
+  }
+}
+
+UploadQueue.defaultProps = {
+  /**
+   * @type {Boolean}
+   * Displays the queue in a popover at the bottom right of the screen
+   * Use false to disable
+   */
+  popover: true
+}
+
+export default withLocales(locales)(UploadQueue)

package/src/UploadQueue/index.spec.jsx

@@ -0,0 +1,163 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { UploadQueue, formatRemainingTime } from '.'
+
+jest.mock('cozy-ui/transpiled/react/providers/I18n/withLocales', () =>
+  jest.fn().mockImplementation(() => x => x)
+)
+
+jest.mock('cozy-ui/transpiled/react/providers/I18n', () => ({
+  translate: jest.fn().mockImplementation(() => x => x),
+  useI18n: jest.fn(),
+  DEFAULT_LANG: 'en'
+}))
+
+describe('UploadQueue', () => {
+  describe('formatRemainingTime', () => {
+    it('should return correct remaining time', () => {
+      const time = formatRemainingTime(29)
+
+      expect(time).toEqual('less than a minute')
+    })
+  })
+
+  describe('UploadQueue', () => {
+    beforeEach(() => {
+      useI18n.mockReturnValue({
+        t: (key, format) =>
+          format ? `${key} ${format.time} ${format.smart_count}` : key
+      })
+    })
+
+    it('should set singular value when "1 minute remaining"', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 89 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime 1 minute 1')
+    })
+
+    it('should set singular value when "moins d 1 minute remaining"', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 29 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime less than a minute 1')
+    })
+
+    it('should set plural value when "44 minutes remainings"', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 2669 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime 44 minutes 2')
+    })
+
+    it('should set singular value when "1 hour remaining" - low limit', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 2671 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime about 1 hour 1')
+    })
+
+    it('should set singular value when "about 1 hour remaining" - high limit', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 5369 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime about 1 hour 1')
+    })
+
+    it('should set plural value when more than "2 hours remainings"', () => {
+      const item = {
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded: 1234, total: 5678, remainingTime: 5371 },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      }
+
+      const { container } = render(<UploadQueue queue={[item]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime about 2 hours 2')
+    })
+
+    it('should not update time and bar everytime loaded/remaining time update', () => {
+      const item = (remainingTime, loaded) => ({
+        file: { name: 'file' },
+        status: 'status',
+        isDirectory: 'isDirectory',
+        progress: { loaded, total: 4936, remainingTime },
+        getMimeTypeIcon: 'getMimeTypeIcon'
+      })
+
+      const { rerender, getAllByRole, container } = render(
+        <UploadQueue queue={[item(5371, 1234)]} />
+      )
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime about 2 hours 2')
+      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
+        'aria-valuenow',
+        '25'
+      )
+
+      rerender(<UploadQueue queue={[item(1, 5677)]} />)
+
+      expect(
+        container.getElementsByClassName('u-flex-shrink')[0]
+      ).toHaveTextContent('item.remainingTime about 2 hours 2')
+      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
+        'aria-valuenow',
+        '25'
+      )
+    })
+  })
+})

package/src/UploadQueue/locales/en.json

@@ -0,0 +1,10 @@
+{
+  "header": "Uploading %{smart_count} photo to %{app} |||| Uploading %{smart_count} photos to %{app}",
+  "header_mobile": "Uploading %{done} of %{smart_count}",
+  "header_done": "Uploaded %{done} out of %{smart_count} successfully",
+  "close": "close",
+  "item": {
+    "pending": "Pending",
+    "remainingTime": "%{time} remaining"
+  }
+}

package/src/UploadQueue/locales/es.json

@@ -0,0 +1,10 @@
+{
+  "header": "Subiendo %{smart_count} foto a %{app} |||| Subiendo %{smart_count} fotos a %{app}",
+  "header_mobile": "Subiendo %{done} de %{smart_count}",
+  "header_done": "Subidos %{done} de %{smart_count} con éxito",
+  "close": "cerrar",
+  "item": {
+    "pending": "Pendiente",
+    "remainingTime": "%{time} restante |||| %{time} restantes"
+  }
+}

package/src/UploadQueue/locales/fr.json

@@ -0,0 +1,10 @@
+{
+  "header": "Import de %{smart_count} fichier dans votre %{app} |||| Import de %{smart_count} fichiers dans votre %{app}",
+  "header_mobile": "Import de %{done} sur %{smart_count}",
+  "header_done": "%{done} sur %{smart_count} élément importé |||| %{done} sur %{smart_count} éléments importés",
+  "close": "Fermer",
+  "item": {
+    "pending": "En attente",
+    "remainingTime": "%{time} restante |||| %{time} restantes"
+  }
+}

package/src/UploadQueue/locales/ru.json

@@ -0,0 +1,10 @@
+{
+  "header": "Загрузка %{smart_count} фото в %{app} |||| Загрузка %{smart_count} фото в %{app}",
+  "header_mobile": "Загружено %{done} из %{smart_count}",
+  "header_done": "Успешно загружено %{done} из %{smart_count}",
+  "close": "закрыть",
+  "item": {
+    "pending": "В ожидании",
+    "remainingTime": "Осталось %{time}"
+  }
+}

package/src/UploadQueue/locales/vi.json

@@ -0,0 +1,10 @@
+{
+  "header": "Đang tải lên %{smart_count} ảnh vào %{app} |||| Đang tải lên %{smart_count} ảnh vào %{app}",
+  "header_mobile": "Đã tải lên %{done} trong số %{smart_count}",
+  "header_done": "Đã tải lên thành công %{done} trong số %{smart_count}",
+  "close": "đóng",
+  "item": {
+    "pending": "Đang chờ",
+    "remainingTime": "Còn lại %{time}"
+  }
+}