cozy-sharing 12.0.0 → 12.1.0

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -1,6 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
+import List from 'cozy-ui/transpiled/react/List'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipient from './Recipient/MemberRecipient'
@@ -11,24 +14,32 @@ import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfi
  */
 const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <>
-      <Typography variant="body1" className="u-mb-2">
+      <Typography
+        variant="body1"
+        className={cx(
+          'u-mb-half',
+          isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half'
+        )}
+      >
         {t(`ConfirmRecipientModal.intruction`)}
       </Typography>
-
-      {recipientsToBeConfirmed.map(recipientConfirmationData => {
-        return (
-          <MemberRecipient
-            {...recipientConfirmationData}
-            key={`key_r_${recipientConfirmationData.id}`}
-            isOwner={false}
-            recipientConfirmationData={recipientConfirmationData}
-            verifyRecipient={verifyRecipient}
-          />
-        )
-      })}
+      <List className={isMobile ? 'u-mb-half' : 'u-mb-1'}>
+        {recipientsToBeConfirmed.map(recipientConfirmationData => {
+          return (
+            <MemberRecipient
+              {...recipientConfirmationData}
+              key={`key_r_${recipientConfirmationData.id}`}
+              isOwner={false}
+              recipientConfirmationData={recipientConfirmationData}
+              verifyRecipient={verifyRecipient}
+            />
+          )
+        })}
+      </List>
     </>
   )
 }

package/src/components/ConfirmTrustedRecipientsDialog.stories.jsx

@@ -0,0 +1,45 @@
+import ConfirmTrustedRecipientsDialog from './ConfirmTrustedRecipientsDialog'
+
+const meta = {
+  component: ConfirmTrustedRecipientsDialog,
+  args: {
+    recipientsToBeConfirmed: [
+      {
+        instance: 'https://example.com',
+        isOwner: false,
+        status: 'ready',
+        recipientConfirmationData: null,
+        verifyRecipient: () => {},
+        fadeIn: true,
+        type: 'two-way',
+        onRevoke: () => {},
+        onRevokeSelf: () => {}
+      }
+    ]
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    twoStepsConfirmationMethods: {
+      getRecipientsToBeConfirmed: () => [
+        {
+          name: 'John Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        },
+        {
+          name: 'Alice Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }
+      ]
+    },
+    verifyRecipient: () => {}
+  }
+}

package/src/components/Recipient/GroupRecipient.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Fade from 'cozy-ui/transpiled/react/Fade'
@@ -7,16 +7,21 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import { GroupRecipientDetail } from './GroupRecipientDetail'
 import { GroupRecipientPermissions } from './GroupRecipientPermissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, members, fadeIn } = props
+  const { name, members, fadeIn, owner } = props
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
+
+  const [isDetailOpened, setDetailOpened] = useState(false)
 
   const nbMember = members.length
   const nbMemberReady = members.filter(
@@ -26,30 +31,52 @@ const GroupRecipient = props => {
     member => member.instance === client.options.uri
   )
 
+  const toogleDetailOpened = () => {
+    setDetailOpened(!isDetailOpened)
+  }
+
+  const closeDetail = () => {
+    setDetailOpened(false)
+  }
+
   return (
-    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
-        <ListItemIcon>
-          <GroupAvatar size="small" />
-        </ListItemIcon>
-        <ListItemText
-          primary={
-            <Typography className="u-ellipsis" variant="body1">
-              {name}
-            </Typography>
-          }
-          secondary={
-            t('GroupRecipient.secondary', { nbMember, nbMemberReady }) +
-            (isCurrentInstanceInsideMembers
-              ? ` (${t('GroupRecipient.secondary_you')})`
-              : '')
-          }
+    <>
+      <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
+        <ListItem
+          button
+          onClick={toogleDetailOpened}
+          gutters={isMobile ? 'default' : 'double'}
+        >
+          <ListItemIcon>
+            <GroupAvatar size="small" />
+          </ListItemIcon>
+          <ListItemText
+            primary={
+              <Typography className="u-ellipsis" variant="body1">
+                {name}
+              </Typography>
+            }
+            secondary={
+              t('GroupRecipient.secondary', { nbMember, nbMemberReady }) +
+              (isCurrentInstanceInsideMembers
+                ? ` (${t('GroupRecipient.secondary_you')})`
+                : '')
+            }
+          />
+          <ListItemSecondaryAction className={isMobile ? 'u-mr-1' : 'u-mr-2'}>
+            <GroupRecipientPermissions {...props} />
+          </ListItemSecondaryAction>
+        </ListItem>
+      </Fade>
+      {isDetailOpened ? (
+        <GroupRecipientDetail
+          owner={owner}
+          name={name}
+          members={members}
+          onClose={closeDetail}
         />
-        <ListItemSecondaryAction>
-          <GroupRecipientPermissions {...props} />
-        </ListItemSecondaryAction>
-      </ListItem>
-    </Fade>
+      ) : null}
+    </>
   )
 }
 

package/src/components/Recipient/GroupRecipient.stories.jsx

@@ -4,8 +4,9 @@ const meta = {
   component: GroupRecipient,
   args: {
     name: 'Family',
-    isOwner: true,
-    read_only: false,
+    owner: {
+      public_name: 'Alice'
+    },
     members: [
       { status: 'ready' },
       { status: 'mail-not-sent' },

package/src/components/Recipient/GroupRecipientDetail.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
+import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
+
+const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
+  const { t } = useI18n()
+  const withAccess = members.filter(
+    member => !['revoked', 'mail-not-sent'].includes(member.status)
+  )
+  const withoutAccess = members.filter(member =>
+    ['revoked', 'mail-not-sent'].includes(member.status)
+  )
+
+  const ownerName = owner.public_name
+
+  return (
+    <Dialog
+      open
+      size="small"
+      onClose={onClose}
+      title={
+        <>
+          {name}
+          {ownerName ? (
+            <Typography variant="caption">
+              {t('GroupRecipientDetail.subtitle', { ownerName })}
+            </Typography>
+          ) : null}
+        </>
+      }
+      content={
+        <div className="u-flex u-stack-xs u-flex-column">
+          {withAccess.length > 0 ? (
+            <GroupRecipientDetailWithAccess withAccess={withAccess} />
+          ) : null}
+          {withoutAccess.length > 0 ? (
+            <GroupRecipientDetailWithoutAccess withoutAccess={withoutAccess} />
+          ) : null}
+        </div>
+      }
+    />
+  )
+}
+
+export { GroupRecipientDetail }

package/src/components/Recipient/GroupRecipientDetail.stories.jsx

@@ -0,0 +1,53 @@
+import { GroupRecipientDetail } from './GroupRecipientDetail'
+
+const meta = {
+  component: GroupRecipientDetail,
+  args: {
+    name: 'Family',
+    owner: {
+      public_name: 'Alice'
+    }
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    members: [
+      {
+        name: 'Alice',
+        instance: 'http://alice.cozy.localhost:8080',
+        status: 'ready'
+      },
+      { name: 'marine@google.com', status: 'mail-not-sent' },
+      { email: 'Martin', status: 'pending' },
+      { name: 'Paul', status: 'revoked' }
+    ]
+  }
+}
+
+export const OnlyWithAccess = {
+  name: 'OnlyWithAccess',
+  args: {
+    members: [
+      {
+        name: 'Alice',
+        instance: 'http://alice.cozy.localhost:8080',
+        status: 'ready'
+      },
+      { name: 'Martin', status: 'pending' }
+    ]
+  }
+}
+
+export const OnlyWithoutAccess = {
+  name: 'OnlyWithoutAccess',
+  args: {
+    members: [
+      { name: 'marine@google.com', status: 'mail-not-sent' },
+      { name: 'Paul', status: 'revoked' }
+    ]
+  }
+}

package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
+import List from 'cozy-ui/transpiled/react/List'
+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 { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getInitials, getDisplayName } from '../../models'
+
+const GroupRecipientDetailWithAccess = ({ withAccess }) => {
+  const { t } = useI18n()
+
+  return (
+    <div>
+      <Typography variant="subtitle2">
+        {t('GroupRecipientDetail.withAccess.title')}
+      </Typography>
+      <List>
+        {withAccess.map(recipient => {
+          const name = getDisplayName(recipient)
+
+          return (
+            <ListItem disableGutters key={recipient.index}>
+              <ListItemIcon>
+                <Avatar text={getInitials(recipient)} textId={name} />
+              </ListItemIcon>
+              <ListItemText
+                primary={name}
+                secondary={
+                  recipient.instance ? (
+                    <div className="u-flex u-flex-items-center">
+                      <Icon
+                        icon={ToTheCloudIcon}
+                        size={10}
+                        style={{
+                          marginRight: '0.25rem'
+                        }}
+                      />
+                      {recipient.instance}
+                    </div>
+                  ) : null
+                }
+              />
+            </ListItem>
+          )
+        })}
+      </List>
+    </div>
+  )
+}
+
+export { GroupRecipientDetailWithAccess }

package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
+import List from 'cozy-ui/transpiled/react/List'
+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 { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getInitials, getDisplayName } from '../../models'
+
+const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
+  const { t } = useI18n()
+
+  return (
+    <div>
+      <Typography variant="subtitle2">
+        {t('GroupRecipientDetail.withoutAccess.title')}
+      </Typography>
+      <List>
+        {withoutAccess.map(recipient => {
+          const icon = recipient.status === 'revoked' ? ForbiddenIcon : null
+          const name = getDisplayName(recipient)
+
+          return (
+            <ListItem disableGutters key={recipient.index}>
+              <ListItemIcon>
+                <Avatar text={getInitials(recipient)} textId={name} />
+              </ListItemIcon>
+              <ListItemText
+                primary={name}
+                secondary={
+                  <div className="u-flex u-flex-items-center">
+                    {icon ? (
+                      <Icon
+                        icon={icon}
+                        size={10}
+                        style={{
+                          marginRight: '0.25rem'
+                        }}
+                      />
+                    ) : null}
+                    {t(
+                      `GroupRecipientDetail.withoutAccess.status.${recipient.status}`
+                    )}
+                  </div>
+                }
+              />
+            </ListItem>
+          )
+        })}
+      </List>
+    </div>
+  )
+}
+
+export { GroupRecipientDetailWithoutAccess }

package/src/components/Recipient/LinkRecipient.jsx

@@ -9,6 +9,7 @@ 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 useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'
@@ -18,6 +19,7 @@ import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
 
@@ -32,7 +34,7 @@ const LinkRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <Circle size="small" className={styles['link-recipient-icon-circle']}>
             <Icon icon={LinkIcon} />

package/src/components/Recipient/MemberRecipient.jsx

@@ -7,6 +7,7 @@ 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 useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipientPermissions from './MemberRecipientPermissions'
@@ -21,6 +22,7 @@ const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
 const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
 
   const {
     instance,
@@ -48,7 +50,7 @@ const MemberRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <MemberAvatar size="small" recipient={props} />
         </ListItemIcon>

package/src/components/Recipient/RecipientList.stories.jsx

@@ -38,6 +38,9 @@ export const WithGroup = {
         addedBy: 0,
         read_only: false,
         index: 0,
+        owner: {
+          public_name: 'Alice'
+        },
         members: [
           {
             status: 'pending',

package/src/components/ShareDialogCozyToCozy.jsx

@@ -2,6 +2,7 @@ import cx from 'classnames'
 import React from 'react'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByEmail } from './ShareByEmail'
@@ -39,47 +40,49 @@ const SharingContent = ({
   onRevokeLink
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <div className={cx(styles['share-modal-content'])}>
-      {showShareOnlyByLink && (
-        <div className={styles['share-byemail-onlybylink']}>
-          {t(`${documentType}.share.shareByEmail.onlyByLink`, {
-            type: t(
-              `${documentType}.share.shareByEmail.type.${
-                document.type === 'directory' ? 'folder' : 'file'
-              }`
-            )
-          })}{' '}
-          <strong>
-            {t(
-              `${documentType}.share.shareByEmail.${
-                hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
-              }`
-            )}
-          </strong>
-        </div>
-      )}
-      <Typography variant="h6" className="u-mb-1-half">
-        {t('Share.contacts.whoHasAccess')}
-      </Typography>
-      {showShareByEmail && (
-        <DumbShareByEmail
-          contacts={contacts}
-          contactGroups={contactGroups}
-          createContact={createContact}
-          currentRecipients={recipients}
-          document={document}
-          documentType={documentType}
-          needsContactsPermission={needsContactsPermission}
-          onShare={onShare}
-          sharing={sharing}
-          sharingDesc={sharingDesc}
-        />
-      )}
+      <div className={cx('u-pt-1-half', isMobile ? 'u-ph-1' : 'u-ph-2')}>
+        {showShareOnlyByLink && (
+          <div className={styles['share-byemail-onlybylink']}>
+            {t(`${documentType}.share.shareByEmail.onlyByLink`, {
+              type: t(
+                `${documentType}.share.shareByEmail.type.${
+                  document.type === 'directory' ? 'folder' : 'file'
+                }`
+              )
+            })}{' '}
+            <strong>
+              {t(
+                `${documentType}.share.shareByEmail.${
+                  hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
+                }`
+              )}
+            </strong>
+          </div>
+        )}
+        <Typography variant="h6" className="u-mb-1-half">
+          {t('Share.contacts.whoHasAccess')}
+        </Typography>
+        {showShareByEmail && (
+          <DumbShareByEmail
+            contacts={contacts}
+            contactGroups={contactGroups}
+            createContact={createContact}
+            currentRecipients={recipients}
+            document={document}
+            documentType={documentType}
+            needsContactsPermission={needsContactsPermission}
+            onShare={onShare}
+            sharing={sharing}
+            sharingDesc={sharingDesc}
+          />
+        )}
+      </div>
       {showWhoHasAccess && (
         <WhoHasAccess
-          className="u-mt-half"
           document={document}
           documentType={documentType}
           isOwner={isOwner}
@@ -129,6 +132,7 @@ const ShareDialogCozyToCozy = ({
       dialogContentOnShare={SharingContent}
       dialogActionsOnShare={showShareByLink ? DumbShareByLink : null}
       dialogTitleOnShare={SharingTitleFunction({ documentType, document })}
+      disableGutters
     />
   )
 }

package/src/components/ShareDialogOnlyByLink.jsx

@@ -1,7 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByLink } from './ShareByLink'
@@ -22,8 +24,11 @@ const ShareDialogOnlyByLink = ({
   permissions
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+
   return (
     <Dialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}
@@ -32,11 +37,13 @@ const ShareDialogOnlyByLink = ({
       })}
       content={
         <>
-          <Typography variant="h6">
+          <Typography
+            variant="h6"
+            className={cx(isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')}
+          >
             {t('Share.contacts.whoHasAccess')}
           </Typography>
           <WhoHasAccess
-            className="u-mt-half"
             document={document}
             documentType={documentType}
             isOwner={isOwner}
@@ -48,12 +55,19 @@ const ShareDialogOnlyByLink = ({
             onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
             onRevokeLink={onRevokeLink}
           />
-          <DumbShareByLink
-            link={link}
-            document={document}
-            documentType={documentType}
-            onEnable={onShareByLink}
-          />
+          <div
+            className={cx(
+              'u-mt-half',
+              isMobile ? 'u-ph-1 u-mb-1' : 'u-ph-2 u-mb-1-half'
+            )}
+          >
+            <DumbShareByLink
+              link={link}
+              document={document}
+              documentType={documentType}
+              onEnable={onShareByLink}
+            />
+          </div>
         </>
       }
     />

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -282,6 +282,7 @@ const ShareDialogTwoStepsConfirmationContainer = ({
 
   return (
     <FixedDialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}