Move databases to zustand (#898)

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.test.tsx

@@ -1,32 +1,38 @@
 import { shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
+import { SavedQueries } from "../../../Common/Constants";
+import { Collection, Database } from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
 import { SaveQueryPane } from "./SaveQueryPane";
 
 describe("Save Query Pane", () => {
   const fakeExplorer = {} as Explorer;
-  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
 
   const props = {
     explorer: fakeExplorer,
     closePanel: (): void => undefined,
   };
 
-  const wrapper = shallow(<SaveQueryPane {...props} />);
-
-  it("should return true if can save Queries else false", () => {
-    fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
-    wrapper.setProps(props);
-    expect(wrapper.exists("#saveQueryInput")).toBe(true);
-
-    fakeExplorer.canSaveQueries = ko.computed<boolean>(() => false);
-    wrapper.setProps(props);
-    expect(wrapper.exists("#saveQueryInput")).toBe(false);
-  });
-
   it("should render Default properly", () => {
     const wrapper = shallow(<SaveQueryPane {...props} />);
+    expect(wrapper.exists("#saveQueryInput")).toBe(false);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should return true if can save Queries else false", () => {
+    useDatabases.getState().addDatabases([
+      {
+        id: ko.observable(SavedQueries.DatabaseName),
+        collections: ko.observableArray([
+          {
+            id: ko.observable(SavedQueries.CollectionName),
+          } as Collection,
+        ]),
+      } as Database,
+    ]);
+    const wrapper = shallow(<SaveQueryPane {...props} />);
+    expect(wrapper.exists("#saveQueryInput")).toBe(true);
+  });
 });

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -10,6 +10,7 @@ import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetr
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { NewQueryTab } from "../../Tabs/QueryTab/QueryTab";
+import { useDatabases } from "../../useDatabases";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 interface SaveQueryPaneProps {
@@ -24,11 +25,11 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
 
   const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
   const title = "Save Query";
-  const { canSaveQueries } = explorer;
+  const isSaveQueryEnabled = useDatabases((state) => state.isSaveQueryEnabled);
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    if (!canSaveQueries()) {
+    if (!isSaveQueryEnabled()) {
       setFormError("Cannot save query");
       logConsoleError("Failed to save query: account not setup to save queries");
     }
@@ -129,16 +130,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
   const props: RightPaneFormProps = {
     formError: formError,
     isExecuting: isLoading,
-    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
+    submitButtonText: isSaveQueryEnabled() ? "Save" : "Complete setup",
     onSubmit: () => {
-      canSaveQueries() ? submit() : setupQueries();
+      isSaveQueryEnabled() ? submit() : setupQueries();
     },
   };
   return (
     <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
-          {!canSaveQueries() ? (
+          {!isSaveQueryEnabled() ? (
             <Text variant="small">{setupSaveQueriesText}</Text>
           ) : (
             <TextField