cozy-sharing 28.5.0 → 28.7.0

package/src/components/Recipient/LinkRecipient.jsx

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
 import { useI18n } from 'twake-i18n'
 
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 import Fade from 'cozy-ui/transpiled/react/Fade'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 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 LinkRecipientPermissions from './LinkRecipientPermissions'
@@ -20,14 +20,17 @@ import {
 } from '../../helpers/permissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { useSharingContext } from '../../hooks/useSharingContext'
+import { ShareRestrictionModal } from '../ShareRestrictionModal/ShareRestrictionModal'
 
 const LinkRecipient = props => {
   const { t, f, lang } = useI18n()
   const { isMobile } = useBreakpoints()
   const { getDocumentPermissions } = useSharingContext()
 
-  const { recipientConfirmationData, verifyRecipient, link, fadeIn, document } =
-    props
+  const { recipientConfirmationData, verifyRecipient, fadeIn, document } = props
+
+  const [openShareRestrictionModal, setOpenShareRestrictionModal] =
+    useState(false)
 
   const permissions = getDocumentPermissions(document?._id)
   const hasPassword = checkIsPermissionHasPassword(permissions)
@@ -44,7 +47,7 @@ const LinkRecipient = props => {
     ? t('Share.recipients.expires', {
         date: dateFormatted
       })
-    : link
+    : ''
 
   const RightPart = recipientConfirmationData ? (
     <RecipientConfirm
@@ -64,17 +67,37 @@ const LinkRecipient = props => {
           </Avatar>
         </ListItemIcon>
         <ListItemText
-          primary={<Typography variant="body1">{textPrimary}</Typography>}
+          primary={
+            <DropdownButton
+              textVariant="body1"
+              onClick={() => setOpenShareRestrictionModal(true)}
+            >
+              {textPrimary}
+            </DropdownButton>
+          }
           secondary={textSecondary}
         />
         {RightPart}
+        {openShareRestrictionModal && (
+          <ShareRestrictionModal
+            file={document}
+            onClose={() => setOpenShareRestrictionModal(false)}
+          />
+        )}
       </ListItem>
     </Fade>
   )
 }
 
 LinkRecipient.propTypes = {
-  link: PropTypes.string.isRequired
+  recipientConfirmationData: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object
+  ]),
+  verifyRecipient: PropTypes.func,
+  fadeIn: PropTypes.bool,
+  document: PropTypes.object,
+  permissions: PropTypes.arrayOf(PropTypes.object)
 }
 
 export default LinkRecipient

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

@@ -5,7 +5,6 @@ const meta = {
   args: {
     recipientConfirmationData: false,
     verifyRecipient: () => true,
-    link: 'test',
     fadeIn: false
   }
 }

package/src/components/Recipient/LinkRecipientPermissions.jsx

@@ -2,18 +2,58 @@ import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 import { useI18n } from 'twake-i18n'
 
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import {
+  makeActions,
+  divider
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 
+import { revokeLink } from './actions/revokeLink'
+import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
+import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
+import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link'
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
-import { ShareRestrictionModal } from '../ShareRestrictionModal/ShareRestrictionModal'
+import { useSharingContext } from '../../hooks/useSharingContext'
+import { WRITE_PERMS, READ_ONLY_PERMS } from '../ShareRestrictionModal/helpers'
 
-const LinkRecipientPermissions = ({ className, document, permissions }) => {
+const LinkRecipientPermissions = ({ className, document }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
-  const [openShareRestrictionModal, setOpenShareRestrictionModal] =
-    useState(false)
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+  const {
+    updateDocumentPermissions,
+    revokeSharingLink,
+    documentType,
+    getDocumentPermissions
+  } = useSharingContext()
 
+  const permissions = getDocumentPermissions(document._id)
   const isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)
+  const type = isReadOnlyPermissions ? 'one-way' : 'two-way'
+
+  const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
+  const hideMenu = () => setMenuDisplayed(false)
+
+  const handleSetType = newType => {
+    const verbs = newType === 'one-way' ? READ_ONLY_PERMS : WRITE_PERMS
+    updateDocumentPermissions(document, { verbs })
+  }
+
+  const handleRevocation = () => revokeSharingLink(document)
+
+  const actionsToShow = [setReadOnlySharedPermission]
+  if (!isOnlyReadOnlyLinkAllowed({ documentType })) {
+    actionsToShow.push(setReadWriteSharedPermission)
+  }
+  actionsToShow.push(divider, revokeLink)
+
+  const actions = makeActions(actionsToShow, {
+    t,
+    type,
+    setType: handleSetType,
+    handleRevocation
+  })
 
   return (
     <div className={className}>
@@ -21,18 +61,17 @@ const LinkRecipientPermissions = ({ className, document, permissions }) => {
         <DropdownButton
           ref={buttonRef}
           textVariant="body2"
-          onClick={() => setOpenShareRestrictionModal(true)}
+          onClick={toggleMenu}
         >
-          {t(
-            `Share.type.${isReadOnlyPermissions ? 'one-way' : 'two-way'}`
-          ).toLowerCase()}
+          {t(`Share.type.${type}`).toLowerCase()}
         </DropdownButton>
-        {openShareRestrictionModal && (
-          <ShareRestrictionModal
-            file={document}
-            onClose={() => setOpenShareRestrictionModal(false)}
-          />
-        )}
+        <ActionsMenu
+          ref={buttonRef}
+          open={isMenuDisplayed}
+          actions={actions}
+          autoClose
+          onClose={hideMenu}
+        />
       </>
     </div>
   )
@@ -40,8 +79,7 @@ const LinkRecipientPermissions = ({ className, document, permissions }) => {
 
 LinkRecipientPermissions.propTypes = {
   className: PropTypes.string,
-  document: PropTypes.object.isRequired,
-  permissions: PropTypes.arrayOf(PropTypes.object).isRequired
+  document: PropTypes.object.isRequired
 }
 
 export default LinkRecipientPermissions

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

@@ -6,6 +6,17 @@ import { createMockClient } from 'cozy-client'
 import MemberRecipient from './MemberRecipient'
 import AppLike from '../../../test/AppLike'
 
+const mockUpdateDocumentPermissions = jest.fn()
+const mockUpdateSharingMemberType = jest.fn()
+
+jest.mock('../../hooks/useSharingContext', () => ({
+  // eslint-disable-next-line react/display-name
+  useSharingContext: () => ({
+    updateDocumentPermissions: mockUpdateDocumentPermissions,
+    updateSharingMemberType: mockUpdateSharingMemberType
+  })
+}))
+
 describe('MemberRecipient component', () => {
   const client = createMockClient({})
   client.options = {

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback } from 'react'
 import { useI18n } from 'twake-i18n'
 
 import { useClient } from 'cozy-client'
+import minilog from 'cozy-minilog'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import {
   makeActions,
@@ -10,9 +11,14 @@ import {
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 
-import { permission } from './actions/permission'
 import { revokeMember } from './actions/revokeMember'
+import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
+import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+const log = minilog('MemberRecipientPermissions')
 
 const MemberRecipientPermissions = ({
   isOwner,
@@ -30,6 +36,8 @@ const MemberRecipientPermissions = ({
   const { t } = useI18n()
   const buttonRef = useRef()
   const client = useClient()
+  const { updateSharingMemberType } = useSharingContext()
+  const { showAlert } = useAlert()
 
   const [revoking, setRevoking] = useState(false)
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
@@ -42,27 +50,72 @@ const MemberRecipientPermissions = ({
     !contactIsOwner &&
     ((instanceMatchesClient && !isOwner) || isOwner)
 
-  const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
-  const hideMenu = () => setMenuDisplayed(false)
+  const toggleMenu = useCallback(() => {
+    setMenuDisplayed(displayed => !displayed)
+  }, [])
+  const hideMenu = useCallback(() => {
+    setMenuDisplayed(false)
+  }, [])
 
   const handleRevocation = useCallback(async () => {
     setRevoking(true)
-    if (isOwner) {
-      await onRevoke(document, sharingId, memberIndex)
-    } else {
-      await onRevokeSelf(document)
+    try {
+      if (isOwner) {
+        await onRevoke(document, sharingId, memberIndex)
+      } else {
+        await onRevokeSelf(document)
+      }
+    } finally {
+      setRevoking(false)
     }
-    setRevoking(false)
   }, [isOwner, onRevoke, onRevokeSelf, document, sharingId, memberIndex])
 
-  const actions = makeActions([permission, divider, revokeMember], {
-    client,
-    t,
-    type: type ?? 'one-way',
-    isOwner,
-    isSharedDrive,
-    handleRevocation
-  })
+  const setType = useCallback(
+    async newType => {
+      if (newType === type) {
+        hideMenu()
+        return
+      }
+      try {
+        await updateSharingMemberType(sharingId, memberIndex, newType)
+      } catch (error) {
+        log.error('Failed to change member permission type', error)
+        showAlert({
+          message: t('Share.members.error.changePermission'),
+          severity: 'error',
+          variant: 'filled'
+        })
+      }
+      hideMenu()
+    },
+    [
+      hideMenu,
+      memberIndex,
+      sharingId,
+      showAlert,
+      t,
+      type,
+      updateSharingMemberType
+    ]
+  )
+
+  const actions = makeActions(
+    [
+      setReadOnlySharedPermission,
+      setReadWriteSharedPermission,
+      divider,
+      revokeMember
+    ],
+    {
+      client,
+      t,
+      type: type ?? 'one-way',
+      isOwner,
+      isSharedDrive,
+      setType,
+      handleRevocation
+    }
+  )
 
   return (
     <div className={className}>

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

@@ -0,0 +1,165 @@
+import { render, fireEvent, screen, act, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { createMockClient } from 'cozy-client'
+
+import MemberRecipientPermissions from './MemberRecipientPermissions'
+import AppLike from '../../../test/AppLike'
+
+const mockUpdateSharingMemberType = jest.fn()
+const mockShowAlert = jest.fn()
+
+jest.mock('../../hooks/useSharingContext', () => ({
+  useSharingContext: () => ({
+    updateSharingMemberType: mockUpdateSharingMemberType
+  })
+}))
+
+jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
+  __esModule: true,
+  default: ({ children }) => children,
+  useAlert: () => ({
+    showAlert: mockShowAlert
+  })
+}))
+
+describe('MemberRecipientPermissions component', () => {
+  const client = createMockClient({})
+  client.options = {
+    uri: 'http://cozy.local:8080'
+  }
+
+  const defaultProps = {
+    isOwner: true,
+    isSharedDrive: false,
+    status: 'ready',
+    instance: 'http://cozy.local:8080',
+    type: 'two-way',
+    document: { id: 'doc-123', type: 'io.cozy.files', path: '/test' },
+    sharingId: 'sharing-123',
+    memberIndex: 1,
+    onRevoke: jest.fn(),
+    onRevokeSelf: jest.fn()
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const setup = props => {
+    return render(
+      <AppLike client={client}>
+        <MemberRecipientPermissions {...defaultProps} {...props} />
+      </AppLike>
+    )
+  }
+
+  let createRangeBackup
+
+  beforeAll(() => {
+    createRangeBackup = global.document.createRange
+    global.document.createRange = jest.fn(() => ({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document
+      }
+    }))
+  })
+
+  afterAll(() => {
+    global.document.createRange = createRangeBackup
+  })
+
+  it('should render the current permission type', () => {
+    setup()
+    expect(screen.getByText('can change')).toBeInTheDocument()
+  })
+
+  it('should call updateSharingMemberType when changing to one-way', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByText } = setup({ type: 'two-way' })
+
+    fireEvent.click(getByText('can change'))
+    fireEvent.click(getByText('Can view'))
+
+    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
+      'sharing-123',
+      1,
+      'one-way'
+    )
+  })
+
+  it('should call updateSharingMemberType when changing to two-way', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByText } = setup({ type: 'one-way' })
+
+    fireEvent.click(getByText('can view'))
+    fireEvent.click(getByText('Can change'))
+
+    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
+      'sharing-123',
+      1,
+      'two-way'
+    )
+  })
+
+  it('should show error alert when updateSharingMemberType fails', async () => {
+    mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'))
+
+    const { getByText } = setup({ type: 'two-way' })
+
+    await act(async () => {
+      fireEvent.click(getByText('can change'))
+      fireEvent.click(getByText('Can view'))
+    })
+
+    await waitFor(() => {
+      expect(mockShowAlert).toHaveBeenCalledWith({
+        message:
+          'An error occurred while changing the permissions. Please try again.',
+        severity: 'error',
+        variant: 'filled'
+      })
+    })
+  })
+
+  it('should not call updateSharingMemberType when selecting same type', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByText } = setup({ type: 'two-way' })
+
+    fireEvent.click(getByText('can change'))
+    fireEvent.click(getByText('Can change'))
+
+    expect(mockUpdateSharingMemberType).not.toHaveBeenCalled()
+  })
+
+  it('should not render menu when user is not owner and not the shared drive contact', () => {
+    const { queryByText } = setup({
+      isOwner: false,
+      instance: 'http://other-cozy.local:8080'
+    })
+
+    expect(queryByText('can change')).not.toBeInTheDocument()
+    expect(queryByText('can view')).not.toBeInTheDocument()
+  })
+
+  it('should render menu for owner', () => {
+    const { getByText } = setup({ isOwner: true })
+
+    expect(getByText('can change')).toBeInTheDocument()
+  })
+
+  it('should render menu for the user themselves', () => {
+    const { getByText } = setup({
+      isOwner: false,
+      instance: 'http://cozy.local:8080'
+    })
+
+    expect(getByText('can change')).toBeInTheDocument()
+  })
+})

package/src/components/Recipient/actions/revokeLink.js

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const revokeLink = ({ t, handleRevocation }) => {
+  const title = t('Share.permissionLink.deactivate')
+
+  return {
+    name: 'revokeLink',
+    label: title,
+    icon: TrashIcon,
+    action: handleRevocation,
+    Component: forwardRef(function RevokeLinkItem(props, ref) {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={TrashIcon} color="var(--errorColor)" />
+          </ListItemIcon>
+          <ListItemText
+            primary={<Typography color="error">{title}</Typography>}
+          />
+        </ActionsMenuItem>
+      )
+    })
+  }
+}
+
+export { revokeLink }

package/src/components/Recipient/actions/setReadOnlySharedPermission.js

@@ -8,7 +8,7 @@ import Radios from 'cozy-ui/transpiled/react/Radios'
 const makeComponent = ({ label, type, onClick }) => {
   const Component = forwardRef((props, ref) => {
     return (
-      <ActionsMenuItem {...props} ref={ref} button={false} onClick={onClick}>
+      <ActionsMenuItem {...props} ref={ref} onClick={onClick}>
         <ListItemIcon>
           <Radios checked={type === 'one-way'} />
         </ListItemIcon>

package/src/components/Recipient/actions/setReadOnlySharedPermission.spec.jsx

@@ -0,0 +1,95 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import { setReadOnlySharedPermission } from './setReadOnlySharedPermission'
+import AppLike from '../../../../test/AppLike'
+
+const mockT = key => {
+  const translations = {
+    'Share.type.one-way': 'Can view',
+    'Share.type.two-way': 'Can change'
+  }
+  return translations[key] || key
+}
+
+describe('setReadOnlySharedPermission', () => {
+  let setType
+
+  beforeEach(() => {
+    setType = jest.fn()
+  })
+
+  it('should return correct action structure', () => {
+    const action = setReadOnlySharedPermission({
+      t: mockT,
+      type: 'one-way',
+      setType
+    })
+
+    expect(action.name).toBe('setReadOnlySharedPermission')
+    expect(action.label).toBe('Can view')
+    expect(action.icon).toBeNull()
+  })
+
+  it('should call setType with one-way when action is triggered', () => {
+    const action = setReadOnlySharedPermission({
+      t: mockT,
+      type: 'two-way',
+      setType
+    })
+
+    action.action()
+
+    expect(setType).toHaveBeenCalledWith('one-way')
+  })
+
+  it('should render radio as checked when type is one-way', () => {
+    const { Component } = setReadOnlySharedPermission({
+      t: mockT,
+      type: 'one-way',
+      setType
+    })
+
+    render(
+      <AppLike>
+        <Component />
+      </AppLike>
+    )
+
+    expect(screen.getByRole('radio')).toBeChecked()
+  })
+
+  it('should render radio as unchecked when type is two-way', () => {
+    const { Component } = setReadOnlySharedPermission({
+      t: mockT,
+      type: 'two-way',
+      setType
+    })
+
+    render(
+      <AppLike>
+        <Component />
+      </AppLike>
+    )
+
+    expect(screen.getByRole('radio')).not.toBeChecked()
+  })
+
+  it('should call setType with one-way when the component is clicked', () => {
+    const { Component } = setReadOnlySharedPermission({
+      t: mockT,
+      type: 'two-way',
+      setType
+    })
+
+    render(
+      <AppLike>
+        <Component />
+      </AppLike>
+    )
+
+    fireEvent.click(screen.getByText('Can view'))
+
+    expect(setType).toHaveBeenCalledWith('one-way')
+  })
+})

package/src/components/Recipient/actions/setReadWriteSharedPermission.js

@@ -8,7 +8,7 @@ import Radios from 'cozy-ui/transpiled/react/Radios'
 const makeComponent = ({ label, type, onClick }) => {
   const Component = forwardRef((props, ref) => {
     return (
-      <ActionsMenuItem {...props} ref={ref} button={false} onClick={onClick}>
+      <ActionsMenuItem {...props} ref={ref} onClick={onClick}>
         <ListItemIcon>
           <Radios checked={type === 'two-way'} />
         </ListItemIcon>