cozy-sharing 10.2.0 → 10.4.0

package/src/{SharingBanner → components/SharingBanner}/test/AppLike.jsx

@@ -11,8 +11,8 @@ import FabProvider from './FabProvider'
 import { ModalContext } from './ModalContext'
 import { RouterContext } from './RouterContext'
 import { ThumbnailSizeContextProvider } from './ThumbnailSizeContext'
-import langEn from '../../../locales/en.json'
-import SharingContext from '../../context'
+import langEn from '../../../../locales/en.json'
+import SharingContext from '../../../context'
 
 const mockStore = createStore(() => ({
   mobile: {

package/src/components/Tooltip.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import ReactTooltip from 'react-tooltip'
 
-import styles from './tooltip.styl'
+import styles from '../styles/tooltip.styl'
 
 export const SharingTooltip = props => (
   <ReactTooltip

package/src/components/WhoHasAccess.jsx

@@ -6,9 +6,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipient from './Recipient/LinkRecipient'
 import OwnerRecipient from './Recipient/OwnerRecipient'
-import Recipient from './Recipient/Recipient'
+import { RecipientList } from './Recipient/RecipientList'
 import { usePrevious } from '../helpers/hooks'
-import { filterAndReworkRecipients } from '../helpers/recipients'
 
 /**
  * Displays a warning if some contacts are waiting for confirmation of their sharing
@@ -43,15 +42,8 @@ const WhoHasAccess = ({
   onRevokeLink
 }) => {
   const previousLink = usePrevious(link)
-  const previousRecipients = usePrevious(recipients)
-
   const linkHasBeenJustCreated = link && previousLink === null
 
-  const recipientsToDisplay = filterAndReworkRecipients(
-    recipients,
-    previousRecipients
-  )
-
   return (
     <div className={className}>
       <RecipientWaitingForConfirmationAlert
@@ -74,26 +66,16 @@ const WhoHasAccess = ({
 
         <OwnerRecipient recipients={recipients} />
 
-        {recipientsToDisplay.map(recipient => {
-          const recipientConfirmationData = recipientsToBeConfirmed.find(
-            user => user.email === recipient.email
-          )
-
-          return (
-            <Recipient
-              {...recipient}
-              key={`key_r_${recipient.index}`}
-              isOwner={isOwner}
-              document={document}
-              documentType={documentType}
-              onRevoke={onRevoke}
-              onRevokeSelf={onRevokeSelf}
-              recipientConfirmationData={recipientConfirmationData}
-              verifyRecipient={verifyRecipient}
-              fadeIn={recipient.hasBeenJustAdded}
-            />
-          )
-        })}
+        <RecipientList
+          recipients={recipients}
+          recipientsToBeConfirmed={recipientsToBeConfirmed}
+          isOwner={isOwner}
+          document={document}
+          documentType={documentType}
+          onRevoke={onRevoke}
+          onRevokeSelf={onRevokeSelf}
+          verifyRecipient={verifyRecipient}
+        />
       </List>
     </div>
   )

package/src/components/WhoHasAccessLight.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import RecipientPlusX from './Recipient/RecipientPlusX'
 import RecipientWithoutStatus from './Recipient/RecipientWithoutStatus'
-import styles from './recipient.styl'
+import styles from '../styles/recipient.styl'
 
 const MAX_DISPLAYED_RECIPIENTS = 2
 

package/src/components/__snapshots__/ContactSuggestion.spec.jsx.snap

@@ -132,46 +132,51 @@ exports[`ContactSuggestion component should display contact suggestion for a con
               <ListItemIcon
                 key=".$.$.0"
               >
-                <ForwardRef(ListItemIcon)
-                  classes={
-                    Object {
-                      "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
-                      "root": "MuiListItemIcon-root",
-                    }
-                  }
+                <WithStyles(ForwardRef(ListItemIcon))
+                  className="cozyListItemIcon"
                 >
-                  <div
-                    className="MuiListItemIcon-root"
+                  <ForwardRef(ListItemIcon)
+                    className="cozyListItemIcon"
+                    classes={
+                      Object {
+                        "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
+                        "root": "MuiListItemIcon-root",
+                      }
+                    }
                   >
-                    <Avatar
-                      className=""
-                      disabled={false}
-                      ghost={false}
-                      icon={[Function]}
-                      image=""
-                      size="small"
-                      style={Object {}}
-                      text="JS"
+                    <div
+                      className="MuiListItemIcon-root cozyListItemIcon"
                     >
-                      <div
-                        className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
-                        data-testid="Avatar"
-                        style={
-                          Object {
-                            "--circleSize": "32px",
-                            "backgroundColor": "#C2ADF4",
-                          }
-                        }
+                      <Avatar
+                        className=""
+                        disabled={false}
+                        ghost={false}
+                        icon={[Function]}
+                        image=""
+                        size="small"
+                        style={Object {}}
+                        text="JS"
                       >
-                        <span
-                          className="styles__c-avatar-initials___310qC"
+                        <div
+                          className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
+                          data-testid="Avatar"
+                          style={
+                            Object {
+                              "--circleSize": "32px",
+                              "backgroundColor": "#C2ADF4",
+                            }
+                          }
                         >
-                          JS
-                        </span>
-                      </div>
-                    </Avatar>
-                  </div>
-                </ForwardRef(ListItemIcon)>
+                          <span
+                            className="styles__c-avatar-initials___310qC"
+                          >
+                            JS
+                          </span>
+                        </div>
+                      </Avatar>
+                    </div>
+                  </ForwardRef(ListItemIcon)>
+                </WithStyles(ForwardRef(ListItemIcon))>
               </ListItemIcon>
               <ListItemText
                 ellipsis={true}
@@ -501,46 +506,51 @@ exports[`ContactSuggestion component should display contact suggestion for a con
               <ListItemIcon
                 key=".$.$.0"
               >
-                <ForwardRef(ListItemIcon)
-                  classes={
-                    Object {
-                      "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
-                      "root": "MuiListItemIcon-root",
-                    }
-                  }
+                <WithStyles(ForwardRef(ListItemIcon))
+                  className="cozyListItemIcon"
                 >
-                  <div
-                    className="MuiListItemIcon-root"
+                  <ForwardRef(ListItemIcon)
+                    className="cozyListItemIcon"
+                    classes={
+                      Object {
+                        "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
+                        "root": "MuiListItemIcon-root",
+                      }
+                    }
                   >
-                    <Avatar
-                      className=""
-                      disabled={false}
-                      ghost={false}
-                      icon={[Function]}
-                      image=""
-                      size="small"
-                      style={Object {}}
-                      text="J"
+                    <div
+                      className="MuiListItemIcon-root cozyListItemIcon"
                     >
-                      <div
-                        className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
-                        data-testid="Avatar"
-                        style={
-                          Object {
-                            "--circleSize": "32px",
-                            "backgroundColor": "#0DCBCF",
-                          }
-                        }
+                      <Avatar
+                        className=""
+                        disabled={false}
+                        ghost={false}
+                        icon={[Function]}
+                        image=""
+                        size="small"
+                        style={Object {}}
+                        text="J"
                       >
-                        <span
-                          className="styles__c-avatar-initials___310qC"
+                        <div
+                          className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
+                          data-testid="Avatar"
+                          style={
+                            Object {
+                              "--circleSize": "32px",
+                              "backgroundColor": "#0DCBCF",
+                            }
+                          }
                         >
-                          J
-                        </span>
-                      </div>
-                    </Avatar>
-                  </div>
-                </ForwardRef(ListItemIcon)>
+                          <span
+                            className="styles__c-avatar-initials___310qC"
+                          >
+                            J
+                          </span>
+                        </div>
+                      </Avatar>
+                    </div>
+                  </ForwardRef(ListItemIcon)>
+                </WithStyles(ForwardRef(ListItemIcon))>
               </ListItemIcon>
               <ListItemText
                 ellipsis={true}
@@ -921,46 +931,51 @@ exports[`ContactSuggestion component should display contact suggestion for a gro
               <ListItemIcon
                 key=".$.$.0"
               >
-                <ForwardRef(ListItemIcon)
-                  classes={
-                    Object {
-                      "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
-                      "root": "MuiListItemIcon-root",
-                    }
-                  }
+                <WithStyles(ForwardRef(ListItemIcon))
+                  className="cozyListItemIcon"
                 >
-                  <div
-                    className="MuiListItemIcon-root"
+                  <ForwardRef(ListItemIcon)
+                    className="cozyListItemIcon"
+                    classes={
+                      Object {
+                        "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
+                        "root": "MuiListItemIcon-root",
+                      }
+                    }
                   >
-                    <Avatar
-                      className=""
-                      disabled={false}
-                      ghost={false}
-                      icon={[Function]}
-                      image=""
-                      size="small"
-                      style={Object {}}
-                      text="G"
+                    <div
+                      className="MuiListItemIcon-root cozyListItemIcon"
                     >
-                      <div
-                        className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
-                        data-testid="Avatar"
-                        style={
-                          Object {
-                            "--circleSize": "32px",
-                            "backgroundColor": "#7F6BEE",
-                          }
-                        }
+                      <Avatar
+                        className=""
+                        disabled={false}
+                        ghost={false}
+                        icon={[Function]}
+                        image=""
+                        size="small"
+                        style={Object {}}
+                        text="G"
                       >
-                        <span
-                          className="styles__c-avatar-initials___310qC"
+                        <div
+                          className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
+                          data-testid="Avatar"
+                          style={
+                            Object {
+                              "--circleSize": "32px",
+                              "backgroundColor": "#7F6BEE",
+                            }
+                          }
                         >
-                          G
-                        </span>
-                      </div>
-                    </Avatar>
-                  </div>
-                </ForwardRef(ListItemIcon)>
+                          <span
+                            className="styles__c-avatar-initials___310qC"
+                          >
+                            G
+                          </span>
+                        </div>
+                      </Avatar>
+                    </div>
+                  </ForwardRef(ListItemIcon)>
+                </WithStyles(ForwardRef(ListItemIcon))>
               </ListItemIcon>
               <ListItemText
                 ellipsis={true}

package/src/{withLocales.jsx → hoc/withLocales.jsx}

@@ -3,8 +3,8 @@ import React from 'react'
 import { I18n, translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 const locales = {
-  en: require(`../locales/en.json`),
-  fr: require(`../locales/fr.json`)
+  en: require(`../../locales/en.json`),
+  fr: require(`../../locales/fr.json`)
 }
 
 /**

package/src/index.jsx

@@ -1,12 +1,14 @@
 import SharingProvider from './SharingProvider'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export default SharingProvider
 
 export { SharingContext, withLocales }
 
 export { useSharingContext } from './hooks/useSharingContext'
+export { useFetchDocumentPath } from './hooks/useFetchDocumentPath'
+
 export { SharedDocument } from './SharedDocument'
 export { SharedStatus } from './SharedStatus'
 export { SharedBadge } from './SharedBadge'
@@ -14,12 +16,11 @@ export { SharingOwnerAvatar } from './SharingOwnerAvatar'
 export { SharedRecipients } from './SharedRecipients'
 export { SharedRecipientsList } from './SharedRecipientsList'
 export { ShareButton } from './ShareButton'
-export { ShareModal } from './ShareModal'
+export { ShareModal } from './components/ShareModal/ShareModal'
 export { RefreshableSharings } from './RefreshableSharings'
-export { useFetchDocumentPath } from './components/useFetchDocumentPath'
 export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerprintDialogContent'
-export { SharingBannerPlugin } from './SharingBanner'
-export { useSharingInfos } from './SharingBanner/hooks/useSharingInfos'
+export { SharingBannerPlugin } from './components/SharingBanner'
+export { useSharingInfos } from './components/SharingBanner/hooks/useSharingInfos'
 export { ConfirmTrustedRecipientsDialog } from './ConfirmTrustedRecipientsDialog'
 export { ShareButtonWithRecipients } from './ShareButtonWithRecipients'
 export { DOCUMENT_TYPE } from './helpers/documentType'

package/src/{components → styles}/actionmenu.styl

@@ -1,5 +1,3 @@
-@require 'settings/palette.styl'
-
 .fil-mobileactionmenu
     color      var(--charcoalGrey)
     hr

package/src/{components → styles}/autosuggest.styl

@@ -1,6 +1,3 @@
-@require 'settings/palette.styl'
-@require 'settings/z-index.styl'
-
 .container
     position relative
 
@@ -9,7 +6,7 @@
     position absolute
     top 100%
     margin-top .25rem
-    z-index $alert-index-mobile
+    z-index var(--zIndex-alertMobile)
     width 100%
     overflow hidden
     box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)

package/src/{SharingBanner/components → styles}/publicBanner.styl

@@ -6,9 +6,9 @@
     img
         @extend $avatar
         @extend $circle
-        width rem(16)	  
-        height rem(16)	    
-        min-width rem(16)	
-        min-height rem(16)	
+        width rem(16)
+        height rem(16)
+        min-width rem(16)
+        min-height rem(16)
         font-size rem(7)
-        vertical-align text-bottom
+        vertical-align text-bottom

package/src/{components/Recipient → styles}/recipient.styl

@@ -1,6 +1,5 @@
 @require 'components/button.styl'
 @require 'settings/breakpoints.styl'
-@require 'settings/palette.styl'
 
 :root
   --genericRecipientBackground: var(--slateGrey)

package/{dist → src/styles}/share.styl

@@ -1,7 +1,6 @@
 @require 'components/forms.styl'
 @require 'components/popover.styl'
 @require 'settings/breakpoints.styl'
-@require 'settings/palette.styl'
 
 .share-byemail-onlybylink
     background var(--paleGrey)

package/dist/ShareModal.js

@@ -1,50 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["document"];
-import omit from 'lodash/omit';
-import React from 'react';
-import { useLocation } from 'react-router';
-import { SharingDetailsModal } from './SharingDetailsModal';
-import EditableSharingModal from './components/EditableSharingModal';
-import SharingContext from './context';
-import withLocales from './withLocales';
-
-var SharingModal = function SharingModal(_ref) {
-  var document = _ref.document,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(SharingContext.Consumer, null, function (_ref2) {
-    var documentType = _ref2.documentType,
-        getOwner = _ref2.getOwner,
-        getSharingType = _ref2.getSharingType,
-        getRecipients = _ref2.getRecipients,
-        revokeSelf = _ref2.revokeSelf;
-    return /*#__PURE__*/React.createElement(SharingDetailsModal, _extends({
-      document: document,
-      documentType: documentType,
-      owner: getOwner(document.id),
-      sharingType: getSharingType(document.id),
-      recipients: getRecipients(document.id),
-      onRevoke: revokeSelf
-    }, rest));
-  });
-};
-
-export var ShareModal = withLocales(function (props) {
-  var _location$state;
-
-  var location = useLocation === null || useLocation === void 0 ? void 0 : useLocation();
-  var locationProps = location === null || location === void 0 || (_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.modalProps;
-  var document = (locationProps === null || locationProps === void 0 ? void 0 : locationProps.document) || props.document;
-  var rest = omit(locationProps || props, 'document');
-  return /*#__PURE__*/React.createElement(SharingContext.Consumer, null, function (_ref3) {
-    var byDocId = _ref3.byDocId,
-        isOwner = _ref3.isOwner,
-        canReshare = _ref3.canReshare;
-    return !byDocId[document.id] || isOwner(document.id) || canReshare(document.id) ? /*#__PURE__*/React.createElement(EditableSharingModal, _extends({
-      document: document
-    }, rest)) : /*#__PURE__*/React.createElement(SharingModal, _extends({
-      document: document
-    }, rest));
-  });
-});

package/src/ShareModal.jsx

@@ -1,51 +0,0 @@
-import omit from 'lodash/omit'
-import React from 'react'
-import { useLocation } from 'react-router'
-
-import { SharingDetailsModal } from './SharingDetailsModal'
-import EditableSharingModal from './components/EditableSharingModal'
-import SharingContext from './context'
-import withLocales from './withLocales'
-
-const SharingModal = ({ document, ...rest }) => (
-  <SharingContext.Consumer>
-    {({
-      documentType,
-      getOwner,
-      getSharingType,
-      getRecipients,
-      revokeSelf
-    }) => (
-      <SharingDetailsModal
-        document={document}
-        documentType={documentType}
-        owner={getOwner(document.id)}
-        sharingType={getSharingType(document.id)}
-        recipients={getRecipients(document.id)}
-        onRevoke={revokeSelf}
-        {...rest}
-      />
-    )}
-  </SharingContext.Consumer>
-)
-
-export const ShareModal = withLocales(props => {
-  const location = useLocation?.()
-  const locationProps = location?.state?.modalProps
-  const document = locationProps?.document || props.document
-  const rest = omit(locationProps || props, 'document')
-
-  return (
-    <SharingContext.Consumer>
-      {({ byDocId, isOwner, canReshare }) =>
-        !byDocId[document.id] ||
-        isOwner(document.id) ||
-        canReshare(document.id) ? (
-          <EditableSharingModal document={document} {...rest} />
-        ) : (
-          <SharingModal document={document} {...rest} />
-        )
-      }
-    </SharingContext.Consumer>
-  )
-})