Unset companies and owners (#1185)

* unselect users and companies

* Icon now works with theme

---------

Co-authored-by: vboxuser <vboxuser@Ubu.myguest.virtualbox.org>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

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

@@ -27,6 +27,7 @@ export function SingleEntitySelect<
   onCancel,
   width,
   disableBackgroundBlur = false,
+  noUser,
 }: {
   onCancel?: () => void;
   onCreate?: () => void;
@@ -34,6 +35,7 @@ export function SingleEntitySelect<
   onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
   disableBackgroundBlur?: boolean;
   width?: number;
+  noUser?: CustomEntityForSelect;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -53,7 +55,6 @@ export function SingleEntitySelect<
       onCancel?.();
     },
   });
-
   return (
     <StyledDropdownMenu
       disableBlur={disableBackgroundBlur}
@@ -70,6 +71,7 @@ export function SingleEntitySelect<
         entities={entities}
         onEntitySelected={onEntitySelected}
         onCancel={onCancel}
+        noUser={noUser}
       />
       {showCreateButton && (
         <>

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

@@ -1,8 +1,10 @@
 import { useRef } from 'react';
+import { useTheme } from '@emotion/react';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { IconBuildingSkyscraper, IconUserCircle } from '@/ui/icon';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -12,6 +14,7 @@ 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';
@@ -30,10 +33,12 @@ export function SingleEntitySelectBase<
   entities,
   onEntitySelected,
   onCancel,
+  noUser,
 }: {
   entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
   onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
   onCancel?: () => void;
+  noUser?: CustomEntityForSelect;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   let entitiesInDropdown = isDefined(entities.selectedEntity)
@@ -71,9 +76,22 @@ export function SingleEntitySelectBase<
   entitiesInDropdown = entitiesInDropdown.filter((entity) =>
     isNonEmptyString(entity.name.trim()),
   );
+  const theme = useTheme();
 
   return (
     <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+      {noUser && (
+        <DropdownMenuItem onClick={() => onEntitySelected(noUser)}>
+          {noUser.entityType === Entity.User ? (
+            <IconUserCircle size={theme.icon.size.md} />
+          ) : (
+            <IconBuildingSkyscraper
+              size={theme.icon.size.md}
+            ></IconBuildingSkyscraper>
+          )}
+          {noUser.name}
+        </DropdownMenuItem>
+      )}
       {entities.loading ? (
         <DropdownMenuSkeletonItem />
       ) : entitiesInDropdown.length === 0 ? (

front/src/modules/ui/table/hooks/useUpdateEntityField.ts

@@ -91,8 +91,7 @@ export function useUpdateEntityField() {
       const newSelectedEntity = newFieldValueUnknown;
 
       const fieldName = viewField.metadata.fieldName;
-
-      if (!newSelectedEntity) {
+      if (!newSelectedEntity || newSelectedEntity.id === '') {
         updateEntity({
           variables: {
             where: { id: currentEntityId },