admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate right drawer record page to the command menu (#9459)

Browse Source 
Closes #9423



https://github.com/user-attachments/assets/0d93f170-8c4f-43ff-a0ca-3d2874d44820
This commit is contained in:
Raphaël Bosi
2025-01-09 09:58:14 +01:00
committed by GitHub
parent e0e436a51d
commit a2f2f4148a
37 changed files with 400 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
View File

@ -7,15 +7,15 @@ import { FeatureFlagKey } from '~/generated/graphql';
export const PageHeaderOpenCommandMenuButton = () => {
const { openCommandMenu } = useCommandMenu();
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const isMobile = useIsMobile();
return (
<>
{isPageHeaderV2Enabled ? (
{isCommandMenuV2Enabled ? (
<Button
Icon={IconDotsVertical}
dataTestId="page-header-open-command-menu-button"

4
packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
View File

@ -1,5 +1,5 @@
import { AuthModal } from '@/auth/components/AuthModal';
import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
@ -82,7 +82,7 @@ export const DefaultLayout = () => {
<StyledLayout>
{!showAuthModal && (
<>
<CommandMenuContainer />
<CommandMenuRouter />
<KeyboardShortcutMenu />
</>
)}

6
packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
View File

@ -7,14 +7,14 @@ type PageAddButtonProps = {
};
export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const isMobile = useIsMobile();
return (
<>
{isPageHeaderV2Enabled ? (
{isCommandMenuV2Enabled ? (
<Button
Icon={IconPlus}
dataTestId="add-button"

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

@ -111,8 +111,8 @@ export const PageHeader = ({
isNavigationDrawerExpandedState,
);
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
return (
@ -133,7 +133,7 @@ export const PageHeader = ({
)}
<StyledTopBarIconStyledTitleContainer>
{!isPageHeaderV2Enabled && hasPaginationButtons && (
{!isCommandMenuV2Enabled && hasPaginationButtons && (
<>
<IconButton
Icon={IconChevronUp}

24
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
View File

@ -3,10 +3,15 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
import { rightDrawerPageState } from '../states/rightDrawerPageState';
import { RightDrawerPages } from '../types/RightDrawerPages';
import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
export const useRightDrawer = () => {
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
@ -14,14 +19,29 @@ export const useRightDrawer = () => {
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const { openCommandMenu } = useCommandMenu();
const openRightDrawer = useRecoilCallback(
({ set }) =>
(rightDrawerPage: RightDrawerPages) => {
if (
isCommandMenuV2Enabled &&
rightDrawerPage === RightDrawerPages.ViewRecord
) {
set(commandMenuPageState, CommandMenuPages.ViewRecord);
openCommandMenu();
return;
}
set(rightDrawerPageState, rightDrawerPage);
set(isRightDrawerOpenState, true);
set(isRightDrawerMinimizedState, false);
},
[],
[isCommandMenuV2Enabled, openCommandMenu],
);
const closeRightDrawer = useRecoilCallback(

6
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View File

@ -53,8 +53,8 @@ export const ShowPageAddButton = ({
closeDropdown();
};
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
if (
@ -72,7 +72,7 @@ export const ShowPageAddButton = ({
<Dropdown
dropdownId={SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID}
clickableComponent={
isPageHeaderV2Enabled ? (
isCommandMenuV2Enabled ? (
<Button
Icon={IconPlus}
dataTestId="add-button"