New behavior for editable fields (#1300)

* New behavior for editable fields

* fix

* fix

* fix coverage

* Add tests on NotFound

* fix

* fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -4,10 +4,10 @@ import styled from '@emotion/styled';
 const StyledEditableFieldNormalModeOuterContainer = styled.div<
   Pick<
     OwnProps,
-    | 'disableClick'
     | 'isDisplayModeContentEmpty'
     | 'disableHoverEffect'
     | 'isDisplayModeFixHeight'
+    | 'isHovered'
   >
 >`
   align-items: center;
@@ -20,26 +20,13 @@ const StyledEditableFieldNormalModeOuterContainer = styled.div<
   padding: ${({ theme }) => theme.spacing(1)};
 
   ${(props) => {
-    if (!props.isDisplayModeContentEmpty) {
+    if (props.isHovered) {
       return css`
-        width: fit-content;
-      `;
-    }
-  }}
+        background-color: ${!props.disableHoverEffect
+          ? props.theme.background.transparent.lighter
+          : 'transparent'};
 
-  ${(props) => {
-    if (props.disableClick) {
-      return css`
-        cursor: default;
-      `;
-    } else {
-      return css`
         cursor: pointer;
-
-        &:hover {
-          background-color: ${!props.disableHoverEffect &&
-          props.theme.background.transparent.light};
-        }
       `;
     }
   }}
@@ -64,28 +51,25 @@ const StyledEmptyField = styled.div`
 `;
 
 type OwnProps = {
-  disableClick?: boolean;
-  onClick?: () => void;
   isDisplayModeContentEmpty?: boolean;
   disableHoverEffect?: boolean;
   isDisplayModeFixHeight?: boolean;
+  isHovered?: boolean;
 };
 
 export function EditableFieldDisplayMode({
   children,
-  disableClick,
-  onClick,
   isDisplayModeContentEmpty,
   disableHoverEffect,
   isDisplayModeFixHeight,
+  isHovered,
 }: React.PropsWithChildren<OwnProps>) {
   return (
     <StyledEditableFieldNormalModeOuterContainer
-      onClick={disableClick ? undefined : onClick}
-      disableClick={disableClick}
       isDisplayModeContentEmpty={isDisplayModeContentEmpty}
       disableHoverEffect={disableHoverEffect}
       isDisplayModeFixHeight={isDisplayModeFixHeight}
+      isHovered={isHovered}
     >
       <StyledEditableFieldNormalModeInnerContainer>
         {isDisplayModeContentEmpty || !children ? (