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.
This commit is contained in:
Raphaël Bosi 2024-12-11 11:51:33 +01:00 committed by GitHub
parent 89f6f32243
commit 5c60a5511e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 107 additions and 51 deletions

View File

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

View File

@ -1,5 +1,3 @@
import styled from '@emotion/styled';
import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton'; import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton';
import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry'; import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; 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 { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
const StyledLabel = styled.div` const StyledLabel = styled.div`
color: ${({ theme }) => theme.font.color.tertiary}; color: ${({ theme }) => theme.font.color.tertiary};
@ -33,7 +32,6 @@ export const RecordIndexActionMenuBar = () => {
); );
const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
if (contextStoreNumberOfSelectedRecords === 0) { if (contextStoreNumberOfSelectedRecords === 0) {
return null; return null;
} }

View File

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

View File

@ -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}
/>
))}
</>
);
};

View File

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

View File

@ -6,7 +6,6 @@ import {
import { expect, jest } from '@storybook/jest'; import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library'; import { userEvent, within } from '@storybook/testing-library';
import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui'; import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
const meta: Meta<typeof RecordIndexActionMenuBarEntry> = { const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
@ -14,7 +13,6 @@ const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
component: RecordIndexActionMenuBarEntry, component: RecordIndexActionMenuBarEntry,
decorators: [ComponentDecorator], decorators: [ComponentDecorator],
}; };
export default meta; export default meta;
type Story = StoryObj<typeof RecordIndexActionMenuBarEntry>; type Story = StoryObj<typeof RecordIndexActionMenuBarEntry>;

View File

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

View File

@ -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 { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly'; import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
import { RecordIndexPageKanbanAddButton } from '@/object-record/record-index/components/RecordIndexPageKanbanAddButton'; 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 { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader'; import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/components/PageHotkeysEffect'; 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 { ViewType } from '@/views/types/ViewType';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useContext } from 'react'; import { useContext } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui'; import { isDefined, useIcons } from 'twenty-ui';
import { capitalize } from '~/utils/string/capitalize'; import { capitalize } from '~/utils/string/capitalize';
export const RecordIndexPageHeader = () => { export const RecordIndexPageHeader = () => {
@ -32,9 +35,21 @@ export const RecordIndexPageHeader = () => {
const recordIndexViewType = useRecoilValue(recordIndexViewTypeState); 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; const isTable = recordIndexViewType === ViewType.Table;
@ -45,20 +60,23 @@ export const RecordIndexPageHeader = () => {
onCreateRecord(); onCreateRecord();
}; };
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);
return ( return (
<PageHeader title={pageHeaderTitle} Icon={Icon}> <PageHeader title={pageHeaderTitle} Icon={Icon}>
<PageHotkeysEffect onAddButtonClick={handleAddButtonClick} /> <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
{shouldDisplayAddButton && {shouldDisplayAddButton &&
(isTable ? ( (isTable ? (
<PageAddButton onClick={handleAddButtonClick} /> <PageAddButton onClick={handleAddButtonClick} />
) : ( ) : (
<RecordIndexPageKanbanAddButton /> <RecordIndexPageKanbanAddButton />
))} ))}
{isPageHeaderV2Enabled && <PageHeaderOpenCommandMenuButton />}
{isPageHeaderV2Enabled && (
<>
<RecordIndexActionMenu />
<PageHeaderOpenCommandMenuButton />
</>
)}
</PageHeader> </PageHeader>
); );
}; };

View File

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

View File

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

View File

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