cozy-sharing 33.5.0 → 33.6.0

package/dist/stylesheet.css

@@ -339,28 +339,6 @@
 input[type=text] {
   width: 100%;
 }
-.share__share-details-created___z3nvO,
-.share__share-details-perm___3HjxK {
-  font-size: 1rem;
-  margin: 0.5rem 0 0.5rem 3.5rem;
-  padding-left: 1.5rem;
-  background-position: 0 center;
-  background-repeat: no-repeat;
-}
-.share__share-details-created___z3nvO {
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iMTZweCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyNC4wMDAwMDAsIC0xOTIuMDAwMDAwKSI+CiAgICAgICAgPGcgaWQ9InNsaWNlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIuMDAwMDAwLCAzMi4wMDAwMDApIj48L2c+CiAgICAgICAgPHBhdGggZD0iTTIzNywxOTMgTDI0MCwxOTMgTDI0MCwxOTUgTDIyNCwxOTUgTDIyNCwxOTMgTDIyNywxOTMgTDIyNywxOTIgTDIyOSwxOTIgTDIyOSwxOTMgTDIzNSwxOTMgTDIzNSwxOTIgTDIzNywxOTIgTDIzNywxOTMgWiBNMjI0LDE5NiBMMjQwLDE5NiBMMjQwLDIwNi45OTc1MjcgQzI0MCwyMDcuNTUxMTc3IDIzOS41NTUzNjksMjA4IDIzOC45OTkxMjgsMjA4IEwyMjUuMDAwODcyLDIwOCBDMjI0LjQ0ODEwNiwyMDggMjI0LDIwNy41NDQyMzkgMjI0LDIwNi45OTc1MjcgTDIyNCwxOTYgWiBNMjI2LDE5OCBMMjI2LDIwNiBMMjM4LDIwNiBMMjM4LDE5OCBMMjI2LDE5OCBaIE0yMzIsMjAxIEwyMzcsMjAxIEwyMzcsMjA1IEwyMzIsMjA1IEwyMzIsMjAxIFoiIGlkPSJjYWxlbmRhciIgZmlsbD0iIzk1OTk5RCI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=");
-}
-.share__share-details-perm___3HjxK {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsPSIjOTU5OTlEIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMDEuNSw5OS41IEwxOTIsMTA5LjAyNTM5MSBMMTkyLDExMiBMMTk1LjAzNzcyLDExMiBMMjA0LjUsMTAyLjUgTDIwMS41LDk5LjUgWiBNMjA2LjkxMjE1NCw5Ni45MTIxNTQxIEMyMDYuMTMyMjQzLDk2LjEzMjI0MjkgMjA0Ljg2OTE0NCw5Ni4xMzA4NTU2IDIwNC4wODkyNjQsOTYuOTEwNzM2MSBMMjAzLDk4IEwyMDYuMDMwNzYyLDEwMSBMMjA3LjA5MjI3MSw5OS45MjUyNjYzIEMyMDcuODY5NzM4LDk5LjEzODExMzQgMjA3Ljg2Mzc3Nyw5Ny44NjM3NzcyIDIwNy4wODc4NDYsOTcuMDg3ODQ1OSBMMjA2LjkxMjE1NCw5Ni45MTIxNTQxIFogTTE5OSwxMTAgTDIwNC45OTcwNzEsMTEwIEMyMDUuNTUwOTczLDExMCAyMDYsMTEwLjQ0Mzg2NSAyMDYsMTExIEMyMDYsMTExLjU1MjI4NSAyMDUuNTUzNjg5LDExMiAyMDUuMDAyNDU1LDExMiBMMTk3LDExMiBMMTk5LDExMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTkyIC05NikiLz4KPC9zdmc+Cg==");
-  margin-bottom: 0.2rem;
-}
-.share__share-details-perm-desc___3HyHu {
-  font-size: 0.875rem;
-  margin: 0 0 0.5rem 3.5rem;
-  padding-left: 1.5rem;
-  line-height: 1.5;
-  color: var(--secondaryTextColor);
-}
 /*  imported from autosuggest.styl  */
 
 .autosuggest__container___1Yro7 {

package/locales/en.json

@@ -23,8 +23,7 @@
       "you": "You",
       "anyoneWithTheLink": "Anyone with the link",
       "linkWithPassword": "Anyone with a password",
-      "expires": "Until %{date}",
-      "accessCount": "%{count} people have access"
+      "expires": "Until %{date}"
     },
     "create-cozy": "Create |||| Create my Twake",
     "members": {

package/locales/fr.json

@@ -23,8 +23,7 @@
       "you": "Vous",
       "anyoneWithTheLink": "Tous les utilisateurs qui ont le lien",
       "linkWithPassword": "Tous les utilisateurs avec le mot de passe",
-      "expires": "Jusqu'au %{date}",
-      "accessCount": "%{count} personnes y ont accès"
+      "expires": "Jusqu'au %{date}"
     },
     "create-cozy": "Créer |||| Créer mon Twake",
     "members": {

package/locales/ru.json

@@ -23,8 +23,7 @@
       "you": "Вы",
       "anyoneWithTheLink": "Любой, у кого есть ссылка",
       "linkWithPassword": "Любой с паролем",
-      "expires": "До %{date}",
-      "accessCount": "%{count} человек имеют доступ"
+      "expires": "До %{date}"
     },
     "create-cozy": "Создать |||| Создать мой Twake",
     "members": {

package/locales/vi.json

@@ -23,8 +23,7 @@
       "you": "Bạn",
       "anyoneWithTheLink": "Bất kỳ ai có liên kết",
       "linkWithPassword": "Bất kỳ ai có mật khẩu",
-      "expires": "Cho đến %{date}",
-      "accessCount": "%{count} người có quyền truy cập"
+      "expires": "Cho đến %{date}"
     },
     "create-cozy": "Tạo |||| Tạo Twake của tôi",
     "members": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "33.5.0",
+  "version": "33.6.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -83,5 +83,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "34a93967119b6820f76f35b01832d1a1627cc58f"
+  "gitHead": "fc451fb2e649fffe6bfc8f16ff812ba4c31531cf"
 }

package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx

@@ -38,6 +38,8 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
                     status={recipient.status}
                     isMe={isMe}
                     instance={recipient.instance}
+                    email={recipient.email}
+                    name={recipient.name || recipient.public_name}
                   />
                 }
               />

package/src/components/Recipient/LinkRecipient.jsx

@@ -24,16 +24,51 @@ import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { useSharingContext } from '../../hooks/useSharingContext'
 import { ShareRestrictionModal } from '../ShareRestrictionModal/ShareRestrictionModal'
 
+const LinkRecipientTextReadOnly = ({ textPrimary, textSecondary }) => {
+  return (
+    <ListItemText
+      primary={
+        <div className="u-flex u-flex-items-center">
+          <Typography>{textPrimary}</Typography>
+        </div>
+      }
+      secondary={textSecondary}
+    />
+  )
+}
+
+const LinkRecipientText = ({ onClick, textPrimary, textSecondary }) => {
+  return (
+    <ListItemText
+      onClick={onClick}
+      primary={
+        <div className="u-flex u-flex-items-center">
+          <Typography className="u-c-pointer ">{textPrimary}</Typography>
+          <IconButton size="small" className="u-ml-half">
+            <Icon icon={Gear} />
+          </IconButton>
+        </div>
+      }
+      secondary={textSecondary}
+    />
+  )
+}
+
 const LinkRecipient = props => {
   const { t, f, lang } = useI18n()
   const { isMobile } = useBreakpoints()
   const { getDocumentPermissions } = useSharingContext()
 
-  const { recipientConfirmationData, verifyRecipient, fadeIn, document } = props
+  const {
+    recipientConfirmationData,
+    verifyRecipient,
+    fadeIn,
+    document,
+    isReadOnly
+  } = props
 
   const [openShareRestrictionModal, setOpenShareRestrictionModal] =
     useState(false)
-
   const permissions = getDocumentPermissions(document?._id)
   const hasPassword = checkIsPermissionHasPassword(permissions)
   const expiresDate = getPermissionExpiresDate(permissions)
@@ -57,7 +92,7 @@ const LinkRecipient = props => {
       verifyRecipient={verifyRecipient}
     />
   ) : (
-    <LinkRecipientPermissions {...props} className="u-flex-shrink-0" />
+    <LinkRecipientPermissions {...props} />
   )
 
   return (
@@ -68,18 +103,18 @@ const LinkRecipient = props => {
             <Icon icon={LinkIcon} />
           </Avatar>
         </ListItemIcon>
-        <ListItemText
-          onClick={() => setOpenShareRestrictionModal(true)}
-          primary={
-            <div className="u-flex u-flex-items-center">
-              <Typography className="u-c-pointer ">{textPrimary}</Typography>
-              <IconButton size="small" className="u-ml-half">
-                <Icon icon={Gear} />
-              </IconButton>
-            </div>
-          }
-          secondary={textSecondary}
-        />
+        {isReadOnly ? (
+          <LinkRecipientTextReadOnly
+            textPrimary={textPrimary}
+            textSecondary={textSecondary}
+          />
+        ) : (
+          <LinkRecipientText
+            onClick={() => setOpenShareRestrictionModal(true)}
+            textPrimary={textPrimary}
+            textSecondary={textSecondary}
+          />
+        )}
         {RightPart}
         {openShareRestrictionModal && (
           <ShareRestrictionModal

package/src/components/Recipient/LinkRecipientPermissions.jsx

@@ -7,6 +7,7 @@ import {
   divider
 } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
 import { revokeLink } from './actions/revokeLink'
@@ -17,7 +18,7 @@ import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
 import { useSharingContext } from '../../hooks/useSharingContext'
 import { WRITE_PERMS, READ_ONLY_PERMS } from '../ShareRestrictionModal/helpers'
 
-const LinkRecipientPermissions = ({ className, document }) => {
+const LinkRecipientPermissions = ({ document, isReadOnly }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
@@ -56,30 +57,36 @@ const LinkRecipientPermissions = ({ className, document }) => {
     handleRevocation
   })
 
+  const shouldShowMenu = !isReadOnly
+
   return (
-    <div className={className}>
-      <>
-        <DropdownButton
-          ref={buttonRef}
-          textVariant="body2"
-          onClick={toggleMenu}
-        >
-          {t(`Share.type.${type}`)}
-        </DropdownButton>
-        <ActionsMenu
-          ref={buttonRef}
-          open={isMenuDisplayed}
-          actions={actions}
-          autoClose
-          onClose={hideMenu}
-        />
-      </>
-    </div>
+    <>
+      {!shouldShowMenu && (
+        <Typography variant="body2">{t(`Share.type.${type}`)}</Typography>
+      )}
+      {shouldShowMenu && (
+        <>
+          <DropdownButton
+            ref={buttonRef}
+            textVariant="body2"
+            onClick={toggleMenu}
+          >
+            {t(`Share.type.${type}`)}
+          </DropdownButton>
+          <ActionsMenu
+            ref={buttonRef}
+            open={isMenuDisplayed}
+            actions={actions}
+            autoClose
+            onClose={hideMenu}
+          />
+        </>
+      )}
+    </>
   )
 }
 
 LinkRecipientPermissions.propTypes = {
-  className: PropTypes.string,
   document: PropTypes.object.isRequired
 }
 

package/src/components/Recipient/MemberRecipient.jsx

@@ -46,7 +46,7 @@ const MemberRecipient = props => {
       verifyRecipient={verifyRecipient}
     />
   ) : (
-    <MemberRecipientPermissions {...props} className="u-flex-shrink-0" />
+    <MemberRecipientPermissions {...props} />
   )
 
   return (
@@ -66,6 +66,8 @@ const MemberRecipient = props => {
               status={status}
               isMe={isMe}
               instance={instance}
+              email={rest.email}
+              name={rest.name || rest.public_name}
             />
           }
         />

package/src/components/Recipient/MemberRecipientLite.jsx

@@ -38,6 +38,8 @@ const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
             status={recipient.status}
             isMe={isMe}
             instance={recipient.instance}
+            email={recipient.email}
+            name={recipient.name || recipient.public_name}
             typographyProps={{ noWrap: true }}
           />
         }

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -21,11 +21,11 @@ const log = minilog('MemberRecipientPermissions')
 
 const MemberRecipientPermissions = ({
   isOwner,
+  isReadOnly,
   status,
   instance,
   type,
   document,
-  className,
   onRevoke,
   onRevokeSelf,
   sharingId,
@@ -44,6 +44,7 @@ const MemberRecipientPermissions = ({
     instance !== undefined && instance === client.options.uri
   const contactIsOwner = status === 'owner'
   const shouldShowMenu =
+    !isReadOnly &&
     !revoking &&
     !contactIsOwner &&
     ((instanceMatchesClient && !isOwner) || isOwner)
@@ -107,10 +108,14 @@ const MemberRecipientPermissions = ({
   )
 
   return (
-    <div className={className}>
+    <>
       {revoking && <Spinner />}
-      {!shouldShowMenu && !revoking && (
-        <Typography variant="body2">{t(`Share.status.${status}`)}</Typography>
+      {!shouldShowMenu && (
+        <Typography variant="body2">
+          {contactIsOwner
+            ? t(`Share.status.${status}`)
+            : t(`Share.type.${type}`)}
+        </Typography>
       )}
       {shouldShowMenu && (
         <>
@@ -140,7 +145,7 @@ const MemberRecipientPermissions = ({
           </IconButton>
         </>
       )}
-    </div>
+    </>
   )
 }
 

package/src/components/Recipient/MemberRecipientStatus.jsx

@@ -1,42 +1,51 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye'
-import PaperplaneIcon from 'cozy-ui/transpiled/react/Icons/Paperplane'
-import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
-const MemberRecipientStatus = ({ status, isMe, instance, typographyProps }) => {
+const MemberRecipientStatus = ({
+  status,
+  isMe,
+  instance,
+  email,
+  name,
+  typographyProps
+}) => {
   const { t } = useI18n()
 
   const isSendingEmail = !isMe && status === 'mail-not-sent'
   const isReady = isMe || status === 'ready' || status === 'owner'
-  let text, icon
+  let text
   if (isReady) {
-    text = instance
-    icon = ToTheCloudIcon
+    // Hide the email when the parent already uses it as the primary text
+    // (getDisplayName falls back to email when the recipient has no name).
+    // Keep the instance visible when there is no email at all, so the user
+    // can still tell the recipient lives on a different Cozy instance.
+    text = isMe || name || !email ? email || instance : ''
   } else if (isSendingEmail) {
     text = t('Share.status.mail-not-sent')
-    icon = PaperplaneIcon
   } else {
     const supportedStatus = ['pending', 'seen']
     text = supportedStatus.includes(status)
       ? t(`Share.status.${status}`)
       : t('Share.status.pending')
-
-    icon = status === 'seen' ? EyeIcon : PaperplaneIcon
   }
 
   return (
-    <div className="u-flex u-flex-items-center">
-      <Icon icon={icon} size={10} />
-      &nbsp;
-      <Typography variant="caption" color="textSecondary" {...typographyProps}>
-        {text}
-      </Typography>
-    </div>
+    <Typography variant="caption" color="textSecondary" {...typographyProps}>
+      {text}
+    </Typography>
   )
 }
 
+MemberRecipientStatus.propTypes = {
+  status: PropTypes.string,
+  isMe: PropTypes.bool,
+  instance: PropTypes.string,
+  email: PropTypes.string,
+  name: PropTypes.string,
+  typographyProps: PropTypes.object
+}
+
 export default MemberRecipientStatus

package/src/components/Recipient/MemberRecipientStatus.spec.jsx

@@ -0,0 +1,97 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import MemberRecipientStatus from './MemberRecipientStatus'
+import AppLike from '../../../test/AppLike'
+
+describe('MemberRecipientStatus component', () => {
+  const setup = props =>
+    render(
+      <AppLike>
+        <MemberRecipientStatus {...props} />
+      </AppLike>
+    )
+
+  it('should show email when status is ready and recipient has a name', () => {
+    const { getByText } = setup({
+      status: 'ready',
+      isMe: false,
+      email: 'other@example.com',
+      instance: 'foo.mycozy.cloud',
+      name: 'Other Person'
+    })
+    expect(getByText('other@example.com')).toBeTruthy()
+  })
+
+  it('should render nothing when recipient has no name and status is ready', () => {
+    const { queryByText } = setup({
+      status: 'ready',
+      isMe: false,
+      email: 'other@example.com',
+      instance: 'foo.mycozy.cloud'
+    })
+    expect(queryByText('other@example.com')).toBe(null)
+    expect(queryByText('foo.mycozy.cloud')).toBe(null)
+  })
+
+  it('should show email when isMe is true regardless of status', () => {
+    const { getByText } = setup({
+      status: 'pending',
+      isMe: true,
+      email: 'me@example.com'
+    })
+    expect(getByText('me@example.com')).toBeTruthy()
+  })
+
+  it('should fallback to instance when email is missing and status is ready', () => {
+    const { getByText } = setup({
+      status: 'ready',
+      isMe: false,
+      instance: 'foo.mycozy.cloud'
+    })
+    expect(getByText('foo.mycozy.cloud')).toBeTruthy()
+  })
+
+  it('should show email when status is owner, not isMe, and recipient has a name', () => {
+    const { getByText } = setup({
+      status: 'owner',
+      isMe: false,
+      email: 'owner@example.com',
+      instance: 'foo.mycozy.cloud',
+      name: 'Owner Person'
+    })
+    expect(getByText('owner@example.com')).toBeTruthy()
+  })
+
+  it('should show "Sending invitation mail..." when status is mail-not-sent and not isMe', () => {
+    const { getByText } = setup({
+      status: 'mail-not-sent',
+      isMe: false
+    })
+    expect(getByText('Sending invitation mail...')).toBeTruthy()
+  })
+
+  it('should show "Invitation sent" when status is pending', () => {
+    const { getByText } = setup({
+      status: 'pending',
+      isMe: false
+    })
+    expect(getByText('Invitation sent')).toBeTruthy()
+  })
+
+  it('should show "Invitation seen" when status is seen', () => {
+    const { getByText } = setup({
+      status: 'seen',
+      isMe: false
+    })
+    expect(getByText('Invitation seen')).toBeTruthy()
+  })
+
+  it('should fallback to "Invitation sent" for unknown status', () => {
+    const { getByText } = setup({
+      status: 'unknown-status',
+      isMe: false
+    })
+    expect(getByText('Invitation sent')).toBeTruthy()
+  })
+})

package/src/components/Recipient/RecipientList.jsx

@@ -10,6 +10,7 @@ const RecipientList = ({
   recipientsToBeConfirmed,
   isOwner,
   isSharedDrive,
+  isReadOnly,
   document,
   documentType,
   onRevoke,
@@ -49,6 +50,7 @@ const RecipientList = ({
         key={recipient.index}
         isOwner={isOwner}
         isSharedDrive={isSharedDrive}
+        isReadOnly={isReadOnly}
         document={document}
         documentType={documentType}
         onRevoke={onRevoke}

package/src/components/ShareModal/ShareModal.jsx

@@ -22,8 +22,6 @@ export const ShareModal = withLocales(props => {
     isOwner,
     canReshare,
     documentType,
-    getOwner,
-    getSharingType,
     getRecipients,
     revokeSelf,
     allLoaded
@@ -48,11 +46,9 @@ export const ShareModal = withLocales(props => {
 
   return (
     <SharingDetailsModal
+      recipients={getRecipients(document.id)}
       document={document}
       documentType={documentType}
-      owner={getOwner(document.id)}
-      sharingType={getSharingType(document.id)}
-      recipients={getRecipients(document.id)}
       onRevoke={revokeSelf}
       onRevokeSelf={handleRevokeSelf}
       {...rest}

package/src/components/ShareModal/SharingDetailsModal.jsx

@@ -1,29 +1,21 @@
-import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
-import { getDisplayName } from '../../models'
 import styles from '../../styles/share.styl'
-import OwnerIdentity from '../Identity/OwnerIdentity'
 import WhoHasAccess from '../WhoHasAccess'
 
 export const SharingDetailsModal = ({
   onClose,
-  sharingType,
-  owner,
   recipients,
   document,
   documentType = 'Document',
   onRevoke,
   onRevokeSelf
 }) => {
-  const { t, f } = useI18n()
-  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
 
   return (
     <Dialog
@@ -34,50 +26,14 @@ export const SharingDetailsModal = ({
       title={t(`${documentType}.share.details.title`)}
       content={
         <div className={styles['share-modal-content']}>
-          <div
-            className={cx(
-              styles['share-details'],
-              isMobile ? 'u-ph-1 u-pt-1-half' : 'u-ph-2 u-pt-1'
-            )}
-          >
-            {owner ? (
-              <OwnerIdentity
-                name={t(`${documentType}.share.sharedBy`, {
-                  name: getDisplayName(owner)
-                })}
-                url={owner.instance}
-              />
-            ) : null}
-            <div className={styles['share-details-created']}>
-              {t(`${documentType}.share.details.createdAt`, {
-                date: f(document.created_at || null, 'do LLLL yyyy')
-              })}
-            </div>
-            <div className={styles['share-details-perm']}>
-              {t(
-                `${documentType}.share.details.${
-                  sharingType === 'one-way' ? 'ro' : 'rw'
-                }`
-              )}
-            </div>
-            <div className={styles['share-details-perm-desc']}>
-              {t(
-                `${documentType}.share.details.desc.${
-                  sharingType === 'one-way' ? 'ro' : 'rw'
-                }`
-              )}
-            </div>
-          </div>
-          <Divider className="u-mv-1" />
           <WhoHasAccess
-            title={t('Share.recipients.accessCount', {
-              count: recipients.length
-            })}
+            isReadOnly
             recipients={recipients}
             document={document}
             documentType={documentType}
             onRevoke={onRevoke}
             onRevokeSelf={onRevokeSelf}
+            link="ok"
           />
         </div>
       }

package/src/components/WhoHasAccess.jsx

@@ -29,6 +29,7 @@ const RecipientWaitingForConfirmationAlert = ({ recipientsToBeConfirmed }) => {
 const WhoHasAccess = ({
   isOwner = false,
   isSharedDrive = false,
+  isReadOnly = false,
   showOwner = true,
   recipients,
   recipientsToBeConfirmed = [],
@@ -53,6 +54,7 @@ const WhoHasAccess = ({
       <List>
         {link && (
           <LinkRecipient
+            isReadOnly={isReadOnly}
             document={document}
             documentType={documentType}
             onRevoke={onRevoke}
@@ -69,6 +71,7 @@ const WhoHasAccess = ({
           recipientsToBeConfirmed={recipientsToBeConfirmed}
           isOwner={isOwner}
           isSharedDrive={isSharedDrive}
+          isReadOnly={isReadOnly}
           document={document}
           documentType={documentType}
           onRevoke={onRevoke}

package/src/state.js

@@ -351,7 +351,7 @@ export const canReshare = (state, docId, instanceUri) => {
   const sharing = getDocumentSharing(state, docId)
   const me = sharing.attributes.members.find(matchingInstanceName(instanceUri))
   if (sharing.drive) {
-    return me && !me.read_only
+    return !sharing.org_drive && me && !me.read_only
   } else {
     return sharing.attributes.open_sharing === true && me && !me.read_only
   }