From 98d7bb37d5590cbf41287e10d80d367da9b0ffc1 Mon Sep 17 00:00:00 2001 From: victor-meng <56978073+victor-meng@users.noreply.github.com> Date: Tue, 6 Jul 2021 12:05:38 -0700 Subject: [PATCH] Move resource token collection to useDatabases zustand store (#916) --- .../SettingsComponent.test.tsx.snap | 2 -- src/Explorer/Explorer.tsx | 7 ++-- .../CommandBarComponentButtonFactory.test.ts | 4 ++- .../CommandBarComponentButtonFactory.tsx | 7 ++-- .../GitHubReposPanel.test.tsx.snap | 1 - .../StringInputPane.test.tsx.snap | 1 - ...sourceTreeAdapterForResourceToken.test.tsx | 32 +++++++------------ .../ResourceTreeAdapterForResourceToken.tsx | 8 +++-- src/Explorer/useDatabases.ts | 2 ++ 9 files changed, 29 insertions(+), 35 deletions(-) diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap index e34b56fb7..9e07428b0 100644 --- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap +++ b/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], diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index 055868a24..18e43b75c 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -87,7 +87,6 @@ export default class Explorer { private resourceTree: ResourceTreeAdapter; // Resource Token - public resourceTokenCollection: ko.Observable; public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken; // Tabs @@ -157,7 +156,6 @@ export default class Explorer { this.memoryUsageInfo = ko.observable(); this.queriesClient = new QueriesClient(this); - this.resourceTokenCollection = ko.observable(); this.isSchemaEnabled = ko.computed(() => 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)); - useSelectedNode.getState().setSelectedNode(this.resourceTokenCollection()); + const resourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection); + useDatabases.setState({ resourceTokenCollection }); + useSelectedNode.getState().setSelectedNode(resourceTokenCollection); }); } diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts index 3e8ae6b04..490b76067 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts +++ b/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, diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx index 35f2ee82d..26bc809b7 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx +++ b/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() && - container.resourceTokenCollection().id() === selectedNodeState.selectedNode?.id(); + 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); }; diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap index 11d90cd75..9841b63da 100644 --- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap +++ b/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], diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap index 0f3f1eb45..720e6feff 100644 --- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap +++ b/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], diff --git a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx index b933c8125..47133e42a 100644 --- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx +++ b/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 => { - let mockContainer = {} as Explorer; - mockContainer.resourceTokenCollection = createMockCollection(mockContainer); - - return mockContainer; -}; - -const createMockCollection = (container: Explorer): ko.Observable => { - let mockCollection = {} as DataModels.Collection; - mockCollection._rid = "fakeRid"; - mockCollection._self = "fakeSelf"; - mockCollection.id = "fakeId"; - +describe("Resource tree for resource token", () => { + const mockContainer = {} as Explorer; + const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer); + const mockCollection = { + _rid: "fakeRid", + _self: "fakeSelf", + id: "fakeId", + } as DataModels.Collection; const mockResourceTokenCollection: ViewModels.CollectionBase = new ResourceTokenCollection( - container, + mockContainer, "fakeDatabaseId", mockCollection ); - return ko.observable(mockResourceTokenCollection); -}; - -describe("Resource tree for resource token", () => { - const mockContainer: Explorer = createMockContainer(); - const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer); + useDatabases.setState({ resourceTokenCollection: mockResourceTokenCollection }); it("should render", () => { const rootNode: TreeNode = resourceTree.buildCollectionNode(); diff --git a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx index ae72cdfc2..59a867a83 100644 --- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx +++ b/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, diff --git a/src/Explorer/useDatabases.ts b/src/Explorer/useDatabases.ts index 2d4694761..db16e5766 100644 --- a/src/Explorer/useDatabases.ts +++ b/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 = create((set, get) => ({ databases: [], + resourceTokenCollection: undefined, updateDatabase: (updatedDatabase: ViewModels.Database) => set((state) => { const updatedDatabases = state.databases.map((database: ViewModels.Database) => {