From 22dbe21bcd0a0ba2b8db8759a0d217fe44d9973f Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Tue, 22 Aug 2023 16:46:15 +0200
Subject: [PATCH] Add Empty as value of empty fields inputs #1042 (#1243)

* Add Empty as value of empty fields inputs #1042

* rebase
---
 .../components/EditableFieldDisplayMode.tsx   | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
index ba6295c58..149ab35ba 100644
--- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
@@ -16,17 +16,11 @@ const StyledEditableFieldNormalModeOuterContainer = styled.div<
   height: ${({ isDisplayModeFixHeight }) =>
     isDisplayModeFixHeight ? '16px' : 'auto'};
   min-height: 16px;
-
   overflow: hidden;
-
   padding: ${({ theme }) => theme.spacing(1)};
 
   ${(props) => {
-    if (props.isDisplayModeContentEmpty) {
-      return css`
-        min-width: 50px;
-      `;
-    } else {
+    if (!props.isDisplayModeContentEmpty) {
       return css`
         width: fit-content;
       `;
@@ -65,6 +59,10 @@ const StyledEditableFieldNormalModeInnerContainer = styled.div`
   white-space: nowrap;
 `;
 
+const StyledEmptyField = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
 type OwnProps = {
   disableClick?: boolean;
   onClick?: () => void;
@@ -73,6 +71,16 @@ type OwnProps = {
   isDisplayModeFixHeight?: boolean;
 };
 
+function displayEmptyIfNothingToShow(
+  children: React.ReactNode,
+  isDisplayModeContentEmpty?: boolean,
+): React.ReactNode {
+  if (isDisplayModeContentEmpty || !children) {
+    return <StyledEmptyField>{'Empty'}</StyledEmptyField>;
+  }
+  return children;
+}
+
 export function EditableFieldDisplayMode({
   children,
   disableClick,
@@ -90,7 +98,7 @@ export function EditableFieldDisplayMode({
       isDisplayModeFixHeight={isDisplayModeFixHeight}
     >
       <StyledEditableFieldNormalModeInnerContainer>
-        {children}
+        {displayEmptyIfNothingToShow(children, isDisplayModeContentEmpty)}
       </StyledEditableFieldNormalModeInnerContainer>
     </StyledEditableFieldNormalModeOuterContainer>
   );