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>
   );

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

@@ -4,15 +4,18 @@ import styled from '@emotion/styled';
 export const EditableFieldNormalModeOuterContainer = styled.div<
   Pick<
     OwnProps,
-    'disableClick' | 'isDisplayModeContentEmpty' | 'disableHoverEffect'
+    | 'disableClick'
+    | 'isDisplayModeContentEmpty'
+    | 'disableHoverEffect'
+    | 'isDisplayModeFixHeight'
   >
 >`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
-  height: 100%;
-
-  height: 16px;
+  height: ${({ isDisplayModeFixHeight }) =>
+    isDisplayModeFixHeight ? '16px' : 'auto'};
+  min-height: 16px;
 
   overflow: hidden;
 
@@ -67,6 +70,7 @@ type OwnProps = {
   onClick?: () => void;
   isDisplayModeContentEmpty?: boolean;
   disableHoverEffect?: boolean;
+  isDisplayModeFixHeight?: boolean;
 };
 
 export function EditableFieldDisplayMode({
@@ -75,6 +79,7 @@ export function EditableFieldDisplayMode({
   onClick,
   isDisplayModeContentEmpty,
   disableHoverEffect,
+  isDisplayModeFixHeight,
 }: React.PropsWithChildren<OwnProps>) {
   return (
     <EditableFieldNormalModeOuterContainer
@@ -82,6 +87,7 @@ export function EditableFieldDisplayMode({
       disableClick={disableClick}
       isDisplayModeContentEmpty={isDisplayModeContentEmpty}
       disableHoverEffect={disableHoverEffect}
+      isDisplayModeFixHeight={isDisplayModeFixHeight}
     >
       <EditableFieldNormalModeInnerContainer>
         {children}

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

@@ -7,10 +7,12 @@ export const EditableFieldEditModeContainer = styled.div<OwnProps>`
   align-items: center;
 
   display: flex;
+  height: 24px;
 
   margin-left: -${({ theme }) => theme.spacing(1)};
+  position: relative;
 
-  width: inherit;
+  width: 100%;
   z-index: 10;
 `;
 

front/src/modules/ui/editable-field/property-box/components/PropertyBox.tsx

@@ -7,7 +7,7 @@ const StyledPropertyBoxContainer = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(3)};
 `;
 

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -10,11 +10,12 @@ import { EditableFieldEditModeDate } from './EditableFieldEditModeDate';
 
 type OwnProps = {
   icon?: React.ReactNode;
+  label?: string;
   value: string | null | undefined;
   onSubmit?: (newValue: string) => void;
 };
 
-export function DateEditableField({ icon, value, onSubmit }: OwnProps) {
+export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
   const [internalValue, setInternalValue] = useState(value);
 
   useEffect(() => {
@@ -47,6 +48,7 @@ export function DateEditableField({ icon, value, onSubmit }: OwnProps) {
         onSubmit={handleSubmit}
         onCancel={handleCancel}
         iconLabel={icon}
+        label={label}
         editModeContent={
           <EditableFieldEditModeDate
             value={internalValue || new Date().toISOString()}