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

client/src/components/CardModal/Actions/Actions.jsx

@@ -14,7 +14,8 @@ const Actions = React.memo(
     items,
     isFetching,
     isAllFetched,
-    isEditable,
+    canEdit,
+    canEditAllComments,
     onFetch,
     onCommentCreate,
     onCommentUpdate,
@@ -38,13 +39,15 @@ const Actions = React.memo(
 
     return (
       <>
-        <div className={styles.contentModule}>
-          <div className={styles.moduleWrapper}>
-            <Icon name="comment outline" className={styles.moduleIcon} />
-            <div className={styles.moduleHeader}>{t('common.addComment')}</div>
-            <CommentAdd onCreate={onCommentCreate} />
+        {canEdit && (
+          <div className={styles.contentModule}>
+            <div className={styles.moduleWrapper}>
+              <Icon name="comment outline" className={styles.moduleIcon} />
+              <div className={styles.moduleHeader}>{t('common.addComment')}</div>
+              <CommentAdd onCreate={onCommentCreate} />
+            </div>
           </div>
-        </div>
+        )}
         <div className={styles.contentModule}>
           <div className={styles.moduleWrapper}>
             <Icon name="list ul" className={styles.moduleIcon} />
@@ -59,7 +62,7 @@ const Actions = React.memo(
                       createdAt={item.createdAt}
                       isPersisted={item.isPersisted}
                       user={item.user}
-                      isEditable={isEditable}
+                      canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
                       onUpdate={(data) => handleCommentUpdate(item.id, data)}
                       onDelete={() => handleCommentDelete(item.id)}
                     />
@@ -91,7 +94,8 @@ Actions.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isFetching: PropTypes.bool.isRequired,
   isAllFetched: PropTypes.bool.isRequired,
-  isEditable: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  canEditAllComments: PropTypes.bool.isRequired,
   onFetch: PropTypes.func.isRequired,
   onCommentCreate: PropTypes.func.isRequired,
   onCommentUpdate: PropTypes.func.isRequired,

client/src/components/CardModal/Actions/ItemComment.jsx

@@ -12,7 +12,7 @@ import DeletePopup from '../../DeletePopup';
 import styles from './ItemComment.module.scss';
 
 const ItemComment = React.memo(
-  ({ data, createdAt, isPersisted, user, isEditable, onUpdate, onDelete }) => {
+  ({ data, createdAt, isPersisted, user, canEdit, onUpdate, onDelete }) => {
     const [t] = useTranslation();
 
     const commentEdit = useRef(null);
@@ -38,17 +38,17 @@ const ItemComment = React.memo(
           </div>
           <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
             <>
-              <Markdown source={data.text} linkTarget="_blank" className={styles.text} />
-              <Comment.Actions>
-                {user.isCurrent && (
+              <Markdown linkTarget="_blank" className={styles.text}>
+                {data.text}
+              </Markdown>
+              {canEdit && (
+                <Comment.Actions>
                   <Comment.Action
                     as="button"
                     content={t('action.edit')}
                     disabled={!isPersisted}
                     onClick={handleEditClick}
                   />
-                )}
-                {(user.isCurrent || isEditable) && (
                   <DeletePopup
                     title={t('common.deleteComment', {
                       context: 'title',
@@ -63,8 +63,8 @@ const ItemComment = React.memo(
                       disabled={!isPersisted}
                     />
                   </DeletePopup>
-                )}
-              </Comment.Actions>
+                </Comment.Actions>
+              )}
             </>
           </CommentEdit>
         </div>
@@ -78,7 +78,7 @@ ItemComment.propTypes = {
   createdAt: PropTypes.instanceOf(Date).isRequired,
   isPersisted: PropTypes.bool.isRequired,
   user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  isEditable: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
 };