Added a clear/reset button in InternalDateInput to reset/unschedule events (#3154)

* Added a clear/reset button in InternalDateInput to reset/unschedule events

* Added clearable prop to <InternalDateInput /> and fixed some design mistakes

* Removed unnecessary code that was used during debugging

* Replaced button with <MenuItem /> component

* Fixed null date in ObjectFilterDropdownDateSearchInput

* Moved clear context call from DateInput to DateFieldInput

* Removed useless props

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -91,8 +91,6 @@ export const FieldInput = ({
           onEnter={onEnter}
           onEscape={onEscape}
           onClickOutside={onClickOutside}
-          onTab={onTab}
-          onShiftTab={onShiftTab}
         />
       ) : isFieldNumber(fieldDefinition) ? (
         <NumberFieldInput

packages/twenty-front/src/modules/object-record/field/contexts/FieldContext.ts

@@ -27,6 +27,7 @@ export type GenericFieldContextType = {
   hotkeyScope: string;
   isLabelIdentifier: boolean;
   basePathToShowPage?: string;
+  clearable?: boolean;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(

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

@@ -7,7 +7,8 @@ import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 import { isFieldDateTime } from '../../types/guards/isFieldDateTime';
 
 export const useDateTimeField = () => {
-  const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
+  const { entityId, fieldDefinition, hotkeyScope, clearable } =
+    useContext(FieldContext);
 
   assertFieldMetadata('DATE_TIME', isFieldDateTime, fieldDefinition);
 
@@ -25,5 +26,6 @@ export const useDateTimeField = () => {
     fieldValue,
     setFieldValue,
     hotkeyScope,
+    clearable,
   };
 };

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

@@ -10,8 +10,6 @@ export type DateFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
-  onTab?: FieldInputEvent;
-  onShiftTab?: FieldInputEvent;
 };
 
 export const DateFieldInput = ({
@@ -19,13 +17,13 @@ export const DateFieldInput = ({
   onEscape,
   onClickOutside,
 }: DateFieldInputProps) => {
-  const { fieldValue, hotkeyScope } = useDateTimeField();
+  const { fieldValue, hotkeyScope, clearable } = useDateTimeField();
 
   const persistField = usePersistField();
 
   const persistDate = (newDate: Nullable<Date>) => {
     if (!newDate) {
-      persistField('');
+      persistField(null);
     } else {
       const newDateISO = newDate?.toISOString();
 
@@ -57,6 +55,7 @@ export const DateFieldInput = ({
       onEnter={handleEnter}
       onEscape={handleEscape}
       value={dateValue}
+      clearable={clearable}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import { isString } from '@sniptt/guards';
+import { isNull, isString } from '@sniptt/guards';
 
 import { FieldDateTimeValue } from '../FieldMetadata';
 
@@ -6,4 +6,5 @@ import { FieldDateTimeValue } from '../FieldMetadata';
 export const isFieldDateTimeValue = (
   fieldValue: unknown,
 ): fieldValue is FieldDateTimeValue =>
-  isString(fieldValue) && !isNaN(Date.parse(fieldValue));
+  (isString(fieldValue) && !isNaN(Date.parse(fieldValue))) ||
+  isNull(fieldValue);

packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx

@@ -15,11 +15,13 @@ export const useFieldContext = ({
   fieldMetadataName,
   objectRecordId,
   fieldPosition,
+  clearable,
 }: {
   objectNameSingular: string;
   objectRecordId: string;
   fieldMetadataName: string;
   fieldPosition: number;
+  clearable?: boolean;
 }) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -60,6 +62,7 @@ export const useFieldContext = ({
               }),
               useUpdateRecord: useUpdateOneObjectMutation,
               hotkeyScope: InlineCellHotkeyScope.InlineCell,
+              clearable,
             }}
           >
             {children}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateSearchInput.tsx

@@ -1,5 +1,6 @@
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
+import { isDefined } from '~/utils/isDefined';
 
 export const ObjectFilterDropdownDateSearchInput = () => {
   const {
@@ -9,14 +10,14 @@ export const ObjectFilterDropdownDateSearchInput = () => {
     selectFilter,
   } = useFilterDropdown();
 
-  const handleChange = (date: Date) => {
+  const handleChange = (date: Date | null) => {
     if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
 
     selectFilter?.({
       fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
-      value: date.toISOString(),
+      value: isDefined(date) ? date.toISOString() : '',
       operand: selectedOperandInDropdown,
-      displayValue: date.toLocaleDateString(),
+      displayValue: isDefined(date) ? date.toLocaleString() : '',
       definition: filterDefinitionUsedInDropdown,
     });