Re-render db panel on config update (#1763)

Author: charisk

extensions/ql-vscode/src/databases/db-config-store.ts

@@ -6,8 +6,12 @@ import { DisposableObject } from '../pure/disposable-object';
 import { DbConfigValidator } from './db-config-validator';
 import { ValueResult } from '../common/value-result';
 import { App } from '../common/app';
+import { AppEvent, AppEventEmitter } from '../common/events';
 
 export class DbConfigStore extends DisposableObject {
+  public readonly onDidChangeConfig: AppEvent<void>;
+  private readonly onDidChangeConfigEventEmitter: AppEventEmitter<void>;
+
   private readonly configPath: string;
   private readonly configValidator: DbConfigValidator;
 
@@ -25,6 +29,8 @@ export class DbConfigStore extends DisposableObject {
     this.configErrors = [];
     this.configWatcher = undefined;
     this.configValidator = new DbConfigValidator(app.extensionPath);
+    this.onDidChangeConfigEventEmitter = app.createEventEmitter<void>();
+    this.onDidChangeConfig = this.onDidChangeConfigEventEmitter.event;
   }
 
   public async initialize(): Promise<void> {
@@ -85,6 +91,8 @@ export class DbConfigStore extends DisposableObject {
     }
 
     this.config = this.configErrors.length === 0 ? newConfig : undefined;
+
+    this.onDidChangeConfigEventEmitter.fire();
   }
 
   private watchConfig(): void {

extensions/ql-vscode/src/databases/db-manager.ts

@@ -1,12 +1,24 @@
+import { App } from '../common/app';
+import { AppEvent, AppEventEmitter } from '../common/events';
 import { ValueResult } from '../common/value-result';
 import { DbConfigStore } from './db-config-store';
 import { DbItem } from './db-item';
 import { createLocalTree, createRemoteTree } from './db-tree-creator';
 
 export class DbManager {
+  public readonly onDbItemsChanged: AppEvent<void>;
+  private readonly onDbItemsChangesEventEmitter: AppEventEmitter<void>;
+
   constructor(
+    app: App,
     private readonly dbConfigStore: DbConfigStore
   ) {
+    this.onDbItemsChangesEventEmitter = app.createEventEmitter<void>();
+    this.onDbItemsChanged = this.onDbItemsChangesEventEmitter.event;
+
+    this.dbConfigStore.onDidChangeConfig(() => {
+      this.onDbItemsChangesEventEmitter.fire();
+    });
   }
 
   public getDbItems(): ValueResult<DbItem[]> {

extensions/ql-vscode/src/databases/db-module.ts

@@ -22,7 +22,7 @@ export class DbModule extends DisposableObject {
     const dbConfigStore = new DbConfigStore(app);
     await dbConfigStore.initialize();
 
-    const dbManager = new DbManager(dbConfigStore);
+    const dbManager = new DbManager(app, dbConfigStore);
     const dbPanel = new DbPanel(dbManager);
     await dbPanel.initialize();
 

extensions/ql-vscode/src/databases/ui/db-tree-data-provider.ts

@@ -1,15 +1,29 @@
-import { ProviderResult, TreeDataProvider, TreeItem } from 'vscode';
+import { Event, EventEmitter, ProviderResult, TreeDataProvider, TreeItem } from 'vscode';
 import { createDbTreeViewItemError, DbTreeViewItem } from './db-tree-view-item';
 import { DbManager } from '../db-manager';
 import { mapDbItemToTreeViewItem } from './db-item-mapper';
+import { DisposableObject } from '../../pure/disposable-object';
 
-export class DbTreeDataProvider implements TreeDataProvider<DbTreeViewItem> {
+export class DbTreeDataProvider extends DisposableObject implements TreeDataProvider<DbTreeViewItem> {
+
+  // This is an event to signal that there's been a change in the tree which
+  // will case the view to refresh. It is part of the TreeDataProvider interface.
+  public readonly onDidChangeTreeData: Event<DbTreeViewItem | undefined>;
+
+  private _onDidChangeTreeData = this.push(new EventEmitter<DbTreeViewItem | undefined>());
   private dbTreeItems: DbTreeViewItem[];
 
   public constructor(
     private readonly dbManager: DbManager
   ) {
+    super();
     this.dbTreeItems = this.createTree();
+    this.onDidChangeTreeData = this._onDidChangeTreeData.event;
+
+    dbManager.onDbItemsChanged(() => {
+      this.dbTreeItems = this.createTree();
+      this._onDidChangeTreeData.fire(undefined);
+    });
   }
 
   /**

extensions/ql-vscode/src/vscode-tests/minimal-workspace/databases/db-panel.test.ts

@@ -31,10 +31,12 @@ describe('db panel', async () => {
       globalStoragePath,
       workspaceStoragePath
     });
+    await fs.ensureDir(workspaceStoragePath);
+
     const app = new ExtensionApp(extensionContext);
 
     dbConfigStore = new DbConfigStore(app);
-    dbManager = new DbManager(dbConfigStore);
+    dbManager = new DbManager(app, dbConfigStore);
 
     // Create a modified version of the DbPanel module that allows
     // us to override the creation of the DbTreeDataProvider
@@ -228,8 +230,10 @@ describe('db panel', async () => {
   async function saveDbConfig(dbConfig: DbConfig): Promise<void> {
     await fs.writeJson(dbConfigFilePath, dbConfig);
 
-    // Once we have watching of the db config, this can happen
-    // at the start of the test.
+    // Ideally we would just initialise the db config store at the start
+    // of each test and then rely on the file watcher to update the config.
+    // However, this requires adding sleep to the tests to allow for the 
+    // file watcher to catch up, so we instead initialise the config store here.
     await dbConfigStore.initialize();
     dbTreeDataProvider = new DbTreeDataProvider(dbManager);
   }