random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 06:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate save query pane to react (#578)

Browse Source 
Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
This commit is contained in:
Sunil Kumar Yadav 2021-04-03 01:40:43 +05:30 committed by GitHub
parent 1b9070605e
commit 36f8fc1d22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 251 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

4
src/Explorer/ComponentRegisterer.test.ts
View File

@ -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);
});

2
src/Explorer/ComponentRegisterer.ts
View File

@ -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());

128
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@ -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,

16
src/Explorer/Explorer.tsx
View File

@ -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(

10
src/Explorer/Panes/PaneComponents.ts
View File

@ -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 {

63
src/Explorer/Panes/SaveQueryPane.html
View File

@ -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>

153
src/Explorer/Panes/SaveQueryPane.ts
View File

@ -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("");
}
}

33
src/Explorer/Panes/SaveQueryPanel/__snapshots__/index.test.tsx.snap Normal file
View File

@ -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>
`;

32
src/Explorer/Panes/SaveQueryPanel/index.test.tsx Normal file
View File

@ -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();
});
});

168
src/Explorer/Panes/SaveQueryPanel/index.tsx Normal file
View File

@ -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>
);
};

64
src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap
View File

@ -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,

32
src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap
View File

@ -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,

32
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@ -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,

23
src/Explorer/Tabs/QueryTab.ts
View File

@ -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 => {

1
src/Main.tsx
View File

@ -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} }' />