fix: Cursor for DueDates, new disabled popup syntax

Author: RARgames

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

@@ -37,13 +37,9 @@ const DueDateCell = React.memo(({ dueDate, cellClassName, canEdit, onUpdate }) =
 
   return (
     <div className={cellClassName}>
-      {canEdit ? (
-        <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-          <DueDate value={dueDate} />
-        </DueDateEditPopup>
-      ) : (
-        <DueDate value={dueDate} />
-      )}
+      <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate} disabled={!canEdit}>
+        <DueDate value={dueDate} isClickable={canEdit} />
+      </DueDateEditPopup>
     </div>
   );
 });

client/src/components/Card/Card.jsx

@@ -237,13 +237,9 @@ const Card = React.memo(
               )}
               {dueDate && (
                 <span className={classNames(s.attachment, s.attachmentLeft)}>
-                  {canEdit ? (
-                    <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-                      <DueDate value={dueDate} variant="card" />
-                    </DueDateEditPopup>
-                  ) : (
-                    <DueDate value={dueDate} variant="card" />
-                  )}
+                  <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate} disabled={!canEdit}>
+                    <DueDate value={dueDate} variant="card" isClickable={canEdit} />
+                  </DueDateEditPopup>
                 </span>
               )}
               {timer && (

client/src/components/CardModal/CardModal.jsx

@@ -501,13 +501,9 @@ const CardModal = React.memo(
           )}
         </div>
         <span className={s.headerItem}>
-          {canEdit ? (
-            <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-              <DueDate value={dueDate} />
-            </DueDateEditPopup>
-          ) : (
-            <DueDate value={dueDate} />
-          )}
+          <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate} disabled={!canEdit}>
+            <DueDate value={dueDate} isClickable={canEdit} />
+          </DueDateEditPopup>
         </span>
       </div>
     );

client/src/components/DueDate/DueDate.jsx

@@ -33,7 +33,7 @@ const getDueStyle = (value) => {
 };
 
 // TODO remove old onClick and Button variant
-const DueDate = React.memo(({ value, variant, isDisabled, titlePrefix, iconSize, className, onClick }) => {
+const DueDate = React.memo(({ value, variant, isDisabled, titlePrefix, iconSize, isClickable, className, onClick }) => {
   const [t] = useTranslation();
   const [dueStyle, setDueStyle] = useState('Normal');
 
@@ -51,7 +51,7 @@ const DueDate = React.memo(({ value, variant, isDisabled, titlePrefix, iconSize,
 
   const contentNode = value && (
     <span
-      className={classNames(s.wrapper, s[`wrapper${upperFirst(variant)}`], s[`due${dueStyle}`], className)}
+      className={classNames(s.wrapper, s[`wrapper${upperFirst(variant)}`], s[`due${dueStyle}`], (onClick || isClickable) && s.dueDateHoverable, className)}
       title={`${titlePrefixString}${t(variant === VARIANTS.LIST_VIEW ? `format:dateTime` : `format:date`, { value, postProcess: 'formatDate' })}`}
     >
       {variant !== VARIANTS.TASKS_CARD && variant !== VARIANTS.LIST_VIEW && t(`format:date`, { value, postProcess: 'formatDate' })}
@@ -75,6 +75,7 @@ DueDate.propTypes = {
   isDisabled: PropTypes.bool,
   titlePrefix: PropTypes.string,
   iconSize: PropTypes.oneOf(Object.values(IconSize)),
+  isClickable: PropTypes.bool,
   className: PropTypes.string,
   onClick: PropTypes.func,
 };
@@ -85,6 +86,7 @@ DueDate.defaultProps = {
   isDisabled: false,
   titlePrefix: undefined,
   iconSize: IconSize.Size13,
+  isClickable: false,
   className: undefined,
   onClick: undefined,
 };

client/src/components/DueDate/DueDate.module.scss

@@ -39,6 +39,14 @@
     fill: var(--textColor1);
   }
 
+  .dueDateHoverable {
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(85%);
+    }
+  }
+
   /* Variants */
 
   .wrapperCard {
@@ -51,11 +59,6 @@
     font-size: 14px;
     font-weight: bold;
     line-height: 28px;
-    cursor: pointer;
-
-    &:hover {
-      filter: brightness(85%);
-    }
   }
 
   .wrapperTasksCard {

client/src/components/Tasks/Item.jsx

@@ -140,14 +140,10 @@ const Item = React.memo(({ variant, id, index, name, dueDate, boardMemberships,
                   membersNode
                 ))}
               {dueDate && (
-                <div className={classNames(s.dueDate, gs.cursorPointer, isCompleted && s.itemCompleted, variant !== VARIANTS.CARDMODAL && s.dueDateCard)}>
-                  {isPersisted && canEdit ? (
-                    <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-                      <DueDate variant={dueDateVariant} value={dueDate} />
-                    </DueDateEditPopup>
-                  ) : (
-                    <DueDate variant={dueDateVariant} value={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)}>
+                    <DueDate variant={dueDateVariant} value={dueDate} isClickable={canEdit && isPersisted} />
+                  </DueDateEditPopup>
                 </div>
               )}
               {isPersisted && canEdit && (