feat: Permissions for board members

Closes #262

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -13,7 +13,7 @@ import styles from './Attachments.module.scss';
 const INITIALLY_VISIBLE = 4;
 
 const Attachments = React.memo(
-  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+  ({ items, canEdit, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
     const [t] = useTranslation();
     const [isAllVisible, toggleAllVisible] = useToggle();
 
@@ -99,6 +99,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
+                canEdit={canEdit}
                 onClick={item.image || isPdf ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
@@ -151,6 +152,7 @@ const Attachments = React.memo(
 
 Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,

client/src/components/CardModal/Attachments/Item.jsx

@@ -17,6 +17,7 @@ const Item = React.forwardRef(
       createdAt,
       isCover,
       isPersisted,
+      canEdit,
       onCoverSelect,
       onCoverDeselect,
       onClick,
@@ -96,7 +97,7 @@ const Item = React.forwardRef(
               value: createdAt,
             })}
           </span>
-          {coverUrl && (
+          {coverUrl && canEdit && (
             <span className={styles.options}>
               <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
                 <Icon
@@ -118,17 +119,19 @@ const Item = React.forwardRef(
             </span>
           )}
         </div>
-        <EditPopup
-          defaultData={{
-            name,
-          }}
-          onUpdate={onUpdate}
-          onDelete={onDelete}
-        >
-          <Button className={classNames(styles.button, styles.target)}>
-            <Icon fitted name="pencil" size="small" />
-          </Button>
-        </EditPopup>
+        {canEdit && (
+          <EditPopup
+            defaultData={{
+              name,
+            }}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          >
+            <Button className={classNames(styles.button, styles.target)}>
+              <Icon fitted name="pencil" size="small" />
+            </Button>
+          </EditPopup>
+        )}
       </div>
     );
   },
@@ -141,6 +144,7 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.jsx

@@ -48,6 +48,7 @@ const CardModal = React.memo(
     allBoardMemberships,
     allLabels,
     canEdit,
+    canEditCommentActivities,
     canEditAllCommentActivities,
     onUpdate,
     onMove,
@@ -302,7 +303,10 @@ const CardModal = React.memo(
                   {canEdit ? (
                     <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
-                        <button type="button" className={styles.descriptionText}>
+                        <button
+                          type="button"
+                          className={classNames(styles.descriptionText, styles.cursorPointer)}
+                        >
                           <Markdown linkStopPropagation linkTarget="_blank">
                             {description}
                           </Markdown>
@@ -348,6 +352,7 @@ const CardModal = React.memo(
                   <div className={styles.moduleHeader}>{t('common.attachments')}</div>
                   <Attachments
                     items={attachments}
+                    canEdit={canEdit}
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
@@ -363,7 +368,7 @@ const CardModal = React.memo(
               isAllFetched={isAllActivitiesFetched}
               isDetailsVisible={isActivitiesDetailsVisible}
               isDetailsFetching={isActivitiesDetailsFetching}
-              canEdit={canEdit}
+              canEdit={canEditCommentActivities}
               canEditAllComments={canEditAllCommentActivities}
               onFetch={onActivitiesFetch}
               onDetailsToggle={onActivitiesDetailsToggle}
@@ -508,6 +513,7 @@ CardModal.propTypes = {
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
+  canEditCommentActivities: PropTypes.bool.isRequired,
   canEditAllCommentActivities: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.module.scss

@@ -64,6 +64,10 @@
     padding: 8px 8px 0 16px;
   }
 
+  .cursorPointer {
+    cursor: pointer;
+  }
+
   .dueDate {
     background: rgba(9, 30, 66, 0.04);
     border: none;
@@ -114,7 +118,6 @@
     background: transparent;
     border: none;
     color: #17394d;
-    cursor: pointer;
     font-size: 15px;
     margin-bottom: 8px;
     outline: none;