mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2024-11-25 15:06:55 +00:00
Migration/execute sproc params pane in react (#576)
Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
This commit is contained in:
Sunil Kumar Yadav
GitHub
parent
b1a904a98f
commit
69ac4e218d
@ -126,7 +126,6 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
|
||||
src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
|
||||
src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
|
||||
src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
|
||||
src/Explorer/Panes/ExecuteSprocParamsPane.ts
|
||||
src/Explorer/Panes/GraphStylingPane.ts
|
||||
src/Explorer/Panes/LoadQueryPane.ts
|
||||
src/Explorer/Panes/NewVertexPane.ts
|
||||
|
||||
@ -77,7 +77,6 @@ ko.components.register("table-column-options-pane", new PaneComponents.TableColu
|
||||
ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
|
||||
ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
|
||||
ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
|
||||
ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
|
||||
ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
|
||||
ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
|
||||
ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
|
||||
|
||||
@ -409,31 +409,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
UploadItemsPane {
|
||||
"container": [Circular],
|
||||
"fileUploadSummaryText": [Function],
|
||||
@ -869,31 +844,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"executeSprocParamsPane": ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@ -1603,31 +1553,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
UploadItemsPane {
|
||||
"container": [Circular],
|
||||
"fileUploadSummaryText": [Function],
|
||||
@ -2063,31 +1988,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"executeSprocParamsPane": ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@ -2810,31 +2710,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
UploadItemsPane {
|
||||
"container": [Circular],
|
||||
"fileUploadSummaryText": [Function],
|
||||
@ -3270,31 +3145,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"executeSprocParamsPane": ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@ -4004,31 +3854,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
UploadItemsPane {
|
||||
"container": [Circular],
|
||||
"fileUploadSummaryText": [Function],
|
||||
@ -4464,31 +4289,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"executeSprocParamsPane": ExecuteSprocParamsPane {
|
||||
"addNewParam": [Function],
|
||||
"addNewParamAtIndex": [Function],
|
||||
"addNewParamLabel": "Add New Param",
|
||||
"collectionHasPartitionKey": [Function],
|
||||
"container": [Circular],
|
||||
"deleteParam": [Function],
|
||||
"execute": [Function],
|
||||
"executeButtonEnabled": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"id": "executesprocparamspane",
|
||||
"isExecuting": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"onAddNewParamAtIndexKeyPress": [Function],
|
||||
"onAddNewParamKeyPress": [Function],
|
||||
"onDeleteParamKeyPress": [Function],
|
||||
"params": [Function],
|
||||
"partitionKeyType": [Function],
|
||||
"partitionKeyValue": [Function],
|
||||
"title": [Function],
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
|
||||
@ -56,7 +56,7 @@ import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
|
||||
import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
|
||||
import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
|
||||
import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
|
||||
import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
|
||||
import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
|
||||
import GraphStylingPane from "./Panes/GraphStylingPane";
|
||||
import { LoadQueryPane } from "./Panes/LoadQueryPane";
|
||||
import NewVertexPane from "./Panes/NewVertexPane";
|
||||
@ -213,7 +213,6 @@ export default class Explorer {
|
||||
public newVertexPane: NewVertexPane;
|
||||
public cassandraAddCollectionPane: CassandraAddCollectionPane;
|
||||
public settingsPane: SettingsPane;
|
||||
public executeSprocParamsPane: ExecuteSprocParamsPane;
|
||||
public uploadItemsPane: UploadItemsPane;
|
||||
public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
|
||||
public loadQueryPane: LoadQueryPane;
|
||||
@ -632,13 +631,6 @@ export default class Explorer {
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.executeSprocParamsPane = new ExecuteSprocParamsPane({
|
||||
id: "executesprocparamspane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.uploadItemsPane = new UploadItemsPane({
|
||||
id: "uploaditemspane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
@ -705,7 +697,6 @@ export default class Explorer {
|
||||
this.newVertexPane,
|
||||
this.cassandraAddCollectionPane,
|
||||
this.settingsPane,
|
||||
this.executeSprocParamsPane,
|
||||
this.uploadItemsPane,
|
||||
this.loadQueryPane,
|
||||
this.saveQueryPane,
|
||||
@ -2463,6 +2454,13 @@ export default class Explorer {
|
||||
);
|
||||
}
|
||||
|
||||
public openExecuteSprocParamsPanel(): void {
|
||||
this.openSidePanel(
|
||||
"Input parameters",
|
||||
<ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
|
||||
);
|
||||
}
|
||||
|
||||
public async openAddCollectionPanel(): Promise<void> {
|
||||
await this.loadDatabaseOffers();
|
||||
this.openSidePanel(
|
||||
|
||||
@ -1,175 +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="executesprocparamspane">
|
||||
<!-- Input params form -- Start -->
|
||||
<div class="contextual-pane-in">
|
||||
<form class="paneContentContainer" data-bind="submit: execute">
|
||||
<!-- Input params 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>
|
||||
<!-- Input params header - End -->
|
||||
|
||||
<!-- Input params errors - Start -->
|
||||
<div
|
||||
class="warningErrorContainer"
|
||||
aria-live="assertive"
|
||||
data-bind="visible: formErrors() && formErrors() !== ''"
|
||||
>
|
||||
<div class="warningErrorContent">
|
||||
<span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
|
||||
<span class="warningErrorDetailsLinkContainer">
|
||||
<span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
|
||||
<a
|
||||
class="errorLink"
|
||||
role="link"
|
||||
data-bind="
|
||||
visible: formErrorsDetails() && formErrorsDetails() !== '',
|
||||
click: showErrorDetails"
|
||||
>More details</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input params errors - End -->
|
||||
|
||||
<!-- Script for each param clause to be used for executing a stored procedure -->
|
||||
<script type="text/html" id="param-template">
|
||||
<tr>
|
||||
<td class="paramTemplateRow">
|
||||
<select class="dataTypeSelector" data-bind="value: type, attr: { 'aria-label': type }">
|
||||
<option value="custom">Custom</option>
|
||||
<option value="string">String</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="paramTemplateRow">
|
||||
<input class="valueTextBox" aria-label="Param" data-bind="textInput: value" />
|
||||
<span
|
||||
class="spEntityAddCancel"
|
||||
data-bind="click: $parent.deleteParam.bind($parent, $index()), event: { keypress: $parent.onDeleteParamKeyPress.bind($parent, $index()) }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img src="/Entity_cancel.svg" alt="Delete param" />
|
||||
</span>
|
||||
<span
|
||||
class="spEntityAddCancel"
|
||||
data-bind="click: $parent.addNewParamAtIndex.bind($parent, $index()), event: { keypress: $parent.onAddNewParamAtIndexKeyPress.bind($parent, $index()) }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img src="/Add-property.svg" alt="Add param" />
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<!-- Input params input - Start -->
|
||||
<div class="paneMainContent">
|
||||
<div>
|
||||
<!-- Partition key input - Start -->
|
||||
<div class="partitionKeyContainer" data-bind="visible: collectionHasPartitionKey">
|
||||
<div class="inputHeader">Partition key value</div>
|
||||
<div class="scrollBox">
|
||||
<table class="paramsClauseTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="paramTemplateRow">
|
||||
<select
|
||||
class="dataTypeSelector"
|
||||
data-bind="value: partitionKeyType, attr: { 'aria-label': partitionKeyType }"
|
||||
>
|
||||
<option value="custom">Custom</option>
|
||||
<option value="string">String</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="paramTemplateRow">
|
||||
<input
|
||||
class="partitionKeyValue"
|
||||
id="partitionKeyValue"
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
aria-label="Partition key value"
|
||||
data-bind="textInput: partitionKeyValue"
|
||||
autofocus
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Partition key input - End -->
|
||||
|
||||
<!-- Input params table - Start -->
|
||||
<div class="paramsTable">
|
||||
<div class="enterInputParams">Enter input parameters (if any)</div>
|
||||
<div class="scrollBox" id="executeSprocParamsScroll">
|
||||
<table class="paramsClauseTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="paramTableTypeHead">Type</th>
|
||||
<th>Param</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind="template: { name: 'param-template', foreach: params }"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
id="addNewParamLink"
|
||||
class="addNewParam"
|
||||
data-bind="click: addNewParam, event: { keypress: onAddNewParamKeyPress }, attr:{ title: addNewParamLabel }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
<img src="/Add-property.svg" alt="Add new param" />
|
||||
<span class="addNewParamLabel" data-bind="text: addNewParamLabel" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input params table - End -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="paneFooter">
|
||||
<div class="leftpanel-okbut">
|
||||
<input
|
||||
type="submit"
|
||||
value="Execute"
|
||||
class="btncreatecoll1"
|
||||
data-bind="{ css: { btnDisabled: !executeButtonEnabled() }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input param input - End -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- Input params form - End -->
|
||||
<!-- Loader - Start -->
|
||||
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
||||
<img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
|
||||
</div>
|
||||
<!-- Loader - End -->
|
||||
</div>
|
||||
</div>
|
||||
@ -1,172 +0,0 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import StoredProcedure from "../Tree/StoredProcedure";
|
||||
|
||||
export interface ExecuteSprocParam {
|
||||
type: ko.Observable<string>;
|
||||
value: ko.Observable<string>;
|
||||
}
|
||||
|
||||
type UnwrappedExecuteSprocParam = {
|
||||
type: string;
|
||||
value: any;
|
||||
};
|
||||
|
||||
export class ExecuteSprocParamsPane extends ContextualPaneBase {
|
||||
public params: ko.ObservableArray<ExecuteSprocParam>;
|
||||
public partitionKeyType: ko.Observable<string>;
|
||||
public partitionKeyValue: ko.Observable<string>;
|
||||
public collectionHasPartitionKey: ko.Observable<boolean>;
|
||||
public addNewParamLabel: string = "Add New Param";
|
||||
public executeButtonEnabled: ko.Computed<boolean>;
|
||||
|
||||
private _selectedSproc: StoredProcedure;
|
||||
|
||||
constructor(options: ViewModels.PaneOptions) {
|
||||
super(options);
|
||||
this.title("Input parameters");
|
||||
this.partitionKeyType = ko.observable<string>("custom");
|
||||
this.partitionKeyValue = ko.observable<string>();
|
||||
this.executeButtonEnabled = ko.computed<boolean>(() => this.validPartitionKeyValue());
|
||||
this.params = ko.observableArray<ExecuteSprocParam>([
|
||||
{ type: ko.observable<string>("string"), value: ko.observable<string>() },
|
||||
]);
|
||||
this.collectionHasPartitionKey = ko.observable<boolean>();
|
||||
this.resetData();
|
||||
}
|
||||
|
||||
public open() {
|
||||
super.open();
|
||||
const currentSelectedSproc = this.container && this.container.findSelectedStoredProcedure();
|
||||
if (!!currentSelectedSproc && !!this._selectedSproc && this._selectedSproc.rid !== currentSelectedSproc.rid) {
|
||||
this.params([]);
|
||||
this.partitionKeyValue("");
|
||||
}
|
||||
this._selectedSproc = currentSelectedSproc;
|
||||
this.collectionHasPartitionKey((this.container && !!this.container.findSelectedCollection().partitionKey) || false);
|
||||
const focusElement = document.getElementById("partitionKeyValue");
|
||||
focusElement && focusElement.focus();
|
||||
}
|
||||
|
||||
public execute = () => {
|
||||
this.formErrors("");
|
||||
const partitionKeyValue: string = (() => {
|
||||
if (!this.collectionHasPartitionKey()) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const type: string = this.partitionKeyType();
|
||||
let value: string = this.partitionKeyValue();
|
||||
|
||||
if (type === "custom") {
|
||||
if (value === "undefined" || value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (value === "null" || value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {
|
||||
this.formErrors(`Invalid param specified: ${value}`);
|
||||
this.formErrorsDetails(`Invalid param specified: ${value} is not a valid literal value`);
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
})();
|
||||
const unwrappedParams: UnwrappedExecuteSprocParam[] = ko.toJS(this.params());
|
||||
const wrappedSprocParams: UnwrappedExecuteSprocParam[] = !this.params()
|
||||
? undefined
|
||||
: _.map(unwrappedParams, (unwrappedParam: UnwrappedExecuteSprocParam) => {
|
||||
let paramValue: string = unwrappedParam.value;
|
||||
|
||||
if (unwrappedParam.type === "custom" && (paramValue === "undefined" || paramValue === "")) {
|
||||
paramValue = undefined;
|
||||
} else if (unwrappedParam.type === "custom") {
|
||||
try {
|
||||
paramValue = JSON.parse(paramValue);
|
||||
} catch (e) {
|
||||
this.formErrors(`Invalid param specified: ${paramValue}`);
|
||||
this.formErrorsDetails(`Invalid param specified: ${paramValue} is not a valid literal value`);
|
||||
}
|
||||
}
|
||||
|
||||
unwrappedParam.value = paramValue;
|
||||
return unwrappedParam;
|
||||
});
|
||||
|
||||
if (this.formErrors()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sprocParams = wrappedSprocParams && _.pluck(wrappedSprocParams, "value");
|
||||
this._selectedSproc.execute(sprocParams, partitionKeyValue);
|
||||
this.close();
|
||||
};
|
||||
|
||||
private validPartitionKeyValue = (): boolean => {
|
||||
return !this.collectionHasPartitionKey || (this.partitionKeyValue() != null && this.partitionKeyValue().length > 0);
|
||||
};
|
||||
|
||||
public addNewParam = (): void => {
|
||||
this.params.push({ type: ko.observable<string>("string"), value: ko.observable<string>() });
|
||||
this._maintainFocusOnAddNewParamLink();
|
||||
};
|
||||
|
||||
public onAddNewParamKeyPress = (source: any, event: KeyboardEvent): boolean => {
|
||||
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
|
||||
this.addNewParam();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
public addNewParamAtIndex = (index: number): void => {
|
||||
this.params.splice(index, 0, { type: ko.observable<string>("string"), value: ko.observable<string>() });
|
||||
};
|
||||
|
||||
public onAddNewParamAtIndexKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
|
||||
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
|
||||
this.addNewParamAtIndex(index);
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
public deleteParam = (indexToRemove: number): void => {
|
||||
const params = _.reject(this.params(), (param: ExecuteSprocParam, index: number) => {
|
||||
return index === indexToRemove;
|
||||
});
|
||||
this.params(params);
|
||||
};
|
||||
|
||||
public onDeleteParamKeyPress = (indexToRemove: number, source: any, event: KeyboardEvent): boolean => {
|
||||
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
|
||||
this.deleteParam(indexToRemove);
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
public close(): void {
|
||||
super.close();
|
||||
this.formErrors("");
|
||||
this.formErrorsDetails("");
|
||||
}
|
||||
|
||||
private _maintainFocusOnAddNewParamLink(): void {
|
||||
const addNewParamLink = document.getElementById("addNewParamLink");
|
||||
addNewParamLink.scrollIntoView();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
import {
|
||||
Dropdown,
|
||||
IDropdownOption,
|
||||
IDropdownStyles,
|
||||
IImageProps,
|
||||
Image,
|
||||
Label,
|
||||
Stack,
|
||||
TextField,
|
||||
} from "office-ui-fabric-react";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import AddPropertyIcon from "../../../../images/Add-property.svg";
|
||||
import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
|
||||
|
||||
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
|
||||
const options = [
|
||||
{ key: "string", text: "String" },
|
||||
{ key: "custom", text: "Custom" },
|
||||
];
|
||||
|
||||
export interface InputParameterProps {
|
||||
dropdownLabel?: string;
|
||||
inputParameterTitle?: string;
|
||||
inputLabel?: string;
|
||||
isAddRemoveVisible: boolean;
|
||||
onDeleteParamKeyPress?: () => void;
|
||||
onAddNewParamKeyPress?: () => void;
|
||||
onParamValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
|
||||
onParamKeyChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
|
||||
paramValue: string;
|
||||
selectedKey: string | number;
|
||||
}
|
||||
|
||||
export const InputParameter: FunctionComponent<InputParameterProps> = ({
|
||||
dropdownLabel,
|
||||
inputParameterTitle,
|
||||
inputLabel,
|
||||
isAddRemoveVisible,
|
||||
paramValue,
|
||||
selectedKey,
|
||||
onDeleteParamKeyPress,
|
||||
onAddNewParamKeyPress,
|
||||
onParamValueChange,
|
||||
onParamKeyChange,
|
||||
}: InputParameterProps): JSX.Element => {
|
||||
const imageProps: IImageProps = {
|
||||
width: 20,
|
||||
height: 30,
|
||||
className: dropdownLabel ? "addRemoveIconLabel" : "addRemoveIcon",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{inputParameterTitle && <Label>{inputParameterTitle}</Label>}
|
||||
<Stack horizontal>
|
||||
<Dropdown
|
||||
label={dropdownLabel && dropdownLabel}
|
||||
selectedKey={selectedKey}
|
||||
onChange={onParamKeyChange}
|
||||
options={options}
|
||||
styles={dropdownStyles}
|
||||
/>
|
||||
<TextField
|
||||
label={inputLabel && inputLabel}
|
||||
id="confirmCollectionId"
|
||||
autoFocus
|
||||
value={paramValue}
|
||||
onChange={onParamValueChange}
|
||||
/>
|
||||
{isAddRemoveVisible && (
|
||||
<>
|
||||
<Image
|
||||
{...imageProps}
|
||||
src={EntityCancelIcon}
|
||||
alt="Delete param"
|
||||
id="deleteparam"
|
||||
onClick={onDeleteParamKeyPress}
|
||||
/>
|
||||
<Image
|
||||
{...imageProps}
|
||||
src={AddPropertyIcon}
|
||||
alt="Add param"
|
||||
id="addparam"
|
||||
onClick={onAddNewParamKeyPress}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
34
src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
Normal file
34
src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { mount } from "enzyme";
|
||||
import React from "react";
|
||||
import Explorer from "../../Explorer";
|
||||
import { ExecuteSprocParamsPanel } from "./index";
|
||||
|
||||
describe("Excute Sproc Param Pane", () => {
|
||||
const fakeExplorer = {} as Explorer;
|
||||
const props = {
|
||||
explorer: fakeExplorer,
|
||||
closePanel: (): void => undefined,
|
||||
};
|
||||
|
||||
it("should render Default properly", () => {
|
||||
const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("initially display 2 input field, 1 partition and 1 parameter", () => {
|
||||
const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
|
||||
expect(wrapper.find("input[type='text']")).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("add a new parameter field", () => {
|
||||
const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
|
||||
wrapper.find("#addparam").last().simulate("click");
|
||||
expect(wrapper.find("input[type='text']")).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("remove a parameter field", () => {
|
||||
const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
|
||||
wrapper.find("#deleteparam").last().simulate("click");
|
||||
expect(wrapper.find("input[type='text']")).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
163
src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
Normal file
163
src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import { useBoolean } from "@uifabric/react-hooks";
|
||||
import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
|
||||
import React, { FunctionComponent, useState } from "react";
|
||||
import AddPropertyIcon from "../../../../images/Add-property.svg";
|
||||
import Explorer from "../../Explorer";
|
||||
import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
|
||||
import { InputParameter } from "./InputParameter";
|
||||
|
||||
interface ExecuteSprocParamsPaneProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
}
|
||||
|
||||
const imageProps: IImageProps = {
|
||||
width: 20,
|
||||
height: 30,
|
||||
};
|
||||
|
||||
interface UnwrappedExecuteSprocParam {
|
||||
key: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
|
||||
explorer,
|
||||
closePanel,
|
||||
}: ExecuteSprocParamsPaneProps): JSX.Element => {
|
||||
const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
|
||||
const [paramKeyValues, setParamKeyValues] = useState<UnwrappedExecuteSprocParam[]>([{ key: "string", text: "" }]);
|
||||
const [partitionValue, setPartitionValue] = useState<string>("");
|
||||
const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
|
||||
const [formError, setFormError] = useState<string>("");
|
||||
const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
|
||||
|
||||
const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
|
||||
setSelectedKey(item);
|
||||
};
|
||||
|
||||
const genericPaneProps: GenericRightPaneProps = {
|
||||
container: explorer,
|
||||
formError: formError,
|
||||
formErrorDetail: formErrorsDetails,
|
||||
id: "executesprocparamspane",
|
||||
isExecuting: isLoading,
|
||||
title: "Input parameters",
|
||||
submitButtonText: "Execute",
|
||||
onClose: () => closePanel(),
|
||||
onSubmit: () => submit(),
|
||||
};
|
||||
|
||||
const validateUnwrappedParams = (): boolean => {
|
||||
const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
|
||||
for (let i = 0; i < unwrappedParams.length; i++) {
|
||||
const { key: paramType, text: paramValue } = unwrappedParams[i];
|
||||
if (paramType === "custom" && (paramValue === "" || paramValue === undefined)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const setInvalidParamError = (invalidParam: string): void => {
|
||||
setFormError(`Invalid param specified: ${invalidParam}`);
|
||||
setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
const wrappedSprocParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
|
||||
const { key: partitionKey } = selectedKey;
|
||||
if (partitionKey === "custom" && (partitionValue === "" || partitionValue === undefined)) {
|
||||
setInvalidParamError(partitionValue);
|
||||
return;
|
||||
}
|
||||
if (!validateUnwrappedParams()) {
|
||||
setInvalidParamError("");
|
||||
return;
|
||||
}
|
||||
setLoadingTrue();
|
||||
const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
|
||||
const currentSelectedSproc = explorer.findSelectedStoredProcedure();
|
||||
currentSelectedSproc.execute(sprocParams, partitionValue);
|
||||
setLoadingFalse();
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const deleteParamAtIndex = (indexToRemove: number): void => {
|
||||
const cloneParamKeyValue = [...paramKeyValues];
|
||||
cloneParamKeyValue.splice(indexToRemove, 1);
|
||||
setParamKeyValues(cloneParamKeyValue);
|
||||
};
|
||||
|
||||
const addNewParamAtIndex = (indexToAdd: number): void => {
|
||||
const cloneParamKeyValue = [...paramKeyValues];
|
||||
cloneParamKeyValue.splice(indexToAdd, 0, { key: "string", text: "" });
|
||||
setParamKeyValues(cloneParamKeyValue);
|
||||
};
|
||||
|
||||
const paramValueChange = (value: string, indexOfInput: number): void => {
|
||||
const cloneParamKeyValue = [...paramKeyValues];
|
||||
cloneParamKeyValue[indexOfInput].text = value;
|
||||
setParamKeyValues(cloneParamKeyValue);
|
||||
};
|
||||
|
||||
const paramKeyChange = (
|
||||
_event: React.FormEvent<HTMLDivElement>,
|
||||
selectedParam: IDropdownOption,
|
||||
indexOfParam: number
|
||||
): void => {
|
||||
const cloneParamKeyValue = [...paramKeyValues];
|
||||
cloneParamKeyValue[indexOfParam].key = selectedParam.key.toString();
|
||||
setParamKeyValues(cloneParamKeyValue);
|
||||
};
|
||||
|
||||
const addNewParamAtLastIndex = (): void => {
|
||||
const cloneParamKeyValue = [...paramKeyValues];
|
||||
cloneParamKeyValue.splice(cloneParamKeyValue.length, 0, { key: "string", text: "" });
|
||||
setParamKeyValues(cloneParamKeyValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<GenericRightPaneComponent {...genericPaneProps}>
|
||||
<div className="panelFormWrapper">
|
||||
<div className="panelMainContent">
|
||||
<InputParameter
|
||||
dropdownLabel="Key"
|
||||
inputParameterTitle="Partition key value"
|
||||
inputLabel="Value"
|
||||
isAddRemoveVisible={false}
|
||||
onParamValueChange={(_event, newInput?: string) => {
|
||||
setPartitionValue(newInput);
|
||||
}}
|
||||
onParamKeyChange={onPartitionKeyChange}
|
||||
paramValue={partitionValue}
|
||||
selectedKey={selectedKey.key}
|
||||
/>
|
||||
{paramKeyValues.map((paramKeyValue, index) => (
|
||||
<InputParameter
|
||||
key={paramKeyValue && paramKeyValue.text + index}
|
||||
dropdownLabel={!index && "Key"}
|
||||
inputParameterTitle={!index && "Enter input parameters (if any)"}
|
||||
inputLabel={!index && "Param"}
|
||||
isAddRemoveVisible={true}
|
||||
onDeleteParamKeyPress={() => deleteParamAtIndex(index)}
|
||||
onAddNewParamKeyPress={() => addNewParamAtIndex(index + 1)}
|
||||
onParamValueChange={(event, newInput?: string) => {
|
||||
paramValueChange(newInput, index);
|
||||
}}
|
||||
onParamKeyChange={(event: React.FormEvent<HTMLDivElement>, selectedParam: IDropdownOption) => {
|
||||
paramKeyChange(event, selectedParam, index);
|
||||
}}
|
||||
paramValue={paramKeyValue && paramKeyValue.text}
|
||||
selectedKey={paramKeyValue && paramKeyValue.key}
|
||||
/>
|
||||
))}
|
||||
<Stack horizontal onClick={addNewParamAtLastIndex}>
|
||||
<Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
|
||||
<Text className="addNewParamStyle">Add New Param</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
);
|
||||
};
|
||||
@ -1,24 +1,23 @@
|
||||
import AddDatabasePaneTemplate from "./AddDatabasePane.html";
|
||||
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 DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
|
||||
import GitHubReposPaneTemplate from "./GitHubReposPane.html";
|
||||
import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
|
||||
import GraphStylingPaneTemplate from "./GraphStylingPane.html";
|
||||
import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
|
||||
import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
|
||||
import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
|
||||
import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
|
||||
import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
|
||||
import SettingsPaneTemplate from "./SettingsPane.html";
|
||||
import ExecuteSprocParamsPaneTemplate from "./ExecuteSprocParamsPane.html";
|
||||
import UploadItemsPaneTemplate from "./UploadItemsPane.html";
|
||||
import LoadQueryPaneTemplate from "./LoadQueryPane.html";
|
||||
import SaveQueryPaneTemplate from "./SaveQueryPane.html";
|
||||
import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
|
||||
import UploadFilePaneTemplate from "./UploadFilePane.html";
|
||||
import StringInputPaneTemplate from "./StringInputPane.html";
|
||||
import SettingsPaneTemplate from "./SettingsPane.html";
|
||||
import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
|
||||
import GitHubReposPaneTemplate from "./GitHubReposPane.html";
|
||||
import StringInputPaneTemplate from "./StringInputPane.html";
|
||||
import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
|
||||
import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
|
||||
import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
|
||||
import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
|
||||
import UploadFilePaneTemplate from "./UploadFilePane.html";
|
||||
import UploadItemsPaneTemplate from "./UploadItemsPane.html";
|
||||
|
||||
export class PaneComponent {
|
||||
constructor(data: any) {
|
||||
@ -134,15 +133,6 @@ export class SettingsPaneComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export class ExecuteSprocParamsComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: PaneComponent,
|
||||
template: ExecuteSprocParamsPaneTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class UploadItemsPaneComponent {
|
||||
constructor() {
|
||||
return {
|
||||
|
||||
@ -110,7 +110,34 @@
|
||||
.deleteCollectionFeedback {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.addRemoveIcon {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
.addRemoveIconLabel {
|
||||
margin-top: 28px;
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
.addNewParamStyle {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panelGroupSpacing > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
.panelAddIconLabel {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
margin: 30px 0 0 10px;
|
||||
cursor: default;
|
||||
}
|
||||
.panelAddIcon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
margin: 30px 0 0 10px;
|
||||
cursor: default;
|
||||
}
|
||||
.removeIcon {
|
||||
color: @InfoIconColor;
|
||||
}
|
||||
@ -7,13 +7,13 @@ import * as Constants from "../../Common/Constants";
|
||||
import { createStoredProcedure } from "../../Common/dataAccess/createStoredProcedure";
|
||||
import { updateStoredProcedure } from "../../Common/dataAccess/updateStoredProcedure";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import StoredProcedure from "../Tree/StoredProcedure";
|
||||
import ScriptTabBase from "./ScriptTabBase";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./StoredProcedureTab.html";
|
||||
|
||||
enum ToggleState {
|
||||
@ -208,7 +208,7 @@ export default class StoredProcedureTab extends ScriptTabBase {
|
||||
iconSrc: ExecuteQueryIcon,
|
||||
iconAlt: label,
|
||||
onCommandClick: () => {
|
||||
this.collection && this.collection.container.executeSprocParamsPane.open();
|
||||
this.collection && this.collection.container.openExecuteSprocParamsPanel();
|
||||
},
|
||||
commandButtonLabel: label,
|
||||
ariaLabel: label,
|
||||
|
||||
@ -244,7 +244,6 @@ const App: React.FunctionComponent = () => {
|
||||
<div data-bind='component: { name: "settings-pane", params: { data: settingsPane} }' />
|
||||
<div data-bind='component: { name: "upload-items-pane", params: { data: uploadItemsPane} }' />
|
||||
<div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
|
||||
<div data-bind='component: { name: "execute-sproc-params-pane", params: { data: executeSprocParamsPane} }' />
|
||||
<div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
|
||||
<div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
|
||||
<div data-bind='component: { name: "upload-file-pane", params: { data: uploadFilePane} }' />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user