From a4e5e486f58beab63e38eea7d15203f8413649a8 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Tue, 4 Jun 2024 13:02:38 +0200
Subject: [PATCH] Fix boolean field in table view (#5728)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Boolean field was not working in display (unfocused) mode.

Before fix
<img width="269" alt="Capture d’écran 2024-06-04 à 11 50 55"
src="https://github.com/twentyhq/twenty/assets/51697796/9140f71c-41e4-44b4-9514-933edab33dd6">

https://github.com/twentyhq/twenty/assets/51697796/831c34a7-b91c-4df9-81d8-ced01cc7b9b6

After fix
<img width="284" alt="Capture d’écran 2024-06-04 à 11 51 01"
src="https://github.com/twentyhq/twenty/assets/51697796/7e4a089d-0c55-4624-a5d3-44c00681c6ca">

https://github.com/twentyhq/twenty/assets/51697796/b5103f39-64c1-4ace-ab32-353aba364471
---
 .../record-field/components/FieldDisplay.tsx  |  4 +++
 .../components/BooleanFieldDisplay.tsx        |  8 +++++
 .../display/components/BooleanDisplay.tsx     | 36 +++++++++++++++++++
 .../field/input/components/BooleanInput.tsx   | 19 ++--------
 4 files changed, 51 insertions(+), 16 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx
 create mode 100644 packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
index 738c35ac2..454cdb949 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 
+import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/display/components/BooleanFieldDisplay';
 import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
+import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
 import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
 import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
 
@@ -81,5 +83,7 @@ export const FieldDisplay = () => {
     <AddressFieldDisplay />
   ) : isFieldRawJson(fieldDefinition) ? (
     <JsonFieldDisplay />
+  ) : isFieldBoolean(fieldDefinition) ? (
+    <BooleanFieldDisplay />
   ) : null;
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx
new file mode 100644
index 000000000..5c8dcac5e
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx
@@ -0,0 +1,8 @@
+import { useBooleanField } from '@/object-record/record-field/meta-types/hooks/useBooleanField';
+import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
+
+export const BooleanFieldDisplay = () => {
+  const { fieldValue } = useBooleanField();
+
+  return <BooleanDisplay value={fieldValue} />;
+};
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
new file mode 100644
index 000000000..47911a936
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
@@ -0,0 +1,36 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconCheck, IconX } from 'twenty-ui';
+
+import { isDefined } from '~/utils/isDefined';
+
+const StyledBooleanFieldValue = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+type BooleanDisplayProps = {
+  value: boolean | null;
+};
+
+export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      {isDefined(value) ? (
+        <>
+          {value ? (
+            <IconCheck size={theme.icon.size.sm} />
+          ) : (
+            <IconX size={theme.icon.size.sm} />
+          )}
+          <StyledBooleanFieldValue>
+            {value ? 'True' : 'False'}
+          </StyledBooleanFieldValue>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
index 348c89d78..30d33eecd 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCheck, IconX } from 'twenty-ui';
+
+import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
 
 const StyledEditableBooleanFieldContainer = styled.div`
   align-items: center;
@@ -12,10 +12,6 @@ const StyledEditableBooleanFieldContainer = styled.div`
   width: 100%;
 `;
 
-const StyledEditableBooleanFieldValue = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(1)};
-`;
-
 type BooleanInputProps = {
   value: boolean;
   onToggle?: (newValue: boolean) => void;
@@ -40,21 +36,12 @@ export const BooleanInput = ({
     onToggle?.(!internalValue);
   };
 
-  const theme = useTheme();
-
   return (
     <StyledEditableBooleanFieldContainer
       onClick={readonly ? undefined : handleClick}
       data-testid={testId}
     >
-      {internalValue ? (
-        <IconCheck size={theme.icon.size.sm} />
-      ) : (
-        <IconX size={theme.icon.size.sm} />
-      )}
-      <StyledEditableBooleanFieldValue>
-        {internalValue ? 'True' : 'False'}
-      </StyledEditableBooleanFieldValue>
+      <BooleanDisplay value={internalValue} />
     </StyledEditableBooleanFieldContainer>
   );
 };