fix: Limit amount of displayed board members (#715)

Closes #617

client/src/components/Memberships/Memberships.jsx

@@ -8,6 +8,9 @@ import ActionsStep from './ActionsStep';
 import User from '../User';
 
 import styles from './Memberships.module.scss';
+import MembershipsStep from './MembershipsStep';
+
+const MAX_MEMBERS = 6;
 
 const Memberships = React.memo(
   ({
@@ -31,11 +34,14 @@ const Memberships = React.memo(
   }) => {
     const AddPopup = usePopup(AddStep);
     const ActionsPopup = usePopup(ActionsStep);
+    const MembershipsPopup = usePopup(MembershipsStep);
+
+    const remainMembersCount = items.length - MAX_MEMBERS;
 
     return (
       <>
         <span className={styles.users}>
-          {items.map((item) => (
+          {items.slice(0, MAX_MEMBERS).map((item) => (
             <span key={item.id} className={styles.user}>
               <ActionsPopup
                 membership={item}
@@ -63,6 +69,28 @@ const Memberships = React.memo(
             </span>
           ))}
         </span>
+        {remainMembersCount > 0 && (
+          <MembershipsPopup
+            items={items}
+            permissionsSelectStep={permissionsSelectStep}
+            leaveButtonContent={leaveButtonContent}
+            leaveConfirmationTitle={leaveConfirmationTitle}
+            leaveConfirmationContent={leaveConfirmationContent}
+            leaveConfirmationButtonContent={leaveConfirmationButtonContent}
+            deleteButtonContent={deleteButtonContent}
+            deleteConfirmationTitle={deleteConfirmationTitle}
+            deleteConfirmationContent={deleteConfirmationContent}
+            deleteConfirmationButtonContent={deleteConfirmationButtonContent}
+            canEdit={canEdit}
+            canLeave={items.length > 1 || canLeaveIfLast}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          >
+            <Button icon className={styles.addUser}>
+              + {remainMembersCount < 99 ? remainMembersCount : 99}
+            </Button>
+          </MembershipsPopup>
+        )}
         {canEdit && (
           <AddPopup
             users={allUsers}

client/src/components/Memberships/MembershipsStep.jsx

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+import BoardMembershipsStep from '../BoardMembershipsStep/BoardMembershipsStep';
+import ActionsStep from './ActionsStep';
+import { Popup } from '../../lib/custom-ui';
+
+const MembershipsStep = React.memo(
+  ({
+    items,
+    permissionsSelectStep,
+    leaveButtonContent,
+    leaveConfirmationTitle,
+    leaveConfirmationContent,
+    leaveConfirmationButtonContent,
+    deleteButtonContent,
+    deleteConfirmationTitle,
+    deleteConfirmationContent,
+    deleteConfirmationButtonContent,
+    canEdit,
+    canLeave,
+    onUpdate,
+    onDelete,
+    onClose,
+  }) => {
+    const [t] = useTranslation();
+
+    const [editingItem, setEditingItem] = useState();
+
+    const handleUserClick = useCallback(
+      (id) => {
+        setEditingItem(items.find((item) => item.user.id === id));
+      },
+      [setEditingItem, items],
+    );
+
+    if (editingItem) {
+      return (
+        <>
+          <Popup.Header onBack={() => setEditingItem(null)}>{t('common.memberInfo')}</Popup.Header>
+          <Popup.Content>
+            <ActionsStep
+              membership={editingItem}
+              permissionsSelectStep={permissionsSelectStep}
+              leaveButtonContent={leaveButtonContent}
+              leaveConfirmationTitle={leaveConfirmationTitle}
+              leaveConfirmationContent={leaveConfirmationContent}
+              leaveConfirmationButtonContent={leaveConfirmationButtonContent}
+              deleteButtonContent={deleteButtonContent}
+              deleteConfirmationTitle={deleteConfirmationTitle}
+              deleteConfirmationContent={deleteConfirmationContent}
+              deleteConfirmationButtonContent={deleteConfirmationButtonContent}
+              canEdit={canEdit}
+              canLeave={canLeave}
+              onUpdate={onUpdate}
+              onDelete={onDelete}
+              onClose={onClose}
+            />
+          </Popup.Content>
+        </>
+      );
+    }
+
+    return (
+      <BoardMembershipsStep
+        items={items}
+        currentUserIds={[]}
+        onUserSelect={handleUserClick}
+        onUserDeselect={() => {}}
+      />
+    );
+  },
+);
+
+MembershipsStep.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  permissionsSelectStep: PropTypes.elementType,
+  leaveButtonContent: PropTypes.string,
+  leaveConfirmationTitle: PropTypes.string,
+  leaveConfirmationContent: PropTypes.string,
+  leaveConfirmationButtonContent: PropTypes.string,
+  deleteButtonContent: PropTypes.string,
+  deleteConfirmationTitle: PropTypes.string,
+  deleteConfirmationContent: PropTypes.string,
+  deleteConfirmationButtonContent: PropTypes.string,
+  canEdit: PropTypes.bool.isRequired,
+  canLeave: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func,
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+MembershipsStep.defaultProps = {
+  permissionsSelectStep: undefined,
+  leaveButtonContent: 'action.leaveBoard',
+  leaveConfirmationTitle: 'common.leaveBoard',
+  leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
+  leaveConfirmationButtonContent: 'action.leaveBoard',
+  deleteButtonContent: 'action.removeFromBoard',
+  deleteConfirmationTitle: 'common.removeMember',
+  deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
+  deleteConfirmationButtonContent: 'action.removeMember',
+  onUpdate: undefined,
+};
+
+export default MembershipsStep;

client/src/locales/en/core.js

@@ -108,6 +108,7 @@ export default {
       list: 'List',
       listActions_title: 'List Actions',
       managers: 'Managers',
+      memberInfo: 'Member Info',
       members: 'Members',
       minutes: 'Minutes',
       moveCard_title: 'Move Card',

client/src/locales/pt/core.js

@@ -111,6 +111,7 @@ export default {
       list: 'Lista',
       listActions_title: 'Ações da Lista',
       managers: 'Gerentes',
+      memberInfo: 'Informações do Membro',
       members: 'Membros',
       minutes: 'Minutos',
       moveCard_title: 'Mover Cartão',