refactor: improve SingleEntitySelect empty option (#1543)

Closes #1331

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

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

@@ -13,29 +13,36 @@ import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';
 import { EntityForSelect } from '../types/EntityForSelect';
 
 import {
-  EntitiesForSingleEntitySelect,
   SingleEntitySelectBase,
+  type SingleEntitySelectBaseProps,
 } from './SingleEntitySelectBase';
 
+export type SingleEntitySelectProps<
+  CustomEntityForSelect extends EntityForSelect,
+> = {
+  disableBackgroundBlur?: boolean;
+  onCreate?: () => void;
+  width?: number;
+} & Pick<
+  SingleEntitySelectBaseProps<CustomEntityForSelect>,
+  | 'EmptyIcon'
+  | 'emptyLabel'
+  | 'entitiesToSelect'
+  | 'loading'
+  | 'onCancel'
+  | 'onEntitySelected'
+  | 'selectedEntity'
+>;
+
 export function SingleEntitySelect<
   CustomEntityForSelect extends EntityForSelect,
 >({
-  entities,
-  onEntitySelected,
-  onCreate,
-  onCancel,
-  width,
   disableBackgroundBlur = false,
-  noUser,
-}: {
-  onCancel?: () => void;
-  onCreate?: () => void;
-  entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
-  onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
-  disableBackgroundBlur?: boolean;
-  width?: number;
-  noUser?: CustomEntityForSelect;
-}) {
+  onCancel,
+  onCreate,
+  width,
+  ...props
+}: SingleEntitySelectProps<CustomEntityForSelect>) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
@@ -64,12 +71,7 @@ export function SingleEntitySelect<
         autoFocus
       />
       <StyledDropdownMenuSeparator />
-      <SingleEntitySelectBase
-        entities={entities}
-        onEntitySelected={onEntitySelected}
-        onCancel={onCancel}
-        noUser={noUser}
-      />
+      <SingleEntitySelectBase {...props} onCancel={onCancel} />
       {showCreateButton && (
         <>
           <StyledDropdownMenuItemsContainer hasMaxHeight>

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

@@ -2,49 +2,47 @@ import { useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { IconBuildingSkyscraper, IconUserCircle } from '@/ui/icon';
+import type { IconComponent } from '@/ui/icon/types/IconComponent';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemSelectAvatar } from '@/ui/menu-item/components/MenuItemSelectAvatar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
-import { isDefined } from '~/utils/isDefined';
+import { assertNotNull } from '~/utils/assert';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
 import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
-import { Entity } from '../types/EntityTypeForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
 import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
 
-export type EntitiesForSingleEntitySelect<
+export type SingleEntitySelectBaseProps<
   CustomEntityForSelect extends EntityForSelect,
 > = {
-  selectedEntity: CustomEntityForSelect;
+  EmptyIcon?: IconComponent;
+  emptyLabel?: string;
   entitiesToSelect: CustomEntityForSelect[];
-  loading: boolean;
+  loading?: boolean;
+  onCancel?: () => void;
+  onEntitySelected: (entity?: CustomEntityForSelect) => void;
+  selectedEntity?: CustomEntityForSelect;
 };
 
 export function SingleEntitySelectBase<
   CustomEntityForSelect extends EntityForSelect,
 >({
-  entities,
-  onEntitySelected,
+  EmptyIcon,
+  emptyLabel,
+  entitiesToSelect,
+  loading,
   onCancel,
-  noUser,
-}: {
-  entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
-  onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
-  onCancel?: () => void;
-  noUser?: CustomEntityForSelect;
-}) {
+  onEntitySelected,
+  selectedEntity,
+}: SingleEntitySelectBaseProps<CustomEntityForSelect>) {
   const containerRef = useRef<HTMLDivElement>(null);
-  let entitiesInDropdown = isDefined(entities.selectedEntity)
-    ? [entities.selectedEntity, ...(entities.entitiesToSelect ?? [])]
-    : entities.entitiesToSelect ?? [];
-
-  entitiesInDropdown = entitiesInDropdown.filter((entity) =>
-    isNonEmptyString(entity.name),
+  const entitiesInDropdown = [selectedEntity, ...entitiesToSelect].filter(
+    (entity): entity is CustomEntityForSelect =>
+      assertNotNull(entity) && isNonEmptyString(entity.name.trim()),
   );
 
   const { hoveredIndex, resetScroll } = useEntitySelectScroll({
@@ -71,25 +69,16 @@ export function SingleEntitySelectBase<
     [onCancel],
   );
 
-  entitiesInDropdown = entitiesInDropdown.filter((entity) =>
-    isNonEmptyString(entity.name.trim()),
-  );
-
-  const NoUserIcon =
-    noUser?.entityType === Entity.User
-      ? IconUserCircle
-      : IconBuildingSkyscraper;
-
   return (
     <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
-      {noUser && (
+      {emptyLabel && (
         <MenuItem
-          onClick={() => onEntitySelected(noUser)}
-          LeftIcon={NoUserIcon}
-          text={noUser.name}
+          onClick={() => onEntitySelected()}
+          LeftIcon={EmptyIcon}
+          text={emptyLabel}
         />
       )}
-      {entities.loading ? (
+      {loading ? (
         <DropdownMenuSkeletonItem />
       ) : entitiesInDropdown.length === 0 ? (
         <MenuItem text="No result" />
@@ -98,7 +87,7 @@ export function SingleEntitySelectBase<
           <MenuItemSelectAvatar
             key={entity.id}
             testId="menu-item"
-            selected={entities.selectedEntity?.id === entity.id}
+            selected={selectedEntity?.id === entity.id}
             onClick={() => onEntitySelected(entity)}
             text={entity.name}
             hovered={hoveredIndex === entitiesInDropdown.indexOf(entity)}

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

@@ -0,0 +1,81 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconUserCircle } from '@/ui/icon';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
+import { mockedPeopleData } from '~/testing/mock-data/people';
+import { sleep } from '~/testing/sleep';
+
+import { relationPickerSearchFilterScopedState } from '../../states/relationPickerSearchFilterScopedState';
+import type { EntityForSelect } from '../../types/EntityForSelect';
+import { Entity } from '../../types/EntityTypeForSelect';
+import { SingleEntitySelect } from '../SingleEntitySelect';
+
+const entities = mockedPeopleData.map<EntityForSelect>((person) => ({
+  id: person.id,
+  entityType: Entity.Person,
+  name: person.displayName,
+}));
+
+const meta: Meta<typeof SingleEntitySelect> = {
+  title: 'UI/Input/RelationPicker/SingleEntitySelect',
+  component: SingleEntitySelect,
+  decorators: [ComponentDecorator, ComponentWithRecoilScopeDecorator],
+  argTypes: {
+    selectedEntity: {
+      options: entities.map(({ name }) => name),
+      mapping: entities.reduce(
+        (result, entity) => ({ ...result, [entity.name]: entity }),
+        {},
+      ),
+    },
+  },
+  render: function Render(args) {
+    const searchFilter = useRecoilScopedValue(
+      relationPickerSearchFilterScopedState,
+    );
+
+    return (
+      <SingleEntitySelect
+        {...args}
+        entitiesToSelect={entities.filter(
+          (entity) =>
+            entity.id !== args.selectedEntity?.id &&
+            entity.name.includes(searchFilter),
+        )}
+      />
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleEntitySelect>;
+
+export const Default: Story = {};
+
+export const WithSelectedEntity: Story = {
+  args: { selectedEntity: entities[2] },
+};
+
+export const WithEmptyOption: Story = {
+  args: {
+    EmptyIcon: IconUserCircle,
+    emptyLabel: 'Nobody',
+  },
+};
+
+export const WithSearchFilter: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const searchInput = canvas.getByRole('textbox');
+
+    await step('Enter search text', async () => {
+      await sleep(50);
+      await userEvent.type(searchInput, 'a');
+      await expect(searchInput).toHaveValue('a');
+    });
+  },
+};