7499 refactor right drawer to have contextual actions (#7954)

Closes #7499 - Modifies context store states to be component states - Introduces the concept of `mainContextStore` which will dictate the available actions inside the command K - Adds contextual actions inside the right drawer - Creates a new type of modal variant
2024-10-22 18:35:45 +02:00
parent 6c93587efb
commit 6843a642b5
56 changed files with 718 additions and 418 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/ActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/ActionMenu.tsx
@ -1,30 +0,0 @@
-import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
-import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
-import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
-import { ActionMenuDropdown } from '@/action-menu/components/ActionMenuDropdown';
-import { ActionMenuEffect } from '@/action-menu/components/ActionMenuEffect';
-import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { useRecoilValue } from 'recoil';
-
-export const ActionMenu = ({ actionMenuId }: { actionMenuId: string }) => {
-  const contextStoreCurrentObjectMetadataId = useRecoilValue(
-    contextStoreCurrentObjectMetadataIdState,
-  );
-
-  return (
-    <>
-      {contextStoreCurrentObjectMetadataId && (
-        <ActionMenuComponentInstanceContext.Provider
-          value={{ instanceId: actionMenuId }}
-        >
-          <ActionMenuBar />
-          <ActionMenuDropdown />
-          <ActionMenuConfirmationModals />
-          <ActionMenuEffect />
-          <RecordActionMenuEntriesSetter />
-        </ActionMenuComponentInstanceContext.Provider>
-      )}
-    </>
-  );
-};
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
@ -0,0 +1,35 @@
+import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
+import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
+import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
+import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect';
+
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const RecordIndexActionMenu = ({
+  actionMenuId,
+}: {
+  actionMenuId: string;
+}) => {
+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+  );
+
+  return (
+    <>
+      {contextStoreCurrentObjectMetadataId && (
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: actionMenuId }}
+        >
+          <RecordIndexActionMenuBar />
+          <RecordIndexActionMenuDropdown />
+          <ActionMenuConfirmationModals />
+          <RecordIndexActionMenuEffect />
+          <RecordActionMenuEntriesSetter actionMenuType="recordIndex" />
+        </ActionMenuComponentInstanceContext.Provider>
+      )}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx
@ -1,14 +1,13 @@
 import styled from '@emotion/styled';

-import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry';
+import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
-import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useRecoilValue } from 'recoil';

 const StyledLabel = styled.div`
  color: ${({ theme }) => theme.font.color.tertiary};
@ -18,9 +17,9 @@ const StyledLabel = styled.div`
  padding-right: ${({ theme }) => theme.spacing(2)};
 `;

-export const ActionMenuBar = () => {
-  const contextStoreNumberOfSelectedRecords = useRecoilValue(
-    contextStoreNumberOfSelectedRecordsState,
+export const RecordIndexActionMenuBar = () => {
+  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
  );

  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
@ -44,7 +43,7 @@ export const ActionMenuBar = () => {
    >
      <StyledLabel>{contextStoreNumberOfSelectedRecords} selected:</StyledLabel>
      {actionMenuEntries.map((entry, index) => (
-        <ActionMenuBarEntry key={index} entry={entry} />
+        <RecordIndexActionMenuBarEntry key={index} entry={entry} />
      ))}
    </BottomBar>
  );
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx
@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';

-type ActionMenuBarEntryProps = {
+type RecordIndexActionMenuBarEntryProps = {
  entry: ActionMenuEntry;
 };

@ -35,7 +35,9 @@ const StyledButtonLabel = styled.div`
  margin-left: ${({ theme }) => theme.spacing(1)};
 `;

-export const ActionMenuBarEntry = ({ entry }: ActionMenuBarEntryProps) => {
+export const RecordIndexActionMenuBarEntry = ({
+  entry,
+}: RecordIndexActionMenuBarEntryProps) => {
  const theme = useTheme();
  return (
    <StyledButton
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
@ -3,9 +3,9 @@ import { useRecoilValue } from 'recoil';

 import { PositionType } from '../types/PositionType';

-import { actionMenuDropdownPositionComponentState } from '@/action-menu/states/actionMenuDropdownPositionComponentState';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
 import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDropdownHotKeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
@ -34,7 +34,7 @@ const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
  width: auto;
 `;

-export const ActionMenuDropdown = () => {
+export const RecordIndexActionMenuDropdown = () => {
  const actionMenuEntries = useRecoilComponentValueV2(
    actionMenuEntriesComponentSelector,
  );
@ -45,7 +45,7 @@ export const ActionMenuDropdown = () => {

  const actionMenuDropdownPosition = useRecoilValue(
    extractComponentState(
-      actionMenuDropdownPositionComponentState,
+      recordIndexActionMenuDropdownPositionComponentState,
      `action-menu-dropdown-${actionMenuId}`,
    ),
  );
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx
@ -1,15 +1,16 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';

-export const ActionMenuEffect = () => {
-  const contextStoreNumberOfSelectedRecords = useRecoilValue(
-    contextStoreNumberOfSelectedRecordsState,
+export const RecordIndexActionMenuEffect = () => {
+  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
  );

  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
@ -0,0 +1,31 @@
+import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
+import { RecordShowActionMenuBar } from '@/action-menu/components/RecordShowActionMenuBar';
+
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const RecordShowActionMenu = ({
+  actionMenuId,
+}: {
+  actionMenuId: string;
+}) => {
+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+  );
+
+  return (
+    <>
+      {contextStoreCurrentObjectMetadataId && (
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: actionMenuId }}
+        >
+          <RecordShowActionMenuBar />
+          <ActionMenuConfirmationModals />
+          <RecordActionMenuEntriesSetter actionMenuType="recordShow" />
+        </ActionMenuComponentInstanceContext.Provider>
+      )}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBar.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBar.tsx
@ -0,0 +1,16 @@
+import { RecordShowActionMenuBarEntry } from '@/action-menu/components/RecordShowActionMenuBarEntry';
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const RecordShowActionMenuBar = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+  return (
+    <>
+      {actionMenuEntries.map((actionMenuEntry) => (
+        <RecordShowActionMenuBarEntry entry={actionMenuEntry} />
+      ))}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
@ -0,0 +1,53 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+
+type RecordShowActionMenuBarEntryProps = {
+  entry: ActionMenuEntry;
+};
+
+const StyledButton = styled.div<{ accent: MenuItemAccent }>`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) =>
+    props.accent === 'danger'
+      ? props.theme.color.red
+      : props.theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme, accent }) =>
+      accent === 'danger'
+        ? theme.background.danger
+        : theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+// For now, this component is the same as RecordIndexActionMenuBarEntry but they
+// will probably diverge in the future
+export const RecordShowActionMenuBarEntry = ({
+  entry,
+}: RecordShowActionMenuBarEntryProps) => {
+  const theme = useTheme();
+  return (
+    <StyledButton
+      accent={entry.accent ?? 'default'}
+      onClick={() => entry.onClick?.()}
+    >
+      {entry.Icon && <entry.Icon size={theme.icon.size.md} />}
+      <StyledButtonLabel>{entry.label}</StyledButtonLabel>
+    </StyledButton>
+  );
+};
--- a/packages/twenty-front/src/modules/action-menu/components/stories/ActionMenuBar.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/ActionMenuBar.stories.tsx
@ -1,116 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import { Meta, StoryObj } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
-
-import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
-import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
-import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
-import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
-import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
-import { userEvent, waitFor, within } from '@storybook/test';
-import { IconCheckbox, IconTrash } from 'twenty-ui';
-
-const deleteMock = jest.fn();
-const markAsDoneMock = jest.fn();
-
-const meta: Meta<typeof ActionMenuBar> = {
-  title: 'Modules/ActionMenu/ActionMenuBar',
-  component: ActionMenuBar,
-  decorators: [
-    (Story) => (
-      <RecoilRoot
-        initializeState={({ set }) => {
-          set(contextStoreTargetedRecordsRuleState, {
-            mode: 'selection',
-            selectedRecordIds: ['1', '2', '3'],
-          });
-          set(contextStoreNumberOfSelectedRecordsState, 3);
-          set(
-            actionMenuEntriesComponentState.atomFamily({
-              instanceId: 'story-action-menu',
-            }),
-            new Map([
-              [
-                'delete',
-                {
-                  key: 'delete',
-                  label: 'Delete',
-                  position: 0,
-                  Icon: IconTrash,
-                  onClick: deleteMock,
-                },
-              ],
-              [
-                'markAsDone',
-                {
-                  key: 'markAsDone',
-                  label: 'Mark as done',
-                  position: 1,
-                  Icon: IconCheckbox,
-                  onClick: markAsDoneMock,
-                },
-              ],
-            ]),
-          );
-          set(
-            isBottomBarOpenedComponentState.atomFamily({
-              instanceId: 'action-bar-story-action-menu',
-            }),
-            true,
-          );
-        }}
-      >
-        <ActionMenuComponentInstanceContext.Provider
-          value={{ instanceId: 'story-action-menu' }}
-        >
-          <Story />
-        </ActionMenuComponentInstanceContext.Provider>
-      </RecoilRoot>
-    ),
-  ],
-  args: {
-    actionMenuId: 'story-action-menu',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ActionMenuBar>;
-
-export const Default: Story = {
-  args: {
-    actionMenuId: 'story-action-menu',
-  },
-};
-
-export const WithCustomSelection: Story = {
-  args: {
-    actionMenuId: 'story-action-menu',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const selectionText = await canvas.findByText('3 selected:');
-    expect(selectionText).toBeInTheDocument();
-  },
-};
-
-export const WithButtonClicks: Story = {
-  args: {
-    actionMenuId: 'story-action-menu',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const deleteButton = await canvas.findByText('Delete');
-    await userEvent.click(deleteButton);
-
-    const markAsDoneButton = await canvas.findByText('Mark as done');
-    await userEvent.click(markAsDoneButton);
-
-    await waitFor(() => {
-      expect(deleteMock).toHaveBeenCalled();
-      expect(markAsDoneMock).toHaveBeenCalled();
-    });
-  },
-};
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBar.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBar.stories.tsx
@ -0,0 +1,131 @@
+import { expect, jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+
+import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
+import { userEvent, waitFor, within } from '@storybook/test';
+import { IconCheckbox, IconTrash } from 'twenty-ui';
+
+const deleteMock = jest.fn();
+const markAsDoneMock = jest.fn();
+
+const meta: Meta<typeof RecordIndexActionMenuBar> = {
+  title: 'Modules/ActionMenu/RecordIndexActionMenuBar',
+  component: RecordIndexActionMenuBar,
+  decorators: [
+    (Story) => (
+      <ContextStoreComponentInstanceContext.Provider
+        value={{ instanceId: 'story-action-menu' }}
+      >
+        <RecoilRoot
+          initializeState={({ set }) => {
+            set(
+              contextStoreTargetedRecordsRuleComponentState.atomFamily({
+                instanceId: 'story-action-menu',
+              }),
+              {
+                mode: 'selection',
+                selectedRecordIds: ['1', '2', '3'],
+              },
+            );
+            set(
+              contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+                instanceId: 'story-action-menu',
+              }),
+              3,
+            );
+            set(
+              actionMenuEntriesComponentState.atomFamily({
+                instanceId: 'story-action-menu',
+              }),
+              new Map([
+                [
+                  'delete',
+                  {
+                    key: 'delete',
+                    label: 'Delete',
+                    position: 0,
+                    Icon: IconTrash,
+                    onClick: deleteMock,
+                  },
+                ],
+                [
+                  'markAsDone',
+                  {
+                    key: 'markAsDone',
+                    label: 'Mark as done',
+                    position: 1,
+                    Icon: IconCheckbox,
+                    onClick: markAsDoneMock,
+                  },
+                ],
+              ]),
+            );
+            set(
+              isBottomBarOpenedComponentState.atomFamily({
+                instanceId: 'action-bar-story-action-menu',
+              }),
+              true,
+            );
+          }}
+        >
+          <ActionMenuComponentInstanceContext.Provider
+            value={{ instanceId: 'story-action-menu' }}
+          >
+            <Story />
+          </ActionMenuComponentInstanceContext.Provider>
+        </RecoilRoot>
+      </ContextStoreComponentInstanceContext.Provider>
+    ),
+  ],
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecordIndexActionMenuBar>;
+
+export const Default: Story = {
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+};
+
+export const WithCustomSelection: Story = {
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const selectionText = await canvas.findByText('3 selected:');
+    expect(selectionText).toBeInTheDocument();
+  },
+};
+
+export const WithButtonClicks: Story = {
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const deleteButton = await canvas.findByText('Delete');
+    await userEvent.click(deleteButton);
+
+    const markAsDoneButton = await canvas.findByText('Mark as done');
+    await userEvent.click(markAsDoneButton);
+
+    await waitFor(() => {
+      expect(deleteMock).toHaveBeenCalled();
+      expect(markAsDoneMock).toHaveBeenCalled();
+    });
+  },
+};
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBarEntry.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBarEntry.stories.tsx
@ -1,19 +1,19 @@
+import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';

 import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
-import { ActionMenuBarEntry } from '../ActionMenuBarEntry';

-const meta: Meta<typeof ActionMenuBarEntry> = {
-  title: 'Modules/ActionMenu/ActionMenuBarEntry',
-  component: ActionMenuBarEntry,
+const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
+  title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry',
+  component: RecordIndexActionMenuBarEntry,
  decorators: [ComponentDecorator],
 };

 export default meta;

-type Story = StoryObj<typeof ActionMenuBarEntry>;
+type Story = StoryObj<typeof RecordIndexActionMenuBarEntry>;

 const deleteMock = jest.fn();
 const markAsDoneMock = jest.fn();
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuDropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuDropdown.stories.tsx
@ -3,10 +3,10 @@ import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import { RecoilRoot } from 'recoil';

-import { ActionMenuDropdown } from '@/action-menu/components/ActionMenuDropdown';
-import { actionMenuDropdownPositionComponentState } from '@/action-menu/states/actionMenuDropdownPositionComponentState';
+import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui';
@ -15,16 +15,16 @@ const deleteMock = jest.fn();
 const markAsDoneMock = jest.fn();
 const addToFavoritesMock = jest.fn();

-const meta: Meta<typeof ActionMenuDropdown> = {
-  title: 'Modules/ActionMenu/ActionMenuDropdown',
-  component: ActionMenuDropdown,
+const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
+  title: 'Modules/ActionMenu/RecordIndexActionMenuDropdown',
+  component: RecordIndexActionMenuDropdown,
  decorators: [
    (Story) => (
      <RecoilRoot
        initializeState={({ set }) => {
          set(
            extractComponentState(
-              actionMenuDropdownPositionComponentState,
+              recordIndexActionMenuDropdownPositionComponentState,
              'action-menu-dropdown-story',
            ),
            { x: 10, y: 10 },
@ -87,7 +87,7 @@ const meta: Meta<typeof ActionMenuDropdown> = {

 export default meta;

-type Story = StoryObj<typeof ActionMenuDropdown>;
+type Story = StoryObj<typeof RecordIndexActionMenuDropdown>;

 export const Default: Story = {
  args: {
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordShowActionMenuBar.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordShowActionMenuBar.stories.tsx
@ -0,0 +1,131 @@
+import { expect, jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+
+import { RecordShowActionMenuBar } from '@/action-menu/components/RecordShowActionMenuBar';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+import { userEvent, waitFor, within } from '@storybook/test';
+import {
+  ComponentDecorator,
+  IconFileExport,
+  IconHeart,
+  IconTrash,
+} from 'twenty-ui';
+
+const deleteMock = jest.fn();
+const addToFavoritesMock = jest.fn();
+const exportMock = jest.fn();
+
+const meta: Meta<typeof RecordShowActionMenuBar> = {
+  title: 'Modules/ActionMenu/RecordShowActionMenuBar',
+  component: RecordShowActionMenuBar,
+  decorators: [
+    (Story) => (
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(
+            contextStoreTargetedRecordsRuleComponentState.atomFamily({
+              instanceId: 'story-action-menu',
+            }),
+            {
+              mode: 'selection',
+              selectedRecordIds: ['1'],
+            },
+          );
+          set(
+            contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+              instanceId: 'story-action-menu',
+            }),
+            1,
+          );
+          set(
+            actionMenuEntriesComponentState.atomFamily({
+              instanceId: 'story-action-menu',
+            }),
+            new Map([
+              [
+                'addToFavorites',
+                {
+                  key: 'addToFavorites',
+                  label: 'Add to favorites',
+                  position: 0,
+                  Icon: IconHeart,
+                  onClick: addToFavoritesMock,
+                },
+              ],
+              [
+                'export',
+                {
+                  key: 'export',
+                  label: 'Export',
+                  position: 1,
+                  Icon: IconFileExport,
+                  onClick: exportMock,
+                },
+              ],
+              [
+                'delete',
+                {
+                  key: 'delete',
+                  label: 'Delete',
+                  position: 2,
+                  Icon: IconTrash,
+                  onClick: deleteMock,
+                  accent: 'danger' as MenuItemAccent,
+                },
+              ],
+            ]),
+          );
+        }}
+      >
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: 'story-action-menu' }}
+        >
+          <Story />
+        </ActionMenuComponentInstanceContext.Provider>
+      </RecoilRoot>
+    ),
+    ComponentDecorator,
+  ],
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecordShowActionMenuBar>;
+
+export const Default: Story = {
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+};
+
+export const WithButtonClicks: Story = {
+  args: {
+    actionMenuId: 'story-action-menu',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const deleteButton = await canvas.findByText('Delete');
+    await userEvent.click(deleteButton);
+
+    const addToFavoritesButton = await canvas.findByText('Add to favorites');
+    await userEvent.click(addToFavoritesButton);
+
+    const exportButton = await canvas.findByText('Export');
+    await userEvent.click(exportButton);
+
+    await waitFor(() => {
+      expect(deleteMock).toHaveBeenCalled();
+      expect(addToFavoritesMock).toHaveBeenCalled();
+      expect(exportMock).toHaveBeenCalled();
+    });
+  },
+};