Add dueDate and assignee on notes (#988)

* Add dueDate and assignee on notes

* Fix tests

* Fix tests

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -15,6 +15,7 @@ const StyledIconContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
+  width: 16px;
 
   svg {
     align-items: center;
@@ -32,6 +33,12 @@ const StyledLabelAndIconContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledValueContainer = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: calc(100% - ${({ theme }) => theme.spacing(4)});
+`;
+
 const StyledLabel = styled.div<Pick<OwnProps, 'labelFixedWidth'>>`
   align-items: center;
 
@@ -39,18 +46,22 @@ const StyledLabel = styled.div<Pick<OwnProps, 'labelFixedWidth'>>`
     labelFixedWidth ? `${labelFixedWidth}px` : 'fit-content'};
 `;
 
+const StyledEditButtonContainer = styled(motion.div)`
+  position: absolute;
+  right: 0;
+`;
+
 export const EditableFieldBaseContainer = styled.div`
   align-items: center;
   box-sizing: border-box;
 
   display: flex;
-
   gap: ${({ theme }) => theme.spacing(1)};
-  height: 24px;
-  justify-content: flex-start;
-  position: relative;
-  user-select: none;
 
+  justify-content: space-between;
+  position: relative;
+
+  user-select: none;
   width: 100%;
 `;
 
@@ -66,6 +77,7 @@ type OwnProps = {
   parentHotkeyScope?: HotkeyScope;
   customEditHotkeyScope?: HotkeyScope;
   isDisplayModeContentEmpty?: boolean;
+  isDisplayModeFixHeight?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -82,6 +94,7 @@ export function EditableField({
   disableHoverEffect,
   isDisplayModeContentEmpty,
   displayModeContentOnly,
+  isDisplayModeFixHeight,
   onSubmit,
   onCancel,
 }: OwnProps) {
@@ -119,29 +132,32 @@ export function EditableField({
           <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
         )}
       </StyledLabelAndIconContainer>
-      {isFieldInEditMode && !displayModeContentOnly ? (
-        <EditableFieldEditMode onSubmit={onSubmit} onCancel={onCancel}>
-          {editModeContent}
-        </EditableFieldEditMode>
-      ) : (
-        <EditableFieldDisplayMode
-          disableHoverEffect={disableHoverEffect}
-          disableClick={useEditButton}
-          onClick={handleDisplayModeClick}
-          isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-        >
-          {displayModeContent}
-        </EditableFieldDisplayMode>
-      )}
+      <StyledValueContainer>
+        {isFieldInEditMode && !displayModeContentOnly ? (
+          <EditableFieldEditMode onSubmit={onSubmit} onCancel={onCancel}>
+            {editModeContent}
+          </EditableFieldEditMode>
+        ) : (
+          <EditableFieldDisplayMode
+            disableHoverEffect={disableHoverEffect}
+            disableClick={useEditButton}
+            onClick={handleDisplayModeClick}
+            isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+            isDisplayModeFixHeight={isDisplayModeFixHeight}
+          >
+            {displayModeContent}
+          </EditableFieldDisplayMode>
+        )}
+      </StyledValueContainer>
       {showEditButton && (
-        <motion.div
+        <StyledEditButtonContainer
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.1 }}
           whileHover={{ scale: 1.04 }}
         >
           <EditableFieldEditButton />
-        </motion.div>
+        </StyledEditButtonContainer>
       )}
     </EditableFieldBaseContainer>
   );