search in settings phones (#9228)

tiny PR to add the search feature in the  phones settings dropdown

was a request from @Bonapara a month ago :)

packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx

@@ -31,19 +31,22 @@ export const SettingsDataModelFieldAddressForm = ({
   fieldMetadataItem,
 }: SettingsDataModelFieldAddressFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
-  const countries = useCountries()
+  const countries = [
-    .sort((a, b) => a.countryName.localeCompare(b.countryName))
+    {
-    .map<SelectOption<string>>(({ countryName, Flag }) => ({
+      label: 'No country',
-      label: countryName,
+      value: '',
-      value: countryName,
+      Icon: IconCircleOff,
-      Icon: (props: IconComponentProps) =>
+    },
-        Flag({ width: props.size, height: props.size }),
+    ...useCountries()
-    }));
+      .sort((a, b) => a.countryName.localeCompare(b.countryName))
-  countries.unshift({
+      .map<SelectOption<string>>(({ countryName, Flag }) => ({
-    label: 'No country',
+        label: countryName,
-    value: '',
+        value: countryName,
-    Icon: IconCircleOff,
+        Icon: (props: IconComponentProps) =>
-  });
+          Flag({ width: props.size, height: props.size }),
+      })),
+  ];
+
   const defaultDefaultValue = {
     addressStreet1: "''",
     addressStreet2: null,

packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx

@@ -7,7 +7,7 @@ import { countryCodeToCallingCode } from '@/settings/data-model/fields/preview/u
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Select } from '@/ui/input/components/Select';
 import { CountryCode } from 'libphonenumber-js';
-import { IconMap } from 'twenty-ui';
+import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
@@ -38,12 +38,14 @@ export const SettingsDataModelFieldPhonesForm = ({
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
 
   const countries = [
-    { label: 'No country', value: '' },
+    { label: 'No country', value: '', Icon: IconCircleOff },
     ...useCountries()
       .sort((a, b) => a.countryName.localeCompare(b.countryName))
       .map((country) => ({
         label: `${country.countryName} (+${country.callingCode})`,
         value: country.countryCode as CountryCodeOrEmpty,
+        Icon: (props: IconComponentProps) =>
+          country.Flag({ width: props.size, height: props.size }),
       })),
   ];
   const defaultDefaultValue = {
@@ -88,6 +90,7 @@ export const SettingsDataModelFieldPhonesForm = ({
               disabled={disabled}
               options={countries}
               selectSizeVariant="small"
+              withSearchInput={true}
             />
           </SettingsOptionCardContentSelect>
         );