Fix CI errored tasks for front (#6806)

In this PR:
- revert de-optimization of icons bundle for storybook. This was forcing
the browser to load ~3k files while running stories
- adding lazy loading on Settings route to improve developer experience
(some files will be loaded later)
- fix FE tests: unit, modules stories, pages stories

---------

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

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -27,6 +27,7 @@ export const ObjectFilterDropdownDateInput = () => {
   const [internalDate, setInternalDate] = useState<Date | null>(
     selectedFilter?.value ? new Date(selectedFilter.value) : new Date(),
   );
+
   const handleChange = (date: Date | null) => {
     setInternalDate(date);
 

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
 

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

@@ -0,0 +1,118 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
+import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { within } from '@storybook/test';
+import { ComponentDecorator } from 'twenty-ui';
+import { FieldMetadataType } from '~/generated/graphql';
+import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+const meta: Meta<typeof MultipleFiltersDropdownButton> = {
+  title:
+    'Modules/ObjectRecord/ObjectFilterDropdown/MultipleFiltersDropdownButton',
+  component: MultipleFiltersDropdownButton,
+  decorators: [
+    (Story) => {
+      const { setAvailableFilterDefinitions } = useFilterDropdown({
+        filterDropdownId: 'entity-tasks-filter-scope',
+      });
+      setAvailableFilterDefinitions([
+        {
+          fieldMetadataId: '1',
+          iconName: 'IconUser',
+          label: 'Text',
+          type: FieldMetadataType.Text,
+        },
+        {
+          fieldMetadataId: '2',
+          iconName: 'Icon123',
+          label: 'Email',
+          type: FieldMetadataType.Email,
+        },
+        {
+          fieldMetadataId: '3',
+          iconName: 'IconNumber',
+          label: 'Number',
+          type: FieldMetadataType.Number,
+        },
+        {
+          fieldMetadataId: '3',
+          iconName: 'IconCalendar',
+          label: 'Date',
+          type: FieldMetadataType.DateTime,
+        },
+      ]);
+      return (
+        <ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
+          <Story />
+        </ObjectFilterDropdownScope>
+      );
+    },
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    ComponentDecorator,
+    IconsProviderDecorator,
+  ],
+  args: {
+    hotkeyScope: {
+      scope: 'object-filter-dropdown',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskGroups>;
+
+export const Default: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    const filterButton = await canvas.findByText('Filter');
+
+    filterButton.click();
+
+    const textFilter = await canvas.findByText('Text');
+
+    textFilter.click();
+
+    const operatorDropdown = await canvas.findByText('Contains');
+
+    operatorDropdown.click();
+
+    const containsOption = await canvas.findByText("Doesn't contain");
+
+    containsOption.click();
+  },
+};
+
+export const Date: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    const filterButton = await canvas.findByText('Filter');
+
+    filterButton.click();
+
+    const dateFilter = await canvas.findByText('Date');
+
+    dateFilter.click();
+  },
+};
+
+export const Number: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    const filterButton = await canvas.findByText('Filter');
+
+    filterButton.click();
+
+    const dateFilter = await canvas.findByText('Number');
+
+    dateFilter.click();
+  },
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx

@@ -29,6 +29,6 @@ export const Default: Story = {};
 export const Performance = getProfilingStory({
   componentName: 'RatingFieldDisplay',
   averageThresholdInMs: 0.5,
-  numberOfRuns: 50,
+  numberOfRuns: 30,
   numberOfTestsPerRun: 100,
 });

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import {
   expect,
@@ -8,6 +7,7 @@ import {
   waitFor,
   within,
 } from '@storybook/test';
+import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -141,7 +141,9 @@ export const Submit: Story = {
 
     expect(submitJestFn).toHaveBeenCalledTimes(0);
 
-    const item = await canvas.findByText('John Wick');
+    const item = await canvas.findByText('John Wick', undefined, {
+      timeout: 3000,
+    });
 
     await waitFor(() => {
       userEvent.click(item);
@@ -156,7 +158,7 @@ export const Cancel: Story = {
     const canvas = within(canvasElement);
 
     expect(cancelJestFn).toHaveBeenCalledTimes(0);
-    await canvas.findByText('John Wick');
+    await canvas.findByText('John Wick', undefined, { timeout: 3000 });
 
     const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
     fireEvent.click(emptyDiv);

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts

@@ -61,12 +61,7 @@ export const useHandleToggleTrashColumnFilter = ({
     };
 
     upsertCombinedViewFilter(newFilter);
-  }, [
-    columnDefinitions,
-    objectMetadataItem,
-    objectNameSingular,
-    upsertCombinedViewFilter,
-  ]);
+  }, [columnDefinitions, objectMetadataItem, upsertCombinedViewFilter]);
 
   return handleToggleTrashColumnFilter;
 };