8929 move recordindexactionmenu menu inside the recordindexpageheader (#9007)

Closes #8929 

Users with the feature flag `IS_PAGE_HEADER_V2_ENABLED` set to false
will still have the old behavior with the action bar.

To test the PR, test with and without the feature flag.

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -2,6 +2,7 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-acti
 import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
+import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons';
 import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
 import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
@@ -17,6 +18,10 @@ export const RecordIndexActionMenu = () => {
 
   const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
 
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
   return (
     <>
       {contextStoreCurrentObjectMetadataId && (
@@ -26,7 +31,11 @@ export const RecordIndexActionMenu = () => {
             onActionExecutedCallback: () => {},
           }}
         >
+          {isPageHeaderV2Enabled ? (
+            <RecordIndexActionMenuButtons />
+          ) : (
             <RecordIndexActionMenuBar />
+          )}
           <RecordIndexActionMenuDropdown />
           <ActionMenuConfirmationModals />
           <RecordIndexActionMenuEffect />

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton';
 import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
@@ -10,6 +8,7 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 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 styled from '@emotion/styled';
 
 const StyledLabel = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -33,7 +32,6 @@ export const RecordIndexActionMenuBar = () => {
   );
 
   const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
-
   if (contextStoreNumberOfSelectedRecords === 0) {
     return null;
   }

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx

@@ -1,8 +1,7 @@
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
-
 type RecordIndexActionMenuBarEntryProps = {
   entry: ActionMenuEntry;
 };
@@ -13,11 +12,9 @@ const StyledButton = styled.div`
   cursor: pointer;
   display: flex;
   justify-content: center;
-
   padding: ${({ theme }) => theme.spacing(2)};
   transition: background ${({ theme }) => theme.animation.duration.fast} ease;
   user-select: none;
-
   &:hover {
     background: ${({ theme }) => theme.background.tertiary};
   }
@@ -32,6 +29,7 @@ export const RecordIndexActionMenuBarEntry = ({
   entry,
 }: RecordIndexActionMenuBarEntryProps) => {
   const theme = useTheme();
+
   return (
     <StyledButton onClick={() => entry.onClick?.()}>
       {entry.Icon && <entry.Icon size={theme.icon.size.md} />}

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx

@@ -0,0 +1,37 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { Button } from 'twenty-ui';
+
+export const RecordIndexActionMenuButtons = () => {
+  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
+
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  if (contextStoreNumberOfSelectedRecords === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {pinnedEntries.map((entry, index) => (
+        <Button
+          key={index}
+          Icon={entry.Icon}
+          size="small"
+          variant="secondary"
+          accent="default"
+          title={entry.label}
+          onClick={() => entry.onClick?.()}
+          ariaLabel={entry.label}
+        />
+      ))}
+    </>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx

@@ -1,7 +1,3 @@
-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';
@@ -11,11 +7,14 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
-import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
+import { expect, jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/test';
+import { RecoilRoot } from 'recoil';
 import { IconTrash, RouterDecorator } from 'twenty-ui';
 
 const deleteMock = jest.fn();
@@ -40,16 +39,13 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
                 selectedRecordIds: ['1', '2', '3'],
               },
             );
-
             set(
               contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
                 instanceId: 'story-action-menu',
               }),
               3,
             );
-
             const map = new Map<string, ActionMenuEntry>();
-
             map.set('delete', {
               isPinned: true,
               scope: ActionMenuEntryScope.RecordSelection,
@@ -60,14 +56,12 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
               Icon: IconTrash,
               onClick: deleteMock,
             });
-
             set(
               actionMenuEntriesComponentState.atomFamily({
                 instanceId: 'story-action-menu',
               }),
               map,
             );
-
             set(
               isBottomBarOpenedComponentState.atomFamily({
                 instanceId: getActionBarIdFromActionMenuId('story-action-menu'),
@@ -117,10 +111,8 @@ export const WithButtonClicks: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-
     const deleteButton = await canvas.findByText('Delete');
     await userEvent.click(deleteButton);
-
     await waitFor(() => {
       expect(deleteMock).toHaveBeenCalled();
     });

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx

@@ -6,7 +6,6 @@ import {
 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';
 
 const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
@@ -14,7 +13,6 @@ const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
   component: RecordIndexActionMenuBarEntry,
   decorators: [ComponentDecorator],
 };
-
 export default meta;
 
 type Story = StoryObj<typeof RecordIndexActionMenuBarEntry>;

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -38,6 +38,7 @@ import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToC
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewGroupsToRecordGroupDefinitions } from '@/views/utils/mapViewGroupsToRecordGroupDefinitions';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useCallback, useContext } from 'react';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
@@ -158,6 +159,10 @@ export const RecordIndexContainer = () => {
     contextStoreTargetedRecordsRuleComponentState,
   );
 
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
   return (
     <StyledContainer>
       <InformationBannerWrapper />
@@ -240,7 +245,7 @@ export const RecordIndexContainer = () => {
             <RecordIndexBoardDataLoaderEffect recordBoardId={recordIndexId} />
           </StyledContainerWithPadding>
         )}
-        <RecordIndexActionMenu />
+        {!isPageHeaderV2Enabled && <RecordIndexActionMenu />}
       </RecordFieldValueSelectorContextProvider>
     </StyledContainer>
   );

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx

@@ -1,3 +1,5 @@
+import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { RecordIndexPageKanbanAddButton } from '@/object-record/record-index/components/RecordIndexPageKanbanAddButton';
@@ -7,11 +9,12 @@ import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/compone
 import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
 import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { PageHotkeysEffect } from '@/ui/layout/page/components/PageHotkeysEffect';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
+import { isDefined, useIcons } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';
 
 export const RecordIndexPageHeader = () => {
@@ -32,9 +35,21 @@ export const RecordIndexPageHeader = () => {
 
   const recordIndexViewType = useRecoilValue(recordIndexViewTypeState);
 
-  const shouldDisplayAddButton = objectMetadataItem
+  const numberOfSelectedRecords = useRecoilComponentValueV2(
-    ? !isObjectMetadataReadOnly(objectMetadataItem)
+    contextStoreNumberOfSelectedRecordsComponentState,
-    : false;
+  );
+
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
+  const isObjectMetadataItemReadOnly =
+    isDefined(objectMetadataItem) &&
+    isObjectMetadataReadOnly(objectMetadataItem);
+
+  const shouldDisplayAddButton =
+    (numberOfSelectedRecords === 0 || !isPageHeaderV2Enabled) &&
+    !isObjectMetadataItemReadOnly;
 
   const isTable = recordIndexViewType === ViewType.Table;
 
@@ -45,20 +60,23 @@ export const RecordIndexPageHeader = () => {
     onCreateRecord();
   };
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    'IS_PAGE_HEADER_V2_ENABLED',
-  );
-
   return (
     <PageHeader title={pageHeaderTitle} Icon={Icon}>
       <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
+
       {shouldDisplayAddButton &&
         (isTable ? (
           <PageAddButton onClick={handleAddButtonClick} />
         ) : (
           <RecordIndexPageKanbanAddButton />
         ))}
-      {isPageHeaderV2Enabled && <PageHeaderOpenCommandMenuButton />}
+
+      {isPageHeaderV2Enabled && (
+        <>
+          <RecordIndexActionMenu />
+          <PageHeaderOpenCommandMenuButton />
+        </>
+      )}
     </PageHeader>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyUnselectEffect.tsx

@@ -38,6 +38,7 @@ export const RecordTableBodyUnselectEffect = ({
       'action-menu-dropdown',
       'command-menu',
       'modal-backdrop',
+      'page-action-container',
     ],
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],

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

@@ -165,7 +165,7 @@ export const PageHeader = ({
         </StyledTopBarIconStyledTitleContainer>
       </StyledLeftContainer>
 
-      <StyledPageActionContainer>
+      <StyledPageActionContainer className="page-action-container">
         {isPageHeaderV2Enabled && hasPaginationButtons && (
           <>
             <IconButton

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

@@ -77,10 +77,6 @@ export const RecordIndexPage = () => {
         <ViewComponentInstanceContext.Provider
           value={{ instanceId: recordIndexId }}
         >
-          <PageTitle title={`${capitalize(objectNamePlural)}`} />
-          <RecordIndexPageHeader />
-          <PageBody>
-            <StyledIndexContainer>
           <ContextStoreComponentInstanceContext.Provider
             value={{
               instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
@@ -91,14 +87,18 @@ export const RecordIndexPage = () => {
                 instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
               }}
             >
+              <PageTitle title={`${capitalize(objectNamePlural)}`} />
+              <RecordIndexPageHeader />
+              <PageBody>
+                <StyledIndexContainer>
                   <RecordIndexContainerContextStoreObjectMetadataEffect />
                   <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
                   <MainContextStoreComponentInstanceIdSetterEffect />
                   <RecordIndexContainer />
-                </ActionMenuComponentInstanceContext.Provider>
-              </ContextStoreComponentInstanceContext.Provider>
                 </StyledIndexContainer>
               </PageBody>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
         </ViewComponentInstanceContext.Provider>
       </RecordIndexRootPropsContext.Provider>
     </PageContainer>