Migrate save query pane to react (#578)

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>

.eslintignore

@@ -130,7 +130,6 @@ src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts

src/Explorer/ComponentRegisterer.test.ts

@@ -77,10 +77,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
   });
 
-  it("should register save-query-pane component", () => {
-    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
-  });
-
   it("should register browse-queries-pane component", () => {
     expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -14,6 +14,7 @@ import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
 import DocumentsTab from "./Tabs/DocumentsTab";
 import GalleryTab from "./Tabs/GalleryTab";
 import GraphTab from "./Tabs/GraphTab";
+import MongoDocumentsTab from "./Tabs/MongoDocumentsTab";
 import MongoShellTab from "./Tabs/MongoShellTab";
 import NotebookTabV2 from "./Tabs/NotebookV2Tab";
 import NotebookViewerTab from "./Tabs/NotebookViewerTab";
@@ -73,7 +74,6 @@ ko.components.register("table-column-options-pane", new PaneComponents.TableColu
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
 ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
-ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
 ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());

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

@@ -385,22 +385,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  SaveQueryPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "savequerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "queryName": [Function],
-                    "setupQueries": [Function],
-                    "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                    "submit": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   BrowseQueriesPane {
                     "canSaveQueries": [Function],
                     "container": [Circular],
@@ -899,22 +883,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "saveQueryPane": SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -1371,22 +1339,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -1885,22 +1837,6 @@ exports[`SettingsComponent renders 1`] = `
                 "container": [Circular],
                 "parameters": [Function],
               },
-              "saveQueryPane": SaveQueryPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "savequerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "queryName": [Function],
-                "setupQueries": [Function],
-                "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                "submit": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -2370,22 +2306,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  SaveQueryPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "savequerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "queryName": [Function],
-                    "setupQueries": [Function],
-                    "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                    "submit": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   BrowseQueriesPane {
                     "canSaveQueries": [Function],
                     "container": [Circular],
@@ -2884,22 +2804,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "saveQueryPane": SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -3356,22 +3260,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -3870,22 +3758,6 @@ exports[`SettingsComponent renders 1`] = `
                 "container": [Circular],
                 "parameters": [Function],
               },
-              "saveQueryPane": SaveQueryPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "savequerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "queryName": [Function],
-                "setupQueries": [Function],
-                "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-                "submit": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,

src/Explorer/Explorer.tsx

@@ -60,7 +60,7 @@ import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPane } from "./Panes/SaveQueryPane";
+import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
@@ -211,7 +211,6 @@ export default class Explorer {
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ContextualPaneBase;
   public browseQueriesPane: BrowseQueriesPane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
@@ -618,13 +617,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.saveQueryPane = new SaveQueryPane({
-      id: "savequerypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.browseQueriesPane = new BrowseQueriesPane({
       id: "browsequeriespane",
       visible: ko.observable<boolean>(false),
@@ -660,7 +652,6 @@ export default class Explorer {
       this.newVertexPane,
       this.cassandraAddCollectionPane,
       this.loadQueryPane,
-      this.saveQueryPane,
       this.browseQueriesPane,
       this.stringInputPane,
       this.setupNotebooksPane,
@@ -2423,6 +2414,11 @@ export default class Explorer {
       />
     );
   }
+
+  public openSaveQueryPanel(): void {
+    this.openSidePanel("Save Query", <SaveQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+  }
+
   public openUploadFilePanel(parent?: NotebookContentItem): void {
     parent = parent || this.resourceTree.myNotebooksContentRoot;
     this.openSidePanel(

src/Explorer/Panes/PaneComponents.ts

@@ -7,7 +7,6 @@ import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
 import LoadQueryPaneTemplate from "./LoadQueryPane.html";
-import SaveQueryPaneTemplate from "./SaveQueryPane.html";
 import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
 import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
@@ -120,15 +119,6 @@ export class LoadQueryPaneComponent {
   }
 }
 
-export class SaveQueryPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: SaveQueryPaneTemplate,
-    };
-  }
-}
-
 export class BrowseQueriesPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/SaveQueryPane.html

@@ -1,63 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
-  <div class="contextual-pane" id="savequerypane">
-    <!-- Save Query form  -- Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: submit">
-        <!-- Save Query header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel">
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Save Query header - End -->
-
-        <!-- Save Query errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a
-                class="errorLink"
-                role="link"
-                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails"
-                >More details</a
-              >
-            </span>
-          </div>
-        </div>
-        <!-- Save Query errors - End -->
-
-        <!-- Save Query inputs - Start -->
-        <div class="paneMainContent">
-          <div class="pkPadding" data-bind="visible: !canSaveQueries()">
-            <div data-bind="text: setupSaveQueriesText"></div>
-            <button class="btncreatecoll1 btnSetupQueries" type="button" data-bind="click: setupQueries">
-              Complete setup
-            </button>
-          </div>
-          <div class="pkPadding" data-bind="visible: canSaveQueries">
-            <p><span class="mandatoryStar">*</span> <span>Name</span></p>
-            <input class="textfontclr collid" required type="text" data-bind="value: queryName" />
-          </div>
-        </div>
-        <div class="paneFooter" data-bind="visible: canSaveQueries">
-          <div class="leftpanel-okbut"><input type="submit" value="Save" class="btncreatecoll1" /></div>
-        </div>
-        <!-- Save Query inputs - End -->
-      </form>
-    </div>
-    <!-- Save Query form  - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/SaveQueryPane.ts

@@ -1,153 +0,0 @@
-import * as ko from "knockout";
-import * as Constants from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import QueryTab from "../Tabs/QueryTab";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-
-export class SaveQueryPane extends ContextualPaneBase {
-  public queryName: ko.Observable<string>;
-  public canSaveQueries: ko.Computed<boolean>;
-  public setupSaveQueriesText: string = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${Constants.SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Save Query");
-    this.queryName = ko.observable<string>();
-    this.canSaveQueries = this.container && this.container.canSaveQueries;
-    this.resetData();
-  }
-
-  public submit = (): void => {
-    this.formErrors("");
-    this.formErrorsDetails("");
-    if (!this.canSaveQueries()) {
-      this.formErrors("Cannot save query");
-      this.formErrorsDetails("Failed to save query: account not set up to save queries");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        "Failed to save query: account not setup to save queries"
-      );
-    }
-
-    const queryName: string = this.queryName();
-    const queryTab = this.container && (this.container.tabsManager.activeTab() as QueryTab);
-    const query: string = queryTab && queryTab.sqlQueryEditorContent();
-    if (!queryName || queryName.length === 0) {
-      this.formErrors("No query name specified");
-      this.formErrorsDetails("No query name specified. Please specify a query name.");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        "Could not save query -- No query name specified. Please specify a query name."
-      );
-      return;
-    } else if (!query || query.length === 0) {
-      this.formErrors("Invalid query content specified");
-      this.formErrorsDetails("Invalid query content specified. Please enter query content.");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        "Could not save query -- Invalid query content specified. Please enter query content."
-      );
-      return;
-    }
-
-    const queryParam: DataModels.Query = {
-      id: queryName,
-      resourceId: this.container.queriesClient.getResourceId(),
-      queryName: queryName,
-      query: query,
-    };
-    const startKey: number = TelemetryProcessor.traceStart(Action.SaveQuery, {
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    this.isExecuting(true);
-    this.container.queriesClient.saveQuery(queryParam).then(
-      () => {
-        this.isExecuting(false);
-        queryTab.tabTitle(queryParam.queryName);
-        queryTab.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
-        TelemetryProcessor.traceSuccess(
-          Action.SaveQuery,
-          {
-            dataExplorerArea: Constants.Areas.ContextualPane,
-            paneTitle: this.title(),
-          },
-          startKey
-        );
-        this.close();
-      },
-      (error: any) => {
-        this.isExecuting(false);
-        const errorMessage = getErrorMessage(error);
-        this.formErrors("Failed to save query");
-        this.formErrorsDetails(`Failed to save query: ${errorMessage}`);
-        TelemetryProcessor.traceFailure(
-          Action.SaveQuery,
-          {
-            dataExplorerArea: Constants.Areas.ContextualPane,
-            paneTitle: this.title(),
-            error: errorMessage,
-            errorStack: getErrorStack(error),
-          },
-          startKey
-        );
-      }
-    );
-  };
-
-  public setupQueries = async (src: any, event: MouseEvent): Promise<void> => {
-    if (!this.container) {
-      return;
-    }
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    try {
-      this.isExecuting(true);
-      await this.container.queriesClient.setupQueriesCollection();
-      this.container.refreshAllDatabases();
-      TelemetryProcessor.traceSuccess(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          paneTitle: this.title(),
-        },
-        startKey
-      );
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      TelemetryProcessor.traceFailure(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          paneTitle: this.title(),
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-      this.formErrors("Failed to setup a container for saved queries");
-      this.formErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
-    } finally {
-      this.isExecuting(false);
-    }
-  };
-
-  public close() {
-    super.close();
-    this.resetData();
-  }
-
-  public resetData() {
-    super.resetData();
-    this.queryName("");
-  }
-}

src/Explorer/Panes/SaveQueryPanel/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Save Query Pane should render Default properly 1`] = `
+<GenericRightPaneComponent
+  container={
+    Object {
+      "canSaveQueries": [Function],
+    }
+  }
+  formError=""
+  formErrorDetail=""
+  id="saveQueryPane"
+  isExecuting={false}
+  onClose={[Function]}
+  onSubmit={[Function]}
+  submitButtonText="Complete setup"
+  title="Save Query"
+>
+  <div
+    className="panelFormWrapper"
+  >
+    <div
+      className="panelMainContent"
+    >
+      <Text
+        variant="small"
+      >
+        For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.
+      </Text>
+    </div>
+  </div>
+</GenericRightPaneComponent>
+`;

src/Explorer/Panes/SaveQueryPanel/index.test.tsx

@@ -0,0 +1,32 @@
+import { shallow } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import Explorer from "../../Explorer";
+import { SaveQueryPanel } from "./index";
+
+describe("Save Query Pane", () => {
+  const fakeExplorer = {} as Explorer;
+  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
+
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+  };
+
+  const wrapper = shallow(<SaveQueryPanel {...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(<SaveQueryPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Panes/SaveQueryPanel/index.tsx

@@ -0,0 +1,168 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { Text, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import { Areas, SavedQueries } from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { Query } from "../../../Contracts/DataModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import Explorer from "../../Explorer";
+import QueryTab from "../../Tabs/QueryTab";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+
+interface SaveQueryPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+}
+
+export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
+  explorer,
+  closePanel,
+}: SaveQueryPanelProps): JSX.Element => {
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const [formError, setFormError] = useState<string>("");
+  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
+  const [queryName, setQueryName] = useState<string>("");
+
+  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 genericPaneProps: GenericRightPaneProps = {
+    container: explorer,
+    formError: formError,
+    formErrorDetail: formErrorsDetails,
+    id: "saveQueryPane",
+    isExecuting: isLoading,
+    title,
+    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
+    onClose: () => closePanel(),
+    onSubmit: () => {
+      canSaveQueries() ? submit() : setupQueries();
+    },
+  };
+
+  const submit = async (): Promise<void> => {
+    setFormError("");
+    setFormErrorsDetails("");
+    if (!canSaveQueries()) {
+      setFormError("Cannot save query");
+      setFormErrorsDetails("Failed to save query: account not set up to save queries");
+      logConsoleError("Failed to save query: account not setup to save queries");
+    }
+
+    const queryTab = explorer && (explorer.tabsManager.activeTab() as QueryTab);
+    const query: string = queryTab && queryTab.sqlQueryEditorContent();
+    if (!queryName || queryName.length === 0) {
+      setFormError("No query name specified");
+      setFormErrorsDetails("No query name specified. Please specify a query name.");
+      logConsoleError("Could not save query -- No query name specified. Please specify a query name.");
+      return;
+    } else if (!query || query.length === 0) {
+      setFormError("Invalid query content specified");
+      setFormErrorsDetails("Invalid query content specified. Please enter query content.");
+      logConsoleError("Could not save query -- Invalid query content specified. Please enter query content.");
+      return;
+    }
+
+    const queryParam: Query = {
+      id: queryName,
+      resourceId: explorer.queriesClient.getResourceId(),
+      queryName: queryName,
+      query: query,
+    };
+    const startKey: number = traceStart(Action.SaveQuery, {
+      dataExplorerArea: Areas.ContextualPane,
+      paneTitle: title,
+    });
+    setLoadingTrue();
+    try {
+      await explorer.queriesClient.saveQuery(queryParam);
+      setLoadingFalse();
+      queryTab.tabTitle(queryParam.queryName);
+      queryTab.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
+      traceSuccess(
+        Action.SaveQuery,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+        },
+        startKey
+      );
+      closePanel();
+    } catch (error) {
+      setLoadingFalse();
+      const errorMessage = getErrorMessage(error);
+      setFormError("Failed to save query");
+      setFormErrorsDetails(`Failed to save query: ${errorMessage}`);
+      traceFailure(
+        Action.SaveQuery,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+    }
+  };
+
+  const setupQueries = async (): Promise<void> => {
+    const startKey: number = traceStart(Action.SetupSavedQueries, {
+      dataExplorerArea: Areas.ContextualPane,
+      paneTitle: title,
+    });
+
+    try {
+      setLoadingTrue();
+      await explorer.queriesClient.setupQueriesCollection();
+      explorer.refreshAllDatabases();
+      traceSuccess(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+        },
+        startKey
+      );
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      traceFailure(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+      setFormError("Failed to setup a container for saved queries");
+      setFormErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
+    } finally {
+      setLoadingFalse();
+    }
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          {!canSaveQueries() ? (
+            <Text variant="small">{setupSaveQueriesText}</Text>
+          ) : (
+            <TextField
+              id="saveQueryInput"
+              label="Name"
+              styles={{ fieldGroup: { width: 300 } }}
+              onChange={(event, newInput?: string) => {
+                setQueryName(newInput);
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap

@@ -361,22 +361,6 @@ exports[`Settings Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         BrowseQueriesPane {
           "canSaveQueries": [Function],
           "container": [Circular],
@@ -875,22 +859,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -1435,22 +1403,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         BrowseQueriesPane {
           "canSaveQueries": [Function],
           "container": [Circular],
@@ -1949,22 +1901,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,

src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap

@@ -361,22 +361,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         BrowseQueriesPane {
           "canSaveQueries": [Function],
           "container": [Circular],
@@ -875,22 +859,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,

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

@@ -362,22 +362,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           "title": [Function],
           "visible": [Function],
         },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         BrowseQueriesPane {
           "canSaveQueries": [Function],
           "container": [Circular],
@@ -880,22 +864,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,

src/Explorer/Tabs/QueryTab.ts

@@ -1,23 +1,22 @@
 import * as ko from "knockout";
+import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
+import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { HashMap } from "../../Common/HashMap";
+import * as HeadersUtility from "../../Common/HeadersUtility";
+import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import TabsBase from "./TabsBase";
-import { HashMap } from "../../Common/HashMap";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import * as QueryUtils from "../../Utils/QueryUtils";
-import SaveQueryIcon from "../../../images/save-cosmos.svg";
-
-import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
 import template from "./QueryTab.html";
+import TabsBase from "./TabsBase";
 
 enum ToggleState {
   Result,
@@ -190,7 +189,7 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
   };
 
   public onSaveQueryClick = (): void => {
-    this.collection && this.collection.container && this.collection.container.saveQueryPane.open();
+    this.collection && this.collection.container && this.collection.container.openSaveQueryPanel();
   };
 
   public onSavedQueriesClick = (): void => {

src/Main.tsx

@@ -240,7 +240,6 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' />
       <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
       <div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
-      <div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
       <div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
       <div data-bind='component: { name: "string-input-pane", params: { data: stringInputPane} }' />
       <div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />