[Workflows] Fix filtering on relative date (#16087)

https://github.com/user-attachments/assets/4079d59e-0550-401f-a29b-b235edd8ed48

Closes https://github.com/twentyhq/twenty/issues/16054

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx

@@ -49,8 +49,12 @@ export const AdvancedFilterDropdownFilterInput = ({
           <AdvancedFilterDropdownTextInput recordFilter={recordFilter} />
         ))}
       {filterType === 'RATING' && <ObjectFilterDropdownRatingInput />}
-      {filterType === 'DATE_TIME' && <ObjectFilterDropdownDateTimeInput />}
-      {filterType === 'DATE' && <ObjectFilterDropdownDateInput />}
+      {filterType === 'DATE_TIME' && (
+        <ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
+      )}
+      {filterType === 'DATE' && (
+        <ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
+      )}
       {filterType === 'RELATION' && (
         <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
           <ObjectFilterDropdownSearchInput />

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

@@ -24,7 +24,13 @@ import {
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateString } from '~/utils/string/formatDateString';
 
-export const ObjectFilterDropdownDateInput = () => {
+type ObjectFilterDropdownDateInputProps = {
+  instanceId: string;
+};
+
+export const ObjectFilterDropdownDateInput = ({
+  instanceId,
+}: ObjectFilterDropdownDateInputProps) => {
   const { dateFormat, timeZone } = useContext(UserContext);
   const dateLocale = useRecoilValue(dateLocaleState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -109,6 +115,7 @@ export const ObjectFilterDropdownDateInput = () => {
 
   return (
     <DatePicker
+      instanceId={instanceId}
       relativeDate={relativeDate}
       isRelative={isRelativeOperand}
       date={plainDateValue ?? null}

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

@@ -24,7 +24,13 @@ import {
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 
-export const ObjectFilterDropdownDateTimeInput = () => {
+type ObjectFilterDropdownDateTimeInputProps = {
+  instanceId: string;
+};
+
+export const ObjectFilterDropdownDateTimeInput = ({
+  instanceId,
+}: ObjectFilterDropdownDateTimeInputProps) => {
   const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
   const dateLocale = useRecoilValue(dateLocaleState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -112,6 +118,7 @@ export const ObjectFilterDropdownDateTimeInput = () => {
 
   return (
     <DateTimePicker
+      instanceId={instanceId}
       relativeDate={relativeDate}
       isRelative={isRelativeOperand}
       date={internalDate}

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

@@ -82,7 +82,7 @@ export const ObjectFilterDropdownFilterInput = ({
       <>
         <ObjectFilterDropdownInnerSelectOperandDropdown />
         <DropdownMenuSeparator />
-        <ObjectFilterDropdownDateInput />
+        <ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
       </>
     );
   } else if (filterType === 'DATE_TIME') {
@@ -90,7 +90,7 @@ export const ObjectFilterDropdownFilterInput = ({
       <>
         <ObjectFilterDropdownInnerSelectOperandDropdown />
         <DropdownMenuSeparator />
-        <ObjectFilterDropdownDateTimeInput />
+        <ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
       </>
     );
   } else {

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts

@@ -13,13 +13,9 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { stringifyRelativeDateFilter } from '@/views/view-filter-value/utils/stringifyRelativeDateFilter';
+import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
 
-import {
-  isDefined,
-  type RelativeDateFilter,
-  type RelativeDateFilterDirection,
-  type RelativeDateFilterUnit,
-} from 'twenty-shared/utils';
+import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
 
 export const useApplyObjectFilterDropdownOperand = () => {
   const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
@@ -108,9 +104,7 @@ export const useApplyObjectFilterDropdownOperand = () => {
         recordFilterToUpsert.displayValue = displayValue;
       } else if (newOperand === RecordFilterOperand.IS_RELATIVE) {
         const defaultRelativeDate: RelativeDateFilter = {
-          direction: 'THIS' as RelativeDateFilterDirection,
-          amount: 1,
-          unit: 'DAY' as RelativeDateFilterUnit,
+          ...DEFAULT_RELATIVE_DATE_FILTER_VALUE,
           timezone: userTimezone,
         };
 

packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx

@@ -121,6 +121,7 @@ export const RecordCalendarTopBar = () => {
           dropdownComponents={
             <DropdownContent widthInPixels={280}>
               <DateTimePicker
+                instanceId={recordCalendarId}
                 date={recordCalendarSelectedDate}
                 onChange={handleDateChange}
                 onClose={handleDateChange}

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx

@@ -337,6 +337,7 @@ export const FormDateFieldInput = ({
                   <StyledDateInputAbsoluteContainer>
                     <OverlayContainer>
                       <DatePicker
+                        instanceId={instanceId}
                         date={pickerDate}
                         onChange={handlePickerChange}
                         onClose={handlePickerMouseSelect}

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx

@@ -336,6 +336,7 @@ export const FormDateTimeFieldInput = ({
                   <StyledDateInputAbsoluteContainer>
                     <OverlayContainer>
                       <DateTimePicker
+                        instanceId={instanceId}
                         date={pickerDate ?? new Date()}
                         onChange={handlePickerChange}
                         onClose={handlePickerMouseSelect}

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx

@@ -1,6 +1,7 @@
 import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
 
 import { isNonEmptyString, isString } from '@sniptt/guards';
+import { useId } from 'react';
 import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
 
 import {
@@ -21,6 +22,8 @@ export const FormRelativeDatePicker = ({
   onChange,
   readonly,
 }: FormRelativeDatePickerProps) => {
+  const instanceId = useId();
+
   const value =
     isString(defaultValue) && isNonEmptyString(defaultValue)
       ? safeParseRelativeDateFilterJSONStringified(defaultValue)
@@ -32,6 +35,7 @@ export const FormRelativeDatePicker = ({
 
   return (
     <RelativeDatePickerHeader
+      instanceId={instanceId}
       onChange={handleValueChange}
       direction={value?.direction ?? 'THIS'}
       unit={value?.unit ?? 'DAY'}