Migration/execute sproc params pane in react (#576)

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>

.eslintignore

@@ -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

src/Explorer/ComponentRegisterer.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());

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -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],

src/Explorer/Explorer.tsx

@@ -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(

src/Explorer/Panes/ExecuteSprocParamsPane.html

@@ -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>

src/Explorer/Panes/ExecuteSprocParamsPane.ts

@@ -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();
-  }
-}

src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx

@@ -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>
+    </>
+  );
+};

src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx

@@ -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);
+  });
+});

src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

@@ -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>
+  );
+};

src/Explorer/Panes/PaneComponents.ts

@@ -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 SettingsPaneTemplate from "./SettingsPane.html";
-import UploadFilePaneTemplate from "./UploadFilePane.html";
-import StringInputPaneTemplate from "./StringInputPane.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 {

src/Explorer/Panes/PanelComponent.less

@@ -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;
+}

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -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,

src/Main.tsx

@@ -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} }' />