Fix storybook / chromatic tests flakyness and integration tests (#11687)

## Storybook flakyness

### Actor Display image flakyness

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/875c0738-5e31-4aba-9231-4ba5f78d1355"
/>

**Fix:** stop using a random usage

### Task Groups broken

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/c67e47a1-a027-43f1-9601-68d61a8052b4"
/>

**Fix:** add missing TabListComponentInstance

## Flaky dates

Add https://github.com/k35o/storybook-addon-mock-date

## Integration tests

Fix broken tests due to relation refactoring

packages/twenty-front/src/modules/activities/tasks/components/ObjectTasks.tsx

@@ -12,11 +12,11 @@ const StyledContainer = styled.div`
   overflow: auto;
 `;
 
-export const ObjectTasks = ({
-  targetableObject,
-}: {
+type ObjectTasksProps = {
   targetableObject: ActivityTargetableObject;
-}) => {
+};
+
+export const ObjectTasks = ({ targetableObject }: ObjectTasksProps) => {
   return (
     <StyledContainer>
       <ObjectFilterDropdownComponentInstanceContext.Provider

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { TabListComponentInstanceContext } from '@/ui/layout/tab/states/contexts/TabListComponentInstanceContext';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -15,11 +16,15 @@ const meta: Meta<typeof TaskGroups> = {
   component: TaskGroups,
   decorators: [
     (Story) => (
-      <ObjectFilterDropdownComponentInstanceContext.Provider
+      <TabListComponentInstanceContext.Provider
         value={{ instanceId: 'entity-tasks-filter-scope' }}
       >
-        <Story />
-      </ObjectFilterDropdownComponentInstanceContext.Provider>
+        <ObjectFilterDropdownComponentInstanceContext.Provider
+          value={{ instanceId: 'entity-tasks-filter-scope' }}
+        >
+          <Story />
+        </ObjectFilterDropdownComponentInstanceContext.Provider>
+      </TabListComponentInstanceContext.Provider>
     ),
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,

packages/twenty-front/src/modules/command-menu/hooks/useFilterActionsWithCommandMenuSearch.ts

@@ -1,38 +1,39 @@
 import { ActionConfig } from '@/action-menu/actions/types/ActionConfig';
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
 import { isNonEmptyString } from '@sniptt/guards';
-import { useDebounce } from 'use-debounce';
+import { useCallback } from 'react';
+
+const checkInShortcuts = (action: ActionConfig, search: string) => {
+  const concatenatedString = action.hotKeys?.join('') ?? '';
+  return concatenatedString.toLowerCase().includes(search.toLowerCase().trim());
+};
+
+const checkInLabels = (action: ActionConfig, search: string) => {
+  const actionLabel = getActionLabel(action.label);
+  if (isNonEmptyString(actionLabel)) {
+    return actionLabel.toLowerCase().includes(search.toLowerCase());
+  }
+  return false;
+};
+
+type UseFilterActionsWithCommandMenuSearchProps = {
+  commandMenuSearch: string;
+};
 
 export const useFilterActionsWithCommandMenuSearch = ({
   commandMenuSearch,
-}: {
-  commandMenuSearch: string;
-}) => {
-  const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
-
-  const checkInShortcuts = (action: ActionConfig, search: string) => {
-    const concatenatedString = action.hotKeys?.join('') ?? '';
-    return concatenatedString
-      .toLowerCase()
-      .includes(search.toLowerCase().trim());
-  };
-
-  const checkInLabels = (action: ActionConfig, search: string) => {
-    const actionLabel = getActionLabel(action.label);
-    if (isNonEmptyString(actionLabel)) {
-      return actionLabel.toLowerCase().includes(search.toLowerCase());
-    }
-    return false;
-  };
-
-  const filterActionsWithCommandMenuSearch = (actions: ActionConfig[]) => {
-    return actions.filter((action) =>
-      deferredCommandMenuSearch.length > 0
-        ? checkInShortcuts(action, deferredCommandMenuSearch) ||
-          checkInLabels(action, deferredCommandMenuSearch)
-        : true,
-    );
-  };
+}: UseFilterActionsWithCommandMenuSearchProps) => {
+  const filterActionsWithCommandMenuSearch = useCallback(
+    (actions: ActionConfig[]) => {
+      return actions.filter((action) =>
+        commandMenuSearch.length > 0
+          ? checkInShortcuts(action, commandMenuSearch) ||
+            checkInLabels(action, commandMenuSearch)
+          : true,
+      );
+    },
+    [commandMenuSearch],
+  );
 
   return {
     filterActionsWithCommandMenuSearch,

packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts

@@ -4,6 +4,7 @@ import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
 import { FieldMetadataItem } from '../types/FieldMetadataItem';
 import { formatFieldMetadataItemInput } from '../utils/formatFieldMetadataItemInput';
 
+import { isDefined } from 'twenty-shared/utils';
 import { useCreateOneFieldMetadataItem } from './useCreateOneFieldMetadataItem';
 import { useDeleteOneFieldMetadataItem } from './useDeleteOneFieldMetadataItem';
 import { useUpdateOneFieldMetadataItem } from './useUpdateOneFieldMetadataItem';
@@ -63,7 +64,8 @@ export const useFieldMetadataItem = () => {
     });
 
   const deleteMetadataField = (metadataField: FieldMetadataItem) => {
-    return metadataField.type === FieldMetadataType.RELATION
+    return metadataField.type === FieldMetadataType.RELATION &&
+      !isDefined(metadataField.settings?.relationType)
       ? deleteOneRelationMetadataItem(
           metadataField.relationDefinition?.relationId,
         )

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx

@@ -15,16 +15,16 @@ import { tableColumnsComponentState } from '@/object-record/record-table/states/
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { within } from '@storybook/test';
+import {
+  ComponentDecorator,
+  getCanvasElementForDropdownTesting,
+} from 'twenty-ui/testing';
 import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
-import {
-  ComponentDecorator,
-  getCanvasElementForDropdownTesting,
-} from 'twenty-ui/testing';
 
 const meta: Meta<typeof MultipleFiltersDropdownButton> = {
   title:

packages/twenty-front/src/modules/ui/field/display/components/__stories__/ActorDisplay.stories.tsx

@@ -37,7 +37,7 @@ export const Catalog: Story = {
         },
         {
           name: 'avatarUrl',
-          values: [null, 'https://picsum.photos/16'],
+          values: [null, 'https://picsum.photos/id/237/16/16'],
           props: (avatarUrl: string) => ({ avatarUrl }),
         },
       ],