Handle relative date step filter (#13930)

https://github.com/user-attachments/assets/2fbb02dd-2170-4807-a1dd-faa3f374bd5a



- move relative date types to twenty-shared
- use and adapt existing relative date picker to be used in workflow
forms
- add backend logic to support relative dates in filters

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

@@ -6,13 +6,13 @@ import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropd
 import { DateTimePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/utils/computeVariableDateViewFilterValue';
+import { resolveDateViewFilterValue } from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
+import { useState } from 'react';
 import {
-  resolveDateViewFilterValue,
+  ViewFilterOperand,
   type VariableDateViewFilterValueDirection,
   type VariableDateViewFilterValueUnit,
-} from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
-import { useState } from 'react';
-import { ViewFilterOperand } from 'twenty-shared/types';
+} from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 

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

@@ -14,7 +14,7 @@ import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/ut
 import {
   type VariableDateViewFilterValueDirection,
   type VariableDateViewFilterValueUnit,
-} from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
+} from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useApplyObjectFilterDropdownOperand = () => {

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue.ts

@@ -1,8 +1,8 @@
+import { plural } from 'pluralize';
 import {
   type VariableDateViewFilterValueDirection,
   type VariableDateViewFilterValueUnit,
-} from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
-import { plural } from 'pluralize';
+} from 'twenty-shared/types';
 import { capitalize } from 'twenty-shared/utils';
 
 export const getRelativeDateDisplayValue = (

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

@@ -0,0 +1,43 @@
+import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
+
+import { isNonEmptyString, isString } from '@sniptt/guards';
+import {
+  DEFAULT_RELATIVE_DATE_VALUE,
+  type VariableDateViewFilterValue,
+} from 'twenty-shared/types';
+import { safeParseRelativeDateFilterValue } from 'twenty-shared/utils';
+import { type JsonValue } from 'type-fest';
+
+export type FormRelativeDatePickerProps = {
+  label?: string;
+  defaultValue?: string;
+  onChange: (value: JsonValue) => void;
+  readonly?: boolean;
+};
+
+export const FormRelativeDatePicker = ({
+  defaultValue,
+  onChange,
+  readonly,
+}: FormRelativeDatePickerProps) => {
+  const value =
+    isString(defaultValue) && isNonEmptyString(defaultValue)
+      ? safeParseRelativeDateFilterValue(defaultValue)
+      : DEFAULT_RELATIVE_DATE_VALUE;
+
+  const handleValueChange = (newValue: VariableDateViewFilterValue) => {
+    onChange(JSON.stringify(newValue));
+  };
+
+  return (
+    <RelativeDatePickerHeader
+      onChange={handleValueChange}
+      direction={value?.direction ?? 'THIS'}
+      unit={value?.unit ?? 'DAY'}
+      amount={value?.amount}
+      isFormField={true}
+      readonly={readonly}
+      unitDropdownWidth={150}
+    />
+  );
+};