cozy-ui 60.4.0 → 60.7.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [60.7.0](https://github.com/cozy/cozy-ui/compare/v60.6.1...v60.7.0) (2022-01-25)
+
+
+### Features
+
+* Add FolderMoveto icon ([7d68e72](https://github.com/cozy/cozy-ui/commit/7d68e72))
+
+## [60.6.1](https://github.com/cozy/cozy-ui/compare/v60.6.0...v60.6.1) (2022-01-24)
+
+
+### Bug Fixes
+
+* Bump cozy-device-helper ([04463f7](https://github.com/cozy/cozy-ui/commit/04463f7))
+* Show breadcrumb on FilePicker documentation ([8f92f09](https://github.com/cozy/cozy-ui/commit/8f92f09))
+
+# [60.6.0](https://github.com/cozy/cozy-ui/compare/v60.5.0...v60.6.0) (2022-01-20)
+
+
+### Bug Fixes
+
+* Remove `isRequired` on AppLinker's `href` prop ([5c8b799](https://github.com/cozy/cozy-ui/commit/5c8b799))
+
+
+### Features
+
+* Open apps using their native mobile version when available ([d4bd421](https://github.com/cozy/cozy-ui/commit/d4bd421))
+* Replace `slug` prop by `app.slug` in `AppLinker` ([fc9cd87](https://github.com/cozy/cozy-ui/commit/fc9cd87))
+* Upgrade cozy-intent to 1.3.0 ([e65af63](https://github.com/cozy/cozy-ui/commit/e65af63))
+
+# [60.5.0](https://github.com/cozy/cozy-ui/compare/v60.4.0...v60.5.0) (2022-01-20)
+
+
+### Features
+
+* Add FilePicker component ([288d047](https://github.com/cozy/cozy-ui/commit/288d047))
+* Add filesize package ([9286dcd](https://github.com/cozy/cozy-ui/commit/9286dcd))
+
 # [60.4.0](https://github.com/cozy/cozy-ui/compare/v60.3.0...v60.4.0) (2022-01-20)
 
 

package/assets/icons/ui/folder-moveto.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.509 1c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99A2.003 2.003 0 0 1 14.006 15H1.994A2 2 0 0 1 0 12.994V2.007C0 1.45.451 1 .99 1h4.52ZM11.5 6a1 1 0 0 0-1.497 1.32l.083.094.5.586H6a1 1 0 0 0-.117 1.993L6 10h4.586l-.5.586a1 1 0 0 0 1.32 1.497L11.5 12l2.207-2.293a1 1 0 0 0 .083-1.32l-.083-.094L11.5 6Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "60.4.0",
+  "version": "60.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -92,7 +92,7 @@
     "cozy-device-helper": "^1.16.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.1.2",
+    "cozy-intent": "^1.3.0",
     "cozy-sharing": "^3.10.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
@@ -153,6 +153,7 @@
     "classnames": "^2.2.5",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
+    "filesize": "8.0.7",
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.6",
@@ -168,10 +169,10 @@
   "peerDependencies": {
     "@material-ui/core": "4",
     "cozy-client": ">=27.5.1",
-    "cozy-device-helper": "^1.10.0",
+    "cozy-device-helper": "^1.16.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": ">=1.1.2",
+    "cozy-intent": ">=1.3.0",
     "cozy-sharing": "^3.10.0",
     "piwik-react-router": "0.12.1",
     "puppeteer": "^1.20.0",

package/react/AppLinker/Readme.md

@@ -5,6 +5,12 @@ If the app is known to Cozy (for example Drive or Banks), and
 the user has installed it on its device, the native app will
 be opened.
 
+The app's manifest can be set in the `app` prop. Then, in a
+ReactNative environment, the AppLinker will be able to send
+`openApp` message to the native environment with this `app`
+data. Ideally the `mobile` member should be set with all data
+needed to open the native app ([more info](https://github.com/cozy/cozy-stack/blob/master/docs/apps.md#mobile))
+
 Handles several cases:
 
 * On mobile app and other mobile app available
@@ -16,7 +22,35 @@ anchor.
 
 ```jsx
 import AppLinker from 'cozy-ui/transpiled/react/AppLinker';
-<AppLinker slug='banks' href='http://dalailama-banks.mycozy.cloud'>{
+
+const app = {
+  slug: 'banks'
+};
+
+<AppLinker app={app} href='http://dalailama-banks.mycozy.cloud'>{
+  ({ onClick, href, name }) => (
+    <a href={href} onClick={onClick}>
+      Open { name }
+    </a>
+  )
+}</AppLinker>
+```
+
+### Exemple with mobile data
+
+```jsx
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker';
+
+const app = {
+  slug: 'passwords',
+  mobile: {
+    schema: 'cozypass://',
+    id_playstore: 'io.cozy.pass',
+    id_appstore: 'cozy-pass/id1502262449'
+  }
+};
+
+<AppLinker app={app} href='http://dalailama-passwords.mycozy.cloud'>{
   ({ onClick, href, name }) => (
     <a href={href} onClick={onClick}>
       Open { name }

package/react/AppLinker/__snapshots__/index.deprecated.spec.jsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app icon should not crash if no href 1`] = `
+<div>
+  <a
+    onClick={[Function]}
+  >
+    Open 
+    Cozy Drive
+  </a>
+</div>
+`;
+
+exports[`app icon should render correctly 1`] = `
+<div>
+  <a
+    href="https://fake.link"
+    onClick={null}
+  >
+    Open 
+    Cozy Drive
+  </a>
+</div>
+`;

package/react/AppLinker/index.deprecated.spec.jsx

@@ -0,0 +1,157 @@
+/**
+ * Those tests are here to test previous AppLinker implementation base on
+ * `slug` prop.
+ * Now that AppLinkers implements `app` prop and uses `app.slug`, the old
+ * `slug` prop is deprecated
+ * Those tests should be kept until `slug` prop is completely removed
+ */
+
+import React from 'react'
+import { shallow } from 'enzyme'
+import {
+  isMobileApp,
+  isMobile,
+  openDeeplinkOrRedirect,
+  startApp,
+  isAndroid
+} from 'cozy-device-helper'
+
+import AppLinker from './index'
+import { generateUniversalLink } from './native'
+jest.useFakeTimers()
+
+const tMock = x => x
+
+class DeprecatedAppItem extends React.Component {
+  render() {
+    const { app, onAppSwitch } = this.props
+    return (
+      <AppLinker
+        onAppSwitch={onAppSwitch}
+        slug={app.slug}
+        href={'https://fake.link'}
+      >
+        {({ onClick, href, name }) => (
+          <div>
+            <a href={href} onClick={onClick}>
+              Open {name}
+            </a>
+          </div>
+        )}
+      </AppLinker>
+    )
+  }
+}
+jest.mock('./native', () => ({
+  ...jest.requireActual('./native'),
+  generateUniversalLink: jest.fn()
+}))
+
+jest.mock('cozy-device-helper', () => ({
+  ...jest.requireActual('cozy-device-helper'),
+  isMobileApp: jest.fn(),
+  isMobile: jest.fn(),
+  openDeeplinkOrRedirect: jest.fn(),
+  startApp: jest.fn().mockResolvedValue(),
+  isAndroid: jest.fn()
+}))
+
+const app = {
+  slug: 'drive',
+  name: 'Drive'
+}
+
+describe('app icon', () => {
+  let spyConsoleError, spyConsoleWarn, openNativeFromNativeSpy, appSwitchMock
+
+  beforeEach(() => {
+    isMobileApp.mockReturnValue(false)
+    spyConsoleError = jest.spyOn(console, 'error')
+    spyConsoleError.mockImplementation(() => {})
+    spyConsoleWarn = jest.spyOn(console, 'warn')
+    spyConsoleWarn.mockImplementation(() => {})
+    openNativeFromNativeSpy = jest.spyOn(AppLinker, 'openNativeFromNative')
+    isMobileApp.mockReturnValue(false)
+    isMobile.mockReturnValue(false)
+    isAndroid.mockReturnValue(false)
+    appSwitchMock = jest.fn()
+  })
+
+  afterEach(() => {
+    spyConsoleError.mockRestore()
+    spyConsoleWarn.mockRestore()
+    jest.restoreAllMocks()
+  })
+
+  it('should render correctly', () => {
+    const root = shallow(<DeprecatedAppItem t={tMock} app={app} />).dive()
+    expect(root.getElement()).toMatchSnapshot()
+  })
+
+  it('should work for native -> native', () => {
+    const root = shallow(
+      <DeprecatedAppItem t={tMock} app={app} onAppSwitch={appSwitchMock} />
+    ).dive()
+    root.find('a').simulate('click')
+    expect(appSwitchMock).not.toHaveBeenCalled()
+    isMobileApp.mockReturnValue(true)
+    root.setState({ nativeAppIsAvailable: true })
+    root.find('a').simulate('click')
+    expect(openNativeFromNativeSpy).toHaveBeenCalled()
+    expect(startApp).toHaveBeenCalledWith({
+      appId: 'io.cozy.drive.mobile',
+      name: 'Cozy Drive',
+      uri: 'cozydrive://'
+    })
+    expect(appSwitchMock).toHaveBeenCalled()
+  })
+
+  it('should work for web -> native for Android (custom schema)', () => {
+    isMobile.mockReturnValue(true)
+    isAndroid.mockResolvedValue(true)
+    const root = shallow(
+      <DeprecatedAppItem t={tMock} app={app} onAppSwitch={appSwitchMock} />
+    ).dive()
+    root.find('a').simulate('click', { preventDefault: () => {} })
+    expect(openDeeplinkOrRedirect).toHaveBeenCalledWith(
+      'cozydrive://',
+      expect.any(Function)
+    )
+    expect(appSwitchMock).toHaveBeenCalled()
+  })
+
+  it('should work for web -> native for iOS (universal link)', () => {
+    isMobile.mockReturnValue(true)
+    const root = shallow(
+      <DeprecatedAppItem t={tMock} app={app} onAppSwitch={appSwitchMock} />
+    ).dive()
+    root.find('a').simulate('click', { preventDefault: () => {} })
+
+    expect(generateUniversalLink).toHaveBeenCalled()
+  })
+
+  it('should work for native -> web', () => {
+    isMobileApp.mockReturnValue(true)
+    const root = shallow(
+      <DeprecatedAppItem t={tMock} app={app} onAppSwitch={appSwitchMock} />
+    ).dive()
+    root.find('a').simulate('click')
+    expect(appSwitchMock).toHaveBeenCalled()
+  })
+
+  it('should not crash if no href', () => {
+    isMobileApp.mockReturnValue(true)
+    const root = shallow(
+      <AppLinker onAppSwitch={appSwitchMock} slug={app.slug}>
+        {({ onClick, href, name }) => (
+          <div>
+            <a href={href} onClick={onClick}>
+              Open {name}
+            </a>
+          </div>
+        )}
+      </AppLinker>
+    )
+    expect(root.getElement()).toMatchSnapshot()
+  })
+})

package/react/AppLinker/index.jsx

@@ -45,7 +45,7 @@ export class AppLinker extends React.Component {
   }
 
   async checkAppAvailability() {
-    const { slug } = this.props
+    const slug = AppLinker.getSlug(this.props)
     const appInfo = NATIVE_APP_INFOS[slug]
     if (appInfo) {
       const nativeAppIsAvailable = Boolean(await memoizedCheckApp(appInfo))
@@ -53,8 +53,25 @@ export class AppLinker extends React.Component {
     }
   }
 
+  static getSlug(props) {
+    if (props.app && props.app.slug) {
+      return props.app.slug
+    }
+
+    return props.slug
+  }
+
+  static deprecateSlug(props) {
+    if (props.slug) {
+      console.warn(
+        `AppLinker's 'slug' prop is deprecated, please use 'app.slug' instead`
+      )
+    }
+  }
+
   static getOnClickHref(props, nativeAppIsAvailable, context) {
-    const { slug, nativePath } = props
+    const { app, nativePath } = props
+    const slug = AppLinker.getSlug(props)
     let href = props.href
     let onClick = null
     const usingNativeApp = isMobileApp()
@@ -68,7 +85,7 @@ export class AppLinker extends React.Component {
 
       if (context) {
         return {
-          onClick: () => context.call('openApp', href),
+          onClick: () => context.call('openApp', href, app),
           href: '#'
         }
       }
@@ -111,7 +128,8 @@ export class AppLinker extends React.Component {
     }
   }
   static openNativeFromWeb(props, ev) {
-    const { href, slug, nativePath, onAppSwitch } = props
+    const { href, nativePath, onAppSwitch } = props
+    const slug = AppLinker.getSlug(props)
     const appInfo = NATIVE_APP_INFOS[slug]
 
     if (ev) {
@@ -134,7 +152,8 @@ export class AppLinker extends React.Component {
   }
 
   static openNativeFromNative(props, ev) {
-    const { slug, onAppSwitch } = props
+    const { onAppSwitch } = props
+    const slug = AppLinker.getSlug(props)
     if (ev) {
       ev.preventDefault()
     }
@@ -150,7 +169,9 @@ export class AppLinker extends React.Component {
   }
 
   render() {
-    const { children, slug } = this.props
+    const { children } = this.props
+    AppLinker.deprecateSlug(this.props)
+    const slug = AppLinker.getSlug(this.props)
     const { nativeAppIsAvailable } = this.state
     const appInfo = NATIVE_APP_INFOS[slug]
     const { href, onClick } = AppLinker.getOnClickHref(
@@ -166,18 +187,28 @@ AppLinker.defaultProps = {
   nativePath: '/'
 }
 AppLinker.propTypes = {
-  // Slug of the app : drive / banks ...
-  slug: PropTypes.string.isRequired,
+  /** DEPRECATED: please use app.slug prop */
+  slug: PropTypes.string,
   /*
   Full web url : Used by default on desktop browser
   Used as a fallback_uri on mobile web
   */
-  href: PropTypes.string.isRequired,
+  href: PropTypes.string,
   /*
     Path used for "native link"
   */
   nativePath: PropTypes.string,
-  onAppSwitch: PropTypes.func
+  onAppSwitch: PropTypes.func,
+  app: PropTypes.shape({
+    // Slug of the app : drive / banks ...
+    slug: PropTypes.string.isRequired,
+    // Information about mobile native app
+    mobile: PropTypes.shape({
+      schema: PropTypes.string,
+      id_playstore: PropTypes.string,
+      id_appstore: PropTypes.string
+    })
+  }).isRequired
 }
 
 export default AppLinker

package/react/AppLinker/index.spec.jsx

@@ -18,11 +18,7 @@ class AppItem extends React.Component {
   render() {
     const { app, onAppSwitch } = this.props
     return (
-      <AppLinker
-        onAppSwitch={onAppSwitch}
-        slug={app.slug}
-        href={'https://fake.link'}
-      >
+      <AppLinker onAppSwitch={onAppSwitch} href={'https://fake.link'} app={app}>
         {({ onClick, href, name }) => (
           <div>
             <a href={href} onClick={onClick}>
@@ -136,7 +132,7 @@ describe('app icon', () => {
     isMobileApp.mockReturnValue(true)
     spyConsoleError.mockImplementation(() => {})
     const root = shallow(
-      <AppLinker onAppSwitch={appSwitchMock} slug={app.slug}>
+      <AppLinker onAppSwitch={appSwitchMock} app={app}>
         {({ onClick, href, name }) => (
           <div>
             <a href={href} onClick={onClick}>

package/react/FilePicker/FilePickerBody.jsx

@@ -0,0 +1,112 @@
+import React, { useCallback, memo } from 'react'
+import PropTypes from 'prop-types'
+
+import { models, useQuery } from 'cozy-client'
+import List from '../MuiCozyTheme/List'
+import LoadMore from '../LoadMore'
+
+import { buildContentFolderQuery } from './queries'
+import FilePickerBodyItem from './FilePickerBodyItem'
+
+const {
+  file: { isDirectory, isFile }
+} = models
+
+const FilePickerBody = ({
+  navigateTo,
+  folderId,
+  onSelectFileId,
+  filesIdsSelected,
+  fileTypesAccepted,
+  multiple
+}) => {
+  const contentFolderQuery = buildContentFolderQuery(folderId)
+  const { data: contentFolder, hasMore, fetchMore } = useQuery(
+    contentFolderQuery.definition,
+    contentFolderQuery.options
+  )
+
+  const onCheck = useCallback(
+    fileId => {
+      const isChecked = filesIdsSelected.some(
+        fileIdSelected => fileIdSelected === fileId
+      )
+      if (isChecked) {
+        onSelectFileId(
+          filesIdsSelected.filter(fileIdSelected => fileIdSelected !== fileId)
+        )
+      } else onSelectFileId(prev => [...prev, fileId])
+    },
+    [filesIdsSelected, onSelectFileId]
+  )
+
+  // When click on checkbox/radio area...
+  const handleChoiceClick = useCallback(
+    file => () => {
+      if (multiple) onCheck(file._id)
+      else onSelectFileId(file._id)
+    },
+    [multiple, onCheck, onSelectFileId]
+  )
+
+  // ...when click anywhere on the rest of the line
+  const handleListItemClick = useCallback(
+    file => () => {
+      if (isDirectory(file)) {
+        navigateTo(contentFolder.find(f => f._id === file._id))
+      }
+
+      if (isFile(file) && fileTypesAccepted.file) {
+        if (multiple) onCheck(file._id)
+        else onSelectFileId(file._id)
+      }
+    },
+    [
+      contentFolder,
+      fileTypesAccepted.file,
+      multiple,
+      navigateTo,
+      onCheck,
+      onSelectFileId
+    ]
+  )
+
+  return (
+    <List>
+      {contentFolder &&
+        contentFolder.map((file, idx) => {
+          const hasDivider = contentFolder
+            ? idx !== contentFolder.length - 1
+            : false
+
+          return (
+            <FilePickerBodyItem
+              key={file._id}
+              file={file}
+              fileTypesAccepted={fileTypesAccepted}
+              multiple={multiple}
+              handleChoiceClick={handleChoiceClick}
+              handleListItemClick={handleListItemClick}
+              onCheck={onCheck}
+              filesIdsSelected={filesIdsSelected}
+              hasDivider={hasDivider}
+            />
+          )
+        })}
+      {hasMore && <LoadMore label={'loadMore'} fetchMore={fetchMore} />}
+    </List>
+  )
+}
+
+FilePickerBody.propTypes = {
+  onSelectFileId: PropTypes.func.isRequired,
+  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  folderId: PropTypes.string.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  fileTypesAccepted: PropTypes.exact({
+    file: PropTypes.bool,
+    folder: PropTypes.bool
+  })
+}
+
+export default memo(FilePickerBody)

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -0,0 +1,129 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import filesize from 'filesize'
+import { makeStyles } from '@material-ui/core/styles'
+
+import { models } from 'cozy-client'
+
+import ListItem from '../MuiCozyTheme/ListItem'
+import ListItemIcon from '../MuiCozyTheme/ListItemIcon'
+import ListItemText from '../ListItemText'
+import Divider from '../MuiCozyTheme/Divider'
+import Icon from '../Icon'
+import FileTypeText from '../Icons/FileTypeText'
+import FileTypeFolder from '../Icons/FileTypeFolder'
+import Checkbox from '../Checkbox'
+import Radio from '../Radio'
+import { useI18n } from '../I18n'
+
+import styles from './styles.styl'
+
+const {
+  file: { isDirectory, isFile }
+} = models
+
+const useStyles = makeStyles(() => ({
+  verticalDivider: {
+    height: '2rem',
+    display: 'flex',
+    alignSelf: 'auto',
+    alignItems: 'center',
+    marginLeft: '0.5rem'
+  },
+  listItemIcon: {
+    marginLeft: '1rem'
+  }
+}))
+
+const FilePickerBodyItem = ({
+  file,
+  fileTypesAccepted,
+  multiple,
+  handleChoiceClick,
+  handleListItemClick,
+  filesIdsSelected,
+  hasDivider
+}) => {
+  const classes = useStyles()
+  const { f } = useI18n()
+  const hasChoice =
+    (fileTypesAccepted.file && isFile(file)) ||
+    (fileTypesAccepted.folder && isDirectory(file))
+
+  const Input = multiple ? Checkbox : Radio
+
+  const listItemSecondaryContent = isFile(file)
+    ? `${f(file.attributes.updated_at, 'DD MMM YYYY')} - ${filesize(
+        file.attributes.size,
+        { base: 10 }
+      )}`
+    : null
+
+  return (
+    <>
+      <ListItem button className="u-p-0">
+        <div
+          data-testid="listitem-onclick"
+          className={styles['filePickerBreadcrumb-wrapper']}
+          onClick={handleListItemClick(file)}
+        >
+          <ListItemIcon className={classes.listItemIcon}>
+            <Icon
+              icon={isDirectory(file) ? FileTypeFolder : FileTypeText}
+              width="32"
+              height="32"
+            />
+          </ListItemIcon>
+          <ListItemText
+            primary={file.name}
+            secondary={listItemSecondaryContent}
+          />
+        </div>
+        {isDirectory(file) && hasChoice && (
+          <Divider
+            orientation="vertical"
+            flexItem
+            className={classes.verticalDivider}
+          />
+        )}
+        <div
+          data-testid="choice-onclick"
+          className="u-ph-1 u-pv-half u-h-2 u-flex u-flex-items-center"
+          onClick={hasChoice ? handleChoiceClick(file) : undefined}
+        >
+          <Input
+            data-testid={multiple ? 'checkbox-btn' : 'radio-btn'}
+            gutter={false}
+            onChange={() => {
+              // handled by onClick on the container
+            }}
+            checked={filesIdsSelected.includes(file._id)}
+            value={file._id}
+            className={cx('u-p-0', {
+              'u-o-100': hasChoice,
+              'u-o-0': !hasChoice
+            })}
+            disabled={!hasChoice}
+          />
+        </div>
+      </ListItem>
+      {hasDivider && <Divider component="li" />}
+    </>
+  )
+}
+
+FilePickerBodyItem.propTypes = {
+  file: PropTypes.object.isRequired,
+  fileTypesAccepted: PropTypes.exact({
+    file: PropTypes.bool,
+    folder: PropTypes.bool
+  }),
+  multiple: PropTypes.bool,
+  handleChoiceClick: PropTypes.func.isRequired,
+  handleListItemClick: PropTypes.func.isRequired,
+  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  hasDivider: PropTypes.bool.isRequired
+}
+
+export default memo(FilePickerBodyItem)