[FRONT COMPONENTS] Frontend component widget creation (#17653)

closes https://github.com/twentyhq/core-team-issues/issues/2182



https://github.com/user-attachments/assets/babf154c-9cda-40ff-b2e8-5053e447c35f

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx

@@ -4,26 +4,36 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { getFrontComponentWidgetTypeSelectItemId } from '@/command-menu/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId';
 import { isExistingWidgetMissingOrDifferentType } from '@/command-menu/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType';
-import { useOpportunityDefaultChartConfig } from '@/page-layout/hooks/useOpportunityDefaultChartConfig';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { FIND_MANY_FRONT_COMPONENTS } from '@/front-components/graphql/queries/findManyFrontComponents';
+import { useCreatePageLayoutFrontComponentWidget } from '@/page-layout/hooks/useCreatePageLayoutFrontComponentWidget';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
 import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
 import { useCreatePageLayoutStandaloneRichTextWidget } from '@/page-layout/hooks/useCreatePageLayoutStandaloneRichTextWidget';
+import { useOpportunityDefaultChartConfig } from '@/page-layout/hooks/useOpportunityDefaultChartConfig';
 import { useRemovePageLayoutWidgetAndPreservePosition } from '@/page-layout/hooks/useRemovePageLayoutWidgetAndPreservePosition';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useQuery } from '@apollo/client';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import {
   IconAlignBoxLeftTop,
+  IconApps,
   IconChartPie,
   IconFrame,
 } from 'twenty-ui/display';
-import { WidgetType } from '~/generated/graphql';
+import {
+  FeatureFlagKey,
+  type FrontComponent,
+  WidgetType,
+} from '~/generated/graphql';
 
 export const CommandMenuPageLayoutWidgetTypeSelect = () => {
   const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
@@ -43,9 +53,31 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
   const { createPageLayoutStandaloneRichTextWidget } =
     useCreatePageLayoutStandaloneRichTextWidget(pageLayoutId);
 
+  const { createPageLayoutFrontComponentWidget } =
+    useCreatePageLayoutFrontComponentWidget(pageLayoutId);
+
   const { removePageLayoutWidgetAndPreservePosition } =
     useRemovePageLayoutWidgetAndPreservePosition(pageLayoutId);
 
+  const isApplicationEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_APPLICATION_ENABLED,
+  );
+
+  const { data: frontComponentsData } = useQuery<{
+    frontComponents: FrontComponent[];
+  }>(FIND_MANY_FRONT_COMPONENTS, {
+    skip: !isApplicationEnabled,
+  });
+
+  const frontComponents = frontComponentsData?.frontComponents ?? [];
+
+  const frontComponentsWithSelectItemId = frontComponents.map(
+    (frontComponent) => ({
+      frontComponent,
+      selectItemId: getFrontComponentWidgetTypeSelectItemId(frontComponent.id),
+    }),
+  );
+
   const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
     useRecoilComponentState(
       pageLayoutEditingWidgetIdComponentState,
@@ -127,11 +159,36 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
     closeCommandMenu();
   };
 
+  const handleCreateFrontComponentWidget = (frontComponent: FrontComponent) => {
+    if (
+      isExistingWidgetMissingOrDifferentType(
+        existingWidget?.type,
+        WidgetType.FRONT_COMPONENT,
+      )
+    ) {
+      if (isDefined(pageLayoutEditingWidgetId)) {
+        removePageLayoutWidgetAndPreservePosition(pageLayoutEditingWidgetId);
+      }
+
+      const newWidget = createPageLayoutFrontComponentWidget(
+        frontComponent.name,
+        frontComponent.id,
+      );
+      setPageLayoutEditingWidgetId(newWidget.id);
+    }
+
+    closeCommandMenu();
+  };
+
+  const selectableItemIds = [
+    'chart',
+    'iframe',
+    'rich-text',
+    ...frontComponentsWithSelectItemId.map(({ selectItemId }) => selectItemId),
+  ];
+
   return (
-    <CommandMenuList
-      commandGroups={[]}
-      selectableItemIds={['chart', 'iframe', 'rich-text']}
-    >
+    <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
       <CommandGroup heading={t`Widget type`}>
         <SelectableListItem
           itemId="chart"
@@ -168,6 +225,29 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
           />
         </SelectableListItem>
       </CommandGroup>
+
+      {isApplicationEnabled && frontComponentsWithSelectItemId.length > 0 && (
+        <CommandGroup heading={t`Front Components`}>
+          {frontComponentsWithSelectItemId.map(
+            ({ frontComponent, selectItemId }) => (
+              <SelectableListItem
+                key={frontComponent.id}
+                itemId={selectItemId}
+                onEnter={() => handleCreateFrontComponentWidget(frontComponent)}
+              >
+                <CommandMenuItem
+                  Icon={IconApps}
+                  label={frontComponent.name}
+                  id={selectItemId}
+                  onClick={() =>
+                    handleCreateFrontComponentWidget(frontComponent)
+                  }
+                />
+              </SelectableListItem>
+            ),
+          )}
+        </CommandGroup>
+      )}
     </CommandMenuList>
   );
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId.ts

@@ -0,0 +1,3 @@
+export const getFrontComponentWidgetTypeSelectItemId = (
+  frontComponentId: string,
+): string => `front-component-${frontComponentId}`;