cozy-sharing 11.1.0 → 12.1.0

package/.storybook/preview.jsx

@@ -10,6 +10,7 @@ import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { CozyProvider, createFakeClient } from 'cozy-client'
 
 import enLocale from '../locales/en.json'
+import SharingContext from "../src/context";
 
 const preview = {
   decorators: [
@@ -40,11 +41,16 @@ const preview = {
       <CozyProvider client={fakeClient}>
         <CozyTheme>
           <BreakpointsProvider>
-            <I18n lang="en" dictRequire={() => enLocale}>
-              <div style={{position: "relative"}}>
-                <Story />
-              </div>
-            </I18n>
+            <SharingContext.Provider value={{
+              revokeGroup: () => {},
+              revokeSelf: () => {}
+            }}>
+              <I18n lang="en" dictRequire={() => enLocale}>
+                <div style={{position: "relative"}}>
+                  <Story />
+                </div>
+              </I18n>
+            </SharingContext.Provider>
           </BreakpointsProvider>
         </CozyTheme>
       </CozyProvider>

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.1.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.0.0...cozy-sharing@12.1.0) (2024-03-22)
+
+
+### Features
+
+* Adapt modal design to allow gutters into ListItem ([39dc590](https://github.com/cozy/cozy-libs/commit/39dc5905ee19e07967227e76d376ff04c6145c1e))
+* Show detail of recipient groups ([7d731db](https://github.com/cozy/cozy-libs/commit/7d731db9d313ba763652612352ce393f475bfe5f))
+
+
+
+
+
+# [12.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@11.1.0...cozy-sharing@12.0.0) (2024-03-21)
+
+
+### Features
+
+* Making it possible to revoke a group ([cc3e998](https://github.com/cozy/cozy-libs/commit/cc3e998d94450d0698373f217a4eea06d1a81ede))
+* Update cozy-client from 45.14.0 to 46.1.0 ([958c55c](https://github.com/cozy/cozy-libs/commit/958c55c5d55a540d0c5b341b6780cb16b1617ff9))
+
+
+### BREAKING CHANGES
+
+* you must have `cozy-client >=46.1.0`
+
+
+
+
+
 # [11.1.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@11.0.1...cozy-sharing@11.1.0) (2024-03-21)
 
 

package/dist/SharingProvider.js

@@ -39,7 +39,7 @@ import { fetchFilesPaths } from './helpers/files';
 import { getSharingObject, createSharingInStore, updateSharingInStore } from './helpers/sharings';
 import { SynchronousJobQueue } from './helpers/synchronousJobQueue';
 import { fetchApps } from './queries/queries';
-import reducer, { receiveSharings, addSharing, updateSharing, addSharingLink, updateSharingLink, revokeSharingLink, revokeRecipient, revokeSelf, receivePaths, isOwner as _isOwner, canReshare as _canReshare, getOwner as _getOwner, getRecipients as _getRecipients, getSharingById, getExternalSharingIds, getSharingForSelf as _getSharingForSelf, getSharingType as _getSharingType, getSharingLink as _getSharingLink, getSharedDocIdsBySharings, getDocumentSharing, getDocumentPermissions as _getDocumentPermissions, hasSharedParent as _hasSharedParent, hasSharedChild as _hasSharedChild, getSharedParentPath as _getSharedParentPath } from './state';
+import reducer, { receiveSharings, addSharing, updateSharing, addSharingLink, updateSharingLink, revokeSharingLink, revokeRecipient, revokeGroup as revokeGroupFromState, revokeSelf, receivePaths, isOwner as _isOwner, canReshare as _canReshare, getOwner as _getOwner, getRecipients as _getRecipients, getSharingById, getExternalSharingIds, getSharingForSelf as _getSharingForSelf, getSharingType as _getSharingType, getSharingLink as _getSharingLink, getSharedDocIdsBySharings, getDocumentSharing, getDocumentPermissions as _getDocumentPermissions, hasSharedParent as _hasSharedParent, hasSharedChild as _hasSharedChild, getSharedParentPath as _getSharedParentPath } from './state';
 var SHARING_DOCTYPE = 'io.cozy.sharings';
 var PERMISSION_DOCTYPE = 'io.cozy.permissions';
 export var SharingProvider = /*#__PURE__*/function (_Component) {
@@ -359,14 +359,62 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
       };
     }());
 
-    _defineProperty(_assertThisInitialized(_this), "revokeSelf", /*#__PURE__*/function () {
-      var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(document) {
-        var sharing;
+    _defineProperty(_assertThisInitialized(_this), "revokeGroup", /*#__PURE__*/function () {
+      var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(document, sharingId, recipientIndex) {
+        var _this$props5, client, doctype, sharing;
+
         return _regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              _this$props5 = _this.props, client = _this$props5.client, doctype = _this$props5.doctype;
+              sharing = getSharingById(_this.state, sharingId);
+              _context7.next = 4;
+              return _this.sharingCol.revokeGroup(sharing, recipientIndex);
+
+            case 4:
+              _context7.t0 = _this;
+              _context7.t1 = revokeGroupFromState;
+              _context7.t2 = sharing;
+              _context7.t3 = recipientIndex;
+              _context7.t4 = document.path;
+
+              if (_context7.t4) {
+                _context7.next = 13;
+                break;
+              }
+
+              _context7.next = 12;
+              return fetchFilesPaths(client, doctype, [document]);
+
+            case 12:
+              _context7.t4 = _context7.sent;
+
+            case 13:
+              _context7.t5 = _context7.t4;
+              _context7.t6 = (0, _context7.t1)(_context7.t2, _context7.t3, _context7.t5);
+
+              _context7.t0.dispatch.call(_context7.t0, _context7.t6);
+
+            case 16:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7);
+      }));
+
+      return function (_x10, _x11, _x12) {
+        return _ref9.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "revokeSelf", /*#__PURE__*/function () {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(document) {
+        var sharing;
+        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               sharing = _getSharingForSelf(_this.state, document.id);
-              _context7.next = 3;
+              _context8.next = 3;
               return _this.sharingCol.revokeSelf(sharing);
 
             case 3:
@@ -374,41 +422,41 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
 
             case 4:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
-        }, _callee7);
+        }, _callee8);
       }));
 
-      return function (_x10) {
-        return _ref9.apply(this, arguments);
+      return function (_x13) {
+        return _ref10.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "shareByLink", /*#__PURE__*/function () {
-      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(document, options) {
+      var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(document, options) {
         var resp;
-        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-          while (1) switch (_context8.prev = _context8.next) {
+        return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
             case 0:
-              _context8.next = 2;
+              _context9.next = 2;
               return _this.permissionCol.createSharingLink(document, options);
 
             case 2:
-              resp = _context8.sent;
+              resp = _context9.sent;
 
               _this.dispatch(addSharingLink(resp.data));
 
-              return _context8.abrupt("return", resp);
+              return _context9.abrupt("return", resp);
 
             case 5:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
-        }, _callee8);
+        }, _callee9);
       }));
 
-      return function (_x11, _x12) {
-        return _ref10.apply(this, arguments);
+      return function (_x14, _x15) {
+        return _ref11.apply(this, arguments);
       };
     }());
 
@@ -421,71 +469,71 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
      * @return {Array}
      */
     _defineProperty(_assertThisInitialized(_this), "updateDocumentPermissions", /*#__PURE__*/function () {
-      var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(document, newVerbs) {
+      var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(document, newVerbs) {
         var permissions, responses;
-        return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-          while (1) switch (_context10.prev = _context10.next) {
+        return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+          while (1) switch (_context11.prev = _context11.next) {
             case 0:
               permissions = _getDocumentPermissions(_this.state, document.id);
-              _context10.next = 3;
+              _context11.next = 3;
               return Promise.all(permissions.map( /*#__PURE__*/function () {
-                var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(permissionDocument) {
+                var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(permissionDocument) {
                   var updatedPermissions, resp;
-                  return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-                    while (1) switch (_context9.prev = _context9.next) {
+                  return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+                    while (1) switch (_context10.prev = _context10.next) {
                       case 0:
                         updatedPermissions = permissionDocument.attributes.permissions;
                         Object.keys(updatedPermissions).map(function (permType) {
                           updatedPermissions[permType].verbs = newVerbs;
                         });
-                        _context9.next = 4;
+                        _context10.next = 4;
                         return _this.permissionCol.add(permissionDocument, updatedPermissions);
 
                       case 4:
-                        resp = _context9.sent;
+                        resp = _context10.sent;
 
                         _this.dispatch(updateSharingLink(resp));
 
-                        return _context9.abrupt("return", resp);
+                        return _context10.abrupt("return", resp);
 
                       case 7:
                       case "end":
-                        return _context9.stop();
+                        return _context10.stop();
                     }
-                  }, _callee9);
+                  }, _callee10);
                 }));
 
-                return function (_x15) {
-                  return _ref12.apply(this, arguments);
+                return function (_x18) {
+                  return _ref13.apply(this, arguments);
                 };
               }()));
 
             case 3:
-              responses = _context10.sent;
-              return _context10.abrupt("return", responses);
+              responses = _context11.sent;
+              return _context11.abrupt("return", responses);
 
             case 5:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
-        }, _callee10);
+        }, _callee11);
       }));
 
-      return function (_x13, _x14) {
-        return _ref11.apply(this, arguments);
+      return function (_x16, _x17) {
+        return _ref12.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "revokeSharingLink", /*#__PURE__*/function () {
-      var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(document) {
+      var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(document) {
         var perms;
-        return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-          while (1) switch (_context11.prev = _context11.next) {
+        return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+          while (1) switch (_context12.prev = _context12.next) {
             case 0:
               // Because some duplicate links have been created in the past, we must ensure
               // we revoke all of them
               perms = _getDocumentPermissions(_this.state, document.id);
-              _context11.next = 3;
+              _context12.next = 3;
               return Promise.all(perms.map(function (p) {
                 return _this.permissionCol.destroy(p);
               }));
@@ -495,13 +543,13 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
 
             case 4:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
-        }, _callee11);
+        }, _callee12);
       }));
 
-      return function (_x16) {
-        return _ref13.apply(this, arguments);
+      return function (_x19) {
+        return _ref14.apply(this, arguments);
       };
     }());
 
@@ -558,6 +606,7 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
       share: _this.share,
       onShared: onShared,
       revoke: _this.revoke,
+      revokeGroup: _this.revokeGroup,
       revokeSelf: _this.revokeSelf,
       shareByLink: _this.shareByLink,
       updateDocumentPermissions: _this.updateDocumentPermissions,
@@ -600,18 +649,18 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
   }, {
     key: "fetchAllSharings",
     value: function () {
-      var _fetchAllSharings = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-        var _this$props5, doctype, client, _yield$Promise$all, _yield$Promise$all2, sharings, permissions, apps, sharedDocIds, resp, folderPaths, filePaths;
+      var _fetchAllSharings = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+        var _this$props6, doctype, client, _yield$Promise$all, _yield$Promise$all2, sharings, permissions, apps, sharedDocIds, resp, folderPaths, filePaths;
 
-        return _regeneratorRuntime.wrap(function _callee12$(_context12) {
-          while (1) switch (_context12.prev = _context12.next) {
+        return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+          while (1) switch (_context13.prev = _context13.next) {
             case 0:
-              _this$props5 = this.props, doctype = _this$props5.doctype, client = _this$props5.client;
-              _context12.next = 3;
+              _this$props6 = this.props, doctype = _this$props6.doctype, client = _this$props6.client;
+              _context13.next = 3;
               return Promise.all([this.sharingCol.findByDoctype(doctype), this.permissionCol.findLinksByDoctype(doctype), client.fetchQueryAndGetFromState(fetchApps())]);
 
             case 3:
-              _yield$Promise$all = _context12.sent;
+              _yield$Promise$all = _context13.sent;
               _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
               sharings = _yield$Promise$all2[0];
               permissions = _yield$Promise$all2[1];
@@ -626,35 +675,35 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
                 hasLoadedAtLeastOnePage: true
               }); // eslint-disable-next-line promise/catch-or-return
 
-              _context12.next = 12;
+              _context13.next = 12;
               return fetchNextPermissions(permissions, this.dispatch, this.permissionCol);
 
             case 12:
               if (!(doctype === 'io.cozy.files')) {
-                _context12.next = 22;
+                _context13.next = 22;
                 break;
               }
 
               sharedDocIds = getSharedDocIdsBySharings(sharings);
-              _context12.next = 16;
+              _context13.next = 16;
               return client.collection(doctype).all({
                 keys: sharedDocIds
               });
 
             case 16:
-              resp = _context12.sent;
+              resp = _context13.sent;
               folderPaths = resp.data.filter(function (f) {
                 return f.type === 'directory' && !f.trashed;
               }).map(function (f) {
                 return f.path;
               });
-              _context12.next = 20;
+              _context13.next = 20;
               return fetchFilesPaths(client, doctype, resp.data.filter(function (f) {
                 return f.type !== 'directory' && !f.trashed;
               }));
 
             case 20:
-              filePaths = _context12.sent;
+              filePaths = _context13.sent;
               this.dispatch(receivePaths([].concat(_toConsumableArray(folderPaths), _toConsumableArray(filePaths))));
 
             case 22:
@@ -664,9 +713,9 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
 
             case 23:
             case "end":
-              return _context12.stop();
+              return _context13.stop();
           }
-        }, _callee12, this);
+        }, _callee13, this);
       }));
 
       function fetchAllSharings() {

package/dist/components/ConfirmTrustedRecipientsDialog.js

@@ -1,7 +1,10 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
+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';
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer';
@@ -16,17 +19,22 @@ var SharingContent = function SharingContent(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
-    className: "u-mb-2"
-  }, t("ConfirmRecipientModal.intruction")), recipientsToBeConfirmed.map(function (recipientConfirmationData) {
+    className: cx('u-mb-half', isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
+  }, t("ConfirmRecipientModal.intruction")), /*#__PURE__*/React.createElement(List, {
+    className: isMobile ? 'u-mb-half' : 'u-mb-1'
+  }, recipientsToBeConfirmed.map(function (recipientConfirmationData) {
     return /*#__PURE__*/React.createElement(MemberRecipient, _extends({}, recipientConfirmationData, {
       key: "key_r_".concat(recipientConfirmationData.id),
       isOwner: false,
       recipientConfirmationData: recipientConfirmationData,
       verifyRecipient: verifyRecipient
     }));
-  }));
+  })));
 };
 /**
  * Displays the dialog's title that can be used when ConfirmTrustedRecipientsDialog is in sharing state

package/dist/components/ConfirmTrustedRecipientsDialog.stories.js

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

package/dist/components/Recipient/GroupRecipient.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
 import Fade from 'cozy-ui/transpiled/react/Fade';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
@@ -6,7 +7,9 @@ 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';
@@ -14,12 +17,22 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 var GroupRecipient = function GroupRecipient(props) {
   var name = props.name,
       members = props.members,
-      fadeIn = props.fadeIn;
+      fadeIn = props.fadeIn,
+      owner = props.owner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
   var client = useClient();
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDetailOpened = _useState2[0],
+      setDetailOpened = _useState2[1];
+
   var nbMember = members.length;
   var nbMemberReady = members.filter(function (member) {
     return !['revoked', 'mail-not-sent'].includes(member.status);
@@ -27,11 +40,22 @@ var GroupRecipient = function GroupRecipient(props) {
   var isCurrentInstanceInsideMembers = members.some(function (member) {
     return member.instance === client.options.uri;
   });
-  return /*#__PURE__*/React.createElement(Fade, {
+
+  var toogleDetailOpened = function toogleDetailOpened() {
+    setDetailOpened(!isDetailOpened);
+  };
+
+  var closeDetail = function closeDetail() {
+    setDetailOpened(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fade, {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    button: true,
+    onClick: toogleDetailOpened,
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
     size: "small"
   })), /*#__PURE__*/React.createElement(ListItemText, {
@@ -43,7 +67,14 @@ var GroupRecipient = function GroupRecipient(props) {
       nbMember: nbMember,
       nbMemberReady: nbMemberReady
     }) + (isCurrentInstanceInsideMembers ? " (".concat(t('GroupRecipient.secondary_you'), ")") : '')
-  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props))));
+  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
+    className: isMobile ? 'u-mr-1' : 'u-mr-2'
+  }, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props)))), isDetailOpened ? /*#__PURE__*/React.createElement(GroupRecipientDetail, {
+    owner: owner,
+    name: name,
+    members: members,
+    onClose: closeDetail
+  }) : null);
 };
 
 export { GroupRecipient };

package/dist/components/Recipient/GroupRecipient.stories.js

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

package/dist/components/Recipient/GroupRecipientDetail.js

@@ -0,0 +1,43 @@
+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';
+
+var GroupRecipientDetail = function GroupRecipientDetail(_ref) {
+  var name = _ref.name,
+      owner = _ref.owner,
+      members = _ref.members,
+      onClose = _ref.onClose;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var withAccess = members.filter(function (member) {
+    return !['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var withoutAccess = members.filter(function (member) {
+    return ['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var ownerName = owner.public_name;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    size: "small",
+    onClose: onClose,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, name, ownerName ? /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, t('GroupRecipientDetail.subtitle', {
+      ownerName: ownerName
+    })) : null),
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "u-flex u-stack-xs u-flex-column"
+    }, withAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithAccess, {
+      withAccess: withAccess
+    }) : null, withoutAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithoutAccess, {
+      withoutAccess: withoutAccess
+    }) : null)
+  });
+};
+
+export { GroupRecipientDetail };

package/dist/components/Recipient/GroupRecipientDetail.stories.js

@@ -0,0 +1,55 @@
+import { GroupRecipientDetail } from './GroupRecipientDetail';
+var meta = {
+  component: GroupRecipientDetail,
+  args: {
+    name: 'Family',
+    owner: {
+      public_name: 'Alice'
+    }
+  }
+};
+export default meta;
+export var 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 var OnlyWithAccess = {
+  name: 'OnlyWithAccess',
+  args: {
+    members: [{
+      name: 'Alice',
+      instance: 'http://alice.cozy.localhost:8080',
+      status: 'ready'
+    }, {
+      name: 'Martin',
+      status: 'pending'
+    }]
+  }
+};
+export var OnlyWithoutAccess = {
+  name: 'OnlyWithoutAccess',
+  args: {
+    members: [{
+      name: 'marine@google.com',
+      status: 'mail-not-sent'
+    }, {
+      name: 'Paul',
+      status: 'revoked'
+    }]
+  }
+};