Feat/hide board fields (#1271)

* Renamed AuthAutoRouter

* Moved RecoilScope

* Refactored old WithTopBarContainer to make it less transclusive

* Created new add opportunity button and refactored DropdownButton

* Added tests

* Deactivated new eslint rule

* Refactored Table options with new dropdown

* Started BoardDropdown

* Fix lint

* Refactor dropdown openstate

* Fix according to PR

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,12 +1,12 @@
 import { useRef } from 'react';
 import debounce from 'lodash.debounce';
 
-import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuCheckableItem } from '@/ui/dropdown/components/DropdownMenuCheckableItem';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
@@ -72,14 +72,14 @@ export function MultipleEntitySelect<
   });
 
   return (
-    <DropdownMenu ref={containerRef}>
+    <StyledDropdownMenu ref={containerRef}>
       <DropdownMenuInput
         value={searchFilter}
         onChange={handleFilterChange}
         autoFocus
       />
-      <DropdownMenuSeparator />
-      <DropdownMenuItemsContainer hasMaxHeight>
+      <StyledDropdownMenuSeparator />
+      <StyledDropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
           <DropdownMenuCheckableItem
             key={entity.id}
@@ -101,7 +101,7 @@ export function MultipleEntitySelect<
         {entitiesInDropdown?.length === 0 && (
           <DropdownMenuItem>No result</DropdownMenuItem>
         )}
-      </DropdownMenuItemsContainer>
-    </DropdownMenu>
+      </StyledDropdownMenuItemsContainer>
+    </StyledDropdownMenu>
   );
 }

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

@@ -1,11 +1,11 @@
 import { useRef } from 'react';
 import { useTheme } from '@emotion/react';
 
-import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconPlus } from '@/ui/icon';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
@@ -55,7 +55,7 @@ export function SingleEntitySelect<
   });
 
   return (
-    <DropdownMenu
+    <StyledDropdownMenu
       disableBlur={disableBackgroundBlur}
       ref={containerRef}
       width={width}
@@ -65,7 +65,7 @@ export function SingleEntitySelect<
         onChange={handleSearchFilterChange}
         autoFocus
       />
-      <DropdownMenuSeparator />
+      <StyledDropdownMenuSeparator />
       <SingleEntitySelectBase
         entities={entities}
         onEntitySelected={onEntitySelected}
@@ -73,15 +73,15 @@ export function SingleEntitySelect<
       />
       {showCreateButton && (
         <>
-          <DropdownMenuItemsContainer hasMaxHeight>
+          <StyledDropdownMenuItemsContainer hasMaxHeight>
             <DropdownMenuItem onClick={onCreate}>
               <IconPlus size={theme.icon.size.md} />
               Add New
             </DropdownMenuItem>
-          </DropdownMenuItemsContainer>
-          <DropdownMenuSeparator />
+          </StyledDropdownMenuItemsContainer>
+          <StyledDropdownMenuSeparator />
         </>
       )}
-    </DropdownMenu>
+    </StyledDropdownMenu>
   );
 }

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

@@ -2,8 +2,8 @@ import { useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
@@ -73,7 +73,7 @@ export function SingleEntitySelectBase<
   );
 
   return (
-    <DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+    <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
       {entities.loading ? (
         <DropdownMenuSkeletonItem />
       ) : entitiesInDropdown.length === 0 ? (
@@ -97,6 +97,6 @@ export function SingleEntitySelectBase<
           </DropdownMenuSelectableItem>
         ))
       )}
-    </DropdownMenuItemsContainer>
+    </StyledDropdownMenuItemsContainer>
   );
 }

front/src/modules/ui/input/text/components/TextInputDisplay.tsx

@@ -1,9 +1,16 @@
-/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
-export const TextInputDisplay = styled.div`
+const StyledTextInputDisplay = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
 `;
+
+export type TextInputDisplayProps = {
+  children: React.ReactNode;
+};
+
+export function TextInputDisplay({ children }: TextInputDisplayProps) {
+  return <StyledTextInputDisplay>{children}</StyledTextInputDisplay>;
+}