Move tabs manager to zustand (#915)

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -16,6 +16,7 @@ import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { useTabs } from "../../hooks/useTabs";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
@@ -57,7 +58,10 @@ export class ResourceTreeAdapter implements ReactAdapter {
     this.parameters = ko.observable(Date.now());
 
     useSelectedNode.subscribe(() => this.triggerRender());
-    this.container.tabsManager.activeTab.subscribe((newValue: TabsBase) => this.triggerRender());
+    useTabs.subscribe(
+      () => this.triggerRender(),
+      (state) => state.activeTab
+    );
     useNotebook.subscribe(
       () => this.triggerRender(),
       (state) => state.isNotebookEnabled
@@ -188,8 +192,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isExpanded: false,
         className: "databaseHeader",
         children: [],
-        isSelected: () =>
-          useSelectedNode.getState().isDataNodeSelected(this.container.tabsManager.activeTab(), database.id()),
+        isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
         contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(this.container, database.id()),
         onClick: async (isExpanded) => {
           // Rewritten version of expandCollapseDatabase():
@@ -204,7 +207,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
           databaseNode.isLoading = false;
           useSelectedNode.getState().setSelectedNode(database);
           useCommandBar.getState().setContextButtons([]);
-          this.container.tabsManager.refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
+          useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
         },
         onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
       };
@@ -215,9 +218,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
           isSelected: () =>
             useSelectedNode
               .getState()
-              .isDataNodeSelected(this.container.tabsManager.activeTab(), database.id(), undefined, [
-                ViewModels.CollectionTabKind.DatabaseSettings,
-              ]),
+              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettings]),
           onClick: database.onSettingsClick.bind(database),
         });
       }
@@ -265,7 +266,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       isSelected: () =>
         useSelectedNode
           .getState()
-          .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
+          .isDataNodeSelected(collection.databaseId, collection.id(), [
             ViewModels.CollectionTabKind.Documents,
             ViewModels.CollectionTabKind.Graph,
           ]),
@@ -283,9 +284,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.SchemaAnalyzer,
-            ]),
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.SchemaAnalyzer]),
       });
     }
 
@@ -296,9 +295,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.Settings,
-            ]),
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Settings]),
       });
     }
 
@@ -326,9 +323,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.Conflicts,
-            ]),
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Conflicts]),
       });
     }
 
@@ -343,10 +338,12 @@ export class ResourceTreeAdapter implements ReactAdapter {
         // Rewritten version of expandCollapseCollection
         useSelectedNode.getState().setSelectedNode(collection);
         useCommandBar.getState().setContextButtons([]);
-        this.container.tabsManager.refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
+        useTabs
+          .getState()
+          .refreshActiveTab(
+            (tab: TabsBase) =>
+              tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+          );
       },
       onExpanded: () => {
         if (ResourceTreeAdapter.showScriptNodes(this.container)) {
@@ -355,10 +352,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
           collection.loadTriggers();
         }
       },
-      isSelected: () =>
-        useSelectedNode
-          .getState()
-          .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id()),
+      isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
       onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
     };
   }
@@ -372,17 +366,19 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
+            .isDataNodeSelected(collection.databaseId, collection.id(), [
               ViewModels.CollectionTabKind.StoredProcedures,
             ]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(this.container, sp),
       })),
       onClick: () => {
         collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
-        this.container.tabsManager.refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
+        useTabs
+          .getState()
+          .refreshActiveTab(
+            (tab: TabsBase) =>
+              tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+          );
       },
     };
   }
@@ -396,7 +392,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
+            .isDataNodeSelected(collection.databaseId, collection.id(), [
               ViewModels.CollectionTabKind.UserDefinedFunctions,
             ]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(
@@ -406,10 +402,12 @@ export class ResourceTreeAdapter implements ReactAdapter {
       })),
       onClick: () => {
         collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
-        this.container.tabsManager.refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
+        useTabs
+          .getState()
+          .refreshActiveTab(
+            (tab: TabsBase) =>
+              tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+          );
       },
     };
   }
@@ -423,17 +421,17 @@ export class ResourceTreeAdapter implements ReactAdapter {
         isSelected: () =>
           useSelectedNode
             .getState()
-            .isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.Triggers,
-            ]),
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Triggers]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(this.container, trigger),
       })),
       onClick: () => {
         collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);
-        this.container.tabsManager.refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
+        useTabs
+          .getState()
+          .refreshActiveTab(
+            (tab: TabsBase) =>
+              tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+          );
       },
     };
   }
@@ -452,9 +450,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       children: this.getSchemaNodes(collection.schema.fields),
       onClick: () => {
         collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Schema);
-        this.container.tabsManager.refreshActiveTab(
-          (tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid
-        );
+        useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid);
       },
     };
   }
@@ -584,7 +580,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       className: "notebookHeader galleryHeader",
       onClick: () => this.container.openGallery(),
       isSelected: () => {
-        const activeTab = this.container.tabsManager.activeTab();
+        const activeTab = useTabs.getState().activeTab;
         return activeTab && activeTab.tabKind === ViewModels.CollectionTabKind.Gallery;
       },
     };
@@ -678,7 +674,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       className: "notebookHeader",
       onClick: () => onFileClick(item),
       isSelected: () => {
-        const activeTab = this.container.tabsManager.activeTab();
+        const activeTab = useTabs.getState().activeTab;
         return (
           activeTab &&
           activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
@@ -833,7 +829,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         }
       },
       isSelected: () => {
-        const activeTab = this.container.tabsManager.activeTab();
+        const activeTab = useTabs.getState().activeTab;
         return (
           activeTab &&
           activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&