Chore(front): Create Storybook tests for the DropdownMenu component (#2157)

* Chore(front): Create Storybook tests for the DropdownMenu component

Co-authored-by: Benjamin Mayanja V <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>

* Fix the tests

Co-authored-by: Benjamin Mayanja V <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>

* Simplify Dropdown

* Remove console.log

---------

Co-authored-by: Benjamin Mayanja V <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/components/IconPicker.tsx

@@ -2,11 +2,11 @@ import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 
@@ -73,7 +73,7 @@ export const IconPicker = ({
 
   return (
     <DropdownScope dropdownScopeId="icon-picker">
-      <DropdownMenu
+      <Dropdown
         dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
         clickableComponent={
           <IconButton
@@ -83,13 +83,13 @@ export const IconPicker = ({
           />
         }
         dropdownComponents={
-          <StyledDropdownMenu width={168}>
+          <DropdownMenu width={168}>
             <DropdownMenuSearchInput
               placeholder="Search icon"
               autoFocus
               onChange={(event) => setSearchString(event.target.value)}
             />
-            <StyledDropdownMenuSeparator />
+            <DropdownMenuSeparator />
             <DropdownMenuItemsContainer>
               {isLoading ? (
                 <DropdownMenuSkeletonItem />
@@ -111,7 +111,7 @@ export const IconPicker = ({
                 </StyledMenuIconItemsContainer>
               )}
             </DropdownMenuItemsContainer>
-          </StyledDropdownMenu>
+          </DropdownMenu>
         }
         onClickOutside={onClickOutside}
         onClose={() => {
@@ -119,7 +119,7 @@ export const IconPicker = ({
           setSearchString('');
         }}
         onOpen={onOpen}
-      ></DropdownMenu>
+      ></Dropdown>
     </DropdownScope>
   );
 };

front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx

@@ -8,7 +8,7 @@ import { CountryCallingCode } from 'libphonenumber-js';
 
 import { IconChevronDown } from '@/ui/display/icon';
 import { IconWorld } from '@/ui/input/constants/icons';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 
@@ -123,7 +123,7 @@ export const CountryPickerDropdownButton = ({
 
   return (
     <DropdownScope dropdownScopeId="country-picker">
-      <DropdownMenu
+      <Dropdown
         dropdownHotkeyScope={{ scope: CountryPickerHotkeyScope.CountryPicker }}
         clickableComponent={
           <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>

front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx

@@ -1,10 +1,10 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
@@ -58,13 +58,13 @@ export const CountryPickerDropdownSelect = ({
   return (
     <>
       <StyledDropdownMenuContainer data-select-disable>
-        <StyledDropdownMenu width="240px" disableBlur>
+        <DropdownMenu width="240px" disableBlur>
           <DropdownMenuSearchInput
             value={searchFilter}
             onChange={(event) => setSearchFilter(event.currentTarget.value)}
             autoFocus
           />
-          <StyledDropdownMenuSeparator />
+          <DropdownMenuSeparator />
           <DropdownMenuItemsContainer hasMaxHeight>
             {filteredCountries?.length === 0 ? (
               <MenuItem text="No result" />
@@ -102,7 +102,7 @@ export const CountryPickerDropdownSelect = ({
               </>
             )}
           </DropdownMenuItemsContainer>
-        </StyledDropdownMenu>
+        </DropdownMenu>
       </StyledDropdownMenuContainer>
     </>
   );

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -1,10 +1,10 @@
 import { useRef } from 'react';
 import debounce from 'lodash.debounce';
 
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -72,13 +72,13 @@ export const MultipleEntitySelect = <
   });
 
   return (
-    <StyledDropdownMenu ref={containerRef} data-select-disable>
+    <DropdownMenu ref={containerRef} data-select-disable>
       <DropdownMenuSearchInput
         value={searchFilter}
         onChange={handleFilterChange}
         autoFocus
       />
-      <StyledDropdownMenuSeparator />
+      <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
           <MenuItemMultiSelectAvatar
@@ -101,6 +101,6 @@ export const MultipleEntitySelect = <
         ))}
         {entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
       </DropdownMenuItemsContainer>
-    </StyledDropdownMenu>
+    </DropdownMenu>
   );
 };

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -1,8 +1,8 @@
 import { useRef } from 'react';
 
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
@@ -61,7 +61,7 @@ export const SingleEntitySelect = <
   });
 
   return (
-    <StyledDropdownMenu
+    <DropdownMenu
       disableBlur={disableBackgroundBlur}
       ref={containerRef}
       width={width}
@@ -72,7 +72,7 @@ export const SingleEntitySelect = <
         onChange={handleSearchFilterChange}
         autoFocus
       />
-      <StyledDropdownMenuSeparator />
+      <DropdownMenuSeparator />
       <SingleEntitySelectBase
         {...{
           EmptyIcon,
@@ -86,6 +86,6 @@ export const SingleEntitySelect = <
           showCreateButton,
         }}
       />
-    </StyledDropdownMenu>
+    </DropdownMenu>
   );
 };

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -4,7 +4,7 @@ import { Key } from 'ts-key-enum';
 import { IconPlus } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
@@ -155,7 +155,7 @@ export const SingleEntitySelectBase = <
       {showCreateButton && (
         <>
           <DropdownMenuItemsContainer hasMaxHeight>
-            <StyledDropdownMenuSeparator />
+            <DropdownMenuSeparator />
             <CreateNewButton
               onClick={onCreate}
               LeftIcon={IconPlus}