From e08790c344ecf59b5d4ac7f0ff2f328ca7912fa1 Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Wed, 13 Dec 2023 23:39:03 +0800
Subject: [PATCH] Fix command menu keyboard navigation (#2908)

* Fix CommandMenu

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../command-menu/components/CommandMenu.tsx   | 55 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 44f2ba683..5d0fc5e20 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -85,7 +85,7 @@ export const StyledEmpty = styled.div`
 `;
 
 export const CommandMenu = () => {
-  const { toggleCommandMenu } = useCommandMenu();
+  const { toggleCommandMenu, onItemClick } = useCommandMenu();
 
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@@ -141,6 +141,45 @@ export const CommandMenu = () => {
     limit: 3,
   });
 
+  const peopleCommands = useMemo(
+    () =>
+      people.map(({ id, name: { firstName, lastName } }) => ({
+        id,
+        label: `${firstName} ${lastName}`,
+        to: `object/person/${id}`,
+      })),
+    [people],
+  );
+
+  const companyCommands = useMemo(
+    () =>
+      companies.map(({ id, name }) => ({
+        id,
+        label: name ?? '',
+        to: `object/company/${id}`,
+      })),
+    [companies],
+  );
+
+  const activityCommands = useMemo(
+    () =>
+      activities.map(({ id, title }) => ({
+        id,
+        label: title ?? '',
+        to: '',
+        onCommandClick: () => openActivityRightDrawer(id),
+      })),
+    [activities, openActivityRightDrawer],
+  );
+
+  const otherCommands = useMemo(() => {
+    return [
+      ...peopleCommands,
+      ...companyCommands,
+      ...activityCommands,
+    ] as Command[];
+  }, [peopleCommands, companyCommands, activityCommands]);
+
   const checkInShortcuts = (cmd: Command, search: string) => {
     return (cmd.firstHotKey + (cmd.secondHotKey ?? ''))
       .toLowerCase()
@@ -191,7 +230,17 @@ export const CommandMenu = () => {
                   selectableListId="command-menu-list"
                   selectableItemIds={[selectableItemIds]}
                   hotkeyScope={AppHotkeyScope.CommandMenu}
-                  onEnter={(_itemId) => {}}
+                  onEnter={(itemId) => {
+                    const command = [
+                      ...commandMenuCommands,
+                      ...otherCommands,
+                    ].find((cmd) => cmd.id === itemId);
+
+                    if (command) {
+                      const { to, onCommandClick } = command;
+                      onItemClick(onCommandClick, to);
+                    }
+                  }}
                 >
                   {!matchingCreateCommand.length &&
                     !matchingNavigateCommand.length &&