Redirect to select option creation when no result (#14460)

fix:Ability to add a new option for a multi-select on the fly 
Issues:#13877

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx

@@ -7,6 +7,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 
+import { AddSelectOptionMenuItem } from '@/settings/data-model/fields/forms/select/components/AddSelectOptionMenuItem';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -14,7 +15,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useLingui } from '@lingui/react/macro';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { type SelectOption } from 'twenty-ui/input';
 import { MenuItem, MenuItemMultiSelectTag } from 'twenty-ui/navigation';
@@ -29,6 +30,7 @@ type MultiSelectInputProps = {
   options: SelectOption[];
   onOptionSelected: (value: FieldMultiSelectValue) => void;
   dropdownWidth?: number;
+  onAddSelectOption?: (optionName: string) => void;
 };
 
 export const MultiSelectInput = ({
@@ -39,9 +41,8 @@ export const MultiSelectInput = ({
   onCancel,
   onOptionSelected,
   dropdownWidth,
+  onAddSelectOption,
 }: MultiSelectInputProps) => {
-  const { t } = useLingui();
-
   const { resetSelectedItem } = useSelectableList(
     selectableListComponentInstanceId,
   );
@@ -50,6 +51,7 @@ export const MultiSelectInput = ({
     selectedItemIdComponentState,
     selectableListComponentInstanceId,
   );
+
   const [searchFilter, setSearchFilter] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -129,7 +131,7 @@ export const MultiSelectInput = ({
         <DropdownMenuSeparator />
         <DropdownMenuItemsContainer hasMaxHeight>
           {filteredOptionsInDropDown.length === 0 ? (
-            <MenuItem disabled text={t`No option found`} accent="placeholder" />
+            <MenuItem text={t`No option found`} />
           ) : (
             filteredOptionsInDropDown.map((option) => {
               return (
@@ -156,6 +158,19 @@ export const MultiSelectInput = ({
             })
           )}
         </DropdownMenuItemsContainer>
+        {onAddSelectOption &&
+          searchFilter &&
+          filteredOptionsInDropDown.length === 0 && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItemsContainer scrollable={false}>
+                <AddSelectOptionMenuItem
+                  name={searchFilter}
+                  onAddSelectOption={onAddSelectOption}
+                />
+              </DropdownMenuItemsContainer>
+            </>
+          )}
       </DropdownContent>
     </SelectableList>
   );

packages/twenty-front/src/modules/ui/field/input/components/SelectInput.tsx

@@ -14,6 +14,7 @@ type SelectInputProps = {
   onFilterChange?: ((filteredOptions: SelectOption[]) => void) | undefined;
   onClear?: (() => void) | undefined;
   clearLabel?: string;
+  onAddSelectOption?: (optionName: string) => void;
 };
 
 export const SelectInput = ({
@@ -27,6 +28,7 @@ export const SelectInput = ({
   onFilterChange,
   onClear,
   clearLabel,
+  onAddSelectOption,
 }: SelectInputProps) => {
   return (
     <SelectableList
@@ -43,6 +45,7 @@ export const SelectInput = ({
         onClear={onClear}
         clearLabel={clearLabel}
         focusId={focusId}
+        onAddSelectOption={onAddSelectOption}
       />
     </SelectableList>
   );