Add filters to search record action

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

@@ -2,6 +2,7 @@ import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filt
 import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
 
 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -21,10 +22,12 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
 
 type AdvancedFilterRecordFilterGroupChildrenProps = {
   recordFilterGroupId: string;
+  VariablePicker?: VariablePickerComponent;
 };
 
 export const AdvancedFilterRecordFilterGroupChildren = ({
   recordFilterGroupId,
+  VariablePicker,
 }: AdvancedFilterRecordFilterGroupChildrenProps) => {
   const { currentRecordFilterGroup, childRecordFilters } =
     useChildRecordFiltersAndRecordFilterGroups({
@@ -47,6 +50,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
           recordFilter={childRecordFilter}
           recordFilterIndex={childRecordFilterIndex}
           recordFilterGroup={currentRecordFilterGroup}
+          VariablePicker={VariablePicker}
         />
       ))}
       <AdvancedFilterAddFilterRuleSelect

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

@@ -2,16 +2,19 @@ import { AdvancedFilterDropdownRow } from '@/object-record/advanced-filter/compo
 import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
 import { AdvancedFilterRecordFilterGroupChildren } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren';
 import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 
 export const AdvancedFilterRecordFilterGroupRow = ({
   parentRecordFilterGroup,
   recordFilterGroup,
   recordFilterGroupIndex,
+  VariablePicker,
 }: {
   parentRecordFilterGroup: RecordFilterGroup;
   recordFilterGroup: RecordFilterGroup;
   recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   return (
     <AdvancedFilterDropdownRow>
@@ -21,6 +24,7 @@ export const AdvancedFilterRecordFilterGroupRow = ({
       />
       <AdvancedFilterRecordFilterGroupChildren
         recordFilterGroupId={recordFilterGroup.id}
+        VariablePicker={VariablePicker}
       />
       <AdvancedFilterRecordFilterGroupOptionsDropdown
         recordFilterGroupId={recordFilterGroup.id}

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

@@ -3,20 +3,25 @@ import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advance
 import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
 import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
 import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
+import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
 import { AdvancedFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueInput';
 import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { isDefined } from 'twenty-shared/utils';
 
 export const AdvancedFilterRecordFilterRow = ({
   recordFilterGroup,
   recordFilter,
   recordFilterIndex,
+  VariablePicker,
 }: {
   recordFilterGroup: RecordFilterGroup;
   recordFilter: RecordFilter;
   recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   return (
     <ObjectFilterDropdownComponentInstanceContext.Provider
@@ -37,7 +42,14 @@ export const AdvancedFilterRecordFilterRow = ({
         <AdvancedFilterRecordFilterOperandSelect
           recordFilterId={recordFilter.id}
         />
-        <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
+        {isDefined(VariablePicker) ? (
+          <AdvancedFilterValueFormInput
+            recordFilterId={recordFilter.id}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
+        )}
         <AdvancedFilterRecordFilterOptionsDropdown
           recordFilterId={recordFilter.id}
         />

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

@@ -13,7 +13,7 @@ import styled from '@emotion/styled';
 import { id } from 'date-fns/locale';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
+const StyledContainer = styled.div`
   align-items: start;
   display: flex;
   flex: 1;

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

@@ -0,0 +1,58 @@
+import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
+import { FormCountryCodeSelectInput } from '@/object-record/record-field/form-types/components/FormCountryCodeSelectInput';
+import { FormCountrySelectInput } from '@/object-record/record-field/form-types/components/FormCountrySelectInput';
+import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { JsonValue } from 'type-fest';
+
+export const AdvancedFilterValueFormCompositeFieldInput = ({
+  recordFilter,
+  VariablePicker,
+  onChange,
+}: {
+  recordFilter: RecordFilter;
+  VariablePicker: VariablePickerComponent;
+  onChange: (newValue: JsonValue) => void;
+}) => {
+  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
+    subFieldNameUsedInDropdownComponentState,
+  );
+
+  const filterType = recordFilter.type;
+
+  return (
+    <>
+      {filterType === 'ADDRESS' &&
+        (subFieldNameUsedInDropdown === 'addressCountry' ? (
+          <FormCountrySelectInput
+            selectedCountryName={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <FormTextFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ))}
+      {filterType === 'CURRENCY' &&
+        (recordFilter.subFieldName === 'currencyCode' ? (
+          <FormCountryCodeSelectInput
+            selectedCountryCode={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : recordFilter.subFieldName === 'amountMicros' ? (
+          <FormNumberFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : null)}
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
+import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
+import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
+import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { FieldMetadataType } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import { JsonValue } from 'type-fest';
+
+export const AdvancedFilterValueFormInput = ({
+  recordFilterId,
+  VariablePicker,
+}: {
+  recordFilterId: string;
+  VariablePicker: VariablePickerComponent;
+}) => {
+  const currentRecordFilters = useRecoilComponentValueV2(
+    currentRecordFiltersComponentState,
+  );
+
+  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
+    subFieldNameUsedInDropdownComponentState,
+  );
+
+  const recordFilter = currentRecordFilters.find(
+    (recordFilter) => recordFilter.id === recordFilterId,
+  );
+
+  const isDisabled = !recordFilter?.fieldMetadataId || !recordFilter.operand;
+
+  const { applyObjectFilterDropdownFilterValue } =
+    useApplyObjectFilterDropdownFilterValue();
+
+  const handleChange = (newValue: JsonValue) => {
+    applyObjectFilterDropdownFilterValue(newValue as string);
+  };
+
+  if (isDisabled) {
+    return null;
+  }
+
+  if (isDefined(subFieldNameUsedInDropdown)) {
+    return (
+      <AdvancedFilterValueFormCompositeFieldInput
+        recordFilter={recordFilter}
+        VariablePicker={VariablePicker}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return (
+    <FormFieldInput
+      field={{
+        type: recordFilter.type as FieldMetadataType,
+        label: '',
+        metadata: {} as FieldMetadata,
+      }}
+      defaultValue={recordFilter.value}
+      onChange={handleChange}
+      VariablePicker={VariablePicker}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+type AdvancedFilterContextType = {
+  onUpdate?: () => void;
+};
+
+export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(
+  {} as AdvancedFilterContextType,
+);

packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup.ts

@@ -1,13 +1,17 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useRemoveRecordFilterGroup = () => {
   const currentRecordFilterGroupsCallbackState =
     useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
 
-  const removeRecordFilterGroup = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const removeRecordFilterGroupCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterGroupIdToRemove: string) => {
         const currentRecordFilterGroups = getSnapshotValue(
@@ -53,6 +57,11 @@ export const useRemoveRecordFilterGroup = () => {
     [currentRecordFilterGroupsCallbackState],
   );
 
+  const removeRecordFilterGroup = (recordFilterGroupIdToRemove: string) => {
+    removeRecordFilterGroupCallback(recordFilterGroupIdToRemove);
+    onUpdate?.();
+  };
+
   return {
     removeRecordFilterGroup,
   };

packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup.ts

@@ -1,14 +1,17 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useUpsertRecordFilterGroup = () => {
   const currentRecordFilterGroupsCallbackState =
     useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
+  const { onUpdate } = useContext(AdvancedFilterContext);
 
-  const upsertRecordFilterGroup = useRecoilCallback(
+  const upsertRecordFilterGroupCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterGroupToSet: RecordFilterGroup) => {
         const currentRecordFilterGroups = getSnapshotValue(
@@ -57,6 +60,13 @@ export const useUpsertRecordFilterGroup = () => {
     [currentRecordFilterGroupsCallbackState],
   );
 
+  const upsertRecordFilterGroup = (
+    recordFilterGroupToSet: RecordFilterGroup,
+  ) => {
+    upsertRecordFilterGroupCallback(recordFilterGroupToSet);
+    onUpdate?.();
+  };
+
   return {
     upsertRecordFilterGroup,
   };

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

@@ -1,9 +1,11 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState';
 import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -12,7 +14,9 @@ export const useRemoveRecordFilter = () => {
     currentRecordFiltersComponentState,
   );
 
-  const removeRecordFilter = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const removeRecordFilterCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       ({ recordFilterId }: { recordFilterId: string }) => {
         const currentRecordFilters = getSnapshotValue(
@@ -52,6 +56,15 @@ export const useRemoveRecordFilter = () => {
     [currentRecordFiltersCallbackState],
   );
 
+  const removeRecordFilter = ({
+    recordFilterId,
+  }: {
+    recordFilterId: string;
+  }) => {
+    removeRecordFilterCallback({ recordFilterId });
+    onUpdate?.();
+  };
+
   return {
     removeRecordFilter,
   };

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

@@ -1,15 +1,19 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useUpsertRecordFilter = () => {
   const currentRecordFiltersCallbackState = useRecoilComponentCallbackStateV2(
     currentRecordFiltersComponentState,
   );
 
-  const upsertRecordFilter = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const upsertRecordFilterCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterToSet: RecordFilter) => {
         const currentRecordFilters = getSnapshotValue(
@@ -46,6 +50,11 @@ export const useUpsertRecordFilter = () => {
     [currentRecordFiltersCallbackState],
   );
 
+  const upsertRecordFilter = (recordFilterToSet: RecordFilter) => {
+    upsertRecordFilterCallback(recordFilterToSet);
+    onUpdate?.();
+  };
+
   return {
     upsertRecordFilter,
   };

packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts

@@ -80,6 +80,13 @@ export const workflowFindRecordsActionSettingsSchema =
     input: z.object({
       objectName: z.string(),
       limit: z.number().optional(),
+      filter: z
+        .object({
+          recordFilterGroups: z.array(z.object({})).optional(),
+          recordFilters: z.array(z.object({})).optional(),
+          gqlOperationFilter: z.object({}).optional().nullable(),
+        })
+        .optional(),
     }),
   });