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/companies/components/CompanyPickerCell.tsx

@@ -77,7 +77,13 @@ export function CompanyPickerCell({
       });
     setIsCreating(false);
   }
-
+  const noUser: EntityForSelect = {
+    entityType: Entity.Company,
+    id: '',
+    name: 'No Company',
+    avatarType: 'rounded',
+    avatarUrl: '',
+  };
   return isCreating ? (
     <DoubleTextCellEdit
       firstValue={searchFilter}
@@ -97,6 +103,7 @@ export function CompanyPickerCell({
         selectedEntity: companies.selectedEntities[0],
         loading: companies.loading,
       }}
+      noUser={noUser}
     />
   );
 }

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 },

front/src/modules/users/components/UserPicker.tsx

@@ -47,7 +47,13 @@ export function UserPicker({
   ) {
     onSubmit(selectedUser ?? null);
   }
-
+  const noUser: UserForSelect = {
+    entityType: Entity.User,
+    id: '',
+    name: 'No Owner',
+    avatarType: 'rounded',
+    avatarUrl: '',
+  };
   return (
     <SingleEntitySelect
       width={width}
@@ -58,6 +64,7 @@ export function UserPicker({
         entitiesToSelect: users.entitiesToSelect,
         selectedEntity: users.selectedEntities[0],
       }}
+      noUser={noUser}
     />
   );
 }

server/src/ability/ability.util.ts

@@ -74,6 +74,10 @@ const simpleAbilityCheck: OperationAbilityChecker = async (
 
   // Extract entity name from model name
   const entity = camelCase(modelName);
+  //TODO: Fix boolean data types so that disconnects are possible
+  if (typeof data === 'boolean') {
+    return true;
+  }
   // Handle all operations cases
   const operations = !Array.isArray(data) ? [data] : data;
   // Handle where case
@@ -139,7 +143,6 @@ export async function relationAbilityChecker(
         // Extract operation name and value
         const operationType = Object.keys(operation)[0] as OperationType;
         const operationValue = operation[operationType];
-
         // Get operation checker for the operation type
         const operationChecker = operationAbilityCheckers[operationType];