feat: view groups (#7176)

Fix #4244 and #4356

This pull request introduces the new "view groups" capability, enabling
the reordering, hiding, and showing of columns in Kanban mode. The core
enhancement includes the addition of a new entity named `ViewGroup`,
which manages column behaviors and interactions.

#### Key Changes:
1. **ViewGroup Entity**:  
The newly added `ViewGroup` entity is responsible for handling the
organization and state of columns.
This includes:
   - The ability to reorder columns.
- The option to hide or show specific columns based on user preferences.

#### Conclusion:
This PR adds a significant new feature that enhances the flexibility of
Kanban views through the `ViewGroup` entity.
We'll later add the view group logic to table view too.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx

@@ -16,6 +16,7 @@ import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useC
 import { PageBody } from '@/ui/layout/page/components/PageBody';
 import { PageContainer } from '@/ui/layout/page/components/PageContainer';
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { useRecoilCallback } from 'recoil';
 import { capitalize } from '~/utils/string/capitalize';
 
@@ -71,22 +72,26 @@ export const RecordIndexPage = () => {
           onCreateRecord: handleCreateRecord,
         }}
       >
-        <PageTitle title={`${capitalize(objectNamePlural)}`} />
-        <RecordIndexPageHeader />
-        <PageBody>
-          <StyledIndexContainer>
-            <ContextStoreComponentInstanceContext.Provider
-              value={{
-                instanceId: 'record-index',
-              }}
-            >
-              <RecordIndexContainerContextStoreObjectMetadataEffect />
-              <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
-              <SetMainContextStoreComponentInstanceIdEffect />
-              <RecordIndexContainer />
-            </ContextStoreComponentInstanceContext.Provider>
-          </StyledIndexContainer>
-        </PageBody>
+        <ViewComponentInstanceContext.Provider
+          value={{ instanceId: recordIndexId }}
+        >
+          <PageTitle title={`${capitalize(objectNamePlural)}`} />
+          <RecordIndexPageHeader />
+          <PageBody>
+            <StyledIndexContainer>
+              <ContextStoreComponentInstanceContext.Provider
+                value={{
+                  instanceId: 'record-index',
+                }}
+              >
+                <RecordIndexContainerContextStoreObjectMetadataEffect />
+                <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
+                <SetMainContextStoreComponentInstanceIdEffect />
+                <RecordIndexContainer />
+              </ContextStoreComponentInstanceContext.Provider>
+            </StyledIndexContainer>
+          </PageBody>
+        </ViewComponentInstanceContext.Provider>
       </RecordIndexRootPropsContext.Provider>
     </PageContainer>
   );

packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx

@@ -32,7 +32,7 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByText('People', undefined, { timeout: 3000 });
+    await canvas.findByText('People', undefined, { timeout: 10000 });
     await canvas.findByText('Linkedin');
   },
 };

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx

@@ -29,7 +29,7 @@ export const WithStandardSelected: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    await canvas.findByText('New Object');
+    await canvas.findByText('New Object', undefined, { timeout: 2000 });
 
     const listingInput = await canvas.findByPlaceholderText('Listing');
     const pluralInput = await canvas.findByPlaceholderText('Listings');