feat: CommandMenuItem entity and FrontComponent support in command menu (#17555)

https://github.com/user-attachments/assets/6f172ffc-d43d-42fd-a26b-94f591fb767e

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuActions.tsx

@@ -41,6 +41,18 @@ export const useCommandMenuActions = () => {
       action.scope === ActionScope.Global,
   );
 
+  const frontComponentGlobalActions: ActionConfig[] = actions?.filter(
+    (action) =>
+      action.type === ActionType.FrontComponent &&
+      action.scope === ActionScope.Global,
+  );
+
+  const frontComponentRecordSelectionActions: ActionConfig[] = actions?.filter(
+    (action) =>
+      action.type === ActionType.FrontComponent &&
+      action.scope === ActionScope.RecordSelection,
+  );
+
   const fallbackActions: ActionConfig[] = actions?.filter(
     (action) => action.type === ActionType.Fallback,
   );
@@ -58,6 +70,8 @@ export const useCommandMenuActions = () => {
     actionObjectActions,
     workflowRunRecordSelectionActions,
     workflowRunGlobalActions,
+    frontComponentGlobalActions,
+    frontComponentRecordSelectionActions,
     fallbackActions,
     createRelatedRecordActions,
   };

packages/twenty-front/src/modules/command-menu/hooks/useMatchingCommandMenuActions.ts

@@ -18,6 +18,8 @@ export const useMatchingCommandMenuActions = ({
     actionGlobalActions,
     workflowRunRecordSelectionActions,
     workflowRunGlobalActions,
+    frontComponentGlobalActions,
+    frontComponentRecordSelectionActions,
     fallbackActions,
     createRelatedRecordActions,
   } = useCommandMenuActions();
@@ -41,6 +43,12 @@ export const useMatchingCommandMenuActions = ({
     workflowRunGlobalActions,
   );
 
+  const matchingFrontComponentGlobalActions =
+    filterActionsWithCommandMenuSearch(frontComponentGlobalActions);
+
+  const matchingFrontComponentRecordSelectionActions =
+    filterActionsWithCommandMenuSearch(frontComponentRecordSelectionActions);
+
   const matchingCreateRelatedRecordActions = filterActionsWithCommandMenuSearch(
     createRelatedRecordActions,
   );
@@ -48,8 +56,10 @@ export const useMatchingCommandMenuActions = ({
   const noResults =
     !matchingStandardActionRecordSelectionActions.length &&
     !matchingWorkflowRunRecordSelectionActions.length &&
+    !matchingFrontComponentRecordSelectionActions.length &&
     !matchingStandardActionGlobalActions.length &&
     !matchingWorkflowRunGlobalActions.length &&
+    !matchingFrontComponentGlobalActions.length &&
     !matchingStandardActionObjectActions.length &&
     !matchingNavigateActions.length &&
     !matchingCreateRelatedRecordActions.length;
@@ -59,8 +69,10 @@ export const useMatchingCommandMenuActions = ({
     matchingStandardActionRecordSelectionActions,
     matchingStandardActionObjectActions,
     matchingWorkflowRunRecordSelectionActions,
+    matchingFrontComponentRecordSelectionActions,
     matchingStandardActionGlobalActions,
     matchingWorkflowRunGlobalActions,
+    matchingFrontComponentGlobalActions,
     matchingNavigateActions,
     matchingCreateRelatedRecordActions,
     fallbackActions: noResults ? fallbackActions : [],

packages/twenty-front/src/modules/command-menu/hooks/useOpenFrontComponentInCommandMenu.ts

@@ -0,0 +1,47 @@
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useRecoilCallback } from 'recoil';
+import { type IconComponent } from 'twenty-ui/display';
+import { v4 } from 'uuid';
+
+export const useOpenFrontComponentInCommandMenu = () => {
+  const { navigateCommandMenu } = useCommandMenu();
+
+  const openFrontComponentInCommandMenu = useRecoilCallback(
+    ({ set }) =>
+      ({
+        frontComponentId,
+        pageTitle,
+        pageIcon,
+        resetNavigationStack = false,
+      }: {
+        frontComponentId: string;
+        pageTitle: string;
+        pageIcon: IconComponent;
+        resetNavigationStack?: boolean;
+      }) => {
+        const pageComponentInstanceId = v4();
+
+        set(
+          viewableFrontComponentIdComponentState.atomFamily({
+            instanceId: pageComponentInstanceId,
+          }),
+          frontComponentId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.ViewFrontComponent,
+          pageTitle,
+          pageIcon,
+          pageId: pageComponentInstanceId,
+          resetNavigationStack,
+        });
+      },
+    [navigateCommandMenu],
+  );
+
+  return {
+    openFrontComponentInCommandMenu,
+  };
+};