[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_TIME' && (
-      {filterType === 'DATE' && <ObjectFilterDropdownDateInput />}
+        <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 {
+import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
-  isDefined,
-  type RelativeDateFilter,
-  type RelativeDateFilterDirection,
-  type RelativeDateFilterUnit,
-} 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,
+          ...DEFAULT_RELATIVE_DATE_FILTER_VALUE,
-          amount: 1,
-          unit: 'DAY' as RelativeDateFilterUnit,
           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'}

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -109,6 +109,7 @@ export const DateInput = ({
   return (
     <div ref={wrapperRef}>
       <DatePicker
+        instanceId={instanceId}
         date={internalValue ?? null}
         onChange={handleChange}
         onClose={handleClose}

packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx

@@ -109,6 +109,7 @@ export const DateTimeInput = ({
   return (
     <div ref={wrapperRef}>
       <DateTimePicker
+        instanceId={instanceId}
         date={internalValue ?? null}
         onChange={handleChange}
         onClose={handleClose}

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx

@@ -302,6 +302,7 @@ const StyledDatePickerFallback = styled.div`
 `;
 
 type DatePickerProps = {
+  instanceId: string;
   isRelative?: boolean;
   hideHeaderInput?: boolean;
   date: Nullable<string>;
@@ -333,6 +334,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
 );
 
 export const DatePicker = ({
+  instanceId,
   date,
   onChange,
   onClose,
@@ -476,6 +478,7 @@ export const DatePicker = ({
             }) =>
               isRelative ? (
                 <RelativeDatePickerHeader
+                  instanceId={instanceId}
                   direction={relativeDate?.direction ?? 'PAST'}
                   amount={relativeDate?.amount}
                   unit={relativeDate?.unit ?? 'DAY'}

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx

@@ -300,6 +300,7 @@ const StyledDatePickerFallback = styled.div`
 `;
 
 type DateTimePickerProps = {
+  instanceId: string;
   isRelative?: boolean;
   hideHeaderInput?: boolean;
   date: Date | null;
@@ -331,6 +332,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
 );
 
 export const DateTimePicker = ({
+  instanceId,
   date,
   onChange,
   onClose,
@@ -484,6 +486,7 @@ export const DateTimePicker = ({
           }) =>
             isRelative ? (
               <RelativeDatePickerHeader
+                instanceId={instanceId}
                 direction={relativeDate?.direction ?? 'PAST'}
                 amount={relativeDate?.amount}
                 unit={relativeDate?.unit ?? 'DAY'}

packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx

@@ -21,6 +21,7 @@ const StyledContainer = styled.div<{ noPadding: boolean }>`
 `;
 
 type RelativeDatePickerHeaderProps = {
+  instanceId: string;
   direction: RelativeDateFilterDirection;
   amount?: Nullable<number>;
   unit: RelativeDateFilterUnit;
@@ -31,6 +32,7 @@ type RelativeDatePickerHeaderProps = {
 };
 
 export const RelativeDatePickerHeader = ({
+  instanceId,
   direction,
   unit,
   amount,
@@ -53,7 +55,7 @@ export const RelativeDatePickerHeader = ({
   return (
     <StyledContainer noPadding={isFormField ?? false}>
       <Select
-        dropdownId="direction-select"
+        dropdownId={`direction-select-${instanceId}`}
         value={direction}
         onChange={(newDirection) => {
           if (amount === undefined && newDirection !== 'THIS') {
@@ -71,7 +73,7 @@ export const RelativeDatePickerHeader = ({
         disabled={readonly}
       />
       <SettingsTextInput
-        instanceId="relative-date-picker-amount"
+        instanceId={`relative-date-picker-amount-${instanceId}`}
         width={50}
         value={textInputValue}
         onChange={(text) => {
@@ -92,7 +94,7 @@ export const RelativeDatePickerHeader = ({
         disabled={direction === 'THIS' || readonly}
       />
       <Select
-        dropdownId="unit-select"
+        dropdownId={`unit-select-${instanceId}`}
         value={unit}
         onChange={(newUnit) => {
           if (direction !== 'THIS' && amount === undefined) {

packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx

@@ -17,6 +17,7 @@ const meta: Meta<typeof DateTimePicker> = {
     const [, updateArgs] = useArgs();
     return (
       <DateTimePicker
+        instanceId="story-date-time-picker"
         date={isDefined(date) ? new Date(date) : new Date()}
         onChange={(newDate) => updateArgs({ date: newDate })}
       />

packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts

@@ -3,5 +3,5 @@ import { type RelativeDateFilter } from '@/utils';
 export const DEFAULT_RELATIVE_DATE_FILTER_VALUE: RelativeDateFilter = {
   direction: 'THIS',
   unit: 'DAY',
-  amount: undefined,
+  amount: 1,
 };