fix: fixing the modal update by app

RocketChat · Mar 28, 2024 · 91ac3f1 · 91ac3f1
1 parent e22a2d5
commit 91ac3f1
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/.changeset/young-candles-explode.md b/.changeset/young-candles-explode.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-contexts': minor
+'@rocket.chat/meteor': minor
+---
+
+Fix an issue affecting the update modal/contextual bar by apps when it comes to error handling and regular surface update
diff --git a/apps/meteor/app/ui-message/client/ActionManager.ts b/apps/meteor/app/ui-message/client/ActionManager.ts
@@ -71,36 +71,39 @@ export class ActionManager implements IActionManager {
 		return triggerId;
 	}
 
-	public async emitInteraction(appId: string, userInteraction: DistributiveOmit<UiKit.UserInteraction, 'triggerId'>) {
+	public async emitInteraction(
+		appId: string,
+		userInteraction: DistributiveOmit<UiKit.UserInteraction, 'triggerId'>,
+	): Promise<Pick<UiKit.ServerInteraction, 'type'> | undefined> {
 		this.notifyBusy();
 
 		const triggerId = this.generateTriggerId(appId);
-
 		let timeout: ReturnType<typeof setTimeout> | undefined;
 
-		await Promise.race([
-			new Promise((_, reject) => {
-				timeout = setTimeout(() => reject(new UiKitTriggerTimeoutError('Timeout', { triggerId, appId })), ActionManager.TRIGGER_TIMEOUT);
-			}),
-			sdk.rest
+		try {
+			const timeoutPromise = new Promise<Pick<UiKit.ServerInteraction, 'type'> | undefined>((_, reject) => {
+				timeout = setTimeout(() => {
+					reject(new UiKitTriggerTimeoutError('Timeout', { triggerId, appId }));
+				}, ActionManager.TRIGGER_TIMEOUT);
+			});
+
+			const interactionPromise = sdk.rest
 				.post(`/apps/ui.interaction/${appId}`, {
 					...userInteraction,
 					triggerId,
 				})
-				.then((interaction) => this.handleServerInteraction(interaction)),
-		]).finally(() => {
+				.then((interaction) => this.handleServerInteraction(interaction));
+
+			return Promise.race([timeoutPromise, interactionPromise]);
+		} finally {
 			if (timeout) clearTimeout(timeout);
 			this.notifyIdle();
-		});
+		}
 	}
 
-	public handleServerInteraction(interaction: UiKit.ServerInteraction) {
+	public handleServerInteraction(interaction: UiKit.ServerInteraction): Pick<UiKit.ServerInteraction, 'type'> | undefined {
 		const { triggerId } = interaction;
 
-		if (!this.triggersId.has(triggerId)) {
-			return;
-		}
-
 		const appId = this.invalidateTriggerId(triggerId);
 		if (!appId) {
 			return;
@@ -180,7 +183,7 @@ export class ActionManager implements IActionManager {
 			}
 		}
 
-		return interaction.type;
+		return interaction.type as unknown as Pick<UiKit.ServerInteraction, 'type'>;
 	}
 
 	public getInteractionPayloadByViewId(viewId: UiKit.ContextualBarView['id']) {

diff --git a/apps/meteor/client/views/modal/uikit/UiKitModal.tsx b/apps/meteor/client/views/modal/uikit/UiKitModal.tsx
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
 import { MarkupInteractionContext } from '@rocket.chat/gazzodown';
 import type * as UiKit from '@rocket.chat/ui-kit';
@@ -22,9 +22,9 @@ const UiKitModal = ({ initialView }: UiKitModalProps) => {
 	const { view, errors, values, updateValues, state } = useUiKitView(initialView);
 	const contextValue = useModalContextValue({ view, values, updateValues });
 
-	const handleSubmit = useMutableCallback((e: FormEvent) => {
+	const handleSubmit = useEffectEvent((e: FormEvent) => {
 		preventSyntheticEvent(e);
-		void actionManager
+		actionManager
 			.emitInteraction(view.appId, {
 				type: 'viewSubmit',
 				payload: {
@@ -35,7 +35,12 @@ const UiKitModal = ({ initialView }: UiKitModalProps) => {
 				},
 				viewId: view.id,
 			})
-			.finally(() => {
+			.then((interaction) => {
+				if (!interaction || !['errors', 'modal.update', 'contextual_bar.update'].includes(String(interaction))) {
+					actionManager.disposeView(view.id);
+				}
+			})
+			.catch(() => {
 				actionManager.disposeView(view.id);
 			});
 	});

diff --git a/packages/ui-contexts/src/ActionManagerContext.ts b/packages/ui-contexts/src/ActionManagerContext.ts
@@ -13,8 +13,11 @@ export interface IActionManager {
 	notifyBusy(): void;
 	notifyIdle(): void;
 	generateTriggerId(appId: string | undefined): string;
-	emitInteraction(appId: string, userInteraction: DistributiveOmit<UiKit.UserInteraction, 'triggerId'>): Promise<unknown>;
-	handleServerInteraction(interaction: UiKit.ServerInteraction): UiKit.ServerInteraction['type'] | undefined;
+	emitInteraction(
+		appId: string,
+		userInteraction: DistributiveOmit<UiKit.UserInteraction, 'triggerId'>,
+	): Promise<Pick<UiKit.ServerInteraction, 'type'> | undefined>;
+	handleServerInteraction(interaction: UiKit.ServerInteraction): Pick<UiKit.ServerInteraction, 'type'> | undefined;
 	getInteractionPayloadByViewId(viewId: UiKit.ContextualBarView['id']):
 		| {
 				view: UiKit.ContextualBarView;