mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-21 01:41:31 +00:00
Migration/browse queries pane to react (#598)
Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
This commit is contained in:
committed by
GitHub
parent
b34c81b3ab
commit
de5a11ff1b
@@ -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),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user