Move databases to zustand (#898)

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -11,44 +11,42 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
 import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
 
 describe("Delete Collection Confirmation Pane", () => {
-  describe("Explorer.isLastCollection()", () => {
-    let explorer: Explorer;
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
+  describe("useDatabases.isLastCollection()", () => {
+    beforeAll(() => useDatabases.getState().clearDatabases());
+    afterEach(() => useDatabases.getState().clearDatabases());
 
     it("should be true if 1 database and 1 collection", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database]);
-      expect(explorer.isLastCollection()).toBe(true);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+      useDatabases.getState().addDatabases([database]);
+      expect(useDatabases.getState().isLastCollection()).toBe(true);
     });
 
     it("should be false if if 1 database and 2 collection", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection, {} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database]);
-      expect(explorer.isLastCollection()).toBe(false);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([
+        { id: ko.observable("coll1") } as Collection,
+        { id: ko.observable("coll2") } as Collection,
+      ]);
+      useDatabases.getState().addDatabases([database]);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
 
     it("should be false if 2 database and 1 collection each", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      const database2 = {} as Database;
-      database2.collections = ko.observableArray<Collection>([{} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database, database2]);
-      expect(explorer.isLastCollection()).toBe(false);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("coll1") } as Collection]);
+      const database2 = { id: ko.observable("testDB2") } as Database;
+      database2.collections = ko.observableArray<Collection>([{ id: ko.observable("coll2") } as Collection]);
+      useDatabases.getState().addDatabases([database, database2]);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
 
     it("should be false if 0 databases", () => {
-      const database = {} as Database;
-      explorer.databases = ko.observableArray<Database>();
-      database.collections = ko.observableArray<Collection>();
-      expect(explorer.isLastCollection()).toBe(false);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
   });
 
@@ -56,7 +54,6 @@ describe("Delete Collection Confirmation Pane", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
       const fakeExplorer = new Explorer();
       fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isLastCollection = () => true;
       fakeExplorer.isSelectedDatabaseShared = () => false;
 
       const props = {
@@ -65,15 +62,15 @@ describe("Delete Collection Confirmation Pane", () => {
         collectionName: "container",
       };
       const wrapper = shallow(<DeleteCollectionConfirmationPane {...props} />);
-      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
-
-      props.explorer.isLastCollection = () => true;
-      props.explorer.isSelectedDatabaseShared = () => true;
-      wrapper.setProps(props);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
 
-      props.explorer.isLastCollection = () => false;
-      props.explorer.isSelectedDatabaseShared = () => false;
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+      useDatabases.getState().addDatabases([database]);
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
+
+      props.explorer.isSelectedDatabaseShared = () => true;
       wrapper.setProps(props);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
     });
@@ -94,8 +91,10 @@ describe("Delete Collection Confirmation Pane", () => {
     fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
     fakeExplorer.selectedNode = ko.observable<TreeNode>();
     fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isLastCollection = () => true;
     fakeExplorer.isSelectedDatabaseShared = () => false;
+    const database = { id: ko.observable("testDB") } as Database;
+    database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+    useDatabases.getState().addDatabases([database]);
 
     beforeAll(() => {
       updateUserContext({

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -13,7 +13,9 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+
 export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
 }
@@ -22,13 +24,14 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   explorer,
 }: DeleteCollectionConfirmationPaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
+  const isLastCollection = useDatabases((state) => state.isLastCollection);
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
   const [inputCollectionName, setInputCollectionName] = useState<string>("");
   const [formError, setFormError] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState(false);
 
   const shouldRecordFeedback = (): boolean => {
-    return explorer.isLastCollection() && !explorer.isSelectedDatabaseShared();
+    return isLastCollection() && !explorer.isSelectedDatabaseShared();
   };
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;

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

@@ -7,7 +7,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
   explorer={
     Object {
       "findSelectedCollection": [Function],
-      "isLastCollection": [Function],
       "isSelectedDatabaseShared": [Function],
       "refreshAllDatabases": [Function],
       "selectedCollectionId": [Function],