split up PowerLevelEditor into two components

one while editing (PowerLevelEditor) and one
while not editing (PowerLevelSection).

Also save when pressing the button, not when changing the
power dropdown.

Also show the spinner next to the dropdown when saving,
not at the bottom of the component.

res/css/views/right_panel/_UserInfo.scss

@@ -132,8 +132,8 @@ limitations under the License.
 
         margin: 6px 0;
 
-        .mx_IconButton {
+        .mx_IconButton, .mx_Spinner {
-            margin-left: 6px;
+            margin-left: 20px;
             width: 16px;
             height: 16px;
 
@@ -148,6 +148,10 @@ limitations under the License.
             align-items: center;
             // try to make it the same height as the dropdown
             margin: 11px 0 12px 0;
+
+            .mx_IconButton {
+                margin-left: 6px;
+            }
         }
 
         .mx_Field {

src/Roles.js

@@ -30,6 +30,6 @@ export function textualPowerLevel(level, usersDefault) {
     if (LEVEL_ROLE_MAP[level]) {
         return LEVEL_ROLE_MAP[level];
     } else {
-        return _t("Custom %(level)s", {level});
+        return _t("Custom (%(level)s)", {level});
     }
 }

src/components/views/right_panel/UserInfo.js

@@ -837,9 +837,46 @@ function useRoomPermissions(cli, room, user) {
 }
 
 const PowerLevelSection = withLegacyMatrixClient(({matrixClient: cli, user, room, roomPermissions, powerLevels}) => {
+    const [isEditing, setEditing] = useState(false);
+    if (room && user.roomId) { // is in room
+        if (isEditing) {
+            return (<PowerLevelEditor
+                user={user} room={room} roomPermissions={roomPermissions}
+                onFinished={() => setEditing(false)} />);
+        } else {
+            const IconButton = sdk.getComponent('elements.IconButton');
+            const powerLevelUsersDefault = powerLevels.users_default || 0;
+            const powerLevel = parseInt(user.powerLevel, 10);
+            const modifyButton = roomPermissions.canEdit ?
+                (<IconButton icon="edit" onClick={() => setEditing(true)} />) : null;
+            const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
+            const label = _t("<strong>%(role)s</strong> in %(roomName)s",
+                {role, roomName: room.name},
+                {strong: label => <strong>{label}</strong>},
+            );
+            return (
+                <div className="mx_UserInfo_profileField">
+                    <div className="mx_UserInfo_roleDescription">{label}{modifyButton}</div>
+                </div>
+            );
+        }
+    } else {
+        return null;
+    }
+});
+
+const PowerLevelEditor = withLegacyMatrixClient(({matrixClient: cli, user, room, roomPermissions, onFinished}) => {
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [selectedPowerLevel, setSelectedPowerLevel] = useState(parseInt(user.powerLevel, 10));
+    const [isDirty, setIsDirty] = useState(false);
+    const onPowerChange = useCallback((powerLevel) => {
+        setIsDirty(true);
+        setSelectedPowerLevel(parseInt(powerLevel, 10));
+    }, [setSelectedPowerLevel, setIsDirty]);
+
+    const changePowerLevel = useCallback(async () => {
         const _applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
-            startUpdating();
+            return cli.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
-            cli.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
                 function() {
                     // NO-OP; rely on the m.room.member event coming down else we could
                     // get out of sync if we force setState here!
@@ -852,11 +889,18 @@ const PowerLevelSection = withLegacyMatrixClient(({matrixClient: cli, user, room
                         description: _t("Failed to change power level"),
                     });
                 },
-            ).finally(() => {
+            );
-                stopUpdating();
-            }).done();
         };
 
+        try {
+            if (!isDirty) {
+                return;
+            }
+
+            setIsUpdating(true);
+
+            const powerLevel = selectedPowerLevel;
+
             const roomId = user.roomId;
             const target = user.userId;
 
@@ -875,10 +919,10 @@ const PowerLevelSection = withLegacyMatrixClient(({matrixClient: cli, user, room
             if (myUserId === target) {
                 try {
                     if (!(await _warnSelfDemote())) return;
-                _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
                 } catch (e) {
                     console.error("Failed to warn about self demotion: ", e);
                 }
+                await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
                 return;
             }
 
@@ -898,41 +942,33 @@ const PowerLevelSection = withLegacyMatrixClient(({matrixClient: cli, user, room
                 const [confirmed] = await finished;
                 if (confirmed) return;
             }
-        _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+            await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-    }, [user.roomId, user.userId, room && room.currentState, cli]); // eslint-disable-line
+        } finally {
+            onFinished();
+        }
+    }, [user.roomId, user.userId, cli, selectedPowerLevel, isDirty, setIsUpdating, onFinished, room]);
 
-
-    const [isEditingPL, setEditingPL] = useState(false);
-    if (room && user.roomId) { // is in room
     const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
     const powerLevelUsersDefault = powerLevelEvent ? powerLevelEvent.getContent().users_default : 0;
-        const powerLevel = parseInt(user.powerLevel);
     const IconButton = sdk.getComponent('elements.IconButton');
-        if (isEditingPL) {
+    const Spinner = sdk.getComponent("elements.Spinner");
+    const buttonOrSpinner = isUpdating ? <Spinner w={16} h={16} /> :
+        <IconButton icon="check" onClick={changePowerLevel} />;
+
     const PowerSelector = sdk.getComponent('elements.PowerSelector');
     return (
         <div className="mx_UserInfo_profileField">
             <PowerSelector
                 label={null}
-                        value={powerLevel}
+                value={selectedPowerLevel}
                 maxValue={roomPermissions.modifyLevelMax}
                 usersDefault={powerLevelUsersDefault}
                 onChange={onPowerChange}
+                disabled={isUpdating}
             />
-                    <IconButton icon="check" onClick={() => setEditingPL(false)} />
+            {buttonOrSpinner}
         </div>
     );
-        } else {
-            const modifyButton = roomPermissions.canAffectUser ?
-                (<IconButton icon="edit" onClick={() => setEditingPL(true)} />) : null;
-            const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
-            const label = _t("<strong>%(role)s</strong> in %(roomName)s",
-                {role, roomName: room.name},
-                {strong: label => <strong>{label}</strong>},
-            );
-            return (<div className="mx_UserInfo_profileField"><div className="mx_UserInfo_roleDescription">{label}{modifyButton}</div></div>);
-        }
-    }
 });
 
 // cli is injected by withLegacyMatrixClient

src/i18n/strings/en_EN.json

@@ -118,7 +118,7 @@
     "Restricted": "Restricted",
     "Moderator": "Moderator",
     "Admin": "Admin",
-    "Custom %(level)s": "Custom %(level)s",
+    "Custom (%(level)s)": "Custom (%(level)s)",
     "Start a chat": "Start a chat",
     "Who would you like to communicate with?": "Who would you like to communicate with?",
     "Email, name or Matrix ID": "Email, name or Matrix ID",
@@ -1080,8 +1080,8 @@
     "Remove this user from community?": "Remove this user from community?",
     "Failed to withdraw invitation": "Failed to withdraw invitation",
     "Failed to remove user from community": "Failed to remove user from community",
-    "Failed to deactivate user": "Failed to deactivate user",
     "<strong>%(role)s</strong> in %(roomName)s": "<strong>%(role)s</strong> in %(roomName)s",
+    "Failed to deactivate user": "Failed to deactivate user",
     "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
     "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
     "Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.",