Add task and note create option in comand menu (#1115)

* add task and note create option in comand menu

* Re-run CIs

---------

Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -15,7 +15,9 @@ import {
 import { getLogoUrlFromDomainName } from '~/utils';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
+import { commandMenuCommand } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+import { CommandType } from '../types/Command';
 
 import { CommandMenuItem } from './CommandMenuItem';
 import {
@@ -31,6 +33,8 @@ export function CommandMenu() {
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [search, setSearch] = useState('');
+  const commands = useRecoilValue(commandMenuCommand);
+
 
   useScopedHotkeys(
     'ctrl+k,meta+k',
@@ -77,36 +81,16 @@ export function CommandMenu() {
   });
   const activities = activityData?.searchResults ?? [];
 
-  const commands = [
-    {
-      to: '/people',
-      label: 'Go to People',
-      shortcuts: ['G', 'P'],
-    },
-    {
-      to: '/companies',
-      label: 'Go to Companies',
-      shortcuts: ['G', 'C'],
-    },
-    {
-      to: '/opportunities',
-      label: 'Go to Opportunities',
-      shortcuts: ['G', 'O'],
-    },
-    {
-      to: '/settings/profile',
-      label: 'Go to Settings',
-      shortcuts: ['G', 'S'],
-    },
-    {
-      to: '/tasks',
-      label: 'Go to Tasks',
-      shortcuts: ['G', 'T'],
-    },
-  ];
+  const matchingNavigateCommand = commands.find(
+    (cmd) =>
+      cmd.shortcuts?.join('') === search?.toUpperCase() &&
+      cmd.type === CommandType.Navigate,
+  );
 
-  const matchingCommand = commands.find(
-    (cmd) => cmd.shortcuts.join('') === search?.toUpperCase(),
+  const matchingCreateCommand = commands.find(
+    (cmd) =>
+      cmd.shortcuts?.join('') === search?.toUpperCase() &&
+      cmd.type === CommandType.Create,
   );
 
   /*
@@ -164,12 +148,40 @@ export function CommandMenu() {
       />
       <StyledList>
         <StyledEmpty>No results found.</StyledEmpty>
-        {matchingCommand && (
+        {!matchingCreateCommand && (
+          <StyledGroup heading="Create">
+            {commands
+              .filter((cmd) => cmd.type === CommandType.Create)
+              .map((cmd) => (
+                <CommandMenuItem
+                  key={cmd.label}
+                  to={cmd.to}
+                  label={cmd.label}
+                  icon={cmd.icon}
+                  shortcuts={cmd.shortcuts || []}
+                  onClick={cmd.onCommandClick}
+                />
+              ))}
+          </StyledGroup>
+        )}
+        {matchingCreateCommand && (
+          <StyledGroup heading="Create">
+            <CommandMenuItem
+              key={matchingCreateCommand.label}
+              to={matchingCreateCommand.to}
+              label={matchingCreateCommand.label}
+              icon={matchingCreateCommand.icon}
+              shortcuts={matchingCreateCommand.shortcuts || []}
+              onClick={matchingCreateCommand.onCommandClick}
+            />
+          </StyledGroup>
+        )}
+        {matchingNavigateCommand && (
           <StyledGroup heading="Navigate">
             <CommandMenuItem
-              to={matchingCommand.to}
-              label={matchingCommand.label}
-              shortcuts={matchingCommand.shortcuts}
+              to={matchingNavigateCommand.to}
+              label={matchingNavigateCommand.label}
+              shortcuts={matchingNavigateCommand.shortcuts}
             />
           </StyledGroup>
         )}
@@ -223,17 +235,18 @@ export function CommandMenu() {
             ))}
           </StyledGroup>
         )}
-        {!matchingCommand && (
+        {!matchingNavigateCommand && (
           <StyledGroup heading="Navigate">
             {commands
               .filter(
                 (cmd) =>
-                  cmd.shortcuts?.join('').includes(search?.toUpperCase()) ||
-                  cmd.label?.toUpperCase().includes(search?.toUpperCase()),
+                  (cmd.shortcuts?.join('').includes(search?.toUpperCase()) ||
+                    cmd.label?.toUpperCase().includes(search?.toUpperCase())) &&
+                  cmd.type === CommandType.Navigate,
               )
               .map((cmd) => (
                 <CommandMenuItem
-                  key={cmd.shortcuts.join('')}
+                  key={cmd.shortcuts?.join('')}
                   to={cmd.to}
                   label={cmd.label}
                   shortcuts={cmd.shortcuts}

front/src/modules/command-menu/constants/commandMenuCommands.ts

@@ -0,0 +1,34 @@
+import { Command, CommandType } from '../types/Command';
+
+export const commandMenuCommands: Command[] = [
+  {
+    to: '/people',
+    label: 'Go to People',
+    type: CommandType.Navigate,
+    shortcuts: ['G', 'P'],
+  },
+  {
+    to: '/companies',
+    label: 'Go to Companies',
+    type: CommandType.Navigate,
+    shortcuts: ['G', 'C'],
+  },
+  {
+    to: '/opportunities',
+    label: 'Go to Opportunities',
+    type: CommandType.Navigate,
+    shortcuts: ['G', 'O'],
+  },
+  {
+    to: '/settings/profile',
+    label: 'Go to Settings',
+    type: CommandType.Navigate,
+    shortcuts: ['G', 'S'],
+  },
+  {
+    to: '/tasks',
+    label: 'Go to Tasks',
+    type: CommandType.Navigate,
+    shortcuts: ['G', 'T'],
+  },
+];

front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,14 +1,18 @@
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
+import { commandMenuCommands } from '../constants/commandMenuCommands';
+import { commandMenuCommand } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+import { Command } from '../types/Command';
 
 export function useCommandMenu() {
   const [, setIsCommandMenuOpenedState] = useRecoilState(
     isCommandMenuOpenedState,
   );
+  const setCommands = useSetRecoilState(commandMenuCommand);
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -24,8 +28,18 @@ export function useCommandMenu() {
     goBackToPreviousHotkeyScope();
   }
 
+  function addToCommandMenu(addCommand: Command[]) {
+    setCommands((prev) => [...prev, ...addCommand]);
+  }
+
+  function setToIntitialCommandMenu() {
+    setCommands(commandMenuCommands);
+  }
+
   return {
     openCommandMenu,
     closeCommandMenu,
+    addToCommandMenu,
+    setToIntitialCommandMenu,
   };
 }

front/src/modules/command-menu/states/commandMenuCommandsState.ts

@@ -0,0 +1,14 @@
+import { atom } from 'recoil';
+
+import { Command, CommandType } from '../types/Command';
+
+export const commandMenuCommand = atom<Command[]>({
+  key: 'command-menu/commandMenuCommand',
+  default: [
+    {
+      to: '',
+      label: '',
+      type: CommandType.Navigate,
+    },
+  ],
+});

front/src/modules/command-menu/types/Command.ts

@@ -0,0 +1,13 @@
+export enum CommandType {
+  Navigate = 'Navigate',
+  Create = 'Create',
+}
+
+export type Command = {
+  to: string;
+  label: string;
+  type: CommandType.Navigate | CommandType.Create;
+  icon?: JSX.Element;
+  shortcuts?: string[];
+  onCommandClick?: () => void;
+};