Project managers, board members, auto-update after reconnection, refactoring

client/src/components/Card/ActionsPopup.jsx

@@ -7,7 +7,7 @@ import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
-import ProjectMembershipsStep from '../ProjectMembershipsStep';
+import BoardMembershipsStep from '../BoardMembershipsStep';
 import LabelsStep from '../LabelsStep';
 import DueDateEditStep from '../DueDateEditStep';
 import TimerEditStep from '../TimerEditStep';
@@ -29,7 +29,7 @@ const ActionsStep = React.memo(
   ({
     card,
     projectsToLists,
-    projectMemberships,
+    boardMemberships,
     currentUserIds,
     labels,
     currentLabelIds,
@@ -102,8 +102,8 @@ const ActionsStep = React.memo(
       switch (step.type) {
         case StepTypes.USERS:
           return (
-            <ProjectMembershipsStep
-              items={projectMemberships}
+            <BoardMembershipsStep
+              items={boardMemberships}
               currentUserIds={currentUserIds}
               onUserSelect={onUserAdd}
               onUserDeselect={onUserRemove}
@@ -224,7 +224,7 @@ ActionsStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   card: PropTypes.object.isRequired,
   projectsToLists: PropTypes.array.isRequired,
-  projectMemberships: PropTypes.array.isRequired,
+  boardMemberships: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
   currentLabelIds: PropTypes.array.isRequired,

client/src/components/Card/Card.jsx

@@ -33,8 +33,9 @@ const Card = React.memo(
     labels,
     tasks,
     allProjectsToLists,
-    allProjectMemberships,
+    allBoardMemberships,
     allLabels,
+    canEdit,
     onUpdate,
     onMove,
     onTransfer,
@@ -129,7 +130,7 @@ const Card = React.memo(
     );
 
     return (
-      <Draggable draggableId={`card:${id}`} index={index} isDragDisabled={!isPersisted}>
+      <Draggable draggableId={`card:${id}`} index={index} isDragDisabled={!isPersisted || !canEdit}>
         {({ innerRef, draggableProps, dragHandleProps }) => (
           // eslint-disable-next-line react/jsx-props-no-spreading
           <div {...draggableProps} {...dragHandleProps} ref={innerRef} className={styles.wrapper}>
@@ -144,40 +145,42 @@ const Card = React.memo(
                     >
                       {contentNode}
                     </Link>
-                    <ActionsPopup
-                      card={{
-                        id,
-                        name,
-                        dueDate,
-                        timer,
-                        boardId,
-                        listId,
-                        projectId,
-                        isPersisted,
-                      }}
-                      projectsToLists={allProjectsToLists}
-                      projectMemberships={allProjectMemberships}
-                      currentUserIds={users.map((user) => user.id)}
-                      labels={allLabels}
-                      currentLabelIds={labels.map((label) => label.id)}
-                      onNameEdit={handleNameEdit}
-                      onUpdate={onUpdate}
-                      onMove={onMove}
-                      onTransfer={onTransfer}
-                      onDelete={onDelete}
-                      onUserAdd={onUserAdd}
-                      onUserRemove={onUserRemove}
-                      onBoardFetch={onBoardFetch}
-                      onLabelAdd={onLabelAdd}
-                      onLabelRemove={onLabelRemove}
-                      onLabelCreate={onLabelCreate}
-                      onLabelUpdate={onLabelUpdate}
-                      onLabelDelete={onLabelDelete}
-                    >
-                      <Button className={classNames(styles.actionsButton, styles.target)}>
-                        <Icon fitted name="pencil" size="small" />
-                      </Button>
-                    </ActionsPopup>
+                    {canEdit && (
+                      <ActionsPopup
+                        card={{
+                          id,
+                          name,
+                          dueDate,
+                          timer,
+                          boardId,
+                          listId,
+                          projectId,
+                          isPersisted,
+                        }}
+                        projectsToLists={allProjectsToLists}
+                        boardMemberships={allBoardMemberships}
+                        currentUserIds={users.map((user) => user.id)}
+                        labels={allLabels}
+                        currentLabelIds={labels.map((label) => label.id)}
+                        onNameEdit={handleNameEdit}
+                        onUpdate={onUpdate}
+                        onMove={onMove}
+                        onTransfer={onTransfer}
+                        onDelete={onDelete}
+                        onUserAdd={onUserAdd}
+                        onUserRemove={onUserRemove}
+                        onBoardFetch={onBoardFetch}
+                        onLabelAdd={onLabelAdd}
+                        onLabelRemove={onLabelRemove}
+                        onLabelCreate={onLabelCreate}
+                        onLabelUpdate={onLabelUpdate}
+                        onLabelDelete={onLabelDelete}
+                      >
+                        <Button className={classNames(styles.actionsButton, styles.target)}>
+                          <Icon fitted name="pencil" size="small" />
+                        </Button>
+                      </ActionsPopup>
+                    )}
                   </>
                 ) : (
                   <span className={styles.content}>{contentNode}</span>
@@ -208,9 +211,10 @@ Card.propTypes = {
   labels: PropTypes.array.isRequired,
   tasks: PropTypes.array.isRequired,
   allProjectsToLists: PropTypes.array.isRequired,
-  allProjectMemberships: PropTypes.array.isRequired,
+  allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,

client/src/components/Card/Card.module.scss

@@ -54,7 +54,6 @@
     border-radius: 3px;
     box-shadow: 0 1px 0 #ccc;
     position: relative;
-    cursor: pointer;
 
     &:hover {
       background: #f5f6f7;
@@ -67,7 +66,6 @@
   }
 
   .content {
-    cursor: grab;
     display: block;
 
     &:after {

client/src/components/Card/Tasks.module.scss

@@ -2,7 +2,6 @@
   .button {
     background: transparent;
     border: none;
-    cursor: pointer;
     line-height: 0;
     margin: 0 -8px;
     outline: none;
@@ -12,7 +11,6 @@
 
   .count {
     color: #888;
-    cursor: pointer;
     display: inline-block;
     font-size: 12px;
     line-height: 12px;
@@ -77,7 +75,6 @@
 
   .tasks {
     color: #333;
-    cursor: grab;
     list-style: none;
     margin: -2px 0 0;
     padding-left: 0;