cozy-sharing 31.0.2 → 31.1.0

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -3,17 +3,16 @@ import React, { useState, useRef, useCallback } from 'react'
 import { useClient } from 'cozy-client'
 import minilog from 'cozy-minilog'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import {
-  makeActions,
-  divider
-} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleOutlineIcon from 'cozy-ui/transpiled/react/Icons/CrossCircleOutline'
 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 { useI18n } from 'twake-i18n'
 
-import { revokeMember } from './actions/revokeMember'
 import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
 import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
 import { useSharingContext } from '../../hooks/useSharingContext'
@@ -22,7 +21,6 @@ const log = minilog('MemberRecipientPermissions')
 
 const MemberRecipientPermissions = ({
   isOwner,
-  isSharedDrive,
   status,
   instance,
   type,
@@ -100,20 +98,11 @@ const MemberRecipientPermissions = ({
   )
 
   const actions = makeActions(
-    [
-      setReadOnlySharedPermission,
-      setReadWriteSharedPermission,
-      divider,
-      revokeMember
-    ],
+    [setReadOnlySharedPermission, setReadWriteSharedPermission],
     {
-      client,
       t,
       type: type ?? 'one-way',
-      isOwner,
-      isSharedDrive,
-      setType,
-      handleRevocation
+      setType
     }
   )
 
@@ -121,9 +110,7 @@ const MemberRecipientPermissions = ({
     <div className={className}>
       {revoking && <Spinner />}
       {!shouldShowMenu && !revoking && (
-        <Typography variant="body2">
-          {t(`Share.status.${status}`).toLowerCase()}
-        </Typography>
+        <Typography variant="body2">{t(`Share.status.${status}`)}</Typography>
       )}
       {shouldShowMenu && (
         <>
@@ -134,7 +121,7 @@ const MemberRecipientPermissions = ({
             onClick={toggleMenu}
             textVariant="body2"
           >
-            {t(`Share.type.${type}`).toLowerCase()}
+            {t(`Share.type.${type}`)}
           </DropdownButton>
           <ActionsMenu
             ref={buttonRef}
@@ -143,6 +130,14 @@ const MemberRecipientPermissions = ({
             autoClose
             onClose={hideMenu}
           />
+          <IconButton
+            onClick={handleRevocation}
+            size="small"
+            className="u-ml-half"
+            aria-label={t('Share.members.revoke')}
+          >
+            <Icon icon={CrossCircleOutlineIcon} />
+          </IconButton>
         </>
       )}
     </div>

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

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, act, waitFor } from '@testing-library/react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
 import React from 'react'
 
 import { createMockClient } from 'cozy-client'
@@ -74,16 +74,16 @@ describe('MemberRecipientPermissions component', () => {
 
   it('should render the current permission type', () => {
     setup()
-    expect(screen.getByText('can change')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 
   it('should call updateSharingMemberType when changing to one-way', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Can view'))
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
 
     expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
       'sharing-123',
@@ -95,10 +95,10 @@ describe('MemberRecipientPermissions component', () => {
   it('should call updateSharingMemberType when changing to two-way', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'one-way' })
+    const { getByRole } = setup({ type: 'one-way' })
 
-    fireEvent.click(getByText('can view'))
-    fireEvent.click(getByText('Can change'))
+    fireEvent.click(getByRole('button', { name: 'Viewer' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
 
     expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
       'sharing-123',
@@ -110,12 +110,10 @@ describe('MemberRecipientPermissions component', () => {
   it('should show error alert when updateSharingMemberType fails', async () => {
     mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'))
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    await act(async () => {
-      fireEvent.click(getByText('can change'))
-      fireEvent.click(getByText('Can view'))
-    })
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
 
     await waitFor(() => {
       expect(mockShowAlert).toHaveBeenCalledWith({
@@ -130,36 +128,36 @@ describe('MemberRecipientPermissions component', () => {
   it('should not call updateSharingMemberType when selecting same type', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Can change'))
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
 
     expect(mockUpdateSharingMemberType).not.toHaveBeenCalled()
   })
 
   it('should not render menu when user is not owner and not the shared drive contact', () => {
-    const { queryByText } = setup({
+    const { queryByRole } = setup({
       isOwner: false,
       instance: 'http://other-cozy.local:8080'
     })
 
-    expect(queryByText('can change')).not.toBeInTheDocument()
-    expect(queryByText('can view')).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Editor' })).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Viewer' })).not.toBeInTheDocument()
   })
 
   it('should render menu for owner', () => {
-    const { getByText } = setup({ isOwner: true })
+    const { getByRole } = setup({ isOwner: true })
 
-    expect(getByText('can change')).toBeInTheDocument()
+    expect(getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 
   it('should render menu for the user themselves', () => {
-    const { getByText } = setup({
+    const { getByRole } = setup({
       isOwner: false,
       instance: 'http://cozy.local:8080'
     })
 
-    expect(getByText('can change')).toBeInTheDocument()
+    expect(getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 })

package/src/components/ShareDialogCozyToCozy.spec.jsx

@@ -42,7 +42,7 @@ describe('ShareDialogCozyToCozy', () => {
     const { getByText } = setup(props)
 
     expect(getByText('You')).toBeTruthy()
-    expect(getByText('owner')).toBeTruthy()
+    expect(getByText('Owner')).toBeTruthy()
   })
 
   it('should show loading while calling getRecipientsToBeConfirmed', async () => {

package/src/components/SharedDrive/SharedDriveForm.jsx

@@ -59,15 +59,19 @@ export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
         onRevoke={onRevoke}
         onSetType={onSetType}
       />
-      <div className="u-flex u-flex-justify-end u-ph-2 u-pv-1 u-column-gap-half">
+      <div className="u-flex u-ph-2 u-pv-1">
         <Button
-          variant="secondary"
+          variant="text"
           label={t('SharedDrive.sharedDriveModal.cancel')}
+          className="u-w-100 u-m-1"
+          size="large"
           onClick={onCancel}
         />
         <Button
           variant="primary"
           label={t('SharedDrive.sharedDriveModal.create')}
+          className="u-w-100 u-m-1"
+          size="large"
           onClick={onCreate}
         />
       </div>

package/src/components/SharedDrive/SharedDriveRecipientPermissions.jsx

@@ -1,15 +1,13 @@
 import React, { useState, useRef } from 'react'
 
-import { useClient } from 'cozy-client'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import {
-  makeActions,
-  divider
-} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleOutlineIcon from 'cozy-ui/transpiled/react/Icons/CrossCircleOutline'
 import { useI18n } from 'twake-i18n'
 
-import { revokeSharedDriveMember } from '../Recipient/actions/revokeSharedDriveMember'
 import { setReadOnlySharedPermission } from '../Recipient/actions/setReadOnlySharedPermission'
 import { setReadWriteSharedPermission } from '../Recipient/actions/setReadWriteSharedPermission'
 
@@ -21,7 +19,6 @@ const ShareDriveRecipientPermissions = ({
 }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
-  const client = useClient()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
 
   const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
@@ -40,18 +37,11 @@ const ShareDriveRecipientPermissions = ({
   }
 
   const actions = makeActions(
-    [
-      setReadOnlySharedPermission,
-      setReadWriteSharedPermission,
-      divider,
-      revokeSharedDriveMember
-    ],
+    [setReadOnlySharedPermission, setReadWriteSharedPermission],
     {
       t,
-      client,
       type,
-      setType,
-      handleRevocation
+      setType
     }
   )
 
@@ -64,7 +54,7 @@ const ShareDriveRecipientPermissions = ({
         onClick={toggleMenu}
         textVariant="body2"
       >
-        {t(`Share.type.${type}`).toLowerCase()}
+        {t(`Share.type.${type}`)}
       </DropdownButton>
       <ActionsMenu
         ref={buttonRef}
@@ -73,6 +63,14 @@ const ShareDriveRecipientPermissions = ({
         autoClose
         onClose={hideMenu}
       />
+      <IconButton
+        onClick={handleRevocation}
+        size="small"
+        className="u-ml-half"
+        aria-label={t('Share.members.revoke')}
+      >
+        <Icon icon={CrossCircleOutlineIcon} />
+      </IconButton>
     </div>
   )
 }

package/dist/components/Recipient/actions/revokeGroup.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
-import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden';
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import Typography from 'cozy-ui/transpiled/react/Typography';
-
-var revokeGroup = function revokeGroup(_ref) {
-  var t = _ref.t,
-      isOwner = _ref.isOwner,
-      isSharedDrive = _ref.isSharedDrive,
-      handleRevocation = _ref.handleRevocation;
-  var revokeType = isOwner ? 'revoke' : 'revokeSelf';
-  var title = t("RevokeGroupItem.".concat(revokeType, ".title"));
-  var desc = isOwner && isSharedDrive ? t("RevokeGroupItem.revoke.sharedDriveDesc") : t("RevokeGroupItem.".concat(revokeType, ".desc"));
-  var icon = ForbiddenIcon;
-  return {
-    name: 'revokeMember',
-    label: title,
-    icon: icon,
-    action: function action() {
-      handleRevocation();
-    },
-    Component: /*#__PURE__*/forwardRef(function RevokeMemberItem(props, ref) {
-      return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
-        ref: ref
-      }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
-        icon: icon,
-        color: "var(--errorColor)"
-      })), /*#__PURE__*/React.createElement(ListItemText, {
-        primary: /*#__PURE__*/React.createElement(Typography, {
-          color: "error"
-        }, title),
-        secondary: desc
-      }));
-    })
-  };
-};
-
-export { revokeGroup };

package/dist/components/Recipient/actions/revokeMember.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-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';
-
-var revokeMember = function revokeMember(_ref) {
-  var t = _ref.t,
-      isOwner = _ref.isOwner,
-      isSharedDrive = _ref.isSharedDrive,
-      handleRevocation = _ref.handleRevocation;
-  var revokeType = isOwner ? 'revoke' : 'revokeSelf';
-  var title = t("RevokeMemberItem.".concat(revokeType, ".title"));
-  var desc = isOwner && isSharedDrive ? t("RevokeMemberItem.revoke.sharedDriveDesc") : t("RevokeMemberItem.".concat(revokeType, ".desc"));
-  var icon = TrashIcon;
-  return {
-    name: 'revokeMember',
-    label: title,
-    icon: icon,
-    action: function action() {
-      handleRevocation();
-    },
-    Component: /*#__PURE__*/forwardRef(function RevokeMemberItem(props, ref) {
-      return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
-        ref: ref
-      }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
-        icon: icon,
-        color: "var(--errorColor)"
-      })), /*#__PURE__*/React.createElement(ListItemText, {
-        primary: /*#__PURE__*/React.createElement(Typography, {
-          color: "error"
-        }, title),
-        secondary: desc
-      }));
-    })
-  };
-};
-
-export { revokeMember };

package/dist/components/Recipient/actions/revokeSharedDriveMember.js

@@ -1,41 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-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';
-
-var makeComponent = function makeComponent(title) {
-  var Component = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
-      ref: ref
-    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
-      icon: TrashIcon,
-      color: "var(--errorColor)"
-    })), /*#__PURE__*/React.createElement(ListItemText, {
-      primary: /*#__PURE__*/React.createElement(Typography, {
-        color: "error"
-      }, title)
-    }));
-  });
-  Component.displayName = 'RevokeSharedDriveMember';
-  return Component;
-};
-
-var revokeSharedDriveMember = function revokeSharedDriveMember(_ref) {
-  var t = _ref.t,
-      handleRevocation = _ref.handleRevocation;
-  var title = t("RevokeSharedDriveMemberItem.revoke.title");
-  return {
-    name: 'revokeSharedDriveMember',
-    label: title,
-    action: function action() {
-      handleRevocation();
-    },
-    Component: makeComponent(title)
-  };
-};
-
-export { revokeSharedDriveMember };

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

@@ -1,42 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
-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 revokeGroup = ({ t, isOwner, isSharedDrive, handleRevocation }) => {
-  const revokeType = isOwner ? 'revoke' : 'revokeSelf'
-  const title = t(`RevokeGroupItem.${revokeType}.title`)
-  const desc =
-    isOwner && isSharedDrive
-      ? t(`RevokeGroupItem.revoke.sharedDriveDesc`)
-      : t(`RevokeGroupItem.${revokeType}.desc`)
-
-  const icon = ForbiddenIcon
-
-  return {
-    name: 'revokeMember',
-    label: title,
-    icon,
-    action: () => {
-      handleRevocation()
-    },
-    Component: forwardRef(function RevokeMemberItem(props, ref) {
-      return (
-        <ActionsMenuItem {...props} ref={ref}>
-          <ListItemIcon>
-            <Icon icon={icon} color="var(--errorColor)" />
-          </ListItemIcon>
-          <ListItemText
-            primary={<Typography color="error">{title}</Typography>}
-            secondary={desc}
-          />
-        </ActionsMenuItem>
-      )
-    })
-  }
-}
-export { revokeGroup }

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

@@ -1,42 +0,0 @@
-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 revokeMember = ({ t, isOwner, isSharedDrive, handleRevocation }) => {
-  const revokeType = isOwner ? 'revoke' : 'revokeSelf'
-  const title = t(`RevokeMemberItem.${revokeType}.title`)
-  const desc =
-    isOwner && isSharedDrive
-      ? t(`RevokeMemberItem.revoke.sharedDriveDesc`)
-      : t(`RevokeMemberItem.${revokeType}.desc`)
-
-  const icon = TrashIcon
-
-  return {
-    name: 'revokeMember',
-    label: title,
-    icon,
-    action: () => {
-      handleRevocation()
-    },
-    Component: forwardRef(function RevokeMemberItem(props, ref) {
-      return (
-        <ActionsMenuItem {...props} ref={ref}>
-          <ListItemIcon>
-            <Icon icon={icon} color="var(--errorColor)" />
-          </ListItemIcon>
-          <ListItemText
-            primary={<Typography color="error">{title}</Typography>}
-            secondary={desc}
-          />
-        </ActionsMenuItem>
-      )
-    })
-  }
-}
-export { revokeMember }

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

@@ -1,41 +0,0 @@
-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 makeComponent = title => {
-  const Component = forwardRef((props, ref) => {
-    return (
-      <ActionsMenuItem {...props} ref={ref}>
-        <ListItemIcon>
-          <Icon icon={TrashIcon} color="var(--errorColor)" />
-        </ListItemIcon>
-        <ListItemText
-          primary={<Typography color="error">{title}</Typography>}
-        />
-      </ActionsMenuItem>
-    )
-  })
-
-  Component.displayName = 'RevokeSharedDriveMember'
-
-  return Component
-}
-
-const revokeSharedDriveMember = ({ t, handleRevocation }) => {
-  const title = t(`RevokeSharedDriveMemberItem.revoke.title`)
-
-  return {
-    name: 'revokeSharedDriveMember',
-    label: title,
-    action: () => {
-      handleRevocation()
-    },
-    Component: makeComponent(title)
-  }
-}
-export { revokeSharedDriveMember }