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

1070
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/node-fetch": "2.5.7",
"@uifabric/react-cards": "0.109.110",
"@uifabric/react-hooks": "7.14.0",
"@uifabric/styling": "7.13.7",
"applicationinsights": "1.8.0",
"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);
});
it("should register browse-queries-pane component", () => {
expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
});
it("should register graph-new-vertex-pane component", () => {
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-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
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("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
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
className="ms-ScrollablePane root-72"
className="ms-ScrollablePane root-40"
data-is-scrollable="true"
>
<div
className="stickyAbove-74"
className="stickyAbove-42"
style={
Object {
"height": 0,
@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
}
/>
<div
className="ms-ScrollablePane--contentContainer contentContainer-73"
className="ms-ScrollablePane--contentContainer contentContainer-41"
data-is-scrollable={true}
>
<Sticky
@ -691,18 +691,18 @@ exports[`test render renders with filters 1`] = `
validateOnLoad={true}
>
<div
className="ms-TextField directoryListFilterTextBox root-78"
className="ms-TextField directoryListFilterTextBox root-46"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-79"
className="ms-TextField-fieldGroup fieldGroup-47"
>
<input
aria-invalid={false}
aria-label="Directory filter text box"
className="ms-TextField-field field-80"
className="ms-TextField-field field-48"
id="TextField0"
onBlur={[Function]}
onChange={[Function]}
@ -1900,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
>
<button
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}
disabled={true}
onClick={[Function]}
@ -1912,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-90"
className="ms-Button-flexContainer flexContainer-58"
data-automationid="splitbuttonprimary"
>
<div
@ -1943,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
</List>
</div>
<div
className="stickyBelow-75"
className="stickyBelow-43"
style={
Object {
"bottom": "0px",
@ -1954,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
}
>
<div
className="stickyBelowItems-76"
className="stickyBelowItems-44"
/>
</div>
</div>

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

@ -1,20 +1,15 @@
import * as _ from "underscore";
import * as React from "react";
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 { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
import {
DetailsList,
DetailsListLayoutMode,
DetailsRow,
IColumn,
IDetailsListProps,
IDetailsRowProps,
DetailsRow,
} from "office-ui-fabric-react/lib/DetailsList";
import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
import {
IObjectWithKey,
ISelectionZoneProps,
@ -22,13 +17,18 @@ import {
SelectionMode,
SelectionZone,
} 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 { 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 SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
import { QueriesClient } from "../../../Common/QueriesClient";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
const title: string = "Open Saved Queries";
export interface QueriesGridComponentProps {
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 {
if (this.state.queries.length === 0) {
return this.renderBannerComponent();
@ -136,7 +141,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
},
};
return (
<div>
<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
@ -222,7 +227,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
const container = window.dataExplorer;
const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(),
paneTitle: title,
});
try {
await this.props.queriesClient.deleteQuery(query);
@ -230,7 +235,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
Action.DeleteSavedQuery,
{
dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(),
paneTitle: title,
},
startKey
);
@ -239,7 +244,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
Action.DeleteSavedQuery,
{
dataExplorerArea: Constants.Areas.ContextualPane,
paneTitle: container && container.browseQueriesPane.title(),
paneTitle: title,
error: getErrorMessage(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],
"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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -583,24 +565,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -1297,24 +1261,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -1509,24 +1455,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -2236,24 +2164,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -2448,24 +2358,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -3162,24 +3054,6 @@ exports[`SettingsComponent renders 1`] = `
"userTableQuery": [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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -3374,24 +3248,6 @@ exports[`SettingsComponent renders 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {

15
src/Explorer/Explorer.tsx
View File

@ -50,7 +50,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
import AddCollectionPane from "./Panes/AddCollectionPane";
import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
import AddDatabasePane from "./Panes/AddDatabasePane";
import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
@ -210,7 +210,6 @@ export default class Explorer {
public querySelectPane: QuerySelectPane;
public newVertexPane: NewVertexPane;
public cassandraAddCollectionPane: CassandraAddCollectionPane;
public browseQueriesPane: BrowseQueriesPane;
public stringInputPane: StringInputPane;
public setupNotebooksPane: SetupNotebooksPane;
public gitHubReposPane: ContextualPaneBase;
@ -609,13 +608,6 @@ export default class Explorer {
container: this,
});
this.browseQueriesPane = new BrowseQueriesPane({
id: "browsequeriespane",
visible: ko.observable<boolean>(false),
container: this,
});
this.stringInputPane = new StringInputPane({
id: "stringinputpane",
visible: ko.observable<boolean>(false),
@ -643,7 +635,6 @@ export default class Explorer {
this.querySelectPane,
this.newVertexPane,
this.cassandraAddCollectionPane,
this.browseQueriesPane,
this.stringInputPane,
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 {
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 {
iconSrc: BrowseQueriesIcon,
iconAlt: label,
onCommandClick: () => container.browseQueriesPane.open(),
onCommandClick: () => container.openBrowseQueriesPanel(),
commandButtonLabel: label,
ariaLabel: label,
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
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}
onClick={[Function]}
onKeyDown={[Function]}
@ -1074,16 +1074,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-73"
className="ms-Button-flexContainer flexContainer-41"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-75"
className="ms-Button-icon icon-43"
iconName="Cancel"
>
<i
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"
role="presentation"
style={
@ -1429,7 +1429,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label root-81"
className="ms-Label root-49"
>
Partition key value
</label>
@ -1439,7 +1439,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true}
>
<div
className="ms-Stack css-82"
className="ms-Stack css-50"
>
<StyledWithResponsiveMode
key=".0:$.0"
@ -2336,7 +2336,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label ms-Dropdown-label root-99"
className="ms-Label ms-Dropdown-label root-67"
id="Dropdown3-label"
>
Key
@ -2348,7 +2348,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="Dropdown3-label Dropdown3-option"
className="ms-Dropdown dropdown-83"
className="ms-Dropdown dropdown-51"
data-is-focusable={true}
id="Dropdown3"
onBlur={[Function]}
@ -2368,23 +2368,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-posinset={1}
aria-selected={true}
aria-setsize={2}
className="ms-Dropdown-title title-84"
className="ms-Dropdown-title title-52"
id="Dropdown3-option"
role="option"
>
String
</span>
<span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-85"
className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
>
<StyledIconBase
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86"
className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown"
>
<IconBase
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86"
className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown"
styles={[Function]}
theme={
@ -2663,7 +2663,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<i
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-100"
className="ms-Dropdown-caretDown caretDown-68"
data-icon-name="ChevronDown"
>
@ -2971,7 +2971,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value=""
>
<div
className="ms-TextField root-102"
className="ms-TextField root-70"
>
<div
className="ms-TextField-wrapper"
@ -3260,7 +3260,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label root-81"
className="ms-Label root-49"
htmlFor="confirmCollectionId"
id="TextFieldLabel6"
>
@ -3269,13 +3269,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</LabelBase>
</StyledLabelBase>
<div
className="ms-TextField-fieldGroup fieldGroup-103"
className="ms-TextField-fieldGroup fieldGroup-71"
>
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel6"
autoFocus={true}
className="ms-TextField-field field-104"
className="ms-TextField-field field-72"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@ -3583,7 +3583,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label root-81"
className="ms-Label root-49"
>
Enter input parameters (if any)
</label>
@ -3593,7 +3593,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true}
>
<div
className="ms-Stack css-82"
className="ms-Stack css-50"
>
<StyledWithResponsiveMode
key=".0:$.0"
@ -4490,7 +4490,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label ms-Dropdown-label root-99"
className="ms-Label ms-Dropdown-label root-67"
id="Dropdown7-label"
>
Key
@ -4502,7 +4502,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="Dropdown7-label Dropdown7-option"
className="ms-Dropdown dropdown-83"
className="ms-Dropdown dropdown-51"
data-is-focusable={true}
id="Dropdown7"
onBlur={[Function]}
@ -4522,23 +4522,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-posinset={1}
aria-selected={true}
aria-setsize={2}
className="ms-Dropdown-title title-84"
className="ms-Dropdown-title title-52"
id="Dropdown7-option"
role="option"
>
String
</span>
<span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-85"
className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
>
<StyledIconBase
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86"
className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown"
>
<IconBase
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-86"
className="ms-Dropdown-caretDown caretDown-54"
iconName="ChevronDown"
styles={[Function]}
theme={
@ -4817,7 +4817,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<i
aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-100"
className="ms-Dropdown-caretDown caretDown-68"
data-icon-name="ChevronDown"
>
@ -5125,7 +5125,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value=""
>
<div
className="ms-TextField root-102"
className="ms-TextField root-70"
>
<div
className="ms-TextField-wrapper"
@ -5414,7 +5414,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
>
<label
className="ms-Label root-81"
className="ms-Label root-49"
htmlFor="confirmCollectionId"
id="TextFieldLabel10"
>
@ -5423,13 +5423,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</LabelBase>
</StyledLabelBase>
<div
className="ms-TextField-fieldGroup fieldGroup-103"
className="ms-TextField-fieldGroup fieldGroup-71"
>
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel10"
autoFocus={true}
className="ms-TextField-field field-104"
className="ms-TextField-field field-72"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@ -5737,7 +5737,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20}
>
<div
className="ms-Image addRemoveIconLabel root-113"
className="ms-Image addRemoveIconLabel root-81"
style={
Object {
"height": 30,
@ -5747,7 +5747,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<img
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"
key="fabricImage"
onClick={[Function]}
@ -6052,7 +6052,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20}
>
<div
className="ms-Image addRemoveIconLabel root-113"
className="ms-Image addRemoveIconLabel root-81"
style={
Object {
"height": 30,
@ -6062,7 +6062,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<img
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"
key="fabricImage"
onClick={[Function]}
@ -6081,7 +6081,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
onClick={[Function]}
>
<div
className="ms-Stack css-82"
className="ms-Stack css-50"
onClick={[Function]}
>
<StyledImageBase
@ -6373,7 +6373,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20}
>
<div
className="ms-Image root-113"
className="ms-Image root-81"
style={
Object {
"height": 30,
@ -6383,7 +6383,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<img
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"
onError={[Function]}
onLoad={[Function]}
@ -6397,7 +6397,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
key=".0:$.1"
>
<span
className="addNewParamStyle css-115"
className="addNewParamStyle css-83"
>
Add New Param
</span>
@ -8123,7 +8123,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<button
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}
onClick={[Function]}
onKeyDown={[Function]}
@ -8141,14 +8141,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-73"
className="ms-Button-flexContainer flexContainer-41"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-74"
className="ms-Button-textContainer textContainer-42"
>
<span
className="ms-Button-label label-117"
className="ms-Button-label label-85"
id="id__11"
key="id__11"
>

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

@ -1,6 +1,5 @@
import AddCollectionPaneTemplate from "./AddCollectionPane.html";
import AddDatabasePaneTemplate from "./AddDatabasePane.html";
import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.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 {
constructor() {
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],
"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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -559,24 +541,6 @@ exports[`Settings Pane should render Default properly 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -1361,24 +1325,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
"userTableQuery": [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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -1573,24 +1519,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"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],
"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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -559,24 +541,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
"visible": [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],
"canSaveQueries": [Function],
"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"
>
<div
className="ms-Stack panelInfoErrorContainer css-204"
className="ms-Stack panelInfoErrorContainer css-140"
>
<StyledIconBase
className="panelWarningIcon"
@ -317,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<i
aria-hidden={true}
className="panelWarningIcon root-206"
className="panelWarningIcon root-142"
data-icon-name="WarningSolid"
>
@ -333,7 +333,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<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.
@ -358,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-207"
className="css-143"
>
Confirm by typing the collection id
</span>
@ -659,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>
<div
className="ms-TextField root-209"
className="ms-TextField root-145"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-210"
className="ms-TextField-fieldGroup fieldGroup-146"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-211"
className="ms-TextField-field field-147"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@ -693,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-220"
className="css-156"
>
Help us improve Azure Cosmos DB!
</span>
@ -703,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-220"
className="css-156"
>
What is the reason why you are deleting this container?
</span>
@ -1006,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-209"
className="ms-TextField ms-TextField--multiline root-145"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-221"
className="ms-TextField-fieldGroup fieldGroup-157"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-222"
className="ms-TextField-field field-158"
id="deleteCollectionFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@ -2708,7 +2708,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variantClassName="ms-Button--primary"
>
<button
className="ms-Button ms-Button--primary root-224"
className="ms-Button ms-Button--primary root-160"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@ -2720,14 +2720,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-225"
className="ms-Button-flexContainer flexContainer-161"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-226"
className="ms-Button-textContainer textContainer-162"
>
<span
className="ms-Button-label label-228"
className="ms-Button-label label-164"
id="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],
"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 {
"container": [Circular],
"firstFieldHasFocus": [Function],
@ -560,24 +542,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
"visible": [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],
"canSaveQueries": [Function],
"cassandraAddCollectionPane": CassandraAddCollectionPane {
@ -939,7 +903,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
verticalAlign="start"
>
<div
className="ms-Stack panelInfoErrorContainer css-204"
className="ms-Stack panelInfoErrorContainer css-140"
>
<StyledIconBase
className="panelWarningIcon"
@ -1226,7 +1190,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<i
aria-hidden={true}
className="panelWarningIcon root-206"
className="panelWarningIcon root-142"
data-icon-name="WarningSolid"
>
@ -1242,7 +1206,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<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.
@ -1267,7 +1231,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-207"
className="css-143"
>
Confirm by typing the database id
</span>
@ -1568,18 +1532,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField root-209"
className="ms-TextField root-145"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-210"
className="ms-TextField-fieldGroup fieldGroup-146"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-211"
className="ms-TextField-field field-147"
id="confirmDatabaseId"
onBlur={[Function]}
onChange={[Function]}
@ -1602,7 +1566,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-228"
className="css-164"
>
Help us improve Azure Cosmos DB!
</span>
@ -1612,7 +1576,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-228"
className="css-164"
>
What is the reason why you are deleting this database?
</span>
@ -1915,17 +1879,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-209"
className="ms-TextField ms-TextField--multiline root-145"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-229"
className="ms-TextField-fieldGroup fieldGroup-165"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-230"
className="ms-TextField-field field-166"
id="deleteDatabaseFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@ -3617,7 +3581,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variantClassName="ms-Button--primary"
>
<button
className="ms-Button ms-Button--primary root-220"
className="ms-Button ms-Button--primary root-156"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@ -3629,14 +3593,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-221"
className="ms-Button-flexContainer flexContainer-157"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-222"
className="ms-Button-textContainer textContainer-158"
>
<span
className="ms-Button-label label-224"
className="ms-Button-label label-160"
id="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,
title: "Open Query",
description: null,
onClick: () => this.container.browseQueriesPane.open(),
onClick: () => this.container.openBrowseQueriesPanel(),
});
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 => {
this.collection && this.collection.container && this.collection.container.browseQueriesPane.open();
this.collection && this.collection.container && this.collection.container.openBrowseQueriesPanel();
};
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-query-select-pane", params: { data: querySelectPane} }' />
<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: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />
<KOCommentIfStart if="isGitHubPaneEnabled" />