random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migration/browse queries pane to react (#598)

Browse Source 
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
24 changed files with 1009 additions and 913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 {