random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migration/browse queries pane to react (#598) 

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
This commit is contained in:
Sunil Kumar Yadav 2021-04-05 08:34:34 +05:30 committed by GitHub
parent b34c81b3ab
commit de5a11ff1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1009 additions and 913 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1052
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -43,7 +43,6 @@
"@types/mkdirp": "1.0.1", "@types/mkdirp": "1.0.1",
"@types/node-fetch": "2.5.7", "@types/node-fetch": "2.5.7",
"@uifabric/react-cards": "0.109.110", "@uifabric/react-cards": "0.109.110",
"@uifabric/react-hooks": "7.14.0",
"@uifabric/styling": "7.13.7", "@uifabric/styling": "7.13.7",
"applicationinsights": "1.8.0", "applicationinsights": "1.8.0",
"bootstrap": "3.4.1", "bootstrap": "3.4.1",

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); expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
}); });
it("should register browse-queries-pane component", () => {
expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
});
it("should register graph-new-vertex-pane component", () => { it("should register graph-new-vertex-pane component", () => {
expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true); expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
}); });

1
src/Explorer/ComponentRegisterer.ts
View File

@ -72,7 +72,6 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent()); ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent()); ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent()); ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent()); ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent()); ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent()); ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

20
src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
View File

@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
} }
> >
<div <div
className="ms-ScrollablePane root-72" className="ms-ScrollablePane root-40"
data-is-scrollable="true" data-is-scrollable="true"
> >
<div <div
className="stickyAbove-74" className="stickyAbove-42"
style={ style={
Object { Object {
"height": 0, "height": 0,
@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
} }
/> />
<div <div
className="ms-ScrollablePane--contentContainer contentContainer-73" className="ms-ScrollablePane--contentContainer contentContainer-41"
data-is-scrollable={true} data-is-scrollable={true}
> >
<Sticky <Sticky
@ -691,18 +691,18 @@ exports[`test render renders with filters 1`] = `
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField directoryListFilterTextBox root-78" className="ms-TextField directoryListFilterTextBox root-46"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-79" className="ms-TextField-fieldGroup fieldGroup-47"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-label="Directory filter text box" aria-label="Directory filter text box"
className="ms-TextField-field field-80" className="ms-TextField-field field-48"
id="TextField0" id="TextField0"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -1900,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
> >
<button <button
aria-disabled={true} aria-disabled={true}
className="ms-Button ms-Button--default is-disabled directoryListButton root-89" className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
data-is-focusable={false} data-is-focusable={false}
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
@ -1912,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
type="button" type="button"
> >
<span <span
className="ms-Button-flexContainer flexContainer-90" className="ms-Button-flexContainer flexContainer-58"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<div <div
@ -1943,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
</List> </List>
</div> </div>
<div <div
className="stickyBelow-75" className="stickyBelow-43"
style={ style={
Object { Object {
"bottom": "0px", "bottom": "0px",
@ -1954,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
} }
> >
<div <div
className="stickyBelowItems-76" className="stickyBelowItems-44"
/> />
</div> </div>
</div> </div>

41
src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
View File

@ -1,20 +1,15 @@
import * as _ from "underscore"; import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
import * as React from "react"; import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
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 { import {
DetailsList, DetailsList,
DetailsListLayoutMode, DetailsListLayoutMode,
DetailsRow,
IColumn,
IDetailsListProps, IDetailsListProps,
IDetailsRowProps, IDetailsRowProps,
DetailsRow,
} from "office-ui-fabric-react/lib/DetailsList"; } from "office-ui-fabric-react/lib/DetailsList";
import { FocusZone } from "office-ui-fabric-react/lib/FocusZone"; import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button"; import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
import { import {
IObjectWithKey, IObjectWithKey,
ISelectionZoneProps, ISelectionZoneProps,
@ -22,13 +17,18 @@ import {
SelectionMode, SelectionMode,
SelectionZone, SelectionZone,
} from "office-ui-fabric-react/lib/utilities/selection/index"; } from "office-ui-fabric-react/lib/utilities/selection/index";
import * as React from "react";
import * as _ from "underscore";
import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
import * as Constants from "../../../Common/Constants";
import { StyleConstants } from "../../../Common/Constants"; import { StyleConstants } from "../../../Common/Constants";
import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField"; import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
import { QueriesClient } from "../../../Common/QueriesClient";
import * as DataModels from "../../../Contracts/DataModels";
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import SaveQueryBannerIcon from "../../../../images/save_query_banner.png"; const title: string = "Open Saved Queries";
import { QueriesClient } from "../../../Common/QueriesClient";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
export interface QueriesGridComponentProps { export interface QueriesGridComponentProps {
queriesClient: QueriesClient; queriesClient: QueriesClient;
@ -76,6 +76,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
} }
} }
// fetched saved queries when panel open
public componentDidMount() {
this.fetchSavedQueries();
}
public render(): JSX.Element { public render(): JSX.Element {
if (this.state.queries.length === 0) { if (this.state.queries.length === 0) {
return this.renderBannerComponent(); return this.renderBannerComponent();
@ -136,7 +141,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
}, },
}; };
return ( return (
<div> <div id="emptyQueryBanner">
<div> <div>
You have not saved any queries yet. <br /> <br /> You have not saved any queries yet. <br /> <br />
To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
@ -222,7 +227,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
const container = window.dataExplorer; const container = window.dataExplorer;
const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, { const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
dataExplorerArea: Constants.Areas.ContextualPane, dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(), paneTitle: title,
}); });
try { try {
await this.props.queriesClient.deleteQuery(query); await this.props.queriesClient.deleteQuery(query);
@ -230,7 +235,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
Action.DeleteSavedQuery, Action.DeleteSavedQuery,
{ {
dataExplorerArea: Constants.Areas.ContextualPane, dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(), paneTitle: title,
}, },
startKey startKey
); );
@ -239,7 +244,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
Action.DeleteSavedQuery, Action.DeleteSavedQuery,
{ {
dataExplorerArea: Constants.Areas.ContextualPane, dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(), paneTitle: title,
error: getErrorMessage(error), error: getErrorMessage(error),
errorStack: getErrorStack(error), errorStack: getErrorStack(error),
}, },

33
src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
View File

@ -1,33 +0,0 @@
/**
* This adapter is responsible to render the QueriesGrid React component
* If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
* and update any knockout observables passed from the parent.
*/
import * as ko from "knockout";
import * as React from "react";
import * as ViewModels from "../../../Contracts/ViewModels";
import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
import Explorer from "../../Explorer";
export class QueriesGridComponentAdapter implements ReactAdapter {
public parameters: ko.Observable<number>;
constructor(private container: Explorer) {
this.parameters = ko.observable<number>(Date.now());
}
public renderComponent(): JSX.Element {
const props: QueriesGridComponentProps = {
queriesClient: this.container.queriesClient,
onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
containerVisible: this.container.browseQueriesPane.visible(),
saveQueryEnabled: this.container.canSaveQueries(),
};
return <QueriesGridComponent {...props} />;
}
public forceRender(): void {
window.requestAnimationFrame(() => this.parameters(Date.now()));
}
}

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

@ -371,24 +371,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -583,24 +565,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -1297,24 +1261,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -1509,24 +1455,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -2236,24 +2164,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -2448,24 +2358,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -3162,24 +3054,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -3374,24 +3248,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {

15
src/Explorer/Explorer.tsx
View File

@ -50,7 +50,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
import AddCollectionPane from "./Panes/AddCollectionPane"; import AddCollectionPane from "./Panes/AddCollectionPane";
import { AddCollectionPanel } from "./Panes/AddCollectionPanel"; import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
import AddDatabasePane from "./Panes/AddDatabasePane"; import AddDatabasePane from "./Panes/AddDatabasePane";
import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane"; import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane"; import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
import { ContextualPaneBase } from "./Panes/ContextualPaneBase"; import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane"; import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
@ -210,7 +210,6 @@ export default class Explorer {
public querySelectPane: QuerySelectPane; public querySelectPane: QuerySelectPane;
public newVertexPane: NewVertexPane; public newVertexPane: NewVertexPane;
public cassandraAddCollectionPane: CassandraAddCollectionPane; public cassandraAddCollectionPane: CassandraAddCollectionPane;
public browseQueriesPane: BrowseQueriesPane;
public stringInputPane: StringInputPane; public stringInputPane: StringInputPane;
public setupNotebooksPane: SetupNotebooksPane; public setupNotebooksPane: SetupNotebooksPane;
public gitHubReposPane: ContextualPaneBase; public gitHubReposPane: ContextualPaneBase;
@ -609,13 +608,6 @@ export default class Explorer {
container: this, container: this,
}); });
this.browseQueriesPane = new BrowseQueriesPane({
id: "browsequeriespane",
visible: ko.observable<boolean>(false),
container: this,
});
this.stringInputPane = new StringInputPane({ this.stringInputPane = new StringInputPane({
id: "stringinputpane", id: "stringinputpane",
visible: ko.observable<boolean>(false), visible: ko.observable<boolean>(false),
@ -643,7 +635,6 @@ export default class Explorer {
this.querySelectPane, this.querySelectPane,
this.newVertexPane, this.newVertexPane,
this.cassandraAddCollectionPane, this.cassandraAddCollectionPane,
this.browseQueriesPane,
this.stringInputPane, this.stringInputPane,
this.setupNotebooksPane, this.setupNotebooksPane,
]; ];
@ -2406,6 +2397,10 @@ export default class Explorer {
); );
} }
public openBrowseQueriesPanel(): void {
this.openSidePanel("Open Saved Queries", <BrowseQueriesPanel explorer={this} closePanel={this.closeSidePanel} />);
}
public openLoadQueryPanel(): void { public openLoadQueryPanel(): void {
this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />); this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
} }

2
src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
View File

@ -420,7 +420,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
return { return {
iconSrc: BrowseQueriesIcon, iconSrc: BrowseQueriesIcon,
iconAlt: label, iconAlt: label,
onCommandClick: () => container.browseQueriesPane.open(), onCommandClick: () => container.openBrowseQueriesPanel(),
commandButtonLabel: label, commandButtonLabel: label,
ariaLabel: label, ariaLabel: label,
hasPopup: true, hasPopup: true,

33
src/Explorer/Panes/BrowseQueriesPane.html
View File

@ -1,33 +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="browsequeriespane">
<!-- Save Query form -- Start -->
<div class="contextual-pane-in">
<div class="paneContentContainer">
<!-- 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, event: { keypress: onCloseKeyPress }"
>
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
</div>
</div>
<!-- Save Query header - End -->
<!-- Save Query inputs - Start -->
<div class="paneMainContent"><div class="pkPadding" data-bind="react: queriesGridComponentAdapter"></div></div>
</div>
</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>

100
src/Explorer/Panes/BrowseQueriesPane.ts
View File

@ -1,100 +0,0 @@
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import { Areas } from "../../Common/Constants";
import { ContextualPaneBase } from "./ContextualPaneBase";
import * as Logger from "../../Common/Logger";
import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import QueryTab from "../Tabs/QueryTab";
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
export class BrowseQueriesPane extends ContextualPaneBase {
public queriesGridComponentAdapter: QueriesGridComponentAdapter;
public canSaveQueries: ko.Computed<boolean>;
constructor(options: ViewModels.PaneOptions) {
super(options);
this.title("Open Saved Queries");
this.resetData();
this.canSaveQueries = this.container && this.container.canSaveQueries;
this.queriesGridComponentAdapter = new QueriesGridComponentAdapter(this.container);
}
public open() {
super.open();
this.queriesGridComponentAdapter.forceRender();
}
public close() {
super.close();
this.queriesGridComponentAdapter.forceRender();
}
public submit() {
// override default behavior because this is not a form
}
public setupQueries = async (src: any, event: MouseEvent): Promise<void> => {
if (!this.container) {
return;
}
const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
dataExplorerArea: Areas.ContextualPane,
paneTitle: this.title(),
});
try {
this.isExecuting(true);
await this.container.queriesClient.setupQueriesCollection();
this.container.refreshAllDatabases().done(() => this.queriesGridComponentAdapter.forceRender());
TelemetryProcessor.traceSuccess(
Action.SetupSavedQueries,
{
dataExplorerArea: Areas.ContextualPane,
paneTitle: this.title(),
},
startKey
);
} catch (error) {
const errorMessage = getErrorMessage(error);
TelemetryProcessor.traceFailure(
Action.SetupSavedQueries,
{
dataExplorerArea: Areas.ContextualPane,
paneTitle: this.title(),
error: errorMessage,
errorStack: getErrorStack(error),
},
startKey
);
this.formErrors(`Failed to setup a collection for saved queries: ${errorMessage}`);
} finally {
this.isExecuting(false);
}
};
public loadSavedQuery = (savedQuery: DataModels.Query): void => {
const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection();
if (!selectedCollection) {
// should never get into this state because this pane is only accessible through the query tab
Logger.logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
return;
} else if (this.container.isPreferredApiMongoDB()) {
selectedCollection.onNewMongoQueryClick(selectedCollection, null);
} else {
selectedCollection.onNewQueryClick(selectedCollection, null);
}
const queryTab = this.container.tabsManager.activeTab() as QueryTab;
queryTab.tabTitle(savedQuery.queryName);
queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
queryTab.initialEditorContent(savedQuery.query);
queryTab.sqlQueryEditorContent(savedQuery.query);
TelemetryProcessor.trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
dataExplorerArea: Areas.ContextualPane,
queryName: savedQuery.queryName,
paneTitle: this.title(),
});
this.close();
};
}

58
src/Explorer/Panes/BrowseQueriesPanel/__snapshots__/index.test.tsx.snap Normal file
View File

@ -0,0 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Browse queries panel Should render Default properly 1`] = `
<BrowseQueriesPanel
closePanel={[Function]}
explorer={
Object {
"canSaveQueries": [Function],
"queriesClient": Object {
"getQueries": [Function],
},
}
}
>
<div
className="panelFormWrapper"
>
<div
className="panelMainContent"
>
<QueriesGridComponent
containerVisible={true}
onQuerySelect={[Function]}
queriesClient={
Object {
"getQueries": [Function],
}
}
saveQueryEnabled={true}
>
<div
id="emptyQueryBanner"
>
<div>
You have not saved any queries yet.
<br />
<br />
To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save Query and follow the prompt in order to save the query.
</div>
<img
alt="Save query helper banner"
src=""
style={
Object {
"border": "1px solid undefined",
"height": "150px",
"marginTop": "20px",
"width": "310px",
}
}
/>
</div>
</QueriesGridComponent>
</div>
</div>
</BrowseQueriesPanel>
`;

30
src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx Normal file
View File

@ -0,0 +1,30 @@
import { mount } from "enzyme";
import * as ko from "knockout";
import React from "react";
import { QueriesClient } from "../../../Common/QueriesClient";
import { Query } from "../../../Contracts/DataModels";
import Explorer from "../../Explorer";
import { BrowseQueriesPanel } from "./index";
describe("Browse queries panel", () => {
const fakeExplorer = {} as Explorer;
fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
const fakeClientQuery = {} as QueriesClient;
const fakeQueryData = {} as Query[];
fakeClientQuery.getQueries = async () => fakeQueryData;
fakeExplorer.queriesClient = fakeClientQuery;
const props = {
explorer: fakeExplorer,
closePanel: (): void => undefined,
};
it("Should render Default properly", () => {
const wrapper = mount(<BrowseQueriesPanel {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("Should show empty view when query is empty []", () => {
const wrapper = mount(<BrowseQueriesPanel {...props} />);
expect(wrapper.exists("#emptyQueryBanner")).toBe(true);
});
});

63
src/Explorer/Panes/BrowseQueriesPanel/index.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { FunctionComponent } from "react";
import { Areas } from "../../../Common/Constants";
import { logError } from "../../../Common/Logger";
import { Query } from "../../../Contracts/DataModels";
import { Collection } from "../../../Contracts/ViewModels";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../../UserContext";
import {
QueriesGridComponent,
QueriesGridComponentProps,
} from "../../Controls/QueriesGridReactComponent/QueriesGridComponent";
import Explorer from "../../Explorer";
import QueryTab from "../../Tabs/QueryTab";
interface BrowseQueriesPanelProps {
explorer: Explorer;
closePanel: () => void;
}
export const BrowseQueriesPanel: FunctionComponent<BrowseQueriesPanelProps> = ({
explorer,
closePanel,
}: BrowseQueriesPanelProps): JSX.Element => {
const loadSavedQuery = (savedQuery: Query): void => {
const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
if (!selectedCollection) {
// should never get into this state because this pane is only accessible through the query tab
logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
return;
} else if (userContext.apiType === "Mongo") {
selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
} else {
selectedCollection.onNewQueryClick(selectedCollection, undefined);
}
const queryTab = explorer.tabsManager.activeTab() as QueryTab;
queryTab.tabTitle(savedQuery.queryName);
queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
queryTab.initialEditorContent(savedQuery.query);
queryTab.sqlQueryEditorContent(savedQuery.query);
trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
dataExplorerArea: Areas.ContextualPane,
queryName: savedQuery.queryName,
paneTitle: "Open Saved Queries",
});
closePanel();
};
const props: QueriesGridComponentProps = {
queriesClient: explorer.queriesClient,
onQuerySelect: loadSavedQuery,
containerVisible: true,
saveQueryEnabled: explorer.canSaveQueries(),
};
return (
<div className="panelFormWrapper">
<div className="panelMainContent">
<QueriesGridComponent {...props} />
</div>
</div>
);
};

84
src/Explorer/Panes/ExecuteSprocParamsPanel/__snapshots__/index.test.tsx.snap
View File

@ -1061,7 +1061,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<button <button
aria-label="Close pane" aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-72" className="ms-Button ms-Button--icon closePaneBtn root-40"
data-is-focusable={true} data-is-focusable={true}
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
@ -1074,16 +1074,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
type="button" type="button"
> >
<span <span
className="ms-Button-flexContainer flexContainer-73" className="ms-Button-flexContainer flexContainer-41"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<Component <Component
className="ms-Button-icon icon-75" className="ms-Button-icon icon-43"
iconName="Cancel" iconName="Cancel"
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Icon root-37 css-80 ms-Button-icon icon-75" className="ms-Icon root-37 css-48 ms-Button-icon icon-43"
data-icon-name="Cancel" data-icon-name="Cancel"
role="presentation" role="presentation"
style={ style={
@ -1429,7 +1429,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-81" className="ms-Label root-49"
> >
Partition key value Partition key value
</label> </label>
@ -1439,7 +1439,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true} horizontal={true}
> >
<div <div
className="ms-Stack css-82" className="ms-Stack css-50"
> >
<StyledWithResponsiveMode <StyledWithResponsiveMode
key=".0:$.0" key=".0:$.0"
@ -2336,7 +2336,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label ms-Dropdown-label root-99" className="ms-Label ms-Dropdown-label root-67"
id="Dropdown3-label" id="Dropdown3-label"
> >
Key Key
@ -2348,7 +2348,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-labelledby="Dropdown3-label Dropdown3-option" aria-labelledby="Dropdown3-label Dropdown3-option"
className="ms-Dropdown dropdown-83" className="ms-Dropdown dropdown-51"
data-is-focusable={true} data-is-focusable={true}
id="Dropdown3" id="Dropdown3"
onBlur={[Function]} onBlur={[Function]}
@ -2368,23 +2368,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-posinset={1} aria-posinset={1}
aria-selected={true} aria-selected={true}
aria-setsize={2} aria-setsize={2}
className="ms-Dropdown-title title-84" className="ms-Dropdown-title title-52"
id="Dropdown3-option" id="Dropdown3-option"
role="option" role="option"
> >
String String
</span> </span>
<span <span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-85" className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
> >
<StyledIconBase <StyledIconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86" className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown" iconName="ChevronDown"
> >
<IconBase <IconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86" className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown" iconName="ChevronDown"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -2663,7 +2663,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-100" className="ms-Dropdown-caretDown caretDown-68"
data-icon-name="ChevronDown" data-icon-name="ChevronDown"
> >
@ -2971,7 +2971,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value="" value=""
> >
<div <div
className="ms-TextField root-102" className="ms-TextField root-70"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
@ -3260,7 +3260,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-81" className="ms-Label root-49"
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel6" id="TextFieldLabel6"
> >
@ -3269,13 +3269,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</LabelBase> </LabelBase>
</StyledLabelBase> </StyledLabelBase>
<div <div
className="ms-TextField-fieldGroup fieldGroup-103" className="ms-TextField-fieldGroup fieldGroup-71"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-labelledby="TextFieldLabel6" aria-labelledby="TextFieldLabel6"
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-104" className="ms-TextField-field field-72"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -3583,7 +3583,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-81" className="ms-Label root-49"
> >
Enter input parameters (if any) Enter input parameters (if any)
</label> </label>
@ -3593,7 +3593,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true} horizontal={true}
> >
<div <div
className="ms-Stack css-82" className="ms-Stack css-50"
> >
<StyledWithResponsiveMode <StyledWithResponsiveMode
key=".0:$.0" key=".0:$.0"
@ -4490,7 +4490,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label ms-Dropdown-label root-99" className="ms-Label ms-Dropdown-label root-67"
id="Dropdown7-label" id="Dropdown7-label"
> >
Key Key
@ -4502,7 +4502,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-labelledby="Dropdown7-label Dropdown7-option" aria-labelledby="Dropdown7-label Dropdown7-option"
className="ms-Dropdown dropdown-83" className="ms-Dropdown dropdown-51"
data-is-focusable={true} data-is-focusable={true}
id="Dropdown7" id="Dropdown7"
onBlur={[Function]} onBlur={[Function]}
@ -4522,23 +4522,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-posinset={1} aria-posinset={1}
aria-selected={true} aria-selected={true}
aria-setsize={2} aria-setsize={2}
className="ms-Dropdown-title title-84" className="ms-Dropdown-title title-52"
id="Dropdown7-option" id="Dropdown7-option"
role="option" role="option"
> >
String String
</span> </span>
<span <span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-85" className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
> >
<StyledIconBase <StyledIconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86" className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown" iconName="ChevronDown"
> >
<IconBase <IconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86" className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown" iconName="ChevronDown"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -4817,7 +4817,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-100" className="ms-Dropdown-caretDown caretDown-68"
data-icon-name="ChevronDown" data-icon-name="ChevronDown"
> >
@ -5125,7 +5125,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value="" value=""
> >
<div <div
className="ms-TextField root-102" className="ms-TextField root-70"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
@ -5414,7 +5414,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-81" className="ms-Label root-49"
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel10" id="TextFieldLabel10"
> >
@ -5423,13 +5423,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</LabelBase> </LabelBase>
</StyledLabelBase> </StyledLabelBase>
<div <div
className="ms-TextField-fieldGroup fieldGroup-103" className="ms-TextField-fieldGroup fieldGroup-71"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-labelledby="TextFieldLabel10" aria-labelledby="TextFieldLabel10"
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-104" className="ms-TextField-field field-72"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -5737,7 +5737,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image addRemoveIconLabel root-113" className="ms-Image addRemoveIconLabel root-81"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -5747,7 +5747,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Delete param" alt="Delete param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
id="deleteparam" id="deleteparam"
key="fabricImage" key="fabricImage"
onClick={[Function]} onClick={[Function]}
@ -6052,7 +6052,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image addRemoveIconLabel root-113" className="ms-Image addRemoveIconLabel root-81"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -6062,7 +6062,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Add param" alt="Add param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
id="addparam" id="addparam"
key="fabricImage" key="fabricImage"
onClick={[Function]} onClick={[Function]}
@ -6081,7 +6081,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="ms-Stack css-82" className="ms-Stack css-50"
onClick={[Function]} onClick={[Function]}
> >
<StyledImageBase <StyledImageBase
@ -6373,7 +6373,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image root-113" className="ms-Image root-81"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -6383,7 +6383,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Add param" alt="Add param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
key="fabricImage" key="fabricImage"
onError={[Function]} onError={[Function]}
onLoad={[Function]} onLoad={[Function]}
@ -6397,7 +6397,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
key=".0:$.1" key=".0:$.1"
> >
<span <span
className="addNewParamStyle css-115" className="addNewParamStyle css-83"
> >
Add New Param Add New Param
</span> </span>
@ -8123,7 +8123,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<button <button
aria-label="Submit" aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-116" className="ms-Button ms-Button--primary genericPaneSubmitBtn root-84"
data-is-focusable={true} data-is-focusable={true}
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
@ -8141,14 +8141,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
type="button" type="button"
> >
<span <span
className="ms-Button-flexContainer flexContainer-73" className="ms-Button-flexContainer flexContainer-41"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-74" className="ms-Button-textContainer textContainer-42"
> >
<span <span
className="ms-Button-label label-117" className="ms-Button-label label-85"
id="id__11" id="id__11"
key="id__11" key="id__11"
> >

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

@ -1,6 +1,5 @@
import AddCollectionPaneTemplate from "./AddCollectionPane.html"; import AddCollectionPaneTemplate from "./AddCollectionPane.html";
import AddDatabasePaneTemplate from "./AddDatabasePane.html"; import AddDatabasePaneTemplate from "./AddDatabasePane.html";
import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html"; import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html"; import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
import GitHubReposPaneTemplate from "./GitHubReposPane.html"; import GitHubReposPaneTemplate from "./GitHubReposPane.html";
@ -109,15 +108,6 @@ export class CassandraAddCollectionPaneComponent {
} }
} }
export class BrowseQueriesPaneComponent {
constructor() {
return {
viewModel: PaneComponent,
template: BrowseQueriesPaneTemplate,
};
}
}
export class StringInputPaneComponent { export class StringInputPaneComponent {
constructor() { constructor() {
return { return {

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

@ -347,24 +347,6 @@ exports[`Settings Pane should render Default properly 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -559,24 +541,6 @@ exports[`Settings Pane should render Default properly 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -1361,24 +1325,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -1573,24 +1519,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {

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

@ -347,24 +347,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -559,24 +541,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {

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

@ -30,7 +30,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
verticalAlign="start" verticalAlign="start"
> >
<div <div
className="ms-Stack panelInfoErrorContainer css-204" className="ms-Stack panelInfoErrorContainer css-140"
> >
<StyledIconBase <StyledIconBase
className="panelWarningIcon" className="panelWarningIcon"
@ -317,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="panelWarningIcon root-206" className="panelWarningIcon root-142"
data-icon-name="WarningSolid" data-icon-name="WarningSolid"
> >
@ -333,7 +333,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="panelWarningErrorMessage css-207" className="panelWarningErrorMessage css-143"
> >
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources. Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
@ -358,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-207" className="css-143"
> >
Confirm by typing the collection id Confirm by typing the collection id
</span> </span>
@ -659,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField root-209" className="ms-TextField root-145"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-210" className="ms-TextField-fieldGroup fieldGroup-146"
> >
<input <input
aria-invalid={false} aria-invalid={false}
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-211" className="ms-TextField-field field-147"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -693,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-220" className="css-156"
> >
Help us improve Azure Cosmos DB! Help us improve Azure Cosmos DB!
</span> </span>
@ -703,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-220" className="css-156"
> >
What is the reason why you are deleting this container? What is the reason why you are deleting this container?
</span> </span>
@ -1006,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField ms-TextField--multiline root-209" className="ms-TextField ms-TextField--multiline root-145"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-221" className="ms-TextField-fieldGroup fieldGroup-157"
> >
<textarea <textarea
aria-invalid={false} aria-invalid={false}
className="ms-TextField-field field-222" className="ms-TextField-field field-158"
id="deleteCollectionFeedbackInput" id="deleteCollectionFeedbackInput"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -2708,7 +2708,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variantClassName="ms-Button--primary" variantClassName="ms-Button--primary"
> >
<button <button
className="ms-Button ms-Button--primary root-224" className="ms-Button ms-Button--primary root-160"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2720,14 +2720,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-225" className="ms-Button-flexContainer flexContainer-161"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-226" className="ms-Button-textContainer textContainer-162"
> >
<span <span
className="ms-Button-label label-228" className="ms-Button-label label-164"
id="id__6" id="id__6"
key="id__6" key="id__6"
> >

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

@ -348,24 +348,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
"userTableQuery": [Function], "userTableQuery": [Function],
"visible": [Function], "visible": [Function],
}, },
BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
StringInputPane { StringInputPane {
"container": [Circular], "container": [Circular],
"firstFieldHasFocus": [Function], "firstFieldHasFocus": [Function],
@ -560,24 +542,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
"visible": [Function], "visible": [Function],
}, },
"arcadiaToken": [Function], "arcadiaToken": [Function],
"browseQueriesPane": BrowseQueriesPane {
"canSaveQueries": [Function],
"container": [Circular],
"firstFieldHasFocus": [Function],
"formErrors": [Function],
"formErrorsDetails": [Function],
"id": "browsequeriespane",
"isExecuting": [Function],
"isTemplateReady": [Function],
"loadSavedQuery": [Function],
"queriesGridComponentAdapter": QueriesGridComponentAdapter {
"container": [Circular],
"parameters": [Function],
},
"setupQueries": [Function],
"title": [Function],
"visible": [Function],
},
"canExceedMaximumValue": [Function], "canExceedMaximumValue": [Function],
"canSaveQueries": [Function], "canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane { "cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -939,7 +903,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
verticalAlign="start" verticalAlign="start"
> >
<div <div
className="ms-Stack panelInfoErrorContainer css-204" className="ms-Stack panelInfoErrorContainer css-140"
> >
<StyledIconBase <StyledIconBase
className="panelWarningIcon" className="panelWarningIcon"
@ -1226,7 +1190,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="panelWarningIcon root-206" className="panelWarningIcon root-142"
data-icon-name="WarningSolid" data-icon-name="WarningSolid"
> >
@ -1242,7 +1206,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small" variant="small"
> >
<span <span
className="panelWarningErrorMessage css-207" className="panelWarningErrorMessage css-143"
> >
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources. Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
@ -1267,7 +1231,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small" variant="small"
> >
<span <span
className="css-207" className="css-143"
> >
Confirm by typing the database id Confirm by typing the database id
</span> </span>
@ -1568,18 +1532,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField root-209" className="ms-TextField root-145"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-210" className="ms-TextField-fieldGroup fieldGroup-146"
> >
<input <input
aria-invalid={false} aria-invalid={false}
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-211" className="ms-TextField-field field-147"
id="confirmDatabaseId" id="confirmDatabaseId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -1602,7 +1566,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small" variant="small"
> >
<span <span
className="css-228" className="css-164"
> >
Help us improve Azure Cosmos DB! Help us improve Azure Cosmos DB!
</span> </span>
@ -1612,7 +1576,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small" variant="small"
> >
<span <span
className="css-228" className="css-164"
> >
What is the reason why you are deleting this database? What is the reason why you are deleting this database?
</span> </span>
@ -1915,17 +1879,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField ms-TextField--multiline root-209" className="ms-TextField ms-TextField--multiline root-145"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-229" className="ms-TextField-fieldGroup fieldGroup-165"
> >
<textarea <textarea
aria-invalid={false} aria-invalid={false}
className="ms-TextField-field field-230" className="ms-TextField-field field-166"
id="deleteDatabaseFeedbackInput" id="deleteDatabaseFeedbackInput"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -3617,7 +3581,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variantClassName="ms-Button--primary" variantClassName="ms-Button--primary"
> >
<button <button
className="ms-Button ms-Button--primary root-220" className="ms-Button ms-Button--primary root-156"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -3629,14 +3593,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-221" className="ms-Button-flexContainer flexContainer-157"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-222" className="ms-Button-textContainer textContainer-158"
> >
<span <span
className="ms-Button-label label-224" className="ms-Button-label label-160"
id="id__3" id="id__3"
key="id__3" key="id__3"
> >

2
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -252,7 +252,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
iconSrc: OpenQueryIcon, iconSrc: OpenQueryIcon,
title: "Open Query", title: "Open Query",
description: null, description: null,
onClick: () => this.container.browseQueriesPane.open(), onClick: () => this.container.openBrowseQueriesPanel(),
}); });
if (!this.container.isPreferredApiCassandra()) { if (!this.container.isPreferredApiCassandra()) {

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

@ -189,7 +189,7 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
}; };
public onSavedQueriesClick = (): void => { public onSavedQueriesClick = (): void => {
this.collection && this.collection.container && this.collection.container.browseQueriesPane.open(); this.collection && this.collection.container && this.collection.container.openBrowseQueriesPanel();
}; };
public async onFetchNextPageClick(): Promise<void> { public async onFetchNextPageClick(): Promise<void> {

1
src/Main.tsx
View File

@ -239,7 +239,6 @@ const App: React.FunctionComponent = () => {
<div data-bind='component: { name: "table-column-options-pane", params: { data: tableColumnOptionsPane} }' /> <div data-bind='component: { name: "table-column-options-pane", params: { data: tableColumnOptionsPane} }' />
<div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' /> <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: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
<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: "string-input-pane", params: { data: stringInputPane} }' />
<div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' /> <div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />
<KOCommentIfStart if="isGitHubPaneEnabled" /> <KOCommentIfStart if="isGitHubPaneEnabled" />