feat(client): Add ability for admins to edit user avatars (#1604)

client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx

@@ -17,6 +17,7 @@ import SelectRoleStep from './SelectRoleStep';
 import ApiKeyStep from './ApiKeyStep';
 import ConfirmationStep from '../../ConfirmationStep';
 import EditUserInformationStep from '../../../users/EditUserInformationStep';
+import EditUserAvatarStep from '../../../users/EditUserAvatarStep';
 import EditUserUsernameStep from '../../../users/EditUserUsernameStep';
 import EditUserEmailStep from '../../../users/EditUserEmailStep';
 import EditUserPasswordStep from '../../../users/EditUserPasswordStep';
@@ -25,6 +26,7 @@ import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   EDIT_INFORMATION: 'EDIT_INFORMATION',
+  EDIT_AVATAR: 'EDIT_AVATAR',
   EDIT_USERNAME: 'EDIT_USERNAME',
   EDIT_EMAIL: 'EDIT_EMAIL',
   EDIT_PASSWORD: 'EDIT_PASSWORD',
@@ -97,6 +99,10 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
     openStep(StepTypes.EDIT_INFORMATION);
   }, [openStep]);
 
+  const handleEditAvatarClick = useCallback(() => {
+    openStep(StepTypes.EDIT_AVATAR);
+  }, [openStep]);
+
   const handleEditUsernameClick = useCallback(() => {
     openStep(StepTypes.EDIT_USERNAME);
   }, [openStep]);
@@ -137,6 +143,8 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
     switch (step.type) {
       case StepTypes.EDIT_INFORMATION:
         return <EditUserInformationStep id={userId} onBack={handleBack} onClose={onClose} />;
+      case StepTypes.EDIT_AVATAR:
+        return <EditUserAvatarStep id={userId} onBack={handleBack} onClose={onClose} />;
       case StepTypes.EDIT_USERNAME:
         return <EditUserUsernameStep id={userId} onBack={handleBack} onClose={onClose} />;
       case StepTypes.EDIT_EMAIL:
@@ -219,6 +227,12 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
+          <Menu.Item className={styles.menuItem} onClick={handleEditAvatarClick}>
+            <Icon name="image outline" className={styles.menuItemIcon} />
+            {t('action.editAvatar', {
+              context: 'title',
+            })}
+          </Menu.Item>
           {!user.lockedFieldNames.includes('username') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
               <Icon name="at" className={styles.menuItemIcon} />

client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.jsx

@@ -3,20 +3,22 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { FilePicker, Popup } from '../../../../lib/custom-ui';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
 
-import selectors from '../../../../selectors';
-import entryActions from '../../../../entry-actions';
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
 
-import styles from './EditAvatarStep.module.scss';
+import styles from './EditUserAvatarStep.module.scss';
 
-const EditAvatarStep = React.memo(({ onClose }) => {
-  const defaultValue = useSelector((state) => selectors.selectCurrentUser(state).avatar);
+const EditUserAvatarStep = React.memo(({ id, onBack, onClose }) => {
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+  const avatar = useSelector((state) => selectUserById(state, id).avatar);
 
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -26,33 +28,33 @@ const EditAvatarStep = React.memo(({ onClose }) => {
   const handleFileSelect = useCallback(
     (file) => {
       dispatch(
-        entryActions.updateCurrentUserAvatar({
+        entryActions.updateUserAvatar(id, {
           file,
         }),
       );
 
       onClose();
     },
-    [onClose, dispatch],
+    [dispatch, id, onClose],
   );
 
   const handleDeleteClick = useCallback(() => {
     dispatch(
-      entryActions.updateCurrentUser({
+      entryActions.updateUser(id, {
         avatar: null,
       }),
     );
 
     onClose();
-  }, [onClose, dispatch]);
+  }, [dispatch, id, onClose]);
 
   useEffect(() => {
-    fieldRef.current.focus();
+    fieldRef.current?.focus?.();
   }, []);
 
   return (
     <>
-      <Popup.Header>
+      <Popup.Header onBack={onBack}>
         {t('common.editAvatar', {
           context: 'title',
         })}
@@ -67,7 +69,7 @@ const EditAvatarStep = React.memo(({ onClose }) => {
             />
           </FilePicker>
         </div>
-        {defaultValue && (
+        {avatar && (
           <Button negative content={t('action.deleteAvatar')} onClick={handleDeleteClick} />
         )}
       </Popup.Content>
@@ -75,8 +77,14 @@ const EditAvatarStep = React.memo(({ onClose }) => {
   );
 });
 
-EditAvatarStep.propTypes = {
+EditUserAvatarStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-export default EditAvatarStep;
+EditUserAvatarStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default EditUserAvatarStep;

client/src/components/users/EditUserAvatarStep/index.js

@@ -3,6 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import AccountPane from './AccountPane';
+import EditUserAvatarStep from './EditUserAvatarStep';
 
-export default AccountPane;
+export default EditUserAvatarStep;

client/src/components/users/UserSettingsModal/AccountPane.jsx

@@ -8,16 +8,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
 
-import selectors from '../../../../selectors';
-import entryActions from '../../../../entry-actions';
-import { usePopupInClosableContext } from '../../../../hooks';
-import locales from '../../../../locales';
-import EditAvatarStep from './EditAvatarStep';
-import EditUserInformation from '../../EditUserInformation';
-import EditUserUsernameStep from '../../EditUserUsernameStep';
-import EditUserEmailStep from '../../EditUserEmailStep';
-import EditUserPasswordStep from '../../EditUserPasswordStep';
-import UserAvatar from '../../UserAvatar';
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { usePopupInClosableContext } from '../../../hooks';
+import locales from '../../../locales';
+import EditUserInformation from '../EditUserInformation';
+import EditUserAvatarStep from '../EditUserAvatarStep';
+import EditUserUsernameStep from '../EditUserUsernameStep';
+import EditUserEmailStep from '../EditUserEmailStep';
+import EditUserPasswordStep from '../EditUserPasswordStep';
+import UserAvatar from '../UserAvatar';
 
 import styles from './AccountPane.module.scss';
 
@@ -34,7 +34,7 @@ const AccountPane = React.memo(() => {
     [dispatch],
   );
 
-  const EditAvatarPopup = usePopupInClosableContext(EditAvatarStep);
+  const EditUserAvatarPopup = usePopupInClosableContext(EditUserAvatarStep);
   const EditUserUsernamePopup = usePopupInClosableContext(EditUserUsernameStep);
   const EditUserEmailPopup = usePopupInClosableContext(EditUserEmailStep);
   const EditUserPasswordPopup = usePopupInClosableContext(EditUserPasswordStep);
@@ -45,9 +45,9 @@ const AccountPane = React.memo(() => {
 
   return (
     <Tab.Pane attached={false} className={styles.wrapper}>
-      <EditAvatarPopup>
+      <EditUserAvatarPopup id={user.id}>
         <UserAvatar id={user.id} size="massive" isDisabled={user.isAvatarUpdating} />
-      </EditAvatarPopup>
+      </EditUserAvatarPopup>
       <br />
       <br />
       <EditUserInformation id={user.id} />