Headless action modal (#18270)

https://github.com/user-attachments/assets/809a281f-3c38-41df-99db-e780941acf9f

packages/twenty-sdk/src/front-component-renderer/remote/components/FrontComponentWorkerEffect.tsx

@@ -1,14 +1,25 @@
 import { ThreadWebWorker, release, retain } from '@quilted/threads';
 import { RemoteReceiver } from '@remote-dom/core/receivers';
 import { useEffect, useRef } from 'react';
+import { type ActionConfirmationModalResult } from '../../../sdk/front-component-api/globals/frontComponentHostCommunicationApi';
 import { type FrontComponentHostCommunicationApi } from '../../types/FrontComponentHostCommunicationApi';
 import { type WorkerExports } from '../../types/WorkerExports';
 import { createRemoteWorker } from '../worker/utils/createRemoteWorker';
 
+// Must match ACTION_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME in twenty-front
+const ACTION_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME =
+  'action-menu-confirmation-modal-result';
+
+type ActionMenuConfirmationModalResultBrowserEventDetail = {
+  frontComponentId: string;
+  confirmationResult: ActionConfirmationModalResult;
+};
+
 type FrontComponentWorkerEffectProps = {
   componentUrl: string;
   applicationAccessToken?: string;
   apiUrl?: string;
+  frontComponentId: string;
   frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi;
   setReceiver: React.Dispatch<React.SetStateAction<RemoteReceiver | null>>;
   setThread: React.Dispatch<
@@ -24,6 +35,7 @@ export const FrontComponentWorkerEffect = ({
   componentUrl,
   applicationAccessToken,
   apiUrl,
+  frontComponentId,
   frontComponentHostCommunicationApi,
   setReceiver,
   setThread,
@@ -55,6 +67,32 @@ export const FrontComponentWorkerEffect = ({
       exports: frontComponentHostCommunicationApi,
     });
 
+    const handleActionMenuConfirmationModalResultBrowserEvent = (
+      event: CustomEvent<ActionMenuConfirmationModalResultBrowserEventDetail>,
+    ) => {
+      const actionMenuConfirmationModalResultBrowserEventDetail = event.detail;
+
+      if (
+        actionMenuConfirmationModalResultBrowserEventDetail.frontComponentId !==
+        frontComponentId
+      ) {
+        return;
+      }
+
+      thread.imports
+        .onConfirmationModalResult(
+          actionMenuConfirmationModalResultBrowserEventDetail.confirmationResult,
+        )
+        .catch((error: Error) => {
+          setError(error);
+        });
+    };
+
+    window.addEventListener(
+      ACTION_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME,
+      handleActionMenuConfirmationModalResultBrowserEvent as EventListener,
+    );
+
     setThread(thread);
 
     thread.imports
@@ -71,6 +109,10 @@ export const FrontComponentWorkerEffect = ({
     isInitializedRef.current = true;
 
     return () => {
+      window.removeEventListener(
+        ACTION_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME,
+        handleActionMenuConfirmationModalResultBrowserEvent as EventListener,
+      );
       setThread(null);
       worker.terminate();
       isInitializedRef.current = false;
@@ -79,6 +121,7 @@ export const FrontComponentWorkerEffect = ({
     componentUrl,
     applicationAccessToken,
     apiUrl,
+    frontComponentId,
     setError,
     setReceiver,
     setThread,