feat: add Boolean field preview in settings (#2399)

Closes #2328

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>

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

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,

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 },
 };

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

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 ? (