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

Fix command menu context chip display on show page (#10267)

Browse Source 
## New Company
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 54"
src="https://github.com/user-attachments/assets/4573450d-14b1-41f0-9b86-24003f489fde"
/>

### After:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 46 24"
src="https://github.com/user-attachments/assets/6622bd75-900a-451b-ac21-c98bddeee32d"
/>


## Task
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 35"
src="https://github.com/user-attachments/assets/04b77faa-b628-4839-ab94-95c8570c1818"
/>

### After:
<img width="501" alt="Capture d’écran 2025-02-17 à 16 47 03"
src="https://github.com/user-attachments/assets/1577dea6-7541-497e-af6e-3a4559f1a913"
/>
This commit is contained in:
Raphaël Bosi
2025-02-18 09:52:25 +01:00
committed by GitHub
parent 905cfedaf0
commit 270744eca6
34 changed files with 96 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -1,9 +1,11 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { IconDotsVertical, IconSearch, useIcons } from 'twenty-ui';
import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
@ -24,9 +26,9 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared';
import { IconDotsVertical, IconList, IconSearch } from 'twenty-ui';
import { capitalize, isDefined } from 'twenty-shared';
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
export const useCommandMenu = () => {
@ -35,6 +37,7 @@ export const useCommandMenu = () => {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const { getIcon } = useIcons();
const mainContextStoreComponentInstanceId = useRecoilValue(
mainContextStoreComponentInstanceIdState,
@ -211,18 +214,44 @@ export const useCommandMenu = () => {
}, []);
const openRecordInCommandMenu = useRecoilCallback(
({ set }) => {
return (recordId: string, objectNameSingular: string) => {
({ set, snapshot }) => {
return ({
recordId,
objectNameSingular,
isNewRecord = false,
}: {
recordId: string;
objectNameSingular: string;
isNewRecord?: boolean;
}) => {
set(viewableRecordNameSingularState, objectNameSingular);
set(viewableRecordIdState, recordId);
const objectMetadataItem = snapshot
.getLoadable(
objectMetadataItemFamilySelector({
objectName: objectNameSingular,
objectNameType: 'singular',
}),
)
.getValue();
const Icon = objectMetadataItem?.icon
? getIcon(objectMetadataItem.icon)
: getIcon('IconList');
const capitalizedObjectNameSingular = capitalize(objectNameSingular);
navigateCommandMenu({
page: CommandMenuPages.ViewRecord,
pageTitle: objectNameSingular,
pageIcon: IconList,
pageTitle: isNewRecord
? t`New ${capitalizedObjectNameSingular}`
: capitalizedObjectNameSingular,
pageIcon: Icon,
});
};
},
[navigateCommandMenu],
[getIcon, navigateCommandMenu],
);
const openRecordsSearchPage = () => {