cozy-sharing 33.4.0 → 33.4.2

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [33.4.2](https://github.com/cozy/cozy-libs/compare/cozy-sharing@33.4.1...cozy-sharing@33.4.2) (2026-06-16)
+
+### Bug Fixes
+
+- **cozy-sharing:** Preserve sharing updates on rollback ([7c6db1a](https://github.com/cozy/cozy-libs/commit/7c6db1ad63f3997f01bdfee7140f9dad36dde2c2))
+- **sharing:** Update member permissions optimistically ([5c1ac86](https://github.com/cozy/cozy-libs/commit/5c1ac8631e4598ac6d2bc08761d2064c9b396f66))
+
+## [33.4.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@33.4.0...cozy-sharing@33.4.1) (2026-06-15)
+
+### Bug Fixes
+
+- **cozy-sharing:** Keep the owner avatar visible in the share modal ([f63ae1d](https://github.com/cozy/cozy-libs/commit/f63ae1de24de5ca7746b0c6da579f52fa5593806))
+
 # [33.4.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@33.3.4...cozy-sharing@33.4.0) (2026-06-15)
 
 ### Bug Fixes

package/dist/SharingProvider.js

@@ -471,7 +471,7 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
      */
     _defineProperty(_this2, "updateSharingMemberType", /*#__PURE__*/function () {
       var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(sharingId, memberIndex, newType) {
-        var sharing, member, makeReadOnly;
+        var sharing, member, makeReadOnly, optimisticSharing, currentSharing, rollbackSharing;
         return _regeneratorRuntime.wrap(function _callee10$(_context10) {
           while (1) switch (_context10.prev = _context10.next) {
             case 0:
@@ -505,39 +505,64 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
               throw new Error('Unsupported sharing type: ' + newType);
 
             case 9:
-              _context10.prev = 9;
+              optimisticSharing = _objectSpread(_objectSpread({}, sharing), {}, {
+                attributes: _objectSpread(_objectSpread({}, sharing.attributes), {}, {
+                  members: sharing.attributes.members.map(function (member, index) {
+                    return index === memberIndex ? _objectSpread(_objectSpread({}, member), {}, {
+                      read_only: makeReadOnly
+                    }) : member;
+                  })
+                })
+              });
+
+              _this2.dispatch(updateSharing(optimisticSharing));
+
+              _context10.prev = 11;
 
               if (!makeReadOnly) {
-                _context10.next = 15;
+                _context10.next = 17;
                 break;
               }
 
-              _context10.next = 13;
+              _context10.next = 15;
               return _this2.sharingCol.setReadOnly(sharing, memberIndex);
 
-            case 13:
-              _context10.next = 17;
+            case 15:
+              _context10.next = 19;
               break;
 
-            case 15:
-              _context10.next = 17;
+            case 17:
+              _context10.next = 19;
               return _this2.sharingCol.setReadWrite(sharing, memberIndex);
 
-            case 17:
-              _context10.next = 23;
+            case 19:
+              _context10.next = 28;
               break;
 
-            case 19:
-              _context10.prev = 19;
-              _context10.t0 = _context10["catch"](9);
+            case 21:
+              _context10.prev = 21;
+              _context10.t0 = _context10["catch"](11);
+              currentSharing = _getSharingById(_this2.state, sharingId) || sharing;
+              rollbackSharing = _objectSpread(_objectSpread({}, currentSharing), {}, {
+                attributes: _objectSpread(_objectSpread({}, currentSharing.attributes), {}, {
+                  members: currentSharing.attributes.members.map(function (member, index) {
+                    return index === memberIndex ? _objectSpread(_objectSpread({}, member), {}, {
+                      read_only: !makeReadOnly
+                    }) : member;
+                  })
+                })
+              });
+
+              _this2.dispatch(updateSharing(rollbackSharing));
+
               log.error("Failed to change member ".concat(member.email, " permission type to ").concat(newType), _context10.t0);
               throw _context10.t0;
 
-            case 23:
+            case 28:
             case "end":
               return _context10.stop();
           }
-        }, _callee10, null, [[9, 19]]);
+        }, _callee10, null, [[11, 21]]);
       }));
 
       return function (_x16, _x17, _x18) {

package/dist/SharingProvider.spec.js

@@ -744,7 +744,9 @@ describe('updateSharingMemberType', function () {
       setReadOnly: jest.fn().mockResolvedValue({}),
       setReadWrite: jest.fn().mockResolvedValue({})
     };
-    jest.spyOn(instance, 'setState');
+    instance.dispatch = jest.fn(function (action) {
+      instance.state = _objectSpread(_objectSpread({}, instance.state), reducer(instance.state, action));
+    });
   });
   it('should throw when sharing is not found', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
     return _regeneratorRuntime.wrap(function _callee15$(_context15) {
@@ -806,7 +808,7 @@ describe('updateSharingMemberType', function () {
       }
     }, _callee18);
   })));
-  it('should not dispatch a state update — realtime refreshes the store', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+  it('should optimistically dispatch a state update when switching to one-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
     return _regeneratorRuntime.wrap(function _callee19$(_context19) {
       while (1) switch (_context19.prev = _context19.next) {
         case 0:
@@ -814,7 +816,16 @@ describe('updateSharingMemberType', function () {
           return instance.updateSharingMemberType('sharing-123', 1, 'one-way');
 
         case 2:
-          expect(instance.setState).not.toHaveBeenCalled();
+          expect(instance.dispatch).toHaveBeenCalledWith({
+            type: 'UPDATE_SHARING',
+            sharing: _objectSpread(_objectSpread({}, mockSharing), {}, {
+              attributes: _objectSpread(_objectSpread({}, mockSharing.attributes), {}, {
+                members: [mockSharing.attributes.members[0], _objectSpread(_objectSpread({}, mockSharing.attributes.members[1]), {}, {
+                  read_only: true
+                })]
+              })
+            })
+          });
 
         case 3:
         case "end":
@@ -822,7 +833,7 @@ describe('updateSharingMemberType', function () {
       }
     }, _callee19);
   })));
-  it('should not dispatch a state update for two-way — realtime refreshes the store', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+  it('should optimistically dispatch a state update when switching to two-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
     return _regeneratorRuntime.wrap(function _callee20$(_context20) {
       while (1) switch (_context20.prev = _context20.next) {
         case 0:
@@ -830,7 +841,16 @@ describe('updateSharingMemberType', function () {
           return instance.updateSharingMemberType('sharing-123', 1, 'two-way');
 
         case 2:
-          expect(instance.setState).not.toHaveBeenCalled();
+          expect(instance.dispatch).toHaveBeenCalledWith({
+            type: 'UPDATE_SHARING',
+            sharing: _objectSpread(_objectSpread({}, mockSharing), {}, {
+              attributes: _objectSpread(_objectSpread({}, mockSharing.attributes), {}, {
+                members: [mockSharing.attributes.members[0], _objectSpread(_objectSpread({}, mockSharing.attributes.members[1]), {}, {
+                  read_only: false
+                })]
+              })
+            })
+          });
 
         case 3:
         case "end":
@@ -866,7 +886,7 @@ describe('updateSharingMemberType', function () {
       }
     }, _callee22);
   })));
-  it('should not dispatch state update if API call fails', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+  it('should rollback optimistic state update if API call fails', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
     return _regeneratorRuntime.wrap(function _callee23$(_context23) {
       while (1) switch (_context23.prev = _context23.next) {
         case 0:
@@ -875,14 +895,86 @@ describe('updateSharingMemberType', function () {
           return expect(instance.updateSharingMemberType('sharing-123', 1, 'one-way')).rejects.toThrow('Network error');
 
         case 3:
-          expect(instance.setState).not.toHaveBeenCalled();
+          expect(instance.dispatch).toHaveBeenNthCalledWith(1, {
+            type: 'UPDATE_SHARING',
+            sharing: _objectSpread(_objectSpread({}, mockSharing), {}, {
+              attributes: _objectSpread(_objectSpread({}, mockSharing.attributes), {}, {
+                members: [mockSharing.attributes.members[0], _objectSpread(_objectSpread({}, mockSharing.attributes.members[1]), {}, {
+                  read_only: true
+                })]
+              })
+            })
+          });
+          expect(instance.dispatch).toHaveBeenNthCalledWith(2, {
+            type: 'UPDATE_SHARING',
+            sharing: _objectSpread(_objectSpread({}, mockSharing), {}, {
+              attributes: _objectSpread(_objectSpread({}, mockSharing.attributes), {}, {
+                members: [mockSharing.attributes.members[0], _objectSpread(_objectSpread({}, mockSharing.attributes.members[1]), {}, {
+                  read_only: false
+                })]
+              })
+            })
+          });
 
-        case 4:
+        case 5:
         case "end":
           return _context23.stop();
       }
     }, _callee23);
   })));
+  it('should preserve realtime changes when rolling back an API failure', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var realtimeSharing;
+    return _regeneratorRuntime.wrap(function _callee25$(_context25) {
+      while (1) switch (_context25.prev = _context25.next) {
+        case 0:
+          realtimeSharing = _objectSpread(_objectSpread({}, mockSharing), {}, {
+            attributes: _objectSpread(_objectSpread({}, mockSharing.attributes), {}, {
+              description: 'updated by realtime',
+              members: [_objectSpread(_objectSpread({}, mockSharing.attributes.members[0]), {}, {
+                status: 'seen'
+              }), _objectSpread(_objectSpread({}, mockSharing.attributes.members[1]), {}, {
+                read_only: true
+              })]
+            })
+          });
+          instance.sharingCol.setReadOnly.mockImplementation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+            return _regeneratorRuntime.wrap(function _callee24$(_context24) {
+              while (1) switch (_context24.prev = _context24.next) {
+                case 0:
+                  instance.state = _objectSpread(_objectSpread({}, instance.state), {}, {
+                    sharings: instance.state.sharings.map(function (sharing) {
+                      return sharing.id === realtimeSharing.id ? realtimeSharing : sharing;
+                    })
+                  });
+                  throw new Error('Network error');
+
+                case 2:
+                case "end":
+                  return _context24.stop();
+              }
+            }, _callee24);
+          })));
+          _context25.next = 4;
+          return expect(instance.updateSharingMemberType('sharing-123', 1, 'one-way')).rejects.toThrow('Network error');
+
+        case 4:
+          expect(instance.dispatch).toHaveBeenNthCalledWith(2, {
+            type: 'UPDATE_SHARING',
+            sharing: _objectSpread(_objectSpread({}, realtimeSharing), {}, {
+              attributes: _objectSpread(_objectSpread({}, realtimeSharing.attributes), {}, {
+                members: [realtimeSharing.attributes.members[0], _objectSpread(_objectSpread({}, realtimeSharing.attributes.members[1]), {}, {
+                  read_only: false
+                })]
+              })
+            })
+          });
+
+        case 5:
+        case "end":
+          return _context25.stop();
+      }
+    }, _callee25);
+  })));
 }); // TODO Convert with react-testing-library
 // describe('hasWriteAccess', () => {
 //   it('tells if a doc is writtable', () => {

package/dist/components/Avatar/MemberAvatar.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["recipient"];
 
@@ -6,7 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import logger from '../../logger';
@@ -16,11 +17,19 @@ var MemberAvatar = function MemberAvatar(_ref) {
   var recipient = _ref.recipient,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var client = useClient(); // There are cases when due to apparent memory leaks, the recipient does not exist
+  var client = useClient(); // Remember which image url failed to load so we can fall back to the
+  // initials. Storing the url (instead of a boolean) means a new url is
+  // retried automatically, without an effect to reset the error state.
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      erroredSrc = _useState2[0],
+      setErroredSrc = _useState2[1]; // There are cases when due to apparent memory leaks, the recipient does not exist
   // This will trigger an unhanded error in the Avatar component and crash the app
   // At the moment, we are not sure where is the root cause of this cascading undefined props
   // Nevertheless, we can prevent the crash by returning null if the recipient is undefined
 
+
   if (!recipient) {
     // eslint-disable-next-line
     logger.warn('RecipientAvatar: recipient is missing, see props:', _objectSpread({
@@ -40,11 +49,18 @@ var MemberAvatar = function MemberAvatar(_ref) {
    */
 
 
-  var image = recipient.avatarPath && recipient.status ? "".concat(client.options.uri).concat(recipient.avatarPath, "?v=").concat(recipient.status) : null;
-  return /*#__PURE__*/React.createElement(Avatar, rest, image ? /*#__PURE__*/React.createElement("img", {
+  var image = recipient.avatarPath && recipient.status ? "".concat(client.options.uri).concat(recipient.avatarPath).concat(recipient.avatarPath.includes('?') ? '&' : '?', "v=").concat(recipient.status) : null; // The avatar can become unreachable (eg. the related sharing is revoked
+  // while its members are still rendered), in which case the image request
+  // fails. Without a fallback the browser shows a broken-image icon, so we
+  // render the initials instead.
+
+  return /*#__PURE__*/React.createElement(Avatar, rest, image && erroredSrc !== image ? /*#__PURE__*/React.createElement("img", {
     width: "100%",
     height: "100%",
-    src: image
+    src: image,
+    onError: function onError() {
+      return setErroredSrc(image);
+    }
   }) : getInitials(recipient));
 };
 

package/dist/components/Avatar/MemberAvatar.spec.js

@@ -0,0 +1,77 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { createMockClient } from 'cozy-client';
+import { MemberAvatar } from './MemberAvatar';
+import AppLike from '../../../test/AppLike';
+describe('MemberAvatar', function () {
+  var client = createMockClient({});
+  client.options = {
+    uri: 'http://cozy.example.com'
+  };
+
+  var setup = function setup(recipient) {
+    return render( /*#__PURE__*/React.createElement(AppLike, {
+      client: client
+    }, /*#__PURE__*/React.createElement(MemberAvatar, {
+      recipient: recipient
+    })));
+  };
+
+  it('renders nothing when the recipient is missing', function () {
+    var _setup = setup(undefined),
+        container = _setup.container; // The component returns null; only the provider wrappers remain, with no
+    // avatar rendered inside.
+
+
+    expect(container.querySelector('[class*="MuiAvatar-root"]')).toBeNull();
+    expect(container.querySelector('img')).toBeNull();
+  });
+  it('renders the avatar image when the recipient has an avatarPath and a status', function () {
+    var _setup2 = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/sharings/123/recipients/0/avatar'
+    }),
+        container = _setup2.container;
+
+    var img = container.querySelector('img');
+    expect(img).toBeTruthy();
+    expect(img.getAttribute('src')).toBe('http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner');
+  });
+  it('appends the cache-busting param with & when avatarPath already has a query string', function () {
+    var _setup3 = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/public/avatar?fallback=initials'
+    }),
+        container = _setup3.container;
+
+    expect(container.querySelector('img').getAttribute('src')).toBe('http://cozy.example.com/public/avatar?fallback=initials&v=owner');
+  });
+  it('renders the initials when there is no avatarPath', function () {
+    var _setup4 = setup({
+      public_name: 'Bob',
+      status: 'owner'
+    }),
+        container = _setup4.container,
+        getByText = _setup4.getByText;
+
+    expect(container.querySelector('img')).toBeNull();
+    expect(getByText('B')).toBeTruthy();
+  });
+  it('falls back to the initials when the avatar image fails to load', function () {
+    var _setup5 = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/sharings/123/recipients/0/avatar'
+    }),
+        container = _setup5.container,
+        getByText = _setup5.getByText;
+
+    var img = container.querySelector('img');
+    expect(img).toBeTruthy();
+    fireEvent.error(img);
+    expect(container.querySelector('img')).toBeNull();
+    expect(getByText('B')).toBeTruthy();
+  });
+});

package/dist/components/Recipient/MemberRecipientPermissions.js

@@ -112,17 +112,18 @@ var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
             return _context2.abrupt("return");
 
           case 3:
-            _context2.prev = 3;
-            _context2.next = 6;
+            hideMenu();
+            _context2.prev = 4;
+            _context2.next = 7;
             return updateSharingMemberType(sharingId, memberIndex, newType);
 
-          case 6:
-            _context2.next = 12;
+          case 7:
+            _context2.next = 13;
             break;
 
-          case 8:
-            _context2.prev = 8;
-            _context2.t0 = _context2["catch"](3);
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](4);
             log.error('Failed to change member permission type', _context2.t0);
             showAlert({
               message: t('Share.members.error.changePermission'),
@@ -130,14 +131,11 @@ var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
               variant: 'filled'
             });
 
-          case 12:
-            hideMenu();
-
           case 13:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[3, 8]]);
+      }, _callee2, null, [[4, 9]]);
     }));
 
     return function (_x) {

package/dist/components/Recipient/OwnerRecipientDefault.js

@@ -1,7 +1,13 @@
 import React from 'react';
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client';
 import MemberRecipient from './MemberRecipient';
-import { buildInstanceSettingsQuery } from '../../queries/queries';
+import { buildInstanceSettingsQuery } from '../../queries/queries'; // When the owner is not part of a sharing's members (eg. the folder only has
+// a link), there is no per-sharing avatar to reference. The instance's public
+// avatar still holds the owner's picture. fallback=initials makes the stack
+// serve a generated initials avatar (instead of the app icon) when no picture
+// has been uploaded, matching how avatars are rendered everywhere else.
+
+var OWNER_PUBLIC_AVATAR_PATH = '/public/avatar?fallback=initials';
 
 var OwnerRecipientDefault = function OwnerRecipientDefault() {
   var _instanceSettingsResu;
@@ -13,6 +19,7 @@ var OwnerRecipientDefault = function OwnerRecipientDefault() {
     isOwner: true,
     status: "owner",
     instance: client.options.uri,
+    avatarPath: OWNER_PUBLIC_AVATAR_PATH,
     public_name: instanceSettingsResult === null || instanceSettingsResult === void 0 || (_instanceSettingsResu = instanceSettingsResult.data) === null || _instanceSettingsResu === void 0 || (_instanceSettingsResu = _instanceSettingsResu.attributes) === null || _instanceSettingsResu === void 0 ? void 0 : _instanceSettingsResu.public_name
   });
 };

package/dist/components/Recipient/OwnerRecipientDefaultLite.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client';
 import MemberRecipientLite from './MemberRecipientLite';
 import withLocales from '../../hoc/withLocales';
-import { buildInstanceSettingsQuery } from '../../queries/queries';
+import { buildInstanceSettingsQuery } from '../../queries/queries'; // See OwnerRecipientDefault: show the instance public avatar (with an initials
+// fallback) when the owner has no per-sharing avatar to reference.
+
+var OWNER_PUBLIC_AVATAR_PATH = '/public/avatar?fallback=initials';
 
 var OwnerRecipientDefaultLite = function OwnerRecipientDefaultLite() {
   var _instanceSettingsResu;
@@ -14,6 +17,7 @@ var OwnerRecipientDefaultLite = function OwnerRecipientDefaultLite() {
     recipient: {
       status: 'owner',
       instance: client.options.uri,
+      avatarPath: OWNER_PUBLIC_AVATAR_PATH,
       public_name: instanceSettingsResult === null || instanceSettingsResult === void 0 || (_instanceSettingsResu = instanceSettingsResult.data) === null || _instanceSettingsResu === void 0 || (_instanceSettingsResu = _instanceSettingsResu.attributes) === null || _instanceSettingsResu === void 0 ? void 0 : _instanceSettingsResu.public_name
     },
     isOwner: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "33.4.0",
+  "version": "33.4.2",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -83,5 +83,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "2359cb47aa065de03f5491ba05114a860a44d9ca"
+  "gitHead": "ce6730dfc4d047382e31c566f7e066ad9d7eb195"
 }

package/src/SharingProvider.jsx

@@ -358,6 +358,24 @@ export class SharingProvider extends Component {
     if (newType !== 'one-way' && newType !== 'two-way') {
       throw new Error('Unsupported sharing type: ' + newType)
     }
+
+    const optimisticSharing = {
+      ...sharing,
+      attributes: {
+        ...sharing.attributes,
+        members: sharing.attributes.members.map((member, index) =>
+          index === memberIndex
+            ? {
+                ...member,
+                read_only: makeReadOnly
+              }
+            : member
+        )
+      }
+    }
+
+    this.dispatch(updateSharing(optimisticSharing))
+
     try {
       if (makeReadOnly) {
         await this.sharingCol.setReadOnly(sharing, memberIndex)
@@ -365,6 +383,23 @@ export class SharingProvider extends Component {
         await this.sharingCol.setReadWrite(sharing, memberIndex)
       }
     } catch (error) {
+      const currentSharing = getSharingById(this.state, sharingId) || sharing
+      const rollbackSharing = {
+        ...currentSharing,
+        attributes: {
+          ...currentSharing.attributes,
+          members: currentSharing.attributes.members.map((member, index) =>
+            index === memberIndex
+              ? {
+                  ...member,
+                  read_only: !makeReadOnly
+                }
+              : member
+          )
+        }
+      }
+
+      this.dispatch(updateSharing(rollbackSharing))
       log.error(
         `Failed to change member ${member.email} permission type to ${newType}`,
         error

package/src/SharingProvider.spec.jsx

@@ -524,7 +524,9 @@ describe('updateSharingMemberType', () => {
       setReadOnly: jest.fn().mockResolvedValue({}),
       setReadWrite: jest.fn().mockResolvedValue({})
     }
-    jest.spyOn(instance, 'setState')
+    instance.dispatch = jest.fn(action => {
+      instance.state = { ...instance.state, ...reducer(instance.state, action) }
+    })
   })
 
   it('should throw when sharing is not found', async () => {
@@ -556,16 +558,46 @@ describe('updateSharingMemberType', () => {
     expect(instance.sharingCol.setReadOnly).not.toHaveBeenCalled()
   })
 
-  it('should not dispatch a state update — realtime refreshes the store', async () => {
+  it('should optimistically dispatch a state update when switching to one-way', async () => {
     await instance.updateSharingMemberType('sharing-123', 1, 'one-way')
 
-    expect(instance.setState).not.toHaveBeenCalled()
+    expect(instance.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SHARING',
+      sharing: {
+        ...mockSharing,
+        attributes: {
+          ...mockSharing.attributes,
+          members: [
+            mockSharing.attributes.members[0],
+            {
+              ...mockSharing.attributes.members[1],
+              read_only: true
+            }
+          ]
+        }
+      }
+    })
   })
 
-  it('should not dispatch a state update for two-way — realtime refreshes the store', async () => {
+  it('should optimistically dispatch a state update when switching to two-way', async () => {
     await instance.updateSharingMemberType('sharing-123', 1, 'two-way')
 
-    expect(instance.setState).not.toHaveBeenCalled()
+    expect(instance.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SHARING',
+      sharing: {
+        ...mockSharing,
+        attributes: {
+          ...mockSharing.attributes,
+          members: [
+            mockSharing.attributes.members[0],
+            {
+              ...mockSharing.attributes.members[1],
+              read_only: false
+            }
+          ]
+        }
+      }
+    })
   })
 
   it('should rethrow error if setReadOnly fails', async () => {
@@ -588,7 +620,7 @@ describe('updateSharingMemberType', () => {
     ).rejects.toThrow('Network error')
   })
 
-  it('should not dispatch state update if API call fails', async () => {
+  it('should rollback optimistic state update if API call fails', async () => {
     instance.sharingCol.setReadOnly.mockRejectedValue(
       new Error('Network error')
     )
@@ -597,7 +629,89 @@ describe('updateSharingMemberType', () => {
       instance.updateSharingMemberType('sharing-123', 1, 'one-way')
     ).rejects.toThrow('Network error')
 
-    expect(instance.setState).not.toHaveBeenCalled()
+    expect(instance.dispatch).toHaveBeenNthCalledWith(1, {
+      type: 'UPDATE_SHARING',
+      sharing: {
+        ...mockSharing,
+        attributes: {
+          ...mockSharing.attributes,
+          members: [
+            mockSharing.attributes.members[0],
+            {
+              ...mockSharing.attributes.members[1],
+              read_only: true
+            }
+          ]
+        }
+      }
+    })
+    expect(instance.dispatch).toHaveBeenNthCalledWith(2, {
+      type: 'UPDATE_SHARING',
+      sharing: {
+        ...mockSharing,
+        attributes: {
+          ...mockSharing.attributes,
+          members: [
+            mockSharing.attributes.members[0],
+            {
+              ...mockSharing.attributes.members[1],
+              read_only: false
+            }
+          ]
+        }
+      }
+    })
+  })
+
+  it('should preserve realtime changes when rolling back an API failure', async () => {
+    const realtimeSharing = {
+      ...mockSharing,
+      attributes: {
+        ...mockSharing.attributes,
+        description: 'updated by realtime',
+        members: [
+          {
+            ...mockSharing.attributes.members[0],
+            status: 'seen'
+          },
+          {
+            ...mockSharing.attributes.members[1],
+            read_only: true
+          }
+        ]
+      }
+    }
+
+    instance.sharingCol.setReadOnly.mockImplementation(async () => {
+      instance.state = {
+        ...instance.state,
+        sharings: instance.state.sharings.map(sharing =>
+          sharing.id === realtimeSharing.id ? realtimeSharing : sharing
+        )
+      }
+      throw new Error('Network error')
+    })
+
+    await expect(
+      instance.updateSharingMemberType('sharing-123', 1, 'one-way')
+    ).rejects.toThrow('Network error')
+
+    expect(instance.dispatch).toHaveBeenNthCalledWith(2, {
+      type: 'UPDATE_SHARING',
+      sharing: {
+        ...realtimeSharing,
+        attributes: {
+          ...realtimeSharing.attributes,
+          members: [
+            realtimeSharing.attributes.members[0],
+            {
+              ...realtimeSharing.attributes.members[1],
+              read_only: false
+            }
+          ]
+        }
+      }
+    })
   })
 })
 

package/src/components/Avatar/MemberAvatar.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
@@ -8,6 +8,10 @@ import { getInitials } from '../../models'
 
 const MemberAvatar = ({ recipient, ...rest }) => {
   const client = useClient()
+  // Remember which image url failed to load so we can fall back to the
+  // initials. Storing the url (instead of a boolean) means a new url is
+  // retried automatically, without an effect to reset the error state.
+  const [erroredSrc, setErroredSrc] = useState(null)
 
   // There are cases when due to apparent memory leaks, the recipient does not exist
   // This will trigger an unhanded error in the Avatar component and crash the app
@@ -31,13 +35,24 @@ const MemberAvatar = ({ recipient, ...rest }) => {
    */
   const image =
     recipient.avatarPath && recipient.status
-      ? `${client.options.uri}${recipient.avatarPath}?v=${recipient.status}`
+      ? `${client.options.uri}${recipient.avatarPath}${
+          recipient.avatarPath.includes('?') ? '&' : '?'
+        }v=${recipient.status}`
       : null
 
+  // The avatar can become unreachable (eg. the related sharing is revoked
+  // while its members are still rendered), in which case the image request
+  // fails. Without a fallback the browser shows a broken-image icon, so we
+  // render the initials instead.
   return (
     <Avatar {...rest}>
-      {image ? (
-        <img width="100%" height="100%" src={image} />
+      {image && erroredSrc !== image ? (
+        <img
+          width="100%"
+          height="100%"
+          src={image}
+          onError={() => setErroredSrc(image)}
+        />
       ) : (
         getInitials(recipient)
       )}

package/src/components/Avatar/MemberAvatar.spec.jsx

@@ -0,0 +1,80 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import { createMockClient } from 'cozy-client'
+
+import { MemberAvatar } from './MemberAvatar'
+import AppLike from '../../../test/AppLike'
+
+describe('MemberAvatar', () => {
+  const client = createMockClient({})
+  client.options = { uri: 'http://cozy.example.com' }
+
+  const setup = recipient =>
+    render(
+      <AppLike client={client}>
+        <MemberAvatar recipient={recipient} />
+      </AppLike>
+    )
+
+  it('renders nothing when the recipient is missing', () => {
+    const { container } = setup(undefined)
+
+    // The component returns null; only the provider wrappers remain, with no
+    // avatar rendered inside.
+    expect(container.querySelector('[class*="MuiAvatar-root"]')).toBeNull()
+    expect(container.querySelector('img')).toBeNull()
+  })
+
+  it('renders the avatar image when the recipient has an avatarPath and a status', () => {
+    const { container } = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/sharings/123/recipients/0/avatar'
+    })
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    expect(img.getAttribute('src')).toBe(
+      'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
+    )
+  })
+
+  it('appends the cache-busting param with & when avatarPath already has a query string', () => {
+    const { container } = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/public/avatar?fallback=initials'
+    })
+
+    expect(container.querySelector('img').getAttribute('src')).toBe(
+      'http://cozy.example.com/public/avatar?fallback=initials&v=owner'
+    )
+  })
+
+  it('renders the initials when there is no avatarPath', () => {
+    const { container, getByText } = setup({
+      public_name: 'Bob',
+      status: 'owner'
+    })
+
+    expect(container.querySelector('img')).toBeNull()
+    expect(getByText('B')).toBeTruthy()
+  })
+
+  it('falls back to the initials when the avatar image fails to load', () => {
+    const { container, getByText } = setup({
+      public_name: 'Bob',
+      status: 'owner',
+      avatarPath: '/sharings/123/recipients/0/avatar'
+    })
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+
+    fireEvent.error(img)
+
+    expect(container.querySelector('img')).toBeNull()
+    expect(getByText('B')).toBeTruthy()
+  })
+})

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -74,6 +74,7 @@ const MemberRecipientPermissions = ({
         hideMenu()
         return
       }
+      hideMenu()
       try {
         await updateSharingMemberType(sharingId, memberIndex, newType)
       } catch (error) {
@@ -84,7 +85,6 @@ const MemberRecipientPermissions = ({
           variant: 'filled'
         })
       }
-      hideMenu()
     },
     [
       hideMenu,

package/src/components/Recipient/OwnerRecipientDefault.jsx

@@ -5,6 +5,13 @@ import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client'
 import MemberRecipient from './MemberRecipient'
 import { buildInstanceSettingsQuery } from '../../queries/queries'
 
+// When the owner is not part of a sharing's members (eg. the folder only has
+// a link), there is no per-sharing avatar to reference. The instance's public
+// avatar still holds the owner's picture. fallback=initials makes the stack
+// serve a generated initials avatar (instead of the app icon) when no picture
+// has been uploaded, matching how avatars are rendered everywhere else.
+const OWNER_PUBLIC_AVATAR_PATH = '/public/avatar?fallback=initials'
+
 const OwnerRecipientDefault = () => {
   const client = useClient()
 
@@ -20,6 +27,7 @@ const OwnerRecipientDefault = () => {
         isOwner={true}
         status="owner"
         instance={client.options.uri}
+        avatarPath={OWNER_PUBLIC_AVATAR_PATH}
         public_name={instanceSettingsResult?.data?.attributes?.public_name}
       />
     )

package/src/components/Recipient/OwnerRecipientDefaultLite.jsx

@@ -6,6 +6,10 @@ import MemberRecipientLite from './MemberRecipientLite'
 import withLocales from '../../hoc/withLocales'
 import { buildInstanceSettingsQuery } from '../../queries/queries'
 
+// See OwnerRecipientDefault: show the instance public avatar (with an initials
+// fallback) when the owner has no per-sharing avatar to reference.
+const OWNER_PUBLIC_AVATAR_PATH = '/public/avatar?fallback=initials'
+
 const OwnerRecipientDefaultLite = () => {
   const client = useClient()
 
@@ -21,6 +25,7 @@ const OwnerRecipientDefaultLite = () => {
         recipient={{
           status: 'owner',
           instance: client.options.uri,
+          avatarPath: OWNER_PUBLIC_AVATAR_PATH,
           public_name: instanceSettingsResult?.data?.attributes?.public_name
         }}
         isOwner={true}