Create new field type JSON

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -1,5 +1,8 @@
 import { useContext } from 'react';
 
+import { JsonFieldDisplay } from '@/object-record/record-field/meta-types/display/components/JsonFieldDisplay';
+import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
+
 import { FieldContext } from '../contexts/FieldContext';
 import { AddressFieldDisplay } from '../meta-types/display/components/AddressFieldDisplay';
 import { ChipFieldDisplay } from '../meta-types/display/components/ChipFieldDisplay';
@@ -59,5 +62,7 @@ export const FieldDisplay = () => {
     <SelectFieldDisplay />
   ) : isFieldAddress(fieldDefinition) ? (
     <AddressFieldDisplay />
+  ) : isFieldRawJson(fieldDefinition) ? (
+    <JsonFieldDisplay />
   ) : null;
 };

packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx

@@ -2,9 +2,11 @@ import { useContext } from 'react';
 
 import { AddressFieldInput } from '@/object-record/record-field/meta-types/input/components/AddressFieldInput';
 import { FullNameFieldInput } from '@/object-record/record-field/meta-types/input/components/FullNameFieldInput';
+import { RawJsonFieldInput } from '@/object-record/record-field/meta-types/input/components/RawJsonFieldInput';
 import { SelectFieldInput } from '@/object-record/record-field/meta-types/input/components/SelectFieldInput';
 import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
 import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
+import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 
@@ -137,6 +139,14 @@ export const FieldInput = ({
           onTab={onTab}
           onShiftTab={onShiftTab}
         />
+      ) : isFieldRawJson(fieldDefinition) ? (
+        <RawJsonFieldInput
+          onEnter={onEnter}
+          onEscape={onEscape}
+          onClickOutside={onClickOutside}
+          onTab={onTab}
+          onShiftTab={onShiftTab}
+        />
       ) : (
         <></>
       )}

packages/twenty-front/src/modules/object-record/record-field/hooks/usePersistField.ts

@@ -5,6 +5,8 @@ import { isFieldAddress } from '@/object-record/record-field/types/guards/isFiel
 import { isFieldAddressValue } from '@/object-record/record-field/types/guards/isFieldAddressValue';
 import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
 import { isFieldFullNameValue } from '@/object-record/record-field/types/guards/isFieldFullNameValue';
+import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
+import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { isFieldSelectValue } from '@/object-record/record-field/types/guards/isFieldSelectValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
@@ -88,6 +90,10 @@ export const usePersistField = () => {
           isFieldAddress(fieldDefinition) &&
           isFieldAddressValue(valueToPersist);
 
+        const fieldIsRawJson =
+          isFieldRawJson(fieldDefinition) &&
+          isFieldRawJsonValue(valueToPersist);
+
         if (
           fieldIsRelation ||
           fieldIsText ||
@@ -101,7 +107,8 @@ export const usePersistField = () => {
           fieldIsCurrency ||
           fieldIsFullName ||
           fieldIsSelect ||
-          fieldIsAddress
+          fieldIsAddress ||
+          fieldIsRawJson
         ) {
           const fieldName = fieldDefinition.metadata.fieldName;
           set(

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx

@@ -0,0 +1,13 @@
+import { useJsonField } from '@/object-record/record-field/meta-types/hooks/useJsonField';
+import { JsonDisplay } from '@/ui/field/display/components/JsonDisplay';
+
+export const JsonFieldDisplay = () => {
+  const { fieldValue, maxWidth } = useJsonField();
+
+  return (
+    <JsonDisplay
+      text={fieldValue ? JSON.stringify(JSON.parse(fieldValue), null, 2) : ''}
+      maxWidth={maxWidth}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts

@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { FieldJsonValue } from '@/object-record/record-field/types/FieldMetadata';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+import { FieldContext } from '../../contexts/FieldContext';
+import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
+import { isFieldRawJson } from '../../types/guards/isFieldRawJson';
+import { isFieldTextValue } from '../../types/guards/isFieldTextValue';
+
+export const useJsonField = () => {
+  const { entityId, fieldDefinition, hotkeyScope, maxWidth } =
+    useContext(FieldContext);
+
+  assertFieldMetadata(
+    FieldMetadataType.RawJson,
+    isFieldRawJson,
+    fieldDefinition,
+  );
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const [fieldValue, setFieldValue] = useRecoilState<FieldJsonValue>(
+    recordStoreFamilySelector({
+      recordId: entityId,
+      fieldName: fieldName,
+    }),
+  );
+  const fieldTextValue = isFieldTextValue(fieldValue) ? fieldValue : '';
+
+  const { setDraftValue, getDraftValueSelector } =
+    useRecordFieldInput<FieldJsonValue>(`${entityId}-${fieldName}`);
+
+  const draftValue = useRecoilValue(getDraftValueSelector());
+
+  return {
+    draftValue,
+    setDraftValue,
+    maxWidth,
+    fieldDefinition,
+    fieldValue: fieldTextValue,
+    setFieldValue,
+    hotkeyScope,
+  };
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx

@@ -0,0 +1,83 @@
+import { isValidJSON } from '@/object-record/record-field/utils/isFieldValueJson';
+import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
+import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
+
+import { usePersistField } from '../../../hooks/usePersistField';
+import { useJsonField } from '../../hooks/useJsonField';
+
+import { FieldInputEvent } from './DateFieldInput';
+
+export type RawJsonFieldInputProps = {
+  onClickOutside?: FieldInputEvent;
+  onEnter?: FieldInputEvent;
+  onEscape?: FieldInputEvent;
+  onTab?: FieldInputEvent;
+  onShiftTab?: FieldInputEvent;
+};
+
+export const RawJsonFieldInput = ({
+  onEnter,
+  onEscape,
+  onClickOutside,
+  onTab,
+  onShiftTab,
+}: RawJsonFieldInputProps) => {
+  const { fieldDefinition, draftValue, hotkeyScope, setDraftValue } =
+    useJsonField();
+
+  const persistField = usePersistField();
+
+  const handlePersistField = (newText: string) => {
+    if (!newText || isValidJSON(newText)) persistField(newText || null);
+  };
+
+  const handleEnter = (newText: string) => {
+    onEnter?.(() => handlePersistField(newText));
+  };
+
+  const handleEscape = (newText: string) => {
+    onEscape?.(() => handlePersistField(newText));
+  };
+
+  const handleClickOutside = (
+    _event: MouseEvent | TouchEvent,
+    newText: string,
+  ) => {
+    onClickOutside?.(() => handlePersistField(newText));
+  };
+
+  const handleTab = (newText: string) => {
+    onTab?.(() => handlePersistField(newText));
+  };
+
+  const handleShiftTab = (newText: string) => {
+    onShiftTab?.(() => handlePersistField(newText));
+  };
+
+  const handleChange = (newText: string) => {
+    setDraftValue(newText);
+  };
+
+  const value =
+    draftValue && isValidJSON(draftValue)
+      ? JSON.stringify(JSON.parse(draftValue), null, 2)
+      : draftValue ?? '';
+
+  return (
+    <FieldTextAreaOverlay>
+      <TextAreaInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={value}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+        onChange={handleChange}
+        maxRows={25}
+      />
+    </FieldTextAreaOverlay>
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -78,6 +78,7 @@ export type FieldAddressMetadata = {
 export type FieldRawJsonMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  placeHolder: string;
 };
 
 export type FieldDefinitionRelationType =
@@ -146,3 +147,4 @@ export type FieldRatingValue = (typeof RATING_VALUES)[number];
 export type FieldSelectValue = string | null;
 
 export type FieldRelationValue = EntityForSelect | null;
+export type FieldJsonValue = string;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRawJsonValue.ts

@@ -0,0 +1,8 @@
+import { isNull, isString } from '@sniptt/guards';
+
+import { FieldJsonValue } from '../FieldMetadata';
+
+// TODO: add zod
+export const isFieldRawJsonValue = (
+  fieldValue: unknown,
+): fieldValue is FieldJsonValue => isString(fieldValue) || isNull(fieldValue);

packages/twenty-front/src/modules/object-record/record-field/utils/isFieldValueEmpty.ts

@@ -13,6 +13,7 @@ import { isFieldLink } from '@/object-record/record-field/types/guards/isFieldLi
 import { isFieldLinkValue } from '@/object-record/record-field/types/guards/isFieldLinkValue';
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
 import { isFieldRating } from '@/object-record/record-field/types/guards/isFieldRating';
+import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { isFieldSelectValue } from '@/object-record/record-field/types/guards/isFieldSelectValue';
@@ -39,7 +40,8 @@ export const isFieldValueEmpty = ({
     isFieldRating(fieldDefinition) ||
     isFieldEmail(fieldDefinition) ||
     isFieldBoolean(fieldDefinition) ||
-    isFieldRelation(fieldDefinition)
+    isFieldRelation(fieldDefinition) ||
+    isFieldRawJson(fieldDefinition)
     //|| isFieldPhone(fieldDefinition)
   ) {
     return isValueEmpty(fieldValue);

packages/twenty-front/src/modules/object-record/record-field/utils/isFieldValueJson.ts

@@ -0,0 +1,12 @@
+import { isString } from '@sniptt/guards';
+
+export const isValidJSON = (str: string) => {
+  try {
+    if (isString(JSON.parse(str))) {
+      throw new Error(`Strings are not supported as JSON: ${str}`);
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+};

packages/twenty-front/src/modules/object-record/utils/generateEmptyFieldValue.ts

@@ -75,6 +75,9 @@ export const generateEmptyFieldValue = (
     case FieldMetadataType.MultiSelect: {
       throw new Error('Not implemented yet');
     }
+    case FieldMetadataType.RawJson: {
+      return null;
+    }
     default: {
       throw new Error('Unhandled FieldMetadataType');
     }

packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts

@@ -2,6 +2,7 @@ import {
   IconCalendarEvent,
   IconCheck,
   IconCoins,
+  IconJson,
   IconKey,
   IconLink,
   IconMail,
@@ -117,4 +118,9 @@ export const SETTINGS_FIELD_TYPE_CONFIGS: Record<
       addressLng: -118.2437,
     },
   },
+  [FieldMetadataType.RawJson]: {
+    label: 'JSON',
+    Icon: IconJson,
+    defaultValue: `{ "key": "value" }`,
+  },
 };

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx

@@ -69,6 +69,7 @@ const previewableTypes = [
   FieldMetadataType.Relation,
   FieldMetadataType.Text,
   FieldMetadataType.Address,
+  FieldMetadataType.RawJson,
 ];
 
 export const SettingsDataModelFieldSettingsFormCard = ({

packages/twenty-front/src/modules/settings/data-model/types/SettingsSupportedFieldType.ts

@@ -2,5 +2,5 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export type SettingsSupportedFieldType = Exclude<
   FieldMetadataType,
-  FieldMetadataType.Position | FieldMetadataType.RawJson
+  FieldMetadataType.Position
 >;

packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx

@@ -35,6 +35,7 @@ export type AppTooltipProps = {
   className?: string;
   anchorSelect?: string;
   content?: string;
+  children?: React.ReactNode;
   delayHide?: number;
   offset?: number;
   noArrow?: boolean;
@@ -53,6 +54,7 @@ export const AppTooltip = ({
   offset,
   place,
   positionStrategy,
+  children,
 }: AppTooltipProps) => (
   <StyledAppTooltip
     {...{
@@ -65,6 +67,7 @@ export const AppTooltip = ({
       offset,
       place,
       positionStrategy,
+      children,
     }}
   />
 );

packages/twenty-front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -22,9 +22,11 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
 export const OverflowingTextWithTooltip = ({
   text,
   className,
+  mutliline,
 }: {
   text: string | null | undefined;
   className?: string;
+  mutliline?: boolean;
 }) => {
   const textElementId = `title-id-${uuidV4()}`;
 
@@ -65,13 +67,15 @@ export const OverflowingTextWithTooltip = ({
           <div onClick={handleTooltipClick}>
             <AppTooltip
               anchorSelect={`#${textElementId}`}
-              content={text ?? ''}
+              content={mutliline ? undefined : text ?? ''}
               delayHide={0}
               offset={5}
               noArrow
               place="bottom"
               positionStrategy="absolute"
-            />
+            >
+              {mutliline ? <pre>{text}</pre> : ''}
+            </AppTooltip>
           </div>,
           document.body,
         )}

packages/twenty-front/src/modules/ui/field/display/components/JsonDisplay.tsx

@@ -0,0 +1,10 @@
+import { EllipsisDisplay } from './EllipsisDisplay';
+
+type JsonDisplayProps = {
+  text: string;
+  maxWidth?: number;
+};
+
+export const JsonDisplay = ({ text, maxWidth }: JsonDisplayProps) => (
+  <EllipsisDisplay maxWidth={maxWidth}>{text}</EllipsisDisplay>
+);