From aa09b5758c7e5fd2f0c7cc203de9904c9bd34148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Thu, 9 Nov 2023 12:20:30 +0100
Subject: [PATCH] feat: add Boolean field preview in settings (#2399)

Closes #2328
---
 .../data-model/components/SettingsObjectFieldPreview.tsx  | 7 ++++++-
 .../components/SettingsObjectFieldTypeSelectSection.tsx   | 2 +-
 .../__stories__/SettingsObjectFieldPreview.stories.tsx    | 8 ++++++++
 .../modules/settings/data-model/constants/dataTypes.ts    | 2 +-
 .../meta-types/input/components/BooleanFieldInput.tsx     | 3 +++
 .../meta-types/input/components/internal/BooleanInput.tsx | 6 ++++--
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
index 536598b1e..dcd607395 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
@@ -8,6 +8,7 @@ import { Tag } from '@/ui/display/tag/components/Tag';
 import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { FieldDisplay } from '@/ui/object/field/components/FieldDisplay';
 import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
+import { BooleanFieldInput } from '@/ui/object/field/meta-types/input/components/BooleanFieldInput';
 import { entityFieldsFamilySelector } from '@/ui/object/field/states/selectors/entityFieldsFamilySelector';
 import { assertNotNull } from '~/utils/assert';
 
@@ -145,7 +146,11 @@ export const SettingsObjectFieldPreview = ({
             hotkeyScope: 'field-preview',
           }}
         >
-          <FieldDisplay />
+          {fieldType === 'BOOLEAN' ? (
+            <BooleanFieldInput readonly />
+          ) : (
+            <FieldDisplay />
+          )}
         </FieldContext.Provider>
       </StyledFieldPreview>
     </StyledContainer>
diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
index 819e4de40..aae265770 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@@ -64,7 +64,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
         }),
       )}
     />
-    {['NUMBER', 'TEXT'].includes(fieldType) && (
+    {['BOOLEAN', 'NUMBER', 'TEXT'].includes(fieldType) && (
       <StyledSettingsObjectFieldTypeCard
         preview={
           <SettingsObjectFieldPreview
diff --git a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
index 7cdc789c3..a1760a002 100644
--- a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
+++ b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
@@ -32,6 +32,14 @@ export const Number: Story = {
   },
 };
 
+export const Boolean: Story = {
+  args: {
+    fieldIconKey: 'IconHeadphones',
+    fieldLabel: 'Priority Support',
+    fieldType: 'BOOLEAN',
+  },
+};
+
 export const CustomObject: Story = {
   args: {
     isObjectCustom: true,
diff --git a/front/src/modules/settings/data-model/constants/dataTypes.ts b/front/src/modules/settings/data-model/constants/dataTypes.ts
index f52eebd57..08aa52e29 100644
--- a/front/src/modules/settings/data-model/constants/dataTypes.ts
+++ b/front/src/modules/settings/data-model/constants/dataTypes.ts
@@ -21,6 +21,6 @@ export const dataTypes: Record<
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.',
   },
   URL: { label: 'Link', Icon: IconLink },
-  BOOLEAN: { label: 'True/False', Icon: IconCheck },
+  BOOLEAN: { label: 'True/False', Icon: IconCheck, defaultValue: true },
   RELATION: { label: 'Relation', Icon: IconPlug },
 };
diff --git a/front/src/modules/ui/object/field/meta-types/input/components/BooleanFieldInput.tsx b/front/src/modules/ui/object/field/meta-types/input/components/BooleanFieldInput.tsx
index 251d59277..28a4e8141 100644
--- a/front/src/modules/ui/object/field/meta-types/input/components/BooleanFieldInput.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/BooleanFieldInput.tsx
@@ -7,11 +7,13 @@ import { FieldInputEvent } from './DateFieldInput';
 
 export type BooleanFieldInputProps = {
   onSubmit?: FieldInputEvent;
+  readonly?: boolean;
   testId?: string;
 };
 
 export const BooleanFieldInput = ({
   onSubmit,
+  readonly,
   testId,
 }: BooleanFieldInputProps) => {
   const { fieldValue } = useBooleanField();
@@ -26,6 +28,7 @@ export const BooleanFieldInput = ({
     <BooleanInput
       value={fieldValue ?? ''}
       onToggle={handleToggle}
+      readonly={readonly}
       testId={testId}
     />
   );
diff --git a/front/src/modules/ui/object/field/meta-types/input/components/internal/BooleanInput.tsx b/front/src/modules/ui/object/field/meta-types/input/components/internal/BooleanInput.tsx
index 9cec67c9f..1c0dcdc65 100644
--- a/front/src/modules/ui/object/field/meta-types/input/components/internal/BooleanInput.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/internal/BooleanInput.tsx
@@ -6,7 +6,7 @@ import { IconCheck, IconX } from '@/ui/display/icon';
 
 const StyledEditableBooleanFieldContainer = styled.div`
   align-items: center;
-  cursor: pointer;
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   display: flex;
 
   height: 100%;
@@ -20,12 +20,14 @@ const StyledEditableBooleanFieldValue = styled.div`
 type BooleanInputProps = {
   value: boolean;
   onToggle?: (newValue: boolean) => void;
+  readonly?: boolean;
   testId?: string;
 };
 
 export const BooleanInput = ({
   value,
   onToggle,
+  readonly,
   testId,
 }: BooleanInputProps) => {
   const [internalValue, setInternalValue] = useState(value);
@@ -43,7 +45,7 @@ export const BooleanInput = ({
 
   return (
     <StyledEditableBooleanFieldContainer
-      onClick={handleClick}
+      onClick={readonly ? undefined : handleClick}
       data-testid={testId}
     >
       {internalValue ? (