fix: right drawer top bar story, adding some decorator and state sett…

…er (#7580)

# Context
Fixes #7496 
Changed the title to `RightDrawerTopBar` instead of
`RightDrawerActivityTopBar`, following the component name.
Add some missing decorator, and add state setter effect.

# Screenshot

![image](https://github.com/user-attachments/assets/0c6ae774-4602-45ef-8b46-457b7c549ba0)

Missing coverages screenshot.

packages/twenty-front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -1,27 +1,56 @@
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { RightDrawerTopBar } from '../RightDrawerTopBar';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { useSetRecoilState } from 'recoil';
+import { rightDrawerPageState } from '@/ui/layout/right-drawer/states/rightDrawerPageState';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { useEffect } from 'react';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
+import { within } from '@storybook/test';
 
-import { RightDrawerTopBar } from '../RightDrawerTopBar';
+const RightDrawerTopBarStateSetterEffect = () => {
+  const setRightDrawerPage = useSetRecoilState(rightDrawerPageState);
+
+  const setIsRightDrawerMinimizedState = useSetRecoilState(
+    isRightDrawerMinimizedState,
+  );
+
+  useEffect(() => {
+    setRightDrawerPage(RightDrawerPages.ViewRecord);
+    setIsRightDrawerMinimizedState(false);
+  }, [setIsRightDrawerMinimizedState, setRightDrawerPage]);
+  return null;
+};
 
 const meta: Meta<typeof RightDrawerTopBar> = {
-  title: 'Modules/Activities/RightDrawer/RightDrawerActivityTopBar',
+  title: 'Modules/Activities/RightDrawer/RightDrawerTopBar',
   component: RightDrawerTopBar,
   decorators: [
     (Story) => (
       <div style={{ width: '500px' }}>
         <Story />
+        <RightDrawerTopBarStateSetterEffect />
       </div>
     ),
+    IconsProviderDecorator,
     ComponentWithRouterDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
   ],
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof RightDrawerTopBar>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    expect(await canvas.findByText('Company')).toBeInTheDocument();
+  },
+};