Fix: sync in sub-frames for common-stores are broken (#724)

* fix: sync in sub-frames for common-stores are broken

Signed-off-by: Roman <ixrock@gmail.com>

* clean up

Signed-off-by: Roman <ixrock@gmail.com>

src/common/base-store.ts

@@ -6,7 +6,7 @@ import { action, observable, reaction, runInAction, toJS, when } from "mobx";
 import Singleton from "./utils/singleton";
 import { getAppVersion } from "./utils/app-version";
 import logger from "../main/logger";
-import { broadcastIpc } from "./ipc";
+import { broadcastIpc, IpcBroadcastParams } from "./ipc";
 import isEqual from "lodash/isEqual";
 
 export interface BaseStoreParams<T = any> extends ConfOptions<T> {
@@ -63,7 +63,7 @@ export class BaseStore<T = any> extends Singleton {
     this.isLoaded = true;
   }
 
-  protected async save(model: T) {
+  protected async saveToFile(model: T) {
     logger.info(`[STORE]: SAVING ${this.name}`);
     // todo: update when fixed https://github.com/sindresorhus/conf/issues/114
     Object.entries(model).forEach(([key, value]) => {
@@ -115,8 +115,8 @@ export class BaseStore<T = any> extends Singleton {
 
   protected async onModelChange(model: T) {
     if (ipcMain) {
-      this.save(model); // save config file
+      this.saveToFile(model); // save config file
-      broadcastIpc({ channel: this.syncChannel, args: [model] }); // broadcast to renderer views
+      this.syncToWebViews(model); // send update to renderer views
     }
     // send "update-request" to main-process
     if (ipcRenderer) {
@@ -124,6 +124,30 @@ export class BaseStore<T = any> extends Singleton {
     }
   }
 
+  protected async syncToWebViews(model: T) {
+    const msg: IpcBroadcastParams = {
+      channel: this.syncChannel,
+      args: [model],
+    }
+    broadcastIpc(msg); // send to all windows (BrowserWindow, webContents)
+    const frames = await this.getSubFrames();
+    frames.forEach(frameId => {
+      broadcastIpc({ frameId, ...msg }); // send to all sub-frames (e.g. cluster-view managed in iframe)
+    });
+  }
+
+  // todo: refactor?
+  protected async getSubFrames(): Promise<number[]> {
+    const subFrames: number[] = [];
+    const { clusterStore } = await import("./cluster-store");
+    clusterStore.clustersList.forEach(cluster => {
+      if (cluster.frameId) {
+        subFrames.push(cluster.frameId)
+      }
+    });
+    return subFrames;
+  }
+
   @action
   protected fromStore(data: T) {
     this.data = data;

src/common/cluster-ipc.ts

@@ -3,7 +3,7 @@ import { ClusterId, clusterStore } from "./cluster-store";
 import { tracker } from "./tracker";
 
 export const clusterIpc = {
-  init: createIpcChannel({
+  initView: createIpcChannel({
     channel: "cluster:init",
     handle: async (clusterId: ClusterId, frameId: number) => {
       const cluster = clusterStore.getById(clusterId);

src/renderer/components/app.tsx

@@ -38,10 +38,11 @@ import { webFrame } from "electron";
 @observer
 export class App extends React.Component {
   static async init() {
+    const frameId = webFrame.routingId;
     const clusterId = getHostedClusterId();
-    logger.info(`[APP]: Init dashboard, clusterId=${clusterId}`)
+    logger.info(`[APP]: Init dashboard, clusterId=${clusterId}, frameId=${frameId}`)
     await Terminal.preloadFonts()
-    await clusterIpc.init.invokeFromRenderer(clusterId, webFrame.routingId);
+    await clusterIpc.initView.invokeFromRenderer(clusterId, frameId);
     await getHostedCluster().whenInitialized;
   }