cozy-sharing 37.0.2 → 37.2.0

package/src/components/ShareLinkAccessModal/ShareLinkAccessModal.spec.jsx

@@ -0,0 +1,291 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { ShareLinkAccessModal } from './ShareLinkAccessModal'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+jest.mock('../../hooks/useSharingContext', () => ({
+  useSharingContext: jest.fn()
+}))
+
+jest.mock('../../hoc/withLocales', () => Component => props => (
+  <Component {...props} />
+))
+
+jest.mock('cozy-ui/transpiled/react/CozyDialogs', () => ({
+  ConfirmDialog: ({ title, content, actions, onBack, onClose, size }) => (
+    <div role="dialog" data-size={size}>
+      {onBack && <button onClick={onBack}>Back</button>}
+      {onClose && <button onClick={onClose}>Close</button>}
+      <div>{title}</div>
+      <div>{content}</div>
+      <div>{actions}</div>
+    </div>
+  )
+}))
+
+jest.mock('cozy-ui/transpiled/react/DropdownButton', () => {
+  const mockReact = require('react')
+
+  return {
+    __esModule: true,
+    default: mockReact.forwardRef(
+      ({ children, onClick, disabled, 'aria-label': ariaLabel }, ref) => (
+        <button
+          ref={ref}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          disabled={disabled}
+        >
+          {children}
+        </button>
+      )
+    )
+  }
+})
+
+jest.mock('cozy-ui/transpiled/react/Menu', () => ({
+  __esModule: true,
+  default: ({ open, children }) =>
+    open ? <div role="menu">{children}</div> : null
+}))
+
+jest.mock('cozy-ui/transpiled/react/MenuItem', () => ({
+  __esModule: true,
+  default: ({ children, onClick }) => (
+    <button onClick={onClick}>{children}</button>
+  )
+}))
+
+jest.mock('cozy-ui/transpiled/react/DatePicker', () => ({
+  __esModule: true,
+  default: ({ label, value, onChange, disabled }) => (
+    <input
+      aria-label={label}
+      type="date"
+      value={value.toISOString().slice(0, 10)}
+      onChange={event => onChange(new Date(event.target.value))}
+      disabled={disabled}
+    />
+  )
+}))
+
+jest.mock('cozy-ui/transpiled/react/TextField', () => ({
+  __esModule: true,
+  default: ({ label, value, onChange, disabled }) => (
+    <input
+      aria-label={label}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  )
+}))
+
+jest.mock('twake-i18n', () => ({
+  useI18n: () => ({
+    t: key =>
+      ({
+        'ShareLinkAccessModal.title': 'Set link access',
+        'ShareLinkAccessModal.introText':
+          'Choose what recipients can do with these files.',
+        'ShareLinkAccessModal.anyoneWithLink':
+          'Allow anyone with the link to access',
+        'ShareLinkAccessModal.settings': 'Sharing settings',
+        'ShareLinkAccessModal.accessLevel': 'Access level',
+        'ShareLinkAccessModal.viewer': 'Viewer',
+        'ShareLinkAccessModal.editor': 'Editor',
+        'ShareLinkAccessModal.cancel': 'Cancel',
+        'ShareLinkAccessModal.addLinks': 'Add links',
+        'ShareLinkAccessModal.settingsTitle': 'Sharing settings',
+        'ShareLinkAccessModal.expiry': 'Set an expiration date',
+        'ShareLinkAccessModal.expiryDate': 'Expiration date',
+        'ShareLinkAccessModal.password': 'Require a password',
+        'ShareLinkAccessModal.passwordLabel': 'Password',
+        'ShareLinkAccessModal.passwordTooShort':
+          'Password must contain at least 4 characters.',
+        'ShareLinkAccessModal.error.persistence':
+          'Could not save link permissions. Please try again.'
+      })[key] || key
+  })
+}))
+
+describe('ShareLinkAccessModal', () => {
+  const documents = [
+    { _id: 'file-id', name: 'invoice.pdf' },
+    { _id: 'folder-id', name: 'Projects' }
+  ]
+  const onCancel = jest.fn()
+  const onSuccess = jest.fn()
+  const ensureSharingLink = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useSharingContext.mockReturnValue({ ensureSharingLink })
+  })
+
+  const renderModal = (overrides = {}) =>
+    render(
+      <ShareLinkAccessModal
+        documents={documents}
+        onCancel={onCancel}
+        onSuccess={onSuccess}
+        {...overrides}
+      />
+    )
+
+  it('shows the selected documents with viewer access by default', () => {
+    renderModal()
+
+    expect(screen.getByRole('dialog')).toHaveTextContent('invoice.pdf')
+    expect(screen.getByRole('dialog')).toHaveTextContent('Projects')
+    expect(screen.getByText('invoice.pdf').parentElement).toHaveClass(
+      'u-maw-100'
+    )
+    expect(screen.getByLabelText('Access level')).toHaveTextContent('Viewer')
+    expect(screen.getByRole('dialog')).toHaveAttribute('data-size', 'small')
+  })
+
+  it('keeps document icons inside their chips', () => {
+    const renderDocumentIcon = jest.fn(document => (
+      <span data-testid={`icon-${document._id}`}>icon</span>
+    ))
+
+    renderModal({ renderDocumentIcon })
+
+    expect(renderDocumentIcon).toHaveBeenNthCalledWith(1, documents[0], 18)
+    expect(renderDocumentIcon).toHaveBeenNthCalledWith(2, documents[1], 18)
+    expect(screen.getByTestId('icon-file-id').parentElement).toHaveClass(
+      'u-flex',
+      'u-ov-hidden'
+    )
+  })
+
+  it('calls onCancel from the back button', () => {
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Back' }))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('preserves the access settings after returning from the settings screen', () => {
+    renderModal()
+
+    fireEvent.click(screen.getByLabelText('Access level'))
+    fireEvent.click(screen.getByRole('button', { name: 'Editor' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Sharing settings' }))
+    fireEvent.click(screen.getByLabelText('Set an expiration date'))
+    fireEvent.click(screen.getByLabelText('Require a password'))
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: { value: 'secret' }
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Back' }))
+
+    expect(screen.getByLabelText('Access level')).toHaveTextContent('Editor')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Sharing settings' }))
+
+    expect(screen.getByLabelText('Set an expiration date')).toBeChecked()
+    expect(screen.getByLabelText('Require a password')).toBeChecked()
+    expect(screen.getByLabelText('Password')).toHaveValue('secret')
+  })
+
+  it('requires a four-character password before adding links', () => {
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Sharing settings' }))
+    fireEvent.click(screen.getByLabelText('Require a password'))
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: { value: 'abc' }
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Back' }))
+
+    expect(screen.getByRole('button', { name: 'Add links' })).toBeDisabled()
+  })
+
+  it('disables every main action while links are being saved', async () => {
+    let resolveSharingLink
+    ensureSharingLink.mockReturnValue(
+      new Promise(resolve => {
+        resolveSharingLink = resolve
+      })
+    )
+
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add links' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+      expect(
+        screen.getByRole('button', { name: 'Sharing settings' })
+      ).toBeDisabled()
+      expect(screen.getByLabelText('Access level')).toBeDisabled()
+    })
+
+    resolveSharingLink({ documentId: 'file-id', url: 'https://first' })
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+
+  it('starts every link concurrently and returns ordered results', async () => {
+    let resolveFirst
+    let resolveSecond
+    ensureSharingLink
+      .mockReturnValueOnce(
+        new Promise(resolve => {
+          resolveFirst = resolve
+        })
+      )
+      .mockReturnValueOnce(
+        new Promise(resolve => {
+          resolveSecond = resolve
+        })
+      )
+
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add links' }))
+
+    expect(ensureSharingLink).toHaveBeenCalledTimes(2)
+    resolveSecond({ documentId: 'folder-id', url: 'https://second' })
+    resolveFirst({ documentId: 'file-id', url: 'https://first' })
+
+    await waitFor(() =>
+      expect(onSuccess).toHaveBeenCalledWith([
+        { documentId: 'file-id', url: 'https://first' },
+        { documentId: 'folder-id', url: 'https://second' }
+      ])
+    )
+    expect(ensureSharingLink).toHaveBeenNthCalledWith(1, documents[0], {
+      editingRights: 'readOnly',
+      dateEnabled: false,
+      selectedDate: null,
+      passwordEnabled: false,
+      password: ''
+    })
+  })
+
+  it('keeps the draft open after a failed save so the user can retry', async () => {
+    ensureSharingLink
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValueOnce({ documentId: 'file-id', url: 'https://first' })
+      .mockResolvedValueOnce({ documentId: 'folder-id', url: 'https://second' })
+
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add links' }))
+
+    await waitFor(() =>
+      expect(screen.getByRole('dialog')).toHaveTextContent(
+        'Could not save link permissions. Please try again.'
+      )
+    )
+    expect(onSuccess).not.toHaveBeenCalled()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add links' }))
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+})

package/src/components/ShareLinkAccessModal/index.js

@@ -0,0 +1 @@
+export { default as ShareLinkAccessModal } from './ShareLinkAccessModal'

package/src/components/ShareRestrictionModal/BoxDate.jsx

@@ -1,8 +1,8 @@
-import { Icon, Calendar } from '@linagora/twake-icons'
 import { format } from 'date-fns'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import { Icon, Calendar } from '@linagora/twake-icons'
 import Box from 'cozy-ui/transpiled/react/Box'
 import DatePicker from 'cozy-ui/transpiled/react/DatePicker'
 import List from 'cozy-ui/transpiled/react/List'

package/src/components/ShareRestrictionModal/BoxEditingRights.jsx

@@ -1,7 +1,7 @@
-import { Icon, Bottom, People } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useReducer, useRef } from 'react'
 
+import { Icon, Bottom, People } from '@linagora/twake-icons'
 import { useClient } from 'cozy-client'
 import { isDirectory as isDir } from 'cozy-client/dist/models/file'
 import flag from 'cozy-flags'

package/src/components/ShareRestrictionModal/BoxPassword.jsx

@@ -1,7 +1,7 @@
-import { Icon, Copy, Password } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
+import { Icon, Copy, Password } from '@linagora/twake-icons'
 import Box from 'cozy-ui/transpiled/react/Box'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import List from 'cozy-ui/transpiled/react/List'

package/src/components/ShareRestrictionModal/ShareRestrictionModal.jsx

@@ -1,8 +1,8 @@
-import { Icon, Trash } from '@linagora/twake-icons'
 import { addDays } from 'date-fns'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
+import { Icon, Trash } from '@linagora/twake-icons'
 import { generateWebLink, useClient } from 'cozy-client'
 import flag from 'cozy-flags'
 import Button from 'cozy-ui/transpiled/react/Buttons'

package/src/components/ShareRestrictionModal/helpers.js

@@ -192,6 +192,24 @@ export const makeTTL = selectedDate => {
   }
 }
 
+export const getLinkAccessOptions = ({
+  editingRights,
+  dateEnabled,
+  selectedDate,
+  passwordEnabled,
+  password
+}) => {
+  const expirationDate =
+    dateEnabled && selectedDate ? toExpirationDate(selectedDate) : null
+
+  return {
+    verbs: editingRights === 'write' ? WRITE_PERMS : READ_ONLY_PERMS,
+    expiresAt: expirationDate?.toISOString() || '',
+    ttl: expirationDate ? makeTTL(expirationDate) : undefined,
+    password: passwordEnabled ? password : ''
+  }
+}
+
 /**
  * createPermissions - Create the permissions of a file
  * @param {object} options
@@ -257,15 +275,21 @@ export const updatePermissions = async ({
   showAlert
 }) => {
   try {
-    const expiresAt = dateToggle
-      ? toExpirationDate(selectedDate)?.toISOString() || undefined
-      : ''
-    const ensurePassword = passwordToggle ? password || undefined : ''
-    const verbs = editingRights === 'readOnly' ? READ_ONLY_PERMS : WRITE_PERMS
+    const {
+      verbs,
+      expiresAt,
+      password: ensuredPassword
+    } = getLinkAccessOptions({
+      editingRights,
+      dateEnabled: dateToggle,
+      selectedDate,
+      passwordEnabled: passwordToggle,
+      password
+    })
     return updateDocumentPermissions(file, {
       verbs,
       expiresAt,
-      password: ensurePassword
+      password: ensuredPassword
     })
   } catch (err) {
     showAlert({

package/src/components/ShareRestrictionModal/helpers.spec.js

@@ -124,7 +124,7 @@ describe('ShareRestrictionModal/helpers', () => {
       })
     })
 
-    it('should call updateDocumentPermissions with "undefined" date & password if their switches are true but the permission doesn\'t yet have these values', async () => {
+    it('should call updateDocumentPermissions with empty date & password if enabled without values', async () => {
       const updateDocumentPermissions = jest.fn()
       const file = { _id: '123' }
 
@@ -142,8 +142,8 @@ describe('ShareRestrictionModal/helpers', () => {
       })
 
       expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
-        expiresAt: undefined,
-        password: undefined,
+        expiresAt: '',
+        password: '',
         verbs: ['GET']
       })
     })

package/src/components/SharedBadge.jsx

@@ -1,7 +1,8 @@
-import { Icon, Share } from '@linagora/twake-icons'
 import classNames from 'classnames'
 import React from 'react'
 
+import { Icon, Share } from '@linagora/twake-icons'
+
 import styles from '../styles/badge.styl'
 
 const SharedBadge = ({ byMe, className, small, xsmall }) => (

package/src/components/SharedDrive/SharedDriveHeader.jsx

@@ -1,6 +1,6 @@
-import { Icon } from '@linagora/twake-icons'
 import React from 'react'
 
+import { Icon } from '@linagora/twake-icons'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import SharedDriveIcon from '../../assets/icons/shared-drive.svg'

package/src/helpers/sharings.js

@@ -1,5 +1,4 @@
 import { CloudPlusOutlined, Sync, ToTheCloud } from '@linagora/twake-icons'
-
 import { Q } from 'cozy-client'
 
 import { fetchFilesPaths } from './files'

package/src/index.jsx

@@ -25,6 +25,7 @@ export { SharedDriveModal } from './components/SharedDrive/SharedDriveModal'
 export { SharedDriveForm } from './components/SharedDrive/SharedDriveForm'
 export { FederatedFolderModal } from './components/FederatedFolder/FederatedFolderModal'
 export { ShareModal } from './components/ShareModal/ShareModal'
+export { ShareLinkAccessModal } from './components/ShareLinkAccessModal'
 export { RefreshableSharings } from './RefreshableSharings'
 export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerprintDialogContent'
 export { SharingBannerPlugin } from './components/SharingBanner'