Move resource token collection to useDatabases zustand store (#916)

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -48,7 +48,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],
@@ -134,7 +133,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],

src/Explorer/Explorer.tsx

@@ -87,7 +87,6 @@ export default class Explorer {
   private resourceTree: ResourceTreeAdapter;
 
   // Resource Token
-  public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
   public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
 
   // Tabs
@@ -157,7 +156,6 @@ export default class Explorer {
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
 
     this.queriesClient = new QueriesClient(this);
-    this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
 
     useSelectedNode.subscribe(() => {
@@ -340,8 +338,9 @@ export default class Explorer {
     }
 
     return readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
-      this.resourceTokenCollection(new ResourceTokenCollection(this, databaseId, collection));
+      const resourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
-      useSelectedNode.getState().setSelectedNode(this.resourceTokenCollection());
+      useDatabases.setState({ resourceTokenCollection });
+      useSelectedNode.getState().setSelectedNode(resourceTokenCollection);
     });
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -6,6 +6,7 @@ import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import NotebookManager from "../../Notebook/NotebookManager";
+import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 
@@ -376,10 +377,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
   describe("Resource token", () => {
     const mockCollection = { id: ko.observable("test") } as CollectionBase;
     useSelectedNode.getState().setSelectedNode(mockCollection);
+    useDatabases.setState({ resourceTokenCollection: mockCollection });
     const selectedNodeState = useSelectedNode.getState();
+
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.resourceTokenCollection = ko.observable(mockCollection);
 
       updateUserContext({
         authType: AuthType.ResourceToken,

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -31,6 +31,7 @@ import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
+import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState } from "../../useSelectedNode";
 
 let counter = 0;
@@ -554,12 +555,12 @@ function createStaticCommandBarButtonsForResourceToken(
   const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
   const openQueryBtn = createOpenQueryButton(container);
 
+  const resourceTokenCollection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
   const isResourceTokenCollectionNodeSelected: boolean =
-    container.resourceTokenCollection() &&
+    resourceTokenCollection?.id() === selectedNodeState.selectedNode?.id();
-    container.resourceTokenCollection().id() === selectedNodeState.selectedNode?.id();
   newSqlQueryBtn.disabled = !isResourceTokenCollectionNodeSelected;
   newSqlQueryBtn.onCommandClick = () => {
-    const resourceTokenCollection: ViewModels.CollectionBase = container.resourceTokenCollection();
+    const resourceTokenCollection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
     resourceTokenCollection && resourceTokenCollection.onNewQueryClick(resourceTokenCollection, undefined);
   };
 

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -37,7 +37,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "container": [Circular],
             },
             "refreshNotebookList": [Function],
-            "resourceTokenCollection": [Function],
             "resourceTree": ResourceTreeAdapter {
               "container": [Circular],
               "copyNotebook": [Function],

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -27,7 +27,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "container": [Circular],
       },
       "refreshNotebookList": [Function],
-      "resourceTokenCollection": [Function],
       "resourceTree": ResourceTreeAdapter {
         "container": [Circular],
         "copyNotebook": [Function],

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

@@ -1,37 +1,27 @@
 import { shallow } from "enzyme";
-import * as ko from "knockout";
 import React from "react";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import ResourceTokenCollection from "./ResourceTokenCollection";
 import { ResourceTreeAdapterForResourceToken } from "./ResourceTreeAdapterForResourceToken";
 
-const createMockContainer = (): Explorer => {
+describe("Resource tree for resource token", () => {
-  let mockContainer = {} as Explorer;
+  const mockContainer = {} as Explorer;
-  mockContainer.resourceTokenCollection = createMockCollection(mockContainer);
+  const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer);
-
+  const mockCollection = {
-  return mockContainer;
+    _rid: "fakeRid",
-};
+    _self: "fakeSelf",
-
+    id: "fakeId",
-const createMockCollection = (container: Explorer): ko.Observable<ViewModels.CollectionBase> => {
+  } as DataModels.Collection;
-  let mockCollection = {} as DataModels.Collection;
-  mockCollection._rid = "fakeRid";
-  mockCollection._self = "fakeSelf";
-  mockCollection.id = "fakeId";
-
   const mockResourceTokenCollection: ViewModels.CollectionBase = new ResourceTokenCollection(
-    container,
+    mockContainer,
     "fakeDatabaseId",
     mockCollection
   );
-  return ko.observable<ViewModels.CollectionBase>(mockResourceTokenCollection);
+  useDatabases.setState({ resourceTokenCollection: mockResourceTokenCollection });
-};
-
-describe("Resource tree for resource token", () => {
-  const mockContainer: Explorer = createMockContainer();
-  const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer);
 
   it("should render", () => {
     const rootNode: TreeNode = resourceTree.buildCollectionNode();

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

@@ -9,6 +9,7 @@ import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 
 export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
@@ -18,7 +19,10 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   public constructor(private container: Explorer) {
     this.parameters = ko.observable(Date.now());
 
-    this.container.resourceTokenCollection.subscribe(() => this.triggerRender());
+    useDatabases.subscribe(
+      () => this.triggerRender(),
+      (state) => state.resourceTokenCollection
+    );
     useSelectedNode.subscribe(() => this.triggerRender());
     this.container.tabsManager && this.container.tabsManager.activeTab.subscribe(() => this.triggerRender());
 
@@ -31,7 +35,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   }
 
   public buildCollectionNode(): TreeNode {
-    const collection: ViewModels.CollectionBase = this.container.resourceTokenCollection();
+    const collection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
     if (!collection) {
       return {
         label: undefined,

src/Explorer/useDatabases.ts

@@ -5,6 +5,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 
 interface DatabasesState {
   databases: ViewModels.Database[];
+  resourceTokenCollection: ViewModels.CollectionBase;
   updateDatabase: (database: ViewModels.Database) => void;
   addDatabases: (databases: ViewModels.Database[]) => void;
   deleteDatabase: (database: ViewModels.Database) => void;
@@ -20,6 +21,7 @@ interface DatabasesState {
 
 export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
   databases: [],
+  resourceTokenCollection: undefined,
   updateDatabase: (updatedDatabase: ViewModels.Database) =>
     set((state) => {
       const updatedDatabases = state.databases.map((database: ViewModels.Database) => {