From 1f789a8b954e168916dc8af0955c4a8685fc3cb1 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Tue, 24 Dec 2024 16:36:18 +0100
Subject: [PATCH] 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 :)
---
 .../SettingsDataModelFieldAddressForm.tsx     | 29 ++++++++++---------
 .../SettingsDataModelFieldPhonesForm.tsx      |  7 +++--
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx
index fb636e703..030538cb9 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx
+++ b/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()
-    .sort((a, b) => a.countryName.localeCompare(b.countryName))
-    .map<SelectOption<string>>(({ countryName, Flag }) => ({
-      label: countryName,
-      value: countryName,
-      Icon: (props: IconComponentProps) =>
-        Flag({ width: props.size, height: props.size }),
-    }));
-  countries.unshift({
-    label: 'No country',
-    value: '',
-    Icon: IconCircleOff,
-  });
+  const countries = [
+    {
+      label: 'No country',
+      value: '',
+      Icon: IconCircleOff,
+    },
+    ...useCountries()
+      .sort((a, b) => a.countryName.localeCompare(b.countryName))
+      .map<SelectOption<string>>(({ countryName, Flag }) => ({
+        label: countryName,
+        value: countryName,
+        Icon: (props: IconComponentProps) =>
+          Flag({ width: props.size, height: props.size }),
+      })),
+  ];
+
   const defaultDefaultValue = {
     addressStreet1: "''",
     addressStreet2: null,
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx
index f0a3d59e1..add60cf71 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx
+++ b/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>
         );