Fix resource tree refresh issue (#222)

src/Explorer/Tree/Database.ts

@@ -290,6 +290,10 @@ export default class Database implements ViewModels.Database {
   }
 
   private deleteCollectionsFromList(collectionsToRemove: Collection[]): void {
+    if (collectionsToRemove.length === 0) {
+      return;
+    }
+
     const collectionsToKeep: Collection[] = [];
 
     ko.utils.arrayForEach(this.collections(), (collection: Collection) => {

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -64,7 +64,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     this.container.nonSystemDatabases.subscribe((databases: ViewModels.Database[]) => {
       // Clean up old databases
-      this.cleanupDatabasesKoSubs(databases.map((database: ViewModels.Database) => database.id()));
+      this.cleanupDatabasesKoSubs();
 
       databases.forEach((database: ViewModels.Database) => this.watchDatabase(database));
       this.triggerRender();
@@ -799,16 +799,10 @@ export class ResourceTreeAdapter implements ReactAdapter {
     this.koSubsCollectionIdMap.push(collectionId, sub);
   }
 
-  private cleanupDatabasesKoSubs(existingDatabaseIds: string[]): void {
+  private cleanupDatabasesKoSubs(): void {
-    const databaseIdsToRemove = this.databaseCollectionIdMap
+    this.koSubsDatabaseIdMap.keys().forEach((databaseId: string) => {
-      .keys()
+      this.koSubsDatabaseIdMap.get(databaseId).forEach((sub: ko.Subscription) => sub.dispose());
-      .filter((id: string) => existingDatabaseIds.indexOf(id) === -1);
+      this.koSubsDatabaseIdMap.delete(databaseId);
-
-    databaseIdsToRemove.forEach((databaseId: string) => {
-      if (this.koSubsDatabaseIdMap.has(databaseId)) {
-        this.koSubsDatabaseIdMap.get(databaseId).forEach((sub: ko.Subscription) => sub.dispose());
-        this.koSubsDatabaseIdMap.delete(databaseId);
-      }
 
       if (this.databaseCollectionIdMap.has(databaseId)) {
         this.databaseCollectionIdMap

test/sql/container.spec.ts

@@ -3,8 +3,8 @@ import crypto from "crypto";
 
 jest.setTimeout(300000);
 
-describe('Collection Add and Delete SQL spec', () => {
+describe("Collection Add and Delete SQL spec", () => {
-  it('creates a collection', async () => {
+  it("creates a collection", async () => {
     try {
       const dbId = `TestDatabase${crypto.randomBytes(8).toString("hex")}`;
       const collectionId = `TestCollection${crypto.randomBytes(8).toString("hex")}`;
@@ -13,10 +13,10 @@ describe('Collection Add and Delete SQL spec', () => {
       page.goto(prodUrl);
 
       // log in with connection string
-      const handle = await page.waitForSelector('iframe');
+      const handle = await page.waitForSelector("iframe");
       const frame = await handle.contentFrame();
-      await frame.waitFor('div > p.switchConnectTypeText', { visible: true });
+      await frame.waitFor("div > p.switchConnectTypeText", { visible: true });
-      await frame.click('div > p.switchConnectTypeText');
+      await frame.click("div > p.switchConnectTypeText");
       const connStr = process.env.PORTAL_RUNNER_CONNECTION_STRING;
       await frame.type("input[class='inputToken']", connStr);
       await frame.click("input[value='Connect']");
@@ -25,30 +25,30 @@ describe('Collection Add and Delete SQL spec', () => {
       await frame.waitFor('button[data-test="New Container"]', { visible: true });
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       await frame.click('button[data-test="New Container"]');
-      
+
       // check new database
       await frame.waitFor('input[data-test="addCollection-createNewDatabase"]');
       await frame.click('input[data-test="addCollection-createNewDatabase"]');
 
       // check shared throughput
       await frame.waitFor('input[data-test="addCollectionPane-databaseSharedThroughput"]');
-      await frame.click('input[data-test="addCollectionPane-databaseSharedThroughput"]')   ;   
+      await frame.click('input[data-test="addCollectionPane-databaseSharedThroughput"]');
 
       // type database id
       await frame.waitFor('input[data-test="addCollection-newDatabaseId"]');
-      await frame.type('input[data-test="addCollection-newDatabaseId"]', dbId);      
+      await frame.type('input[data-test="addCollection-newDatabaseId"]', dbId);
 
       // type collection id
       await frame.waitFor('input[data-test="addCollection-collectionId"]');
-      await frame.type('input[data-test="addCollection-collectionId"]', collectionId); 
+      await frame.type('input[data-test="addCollection-collectionId"]', collectionId);
 
       // type partition key value
       await frame.waitFor('input[data-test="addCollection-partitionKeyValue"]');
       await frame.type('input[data-test="addCollection-partitionKeyValue"]', sharedKey);
 
       // click submit
-      await frame.waitFor('#submitBtnAddCollection');
+      await frame.waitFor("#submitBtnAddCollection");
-      await frame.click('#submitBtnAddCollection');
+      await frame.click("#submitBtnAddCollection");
 
       // validate created
       // open database menu
@@ -56,27 +56,27 @@ describe('Collection Add and Delete SQL spec', () => {
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
 
       await frame.click(`div[data-test="${dbId}"]`);
+      await frame.waitFor(3000);
       await frame.waitFor(`span[title="${collectionId}"]`, { visible: true });
-      await frame.waitFor(3000)
+
-      await frame.waitFor(`span[title="${collectionId}"]`, { visible: true });
-      
       // delete container
 
       // click context menu for container
       await frame.waitFor(`div[data-test="${collectionId}"] > div > button`, { visible: true });
       await frame.waitFor(`span[title="${collectionId}"]`, { visible: true });
       await frame.click(`div[data-test="${collectionId}"] > div > button`);
-      await frame.waitFor(2000)
+      await frame.waitFor(2000);
+
       // click delete container
       await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]', { visible: true });
       await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
 
       // confirm delete container
-      await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true })
+      await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
       await frame.type('input[data-test="confirmCollectionId"]', collectionId.trim());
 
       // click delete
-      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true })
+      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
       await frame.click('input[data-test="deleteCollection"]');
       await frame.waitFor(5000);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
@@ -102,9 +102,9 @@ describe('Collection Add and Delete SQL spec', () => {
       await expect(page).not.toMatchElement(`div[data-test="${dbId}"]`);
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const testName = (expect as any).getState().currentTestName
+      const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({path: `Test Failed ${testName}.jpg`});
+      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
       throw error;
-    } 
+    }
-  }) 
+  });
-})
+});