fix

Author: GurinderRawala

public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx

@@ -1,10 +1,11 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Provider, shallowEqual, useSelector } from 'react-redux';
 
 import { FnPropMappedFromState, FnState, updatePartialFnStates } from 'app/core/reducers/fn-slice';
 import { FnLoggerService } from 'app/fn_logger';
 import {
+  MfeGlobalState,
   MfeStore,
   mfeStore,
   removeGrafanaStoreAndDashboard,
@@ -35,6 +36,16 @@ export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
       .map(([uid, props]) => [uid, props] satisfies [string, FnState]);
   }, [globalFnProps.dashboards]);
 
+  useEffect(() => {
+    const timer = isDashboardValidPoller(globalFnProps, dashboards);
+    if (!globalFnProps.renderingDashboardUID.length && dashboards.length > 0) {
+      clearInterval(timer);
+    }
+    return () => {
+      clearInterval(timer);
+    };
+  }, [globalFnProps, dashboards]);
+
   return useMemo(() => {
     return dashboards.map(([uid, props]) => {
       if (!uid.length) {
@@ -78,3 +89,28 @@ export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dashboards, p, globalFnProps.renderingDashboardUID]);
 };
+
+/**
+ * Checks if the dashboard is valid every 500ms.
+ */
+const POLLING_INTERVAL = 500;
+function isDashboardValidPoller(globalFnProps: MfeGlobalState, dashboards: Array<[string, FnState]>) {
+  return setInterval(() => {
+    dashboards.forEach(([uid, props]) => {
+      if (!document.getElementById(props.portalContainerID)) {
+        FnLoggerService.info("[Polling]:: removing dashboard from MfeStore because portalContainerID doesn't exist", {
+          portalID: props.portalContainerID,
+          uid,
+        });
+        mfeStore.dispatch(removeGrafanaStoreAndDashboard(uid));
+      }
+    });
+
+    if (
+      globalFnProps.renderingDashboardUID &&
+      !dashboards.some(([uid]) => uid === globalFnProps.renderingDashboardUID)
+    ) {
+      mfeStore.dispatch(updateRenderingDashboardUID(''));
+    }
+  }, POLLING_INTERVAL);
+}