Fix workspace favorites in storybook (#8519)

- create mock page when user not logged in
- add mocks when user logged in

Reset password story
<img width="1073" alt="Capture d’écran 2024-11-15 à 16 49 31"
src="https://github.com/user-attachments/assets/5d70d587-8094-47ad-8029-d8c729bd298d">

Record Index page story
<img width="1073" alt="Capture d’écran 2024-11-15 à 16 49 58"
src="https://github.com/user-attachments/assets/421772a9-62ee-4563-b492-5158db31fb9b">

Reset password page
<img width="1031" alt="Capture d’écran 2024-11-15 à 16 50 18"
src="https://github.com/user-attachments/assets/2d1cb119-5e34-49d0-9cfa-2b856a96f39c">

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx

@@ -0,0 +1,75 @@
+import { SupportDropdown } from '@/support/components/SupportDropdown';
+import {
+  NavigationDrawer,
+  NavigationDrawerProps,
+} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
+
+import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import styled from '@emotion/styled';
+import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+
+const StyledMainSection = styled(NavigationDrawerSection)`
+  min-height: fit-content;
+`;
+
+const WORKSPACE_FAVORITES = [
+  'person',
+  'company',
+  'opportunity',
+  'task',
+  'note',
+];
+
+export type SignInAppNavigationDrawerMockProps = {
+  className?: string;
+};
+
+export const SignInAppNavigationDrawerMock = ({
+  className,
+}: SignInAppNavigationDrawerMockProps) => {
+  const isMobile = useIsMobile();
+
+  const children = (
+    <>
+      {!isMobile && (
+        <StyledMainSection>
+          <NavigationDrawerItem
+            label="Search"
+            Icon={IconSearch}
+            onClick={() => {}}
+            keyboard={['⌘', 'K']}
+          />
+          <NavigationDrawerItem
+            label="Settings"
+            to={'/settings/profile'}
+            onClick={() => {}}
+            Icon={IconSettings}
+          />
+        </StyledMainSection>
+      )}
+      <NavigationDrawerSectionForObjectMetadataItems
+        sectionTitle={'Workspace'}
+        isRemote={false}
+        objectMetadataItems={generatedMockObjectMetadataItems.filter((item) =>
+          WORKSPACE_FAVORITES.includes(item.nameSingular),
+        )}
+      />
+    </>
+  );
+
+  const footer = <SupportDropdown />;
+
+  const drawerProps: NavigationDrawerProps = {
+    children,
+    footer,
+  };
+
+  return (
+    <NavigationDrawer className={className} footer={drawerProps.footer}>
+      {drawerProps.children}
+    </NavigationDrawer>
+  );
+};

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -6,6 +6,7 @@ import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
+import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
@@ -52,6 +53,10 @@ const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
   flex-shrink: 0;
 `;
 
+const StyledAppNavigationDrawerMock = styled(SignInAppNavigationDrawerMock)`
+  flex-shrink: 0;
+`;
+
 const StyledMainContainer = styled.div`
   display: flex;
   flex: 0 1 100%;
@@ -93,7 +98,11 @@ export const DefaultLayout = () => {
             duration: theme.animation.duration.normal,
           }}
         >
+          {showAuthModal ? (
+            <StyledAppNavigationDrawerMock />
+          ) : (
             <StyledAppNavigationDrawer />
+          )}
           <StyledMainContainer>
             {showAuthModal ? (
               <>

packages/twenty-front/src/testing/mock-data/favorite.ts

@@ -1,5 +1,6 @@
 import { companiesQueryResult } from '~/testing/mock-data/companies';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
+import { mockedViewsData } from '~/testing/mock-data/views';
 
 export const mockedFavoritesData = [
   {
@@ -33,4 +34,97 @@ export const mockedFavoritesData = [
     note: null,
     __typename: 'Favorite',
   },
+  {
+    id: '20202020-dede-koko-873b-de4264d89026',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+    position: 1,
+    recordId: null,
+    workflowId: null,
+    workflow: null,
+    workflowRunId: null,
+    workflowRun: null,
+    workflowVersionId: null,
+    workflowVersion: null,
+    workspaceMemberId: null,
+    workspaceMember: null,
+    companyId: null,
+    company: null,
+    viewId: mockedViewsData[0].id,
+    view: mockedViewsData[0],
+    taskId: null,
+    task: null,
+    rocketId: null,
+    rocket: null,
+    personId: null,
+    person: null,
+    opportunityId: null,
+    opportunity: null,
+    noteId: null,
+    note: null,
+    __typename: 'Favorite',
+  },
+  {
+    id: '20202020-dede-koko-873b-de4264d89026',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+    position: 1,
+    recordId: null,
+    workflowId: null,
+    workflow: null,
+    workflowRunId: null,
+    workflowRun: null,
+    workflowVersionId: null,
+    workflowVersion: null,
+    workspaceMemberId: null,
+    workspaceMember: null,
+    companyId: null,
+    company: null,
+    viewId: mockedViewsData[1].id,
+    view: mockedViewsData[1],
+    taskId: null,
+    task: null,
+    rocketId: null,
+    rocket: null,
+    personId: null,
+    person: null,
+    opportunityId: null,
+    opportunity: null,
+    noteId: null,
+    note: null,
+    __typename: 'Favorite',
+  },
+  {
+    id: '20202020-dede-koko-873b-de4264d89026',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+    position: 1,
+    recordId: null,
+    workflowId: null,
+    workflow: null,
+    workflowRunId: null,
+    workflowRun: null,
+    workflowVersionId: null,
+    workflowVersion: null,
+    workspaceMemberId: null,
+    workspaceMember: null,
+    companyId: null,
+    company: null,
+    viewId: mockedViewsData[1].id,
+    view: mockedViewsData[1],
+    taskId: null,
+    task: null,
+    rocketId: null,
+    rocket: null,
+    personId: null,
+    person: null,
+    opportunityId: null,
+    opportunity: null,
+    noteId: null,
+    note: null,
+    __typename: 'Favorite',
+  },
 ];

packages/twenty-front/src/testing/mock-data/views.ts

@@ -67,7 +67,7 @@ export const mockedViewsData = [
     objectMetadataId: companyObjectMetadata?.id,
     type: 'table',
     icon: 'IconSkyline',
-    key: 'INDEX',
+    key: null,
     kanbanFieldMetadataId: null,
     position: 0,
     createdAt: '2021-09-01T00:00:00.000Z',