fix: SVG

packages/cozy-sharing/babel.config.js

@@ -18,7 +18,20 @@ module.exports = {
             : '[name]__[local]___[hash:base64:5]'
       }
     ],
-    'inline-react-svg'
+    [
+      'inline-react-svg',
+      {
+        svgo: {
+          plugins: [
+            {
+              cleanupIDs: {
+                minify: false
+              }
+            }
+          ]
+        }
+      }
+    ]
   ],
   env: {
     test: {

packages/cozy-sharing/package.json

@@ -41,6 +41,7 @@
     "babel-plugin-css-modules-transform": "^1.6.2",
     "cozy-client": "^9.1.0",
     "cozy-ui": "^28.4.1",
+    "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
     "react": "^16.12.0",

packages/cozy-sharing/src/components/Recipient.jsx

@@ -1,12 +1,7 @@
 import React, { Component } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import {
-  Spinner,
-  MenuItem,
-  withBreakpoints,
-  Icon
-} from 'cozy-ui/transpiled/react'
+import { Spinner, MenuItem, withBreakpoints } from 'cozy-ui/transpiled/react'
 
 import MenuAwareMobile from './MenuAwareMobile'
 import { AvatarPlusX, AvatarLink, Avatar } from './Avatar'
@@ -99,11 +94,11 @@ class Status extends Component {
   getStatusIcon = type => {
     switch (type) {
       case 'one-way':
-        return IconEye
+        return <IconEye />
       case 'two-way':
-        return IconPen
+        return <IconPen />
       default:
-        return IconHourglass
+        return <IconHourglass />
     }
   }
 
@@ -138,7 +133,7 @@ class Status extends Component {
             }}
             name={name}
           >
-            <MenuItem icon={<Icon icon={this.getStatusIcon(status)} />}>
+            <MenuItem icon={this.getStatusIcon(status)}>
               {status === 'ready' && type
                 ? t(`Share.type.${type}`)
                 : t(`Share.status.${status}`)}
@@ -148,7 +143,7 @@ class Status extends Component {
             <MenuItem
               onSelect={this.onRevoke}
               onClick={this.onRevoke}
-              icon={<Icon icon={IconTrash} />}
+              icon={<IconTrash />}
             >
               <div className={styles['action-unshare']}>
                 {isOwner

packages/cozy-sharing/src/components/ShareAutosuggest.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import Autosuggest from 'react-autosuggest'
 
-import { Icon, Spinner } from 'cozy-ui/transpiled/react'
+import { Spinner } from 'cozy-ui/transpiled/react'
 import palette from 'cozy-ui/transpiled/react/palette'
 
 import styles from './autosuggest.styl'
@@ -115,7 +115,7 @@ export default class ShareAutocomplete extends Component {
                 className={styles['removeRecipient']}
                 onClick={() => this.onRemove(recipient)}
               >
-                <Icon icon={BoldCross} width="16" height="16" />
+                <BoldCross />
               </button>
             </div>
           )

packages/cozy-sharing/src/components/SharedDocuments.jsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import uniq from 'lodash/uniq'
 import SharingContext from '../context'
 
 export const SharedDocuments = ({ children }) => (
   <SharingContext.Consumer>
-    {({ sharings } = { sharings: [] }) =>
-      children({
-        sharedDocuments: sharings.map(
-          sharing => sharing.attributes.rules[0].values[0]
-        )
+    {({ byDocId, hasLoadedAtLeastOnePage } = { byDocId: [] }) => {
+      const sharedDocuments = uniq(Object.keys(byDocId))
+      return children({
+        sharedDocuments,
+        hasLoadedAtLeastOnePage
       })
-    }
+    }}
   </SharingContext.Consumer>
 )
 

packages/cozy-sharing/src/components/SharedStatus.jsx

@@ -2,13 +2,12 @@ import React from 'react'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
 import { SharingTooltip, TooltipRecipientList } from './Tooltip'
 import cx from 'classnames'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 
 import { Contact } from '../models'
 import styles from './status.styl'
 import LinkIcon from '../../assets/icons/icon-link.svg'
 
-const SharedStatus = ({ className, docId, recipients, link, t }) => (
+export const SharedStatus = ({ className, docId, recipients, link, t }) => (
   <span className={cx(className, styles['shared-status'])}>
     {recipients.length > 1 && (
       <a
@@ -28,7 +27,7 @@ const SharedStatus = ({ className, docId, recipients, link, t }) => (
         />
       </SharingTooltip>
     )}
-    {link && <Icon icon={LinkIcon} />}
+    {link && <LinkIcon />}
   </span>
 )
 

packages/cozy-sharing/src/components/SharedStatus.spec.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { SharedStatus } from './SharedStatus'
+import AppLike from '../../test/AppLike'
+describe('SharedStatus component', () => {
+  it('should just render a span if no sharing', () => {
+    const component = mount(
+      <AppLike>
+        <SharedStatus docId="1" recipients={[]} />
+      </AppLike>
+    )
+    expect(component).toMatchSnapshot()
+  })
+
+  it('should have the right display if there is several recipients', () => {
+    const component = mount(
+      <AppLike>
+        <SharedStatus
+          docId="1"
+          recipients={[
+            {
+              _id: 1,
+              name: '1'
+            },
+            {
+              _id: 2,
+              name: '2'
+            }
+          ]}
+          t={x => x}
+        />
+      </AppLike>
+    )
+    expect(component).toMatchSnapshot()
+  })
+
+  it('should display the link if there is a link', () => {
+    const component = mount(
+      <AppLike>
+        <SharedStatus docId="1" recipients={[]} t={x => x} link={true} />
+      </AppLike>
+    )
+    expect(component).toMatchSnapshot()
+  })
+})