fix(UI-1769): update connections/vars/triggers - in the chatbot when the web-ui changes and vise-versa

src/components/organisms/chatbotIframe/chatbotIframe.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import React, { useEffect, useState, useRef, useCallback, useMemo, RefObject } from "react";
 
-import { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -15,14 +14,7 @@ import { triggerEvent, useChatbotIframeConnection, useEventListener } from "@src
 import { ChatbotIframeProps } from "@src/interfaces/components";
 import { useOrganizationStore, useProjectStore, useSharedBetweenProjectsStore, useToastStore } from "@src/store";
 import { MessageTypes } from "@src/types/iframeCommunication.type";
-import {
-	cn,
-	compareUrlParams,
-	isNavigateToProjectMessage,
-	isNavigateToConnectionMessage,
-	isVarUpdatedMessage,
-} from "@src/utilities";
-import { useCacheStore } from "@store/cache/useCacheStore";
+import { cn, compareUrlParams, isNavigateToProjectMessage, isNavigateToConnectionMessage } from "@src/utilities";
 
 import { ResizeButton } from "@components/atoms";
 import { LoadingOverlay } from "@components/molecules";
@@ -39,14 +31,6 @@ const shouldResetIframe = (oldUrl: string, newUrl: string, iframeRef: RefObject<
 	return compareUrlParams(oldUrl, newUrl);
 };
 
-const handleVariableRefresh = (projectId: string, t: TFunction): void => {
-	try {
-		useCacheStore.getState().fetchVariables(projectId, true);
-	} catch (error) {
-		console.error(namespaces.chatbot, t("errors.failedToRefreshVariables", { projectId, error }));
-	}
-};
-
 export const ChatbotIframe = ({
 	title,
 	width = "100%",
@@ -180,22 +164,11 @@ export const ChatbotIframe = ({
 			}
 		);
 
-		const varUpdatedListener = iframeCommService.addListener(MessageTypes.VAR_UPDATED, (message) => {
-			try {
-				if (isVarUpdatedMessage(message) && projectId) {
-					handleVariableRefresh(projectId, t);
-				}
-			} catch (error) {
-				console.error(namespaces.chatbot, t("errors.failedToHandleVariableUpdate", { error }));
-			}
-		});
-
 		return () => {
 			LoggerService.debug(namespaces.chatbot, t("debug.cleanupListeners"));
 
 			iframeCommService.removeListener(directNavigationListener);
 			iframeCommService.removeListener(directEventNavigationListener);
-			iframeCommService.removeListener(varUpdatedListener);
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

src/components/organisms/connections/table.tsx

@@ -120,7 +120,15 @@ export const ConnectionsTable = () => {
 			t("connectionRemoveSuccessExtended", { connectionId, connectionName: connection?.name })
 		);
 
-		fetchConnections(projectId!, true);
+		await fetchConnections(projectId!, true);
+
+		try {
+			const { iframeCommService } = await import("@services/iframeComm.service");
+			iframeCommService.sendAssetsUpdated(projectId!, "connections");
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// Silently handle iframe communication errors
+		}
 	};
 
 	return isLoading ? (

src/components/organisms/triggers/add.tsx

@@ -116,6 +116,15 @@ export const AddTrigger = () => {
 			});
 
 			await fetchTriggers(projectId!, true);
+
+			try {
+				const { iframeCommService } = await import("@services/iframeComm.service");
+				iframeCommService.sendAssetsUpdated(projectId!, "triggers");
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			} catch (error) {
+				// Silently handle iframe communication errors
+			}
+
 			navigate(`/projects/${projectId}/triggers/${triggerId}/edit`, {
 				state: { highlightWebhookUrl: true },
 			});

src/components/organisms/triggers/edit.tsx

@@ -176,6 +176,15 @@ export const EditTrigger = () => {
 				return;
 			}
 			await fetchTriggers(projectId!, true);
+
+			try {
+				const { iframeCommService } = await import("@services/iframeComm.service");
+				iframeCommService.sendAssetsUpdated(projectId!, "triggers");
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			} catch (error) {
+				// Silently handle iframe communication errors
+			}
+
 			addToast({
 				message: t("updatedSuccessfully"),
 				type: "success",

src/components/organisms/triggers/table.tsx

@@ -95,7 +95,15 @@ export const TriggersTable = () => {
 				type: "success",
 			});
 			LoggerService.info(namespaces.ui.triggers, t("table.triggerRemovedSuccessfullyExtended", { triggerId }));
-			fetchTriggers(projectId!, true);
+			await fetchTriggers(projectId!, true);
+
+			try {
+				const { iframeCommService } = await import("@services/iframeComm.service");
+				iframeCommService.sendAssetsUpdated(projectId!, "triggers");
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			} catch (error) {
+				// Silently handle iframe communication errors
+			}
 			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		} catch (error) {
 			addToast({

src/components/organisms/variables/add.tsx

@@ -61,6 +61,15 @@ export const AddVariable = () => {
 			return;
 		}
 		await fetchVariables(projectId!, true);
+
+		try {
+			const { iframeCommService } = await import("@services/iframeComm.service");
+			iframeCommService.sendAssetsUpdated(projectId!, "variables");
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// Silently handle iframe communication errors
+		}
+
 		navigate(-1);
 	};
 

src/components/organisms/variables/edit.tsx

@@ -91,10 +91,21 @@ export const EditVariable = () => {
 				message: t("variableNotEdited"),
 				type: "error",
 			});
+			setIsLoading(false);
+			return;
 		}
+
 		await fetchVariables(projectId!, true);
-		setIsLoading(false);
 
+		try {
+			const { iframeCommService } = await import("@services/iframeComm.service");
+			iframeCommService.sendAssetsUpdated(projectId!, "variables");
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// Silently handle iframe communication errors
+		}
+
+		setIsLoading(false);
 		navigate(`/projects/${projectId}/variables`);
 	};
 

src/components/organisms/variables/table.tsx

@@ -66,7 +66,15 @@ export const VariablesTable = () => {
 
 		setDeleteVariable(undefined);
 
-		fetchVariables(projectId!, true);
+		await fetchVariables(projectId!, true);
+
+		try {
+			const { iframeCommService } = await import("@services/iframeComm.service");
+			iframeCommService.sendAssetsUpdated(projectId!, "variables");
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// Silently handle iframe communication errors
+		}
 	};
 
 	const showDeleteModal = (variableName: string, variableValue: string, scopeId: string) => {

src/interfaces/services/iframeCommunication.interface.ts

@@ -13,8 +13,7 @@ export interface IframeMessage<T = unknown> {
 export enum MessageTypes {
 	HANDSHAKE = "HANDSHAKE",
 	HANDSHAKE_ACK = "HANDSHAKE_ACK",
-	DATA_REQUEST = "DATA_REQUEST",
-	DATA_RESPONSE = "DATA_RESPONSE",
+	ASSETS_REFRESH = "ASSETS_REFRESH",
 	EVENT = "EVENT",
 	ACTION = "ACTION",
 	ERROR = "ERROR",
@@ -25,7 +24,6 @@ export enum MessageTypes {
 	DISPLAY_DIAGRAM = "DISPLAY_DIAGRAM",
 	SET_EDITOR_CODE_SELECTION = "SET_EDITOR_CODE_SELECTION",
 	WELCOME_MESSAGE = "WELCOME_MESSAGE",
-	VAR_UPDATED = "VAR_UPDATED",
 	REFRESH_CONNECTION = "REFRESH_CONNECTION",
 	REFRESH_DEPLOYMENTS = "REFRESH_DEPLOYMENTS",
 	CODE_FIX_SUGGESTION = "CODE_FIX_SUGGESTION",
@@ -49,12 +47,8 @@ export interface ProjectCreationMessage
 	extends IframeMessage<{ data: { eventName: string; payload: { projectId: string; projectName: string } } }> {
 	type: MessageTypes.NAVIGATE_TO_PROJECT;
 }
-export interface DataRequestMessage extends IframeMessage<{ requestId: string; resource: string }> {
-	type: MessageTypes.DATA_REQUEST;
-}
-
-export interface DataResponseMessage extends IframeMessage<{ data: unknown; requestId: string }> {
-	type: MessageTypes.DATA_RESPONSE;
+export interface AssetsRefreshMessage extends IframeMessage<{ requestId: string; resource: string }> {
+	type: MessageTypes.ASSETS_REFRESH;
 }
 
 export interface EventMessage extends IframeMessage<{ eventName: string; payload: unknown }> {
@@ -93,10 +87,6 @@ export interface NavigateToBillingMessage extends IframeMessage<Record<string, n
 	type: MessageTypes.NAVIGATE_TO_BILLING;
 }
 
-export interface VarUpdatedMessage extends IframeMessage<{ projectId: string }> {
-	type: MessageTypes.VAR_UPDATED;
-}
-
 export interface RefreshDeploymentsMessage extends IframeMessage<Record<string, never>> {
 	type: MessageTypes.REFRESH_DEPLOYMENTS;
 }

src/interfaces/services/index.ts

@@ -14,16 +14,13 @@ export type {
 	HandshakeMessage,
 	HandshakeAckMessage,
 	ProjectCreationMessage,
-	DataRequestMessage,
-	DataResponseMessage,
 	EventMessage,
 	ActionMessage,
 	ErrorMessage,
 	FileContentMessage,
 	DiagramDisplayMessage,
 	NavigateToProjectMessage,
 	NavigateToConnectionMessage,
-	VarUpdatedMessage,
 	CodeFixSuggestionMessage,
 	DownloadDumpMessage,
 	DownloadDumpResponseMessage,

src/locales/en/services/translation.json

@@ -143,7 +143,6 @@
 			"failedToSendHandshakeMessage": "Failed to send handshake message: {{error}}",
 			"queueProcessingExceeded": "Queue processing exceeded max attempts ({{maxAttempts}}), clearing queue",
 			"errorProcessingIncomingMessage": "Error processing incoming message: {{error}}",
-			"errorImportingStoreForVarUpdatedHandling": "Error importing store for var updated handling: {{error}}",
 			"failedToDownloadFile": "Failed to download file {{filename}}: {{error}}",
 			"failedToDownloadChatFile": "Failed to download chat file {{filename}}: {{error}}",
 			"iframeReferenceNotSet": "Iframe reference not set",