Merge pull request #2705 from github/robertbrignull/details-multiple-editors

Allow the details view to handle multiple open data extensions editors

Author: robertbrignull

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-module.ts

@@ -32,6 +32,9 @@ export class DataExtensionsEditorModule extends DisposableObject {
   private readonly queryStorageDir: string;
   private readonly modelDetailsPanel: ModelDetailsPanel;
 
+  private mostRecentlyActiveView: DataExtensionsEditorView | undefined =
+    undefined;
+
   private constructor(
     private readonly ctx: ExtensionContext,
     private readonly app: App,
@@ -48,6 +51,20 @@ export class DataExtensionsEditorModule extends DisposableObject {
     this.modelDetailsPanel = this.push(new ModelDetailsPanel(cliServer));
   }
 
+  private handleViewBecameActive(view: DataExtensionsEditorView): void {
+    this.mostRecentlyActiveView = view;
+  }
+
+  private handleViewWasDisposed(view: DataExtensionsEditorView): void {
+    if (this.mostRecentlyActiveView === view) {
+      this.mostRecentlyActiveView = undefined;
+    }
+  }
+
+  private isMostRecentlyActiveView(view: DataExtensionsEditorView): boolean {
+    return this.mostRecentlyActiveView === view;
+  }
+
   public static async initialize(
     ctx: ExtensionContext,
     app: App,
@@ -149,6 +166,9 @@ export class DataExtensionsEditorModule extends DisposableObject {
               Mode.Application,
               this.modelDetailsPanel.setState.bind(this.modelDetailsPanel),
               this.modelDetailsPanel.revealItem.bind(this.modelDetailsPanel),
+              this.handleViewBecameActive.bind(this),
+              this.handleViewWasDisposed.bind(this),
+              this.isMostRecentlyActiveView.bind(this),
             );
             await view.openView();
           },

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-view.ts

@@ -50,6 +50,8 @@ export class DataExtensionsEditorView extends AbstractWebview<
 > {
   private readonly autoModeler: AutoModeler;
 
+  private externalApiUsages: ExternalApiUsage[];
+
   public constructor(
     ctx: ExtensionContext,
     private readonly app: App,
@@ -66,6 +68,15 @@ export class DataExtensionsEditorView extends AbstractWebview<
       databaseItem: DatabaseItem,
     ) => Promise<void>,
     private readonly revealItemInDetailsPanel: (usage: Usage) => Promise<void>,
+    private readonly handleViewBecameActive: (
+      view: DataExtensionsEditorView,
+    ) => void,
+    private readonly handleViewWasDisposed: (
+      view: DataExtensionsEditorView,
+    ) => void,
+    private readonly isMostRecentlyActiveView: (
+      view: DataExtensionsEditorView,
+    ) => boolean,
   ) {
     super(ctx);
 
@@ -86,12 +97,27 @@ export class DataExtensionsEditorView extends AbstractWebview<
         await this.postMessage({ t: "addModeledMethods", modeledMethods });
       },
     );
+    this.externalApiUsages = [];
   }
 
   public async openView() {
     const panel = await this.getPanel();
     panel.reveal(undefined, true);
 
+    panel.onDidChangeViewState(async () => {
+      if (panel.active) {
+        this.handleViewBecameActive(this);
+        await this.updateModelDetailsPanelState(
+          this.externalApiUsages,
+          this.databaseItem,
+        );
+      }
+    });
+
+    panel.onDidDispose(async () => {
+      this.handleViewWasDisposed(this);
+    });
+
     await this.waitForPanelLoaded();
   }
 
@@ -280,16 +306,18 @@ export class DataExtensionsEditorView extends AbstractWebview<
             maxStep: 1500,
           });
 
-          const externalApiUsages = decodeBqrsToExternalApiUsages(bqrsChunk);
+          this.externalApiUsages = decodeBqrsToExternalApiUsages(bqrsChunk);
 
           await this.postMessage({
             t: "setExternalApiUsages",
-            externalApiUsages,
+            externalApiUsages: this.externalApiUsages,
           });
-          await this.updateModelDetailsPanelState(
-            externalApiUsages,
-            this.databaseItem,
-          );
+          if (this.isMostRecentlyActiveView(this)) {
+            await this.updateModelDetailsPanelState(
+              this.externalApiUsages,
+              this.databaseItem,
+            );
+          }
         } catch (err) {
           void showAndLogExceptionWithTelemetry(
             this.app.logger,
@@ -409,6 +437,9 @@ export class DataExtensionsEditorView extends AbstractWebview<
         Mode.Framework,
         this.updateModelDetailsPanelState,
         this.revealItemInDetailsPanel,
+        this.handleViewBecameActive,
+        this.handleViewWasDisposed,
+        this.isMostRecentlyActiveView,
       );
       await view.openView();
     });