fix: Cursor, new disabled popup for Task Memberships, CardModal for non-editor fixes

Author: RARgames

client/src/components/Board/ListView/MembersCell/MembersCell.jsx

@@ -14,9 +14,18 @@ const MembersCell = React.memo(({ id, users, allBoardMemberships, cellClassName,
   const userIds = users.map((user) => user.id);
 
   const usersNode = users.map((user) => (
-    <span key={user.id} className={classNames(s.attachment, s.user)}>
+    <MembershipsPopup
+      key={user.id}
+      items={allBoardMemberships}
+      currentUserIds={userIds}
+      onUserSelect={(userId) => onUserAdd(userId, id)}
+      onUserDeselect={(userId) => onUserRemove(userId, id)}
+      offset={0}
+      disabled={!canEdit}
+      wrapperClassName={s.userWrapper}
+    >
       <User name={user.name} avatarUrl={user.avatarUrl} size="card" />
-    </span>
+    </MembershipsPopup>
   ));
 
   const addUserNode = (
@@ -34,21 +43,11 @@ const MembersCell = React.memo(({ id, users, allBoardMemberships, cellClassName,
     </MembershipsPopup>
   );
 
-  if (!canEdit) {
-    return <div className={classNames(cellClassName, s.users)}>{usersNode}</div>;
-  }
-
-  if (users.length === 0) {
+  if (users.length === 0 && canEdit) {
     return addUserNode;
   }
 
-  return (
-    <div className={classNames(cellClassName, s.users)}>
-      <MembershipsPopup items={allBoardMemberships} currentUserIds={userIds} onUserSelect={(userId) => onUserAdd(userId, id)} onUserDeselect={(userId) => onUserRemove(userId, id)} offset={0}>
-        {usersNode}
-      </MembershipsPopup>
-    </div>
-  );
+  return <div className={classNames(cellClassName)}>{usersNode}</div>;
 });
 
 MembersCell.propTypes = {

client/src/components/Board/ListView/MembersCell/MembersCell.module.scss

@@ -1,16 +1,9 @@
 :global(#app) {
-  .attachment {
+  .userWrapper {
     display: inline-block;
-  }
-
-  .user {
     margin-right: -8px;
   }
 
-  .users {
-    display: inline-flex;
-  }
-
   .popupWrapper {
     height: 100%;
     width: 100%;

client/src/components/CardModal/CardModal.jsx

@@ -420,7 +420,7 @@ const CardModal = React.memo(
             </div>
           )}
         </div>
-        <MembershipsPopup items={allBoardMemberships} currentUserIds={userIds} onUserSelect={onUserAdd} onUserDeselect={onUserRemove} offset={0}>
+        <MembershipsPopup items={allBoardMemberships} currentUserIds={userIds} onUserSelect={onUserAdd} onUserDeselect={onUserRemove} offset={0} disabled={!canEdit}>
           {users.slice(0, visibleMembersCount).map((user, index) => (
             <span key={user.id} className={classNames(s.headerItem, s.user, users.length <= visibleMembersCount && users.length === index + 1 && s.lastUser)}>
               <User name={user.name} avatarUrl={user.avatarUrl} size="small" />
@@ -566,7 +566,7 @@ const CardModal = React.memo(
       descriptionEditOpenNode
     );
 
-    const descriptionNode = (description || canEdit) && (
+    const descriptionNode = (
       <div>
         <div className={s.moduleHeader}>
           <Icon type={IconType.BarsStaggered} size={IconSize.Size20} className={s.moduleIcon} />
@@ -583,7 +583,7 @@ const CardModal = React.memo(
         </div>
         <div>
           {descShown && canEdit && descriptionEditNode}
-          {descShown && !canEdit && (
+          {descShown && !canEdit && description && (
             <div className={s.descriptionText}>
               <MDPreview source={description} isGithubConnected={isGithubConnected} githubRepo={githubRepo} />
             </div>
@@ -595,7 +595,7 @@ const CardModal = React.memo(
     const completedTasks = tasks.filter((task) => task.isCompleted);
     const closestNotCompletedTaslDueDate = tasks.filter((task) => !task.isCompleted && task.dueDate).sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate))[0];
 
-    const tasksNode = (tasks.length > 0 || canEdit) && (
+    const tasksNode = (
       <div>
         <div className={s.moduleHeader}>
           <Icon type={IconType.Check} size={IconSize.Size20} className={s.moduleIcon} />
@@ -620,7 +620,7 @@ const CardModal = React.memo(
           </Button>
         </div>
         <div>
-          {taskShown && (
+          {taskShown && tasks.length > 0 && (
             <Tasks
               ref={tasksRef}
               variant="cardModal"

client/src/components/Tasks/Item.jsx

@@ -92,7 +92,7 @@ const Item = React.memo(({ variant, id, index, name, dueDate, boardMemberships,
   }
 
   const membersNode = (
-    <div className={classNames(s.members, gs.cursorPointer, isCompleted && s.itemCompleted)}>
+    <div className={classNames(s.members, canEdit && gs.cursorPointer, isCompleted && s.itemCompleted)}>
       {users.slice(0, visibleMembersCount).map((user) => (
         <span key={user.id} className={s.member}>
           <User name={user.name} avatarUrl={user.avatarUrl} size={userSize} />
@@ -131,14 +131,19 @@ const Item = React.memo(({ variant, id, index, name, dueDate, boardMemberships,
               <span className={classNames(s.task, isCompleted && s.taskCompleted, canEdit && s.taskEditable)} onClick={handleClick} title={name}>
                 {name}
               </span>
-              {users &&
-                (isPersisted && canEdit ? (
-                  <MembershipsPopup items={boardMemberships} currentUserIds={users.map((user) => user.id)} onUserSelect={onUserAdd} onUserDeselect={onUserRemove} offset={0} position="left-start">
-                    {membersNode}
-                  </MembershipsPopup>
-                ) : (
-                  membersNode
-                ))}
+              {users && (
+                <MembershipsPopup
+                  items={boardMemberships}
+                  currentUserIds={users.map((user) => user.id)}
+                  onUserSelect={onUserAdd}
+                  onUserDeselect={onUserRemove}
+                  offset={0}
+                  position="left-start"
+                  disabled={!(canEdit && isPersisted)}
+                >
+                  {membersNode}
+                </MembershipsPopup>
+              )}
               {dueDate && (
                 <div className={classNames(s.dueDate, canEdit && gs.cursorGrab, isCompleted && s.itemCompleted, variant !== VARIANTS.CARDMODAL && s.dueDateCard)}>
                   <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate} disabled={!(canEdit && isPersisted)}>