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

## New Company ### Before: <img width="500" alt="Capture d’écran 2025-02-17 à 16 47 54" src="https://github.com/user-attachments/assets/4573450d-14b1-41f0-9b86-24003f489fde" /> ### After: <img width="500" alt="Capture d’écran 2025-02-17 à 16 46 24" src="https://github.com/user-attachments/assets/6622bd75-900a-451b-ac21-c98bddeee32d" /> ## Task ### Before: <img width="500" alt="Capture d’écran 2025-02-17 à 16 47 35" src="https://github.com/user-attachments/assets/04b77faa-b628-4839-ab94-95c8570c1818" /> ### After: <img width="501" alt="Capture d’écran 2025-02-17 à 16 47 03" src="https://github.com/user-attachments/assets/1577dea6-7541-497e-af6e-3a4559f1a913" />
2025-02-18 09:52:25 +01:00
parent 905cfedaf0
commit 270744eca6
34 changed files with 96 additions and 69 deletions
@@ -1,5 +1,6 @@
 import { useRecoilState, useSetRecoilState } from 'recoil';

+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
@@ -7,7 +8,6 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { IconList } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
@@ -33,6 +33,8 @@ export const useOpenActivityRightDrawer = ({
    FeatureFlagKey.IsCommandMenuV2Enabled,
  );

+  const { openRecordInCommandMenu } = useCommandMenu();
+
  return (activityId: string) => {
    if (
      isRightDrawerOpen &&
@@ -43,16 +45,19 @@ export const useOpenActivityRightDrawer = ({
    }

    if (isCommandMenuV2Enabled) {
-      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+      openRecordInCommandMenu({
+        recordId: activityId,
+        objectNameSingular,
+        isNewRecord: false,
+      });
    } else {
      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+      setViewableRecordId(activityId);
+      setViewableRecordNameSingular(objectNameSingular);
+      openRightDrawer(RightDrawerPages.ViewRecord, {
+        title: objectNameSingular,
+        Icon: IconList,
+      });
    }
-
-    setViewableRecordId(activityId);
-    setViewableRecordNameSingular(objectNameSingular);
-    openRightDrawer(RightDrawerPages.ViewRecord, {
-      title: objectNameSingular,
-      Icon: IconList,
-    });
  };
 };
@@ -13,11 +13,11 @@ import { Note } from '@/activities/types/Note';
 import { NoteTarget } from '@/activities/types/NoteTarget';
 import { Task } from '@/activities/types/Task';
 import { TaskTarget } from '@/activities/types/TaskTarget';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { IconList } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
@@ -68,6 +68,8 @@ export const useOpenCreateActivityDrawer = ({
    FeatureFlagKey.IsCommandMenuV2Enabled,
  );

+  const { openRecordInCommandMenu } = useCommandMenu();
+
  const openCreateActivityDrawer = async ({
    targetableObjects,
    customAssignee,
@@ -76,10 +78,12 @@ export const useOpenCreateActivityDrawer = ({
    customAssignee?: WorkspaceMember;
  }) => {
    setIsNewViewableRecordLoading(true);
-    openRightDrawer(RightDrawerPages.ViewRecord, {
-      title: activityObjectNameSingular,
-      Icon: IconList,
-    });
+    if (!isCommandMenuV2Enabled) {
+      openRightDrawer(RightDrawerPages.ViewRecord, {
+        title: activityObjectNameSingular,
+        Icon: IconList,
+      });
+    }
    setViewableRecordId(null);
    setViewableRecordNameSingular(activityObjectNameSingular);

@@ -122,7 +126,11 @@ export const useOpenCreateActivityDrawer = ({
    }

    if (isCommandMenuV2Enabled) {
-      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+      openRecordInCommandMenu({
+        recordId: activity.id,
+        objectNameSingular: activityObjectNameSingular,
+        isNewRecord: true,
+      });
    } else {
      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
    }
@@ -3,6 +3,7 @@ import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/C
 import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
 import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { isDefined } from 'twenty-shared';
 import { CommandMenuContextChipProps } from './CommandMenuContextChip';

 export const CommandMenuContextChipGroupsWithRecordSelection = ({
@@ -21,7 +22,7 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
      limit: 3,
    });

-  if (loading || !totalCount) {
+  if (loading) {
    return null;
  }

@@ -33,21 +34,25 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
    />
  ));

-  const selectedRecordsContextText = getSelectedRecordsContextText(
-    objectMetadataItem,
-    records,
-    totalCount,
-  );
+  const recordSelectionContextChip = totalCount
+    ? {
+        text: getSelectedRecordsContextText(
+          objectMetadataItem,
+          records,
+          totalCount,
+        ),
+        Icons: Avatars,
+      }
+    : undefined;
+
+  const contextChipsWithRecordSelection = [
+    recordSelectionContextChip,
+    ...contextChips,
+  ].filter(isDefined);

  return (
    <CommandMenuContextChipGroups
-      contextChips={[
-        {
-          text: selectedRecordsContextText,
-          Icons: Avatars,
-        },
-        ...contextChips,
-      ]}
+      contextChips={contextChipsWithRecordSelection}
    />
  );
 };
@@ -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 = () => {
@@ -89,7 +89,11 @@ export const useCreateNewTableRecord = ({

      await createOneRecord({ id: recordId });

-      openRecordInCommandMenu(recordId, objectMetadataItem.nameSingular);
+      openRecordInCommandMenu({
+        recordId,
+        objectNameSingular: objectMetadataItem.nameSingular,
+        isNewRecord: true,
+      });

      openRecordTitleCell({
        recordId,
@@ -2253,4 +2253,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Jou spanlid verantwoordelik vir die bestuur van die maatskappy rekening"
-
@@ -1584,7 +1584,9 @@ msgstr "مؤشر التزامن"

 #: src/modules/calendar/common/standard-objects/calendar-channel.workspace-entity.ts:269
 msgid "Sync Cursor. Used for syncing events from the calendar provider"
-msgstr "\n"
+msgstr ""
+"\n"
+""

 #: src/modules/messaging/common/standard-objects/message-channel.workspace-entity.ts:291
 #: src/modules/messaging/common/standard-objects/message-channel.workspace-entity.ts:292
@@ -2253,4 +2255,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "العضو في فريقك المسئول عن إدارة حساب الشركة"
-
@@ -2253,4 +2253,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "El teu membre de l'equip responsable de la gestió del compte de l'empresa"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Člen vašeho týmu odpovědný za správu firemního účtu"
-
@@ -1540,7 +1540,8 @@ msgstr "Køringer"
 #: src/modules/connected-account/standard-objects/connected-account.workspace-entity.ts:104
 #: src/modules/connected-account/standard-objects/connected-account.workspace-entity.ts:105
 msgid "Scopes"
-msgstr "R\n"
+msgstr ""
+"R\n"
 "ettigheder"

 #: src/engine/metadata-modules/constants/search-vector-field.constants.ts:5
@@ -2254,4 +2255,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Dit teammedlem ansvarlig for at forvalte virksomhedens konto"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ihr Teammitglied, das für die Verwaltung des Unternehmenskontos verantwortlich ist"
-
@@ -2253,4 +2253,3 @@ msgstr "Χ"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Το μέλος της ομάδας σας υπεύθυνο για τη διαχείριση του λογαριασμού της εταιρείας"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Miembro de su equipo responsable de gestionar la cuenta de la empresa"
-
@@ -2253,4 +2253,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Tiimin jäsen vastuussa yritystilin hallinnasta"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Le membre de votre équipe responsable de la gestion du compte entreprise"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "חבר הצוות שלך אחראי על ניהול חשבון החברה"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Az Ön csapatának megbízott tagja, aki a cégfiókot kezeli"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Il membro del team responsabile della gestione dell'account aziendale"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "会社のアカウントを管理する責任のあるチームメンバー"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "회사 계정을 관리하는 팀원"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Uw teamlid verantwoordelijk voor het beheer van het bedrijfsaccount"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ditt teammedlem ansvarlig for å administrere bedriftskontoen"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Twój członek zespołu odpowiedzialny za zarządzanie kontem firmy"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Seu membro da equipe responsável por gerenciar a conta da empresa"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "O membro da sua equipa responsável pela gestão da conta da empresa"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Membrul echipei dumneavoastră responsabil de gestionarea contului companiei"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ваш член команды, ответственный за управление корпоративным аккаунтом"
-
@@ -2253,4 +2253,3 @@ msgstr "Х"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ваш тимски члан задужен за управљање налогом компаније"
-
@@ -1481,7 +1481,8 @@ msgstr "F\"or\"aldrade f\"argschema"

 #: src/modules/workspace-member/standard-objects/workspace-member.workspace-entity.ts:108
 msgid "Preferred language"
-msgstr "F\"or\"aldrat spr\n"
+msgstr ""
+"F\"or\"aldrat spr\n"
 "k"

 #: src/modules/opportunity/standard-objects/opportunity.workspace-entity.ts:223
@@ -1585,7 +1586,8 @@ msgstr "Synkkurs"

 #: src/modules/calendar/common/standard-objects/calendar-channel.workspace-entity.ts:269
 msgid "Sync Cursor. Used for syncing events from the calendar provider"
-msgstr "Synkkurs. Anv\"ands f\"or att synkronisera h\"andelser fr\n"
+msgstr ""
+"Synkkurs. Anv\"ands f\"or att synkronisera h\"andelser fr\n"
 "n kalenderleverant\"oren"

 #: src/modules/messaging/common/standard-objects/message-channel.workspace-entity.ts:291
@@ -2255,4 +2257,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ditt teammedlem ansvarig för att hantera företagskontot"
-
@@ -2253,4 +2253,3 @@ msgstr ""
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Şirket hesabını yönetmekten sorumlu ekip üyeniz"
-
@@ -2253,4 +2253,3 @@ msgstr "Х"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Ваш колега з команди, відповідальний за управління обліковим записом компанії"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "Thành viên trong nhóm của bạn phụ trách quản lý tài khoản công ty"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "负责管理公司账户的团队成员"
-
@@ -2253,4 +2253,3 @@ msgstr "X"
 #: src/modules/company/standard-objects/company.workspace-entity.ts:179
 msgid "Your team member responsible for managing the company account"
 msgstr "負責管理公司帳戶的團隊成員"
-