Add search any field front logic with its feature flag (#13278)

This PR adds the frontend logic to handle the user input of a search any
field value.

It also adds the associated feature flag, that can be modified from the
admin panel.

This PR does not add the filtering part nor the saving on view logic,
which will come in their separate PRs.



https://github.com/user-attachments/assets/6a52c090-b957-46aa-bff7-a90b51109789

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

@@ -0,0 +1,27 @@
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { viewAnyFieldSearchValueComponentState } from '@/views/states/viewAnyFieldSearchValueComponentState';
+import { useLingui } from '@lingui/react/macro';
+
+export const ObjectFilterDropdownAnyFieldSearchInput = () => {
+  const { t } = useLingui();
+
+  const [viewAnyFieldSearchValue, setViewAnyFieldSearchValue] =
+    useRecoilComponentStateV2(viewAnyFieldSearchValueComponentState);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+
+    setViewAnyFieldSearchValue(inputValue);
+  };
+
+  return (
+    <DropdownMenuSearchInput
+      autoFocus
+      type="text"
+      value={viewAnyFieldSearchValue}
+      placeholder={t`Search any field`}
+      onChange={handleSearchChange}
+    />
+  );
+};

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

@@ -42,7 +42,7 @@ export const ObjectFilterDropdownTextInput = () => {
       <DropdownMenuInput
         instanceId="object-filter-dropdown-text-input"
         ref={handleInputRef}
-        value={objectFilterDropdownFilterValue}
+        value={objectFilterDropdownFilterValue ?? ''}
         autoFocus
         type="text"
         placeholder={fieldMetadataItemUsedInDropdown?.label}

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

@@ -1,4 +1,5 @@
 import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
+import { objectFilterDropdownAnyFieldSearchIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownAnyFieldSearchIsSelectedComponentState';
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
 import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
@@ -32,6 +33,12 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
       componentInstanceId,
     );
 
+  const objectFilterDropdownAnyFieldSearchIsSelectedCallbackState =
+    useRecoilComponentCallbackStateV2(
+      objectFilterDropdownAnyFieldSearchIsSelectedComponentState,
+      componentInstanceId,
+    );
+
   const objectFilterDropdownIsSelectingCompositeFieldCallbackState =
     useRecoilComponentCallbackStateV2(
       objectFilterDropdownIsSelectingCompositeFieldComponentState,
@@ -53,6 +60,7 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
         set(objectFilterDropdownIsSelectingCompositeFieldCallbackState, false);
         set(fieldMetadataItemIdUsedInDropdownCallbackState, null);
         set(objectFilterDropdownCurrentRecordFilterCallbackState, null);
+        set(objectFilterDropdownAnyFieldSearchIsSelectedCallbackState, false);
       },
     [
       objectFilterDropdownSearchInputCallbackState,
@@ -61,6 +69,7 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
       objectFilterDropdownIsSelectingCompositeFieldCallbackState,
       fieldMetadataItemIdUsedInDropdownCallbackState,
       objectFilterDropdownCurrentRecordFilterCallbackState,
+      objectFilterDropdownAnyFieldSearchIsSelectedCallbackState,
     ],
   );
 

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownAnyFieldSearchIsSelectedComponentState.ts

@@ -0,0 +1,9 @@
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const objectFilterDropdownAnyFieldSearchIsSelectedComponentState =
+  createComponentStateV2<boolean>({
+    key: 'objectFilterDropdownAnyFieldSearchIsSelectedComponentState',
+    defaultValue: false,
+    componentInstanceContext: ObjectFilterDropdownComponentInstanceContext,
+  });