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.
2024-12-22 19:41:53 +03:00 · 2024-12-11 11:51:33 +01:00 · 2024-12-11 11:51:33 +01:00 · 5c60a5511e
commit 5c60a5511e
parent 89f6f32243
11 changed files with 107 additions and 51 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
+++ b/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: () => {},
          }}
        >
-          <RecordIndexActionMenuBar />
+          {isPageHeaderV2Enabled ? (
+            <RecordIndexActionMenuButtons />
+          ) : (
+            <RecordIndexActionMenuBar />
+          )}
          <RecordIndexActionMenuDropdown />
          <ActionMenuConfirmationModals />
          <RecordIndexActionMenuEffect />
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx
+++ b/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;
  }
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx
+++ b/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} />}
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx
+++ b/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}
+        />
+      ))}
+    </>
+  );
+};
--- 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
@ -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();
    });
--- 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
@ -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>;
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+++ b/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>
  );
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/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
-    ? !isObjectMetadataReadOnly(objectMetadataItem)
-    : false;
+  const numberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
+
+  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>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyUnselectEffect.tsx
+++ b/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],
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/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
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
@ -77,28 +77,28 @@ export const RecordIndexPage = () => {
        <ViewComponentInstanceContext.Provider
          value={{ instanceId: recordIndexId }}
        >
-          <PageTitle title={`${capitalize(objectNamePlural)}`} />
-          <RecordIndexPageHeader />
-          <PageBody>
-            <StyledIndexContainer>
-              <ContextStoreComponentInstanceContext.Provider
-                value={{
-                  instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-                }}
-              >
-                <ActionMenuComponentInstanceContext.Provider
-                  value={{
-                    instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-                  }}
-                >
+          <ContextStoreComponentInstanceContext.Provider
+            value={{
+              instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
+            }}
+          >
+            <ActionMenuComponentInstanceContext.Provider
+              value={{
+                instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
+              }}
+            >
+              <PageTitle title={`${capitalize(objectNamePlural)}`} />
+              <RecordIndexPageHeader />
+              <PageBody>
+                <StyledIndexContainer>
                  <RecordIndexContainerContextStoreObjectMetadataEffect />
                  <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
                  <MainContextStoreComponentInstanceIdSetterEffect />
                  <RecordIndexContainer />
-                </ActionMenuComponentInstanceContext.Provider>
-              </ContextStoreComponentInstanceContext.Provider>
-            </StyledIndexContainer>
-          </PageBody>
+                </StyledIndexContainer>
+              </PageBody>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
        </ViewComponentInstanceContext.Provider>
      </RecordIndexRootPropsContext.Provider>
    </PageContainer>