Migration/table query select pane to react (#615)

.eslintignore

@@ -135,7 +135,6 @@ src/Explorer/Panes/SwitchDirectoryPane.ts
 src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts

src/Explorer/ComponentRegisterer.ts

@@ -67,7 +67,6 @@ ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVerte
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
 ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
-ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());

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

@@ -262,27 +262,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  QuerySelectPane {
-                    "allSelected": [Function],
-                    "anyColumnSelected": [Function],
-                    "availableColumnsTableQueryLabel": "Available Columns",
-                    "canSelectAll": [Function],
-                    "columnOptions": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "handleClick": [Function],
-                    "id": "queryselectpane",
-                    "instructionLabel": "Select the columns that you want to query.",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "noColumnSelectedWarning": "At least one column should be selected.",
-                    "selectedColumnOption": null,
-                    "title": [Function],
-                    "titleLabel": "Select Columns",
-                    "visible": [Function],
-                  },
                   NewVertexPane {
                     "buildString": [Function],
                     "container": [Circular],
@@ -740,27 +719,6 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
-                "querySelectPane": QuerySelectPane {
-                  "allSelected": [Function],
-                  "anyColumnSelected": [Function],
-                  "availableColumnsTableQueryLabel": "Available Columns",
-                  "canSelectAll": [Function],
-                  "columnOptions": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "handleClick": [Function],
-                  "id": "queryselectpane",
-                  "instructionLabel": "Select the columns that you want to query.",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "noColumnSelectedWarning": "At least one column should be selected.",
-                  "selectedColumnOption": null,
-                  "title": [Function],
-                  "titleLabel": "Select Columns",
-                  "visible": [Function],
-                },
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -1099,27 +1057,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                QuerySelectPane {
-                  "allSelected": [Function],
-                  "anyColumnSelected": [Function],
-                  "availableColumnsTableQueryLabel": "Available Columns",
-                  "canSelectAll": [Function],
-                  "columnOptions": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "handleClick": [Function],
-                  "id": "queryselectpane",
-                  "instructionLabel": "Select the columns that you want to query.",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "noColumnSelectedWarning": "At least one column should be selected.",
-                  "selectedColumnOption": null,
-                  "title": [Function],
-                  "titleLabel": "Select Columns",
-                  "visible": [Function],
-                },
                 NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -1577,27 +1514,6 @@ exports[`SettingsComponent renders 1`] = `
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
-              "querySelectPane": QuerySelectPane {
-                "allSelected": [Function],
-                "anyColumnSelected": [Function],
-                "availableColumnsTableQueryLabel": "Available Columns",
-                "canSelectAll": [Function],
-                "columnOptions": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "handleClick": [Function],
-                "id": "queryselectpane",
-                "instructionLabel": "Select the columns that you want to query.",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "noColumnSelectedWarning": "At least one column should be selected.",
-                "selectedColumnOption": null,
-                "title": [Function],
-                "titleLabel": "Select Columns",
-                "visible": [Function],
-              },
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -1949,27 +1865,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  QuerySelectPane {
-                    "allSelected": [Function],
-                    "anyColumnSelected": [Function],
-                    "availableColumnsTableQueryLabel": "Available Columns",
-                    "canSelectAll": [Function],
-                    "columnOptions": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "handleClick": [Function],
-                    "id": "queryselectpane",
-                    "instructionLabel": "Select the columns that you want to query.",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "noColumnSelectedWarning": "At least one column should be selected.",
-                    "selectedColumnOption": null,
-                    "title": [Function],
-                    "titleLabel": "Select Columns",
-                    "visible": [Function],
-                  },
                   NewVertexPane {
                     "buildString": [Function],
                     "container": [Circular],
@@ -2427,27 +2322,6 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
-                "querySelectPane": QuerySelectPane {
-                  "allSelected": [Function],
-                  "anyColumnSelected": [Function],
-                  "availableColumnsTableQueryLabel": "Available Columns",
-                  "canSelectAll": [Function],
-                  "columnOptions": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "handleClick": [Function],
-                  "id": "queryselectpane",
-                  "instructionLabel": "Select the columns that you want to query.",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "noColumnSelectedWarning": "At least one column should be selected.",
-                  "selectedColumnOption": null,
-                  "title": [Function],
-                  "titleLabel": "Select Columns",
-                  "visible": [Function],
-                },
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -2786,27 +2660,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                QuerySelectPane {
-                  "allSelected": [Function],
-                  "anyColumnSelected": [Function],
-                  "availableColumnsTableQueryLabel": "Available Columns",
-                  "canSelectAll": [Function],
-                  "columnOptions": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "handleClick": [Function],
-                  "id": "queryselectpane",
-                  "instructionLabel": "Select the columns that you want to query.",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "noColumnSelectedWarning": "At least one column should be selected.",
-                  "selectedColumnOption": null,
-                  "title": [Function],
-                  "titleLabel": "Select Columns",
-                  "visible": [Function],
-                },
                 NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -3264,27 +3117,6 @@ exports[`SettingsComponent renders 1`] = `
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
-              "querySelectPane": QuerySelectPane {
-                "allSelected": [Function],
-                "anyColumnSelected": [Function],
-                "availableColumnsTableQueryLabel": "Available Columns",
-                "canSelectAll": [Function],
-                "columnOptions": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "handleClick": [Function],
-                "id": "queryselectpane",
-                "instructionLabel": "Select the columns that you want to query.",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "noColumnSelectedWarning": "At least one column should be selected.",
-                "selectedColumnOption": null,
-                "title": [Function],
-                "titleLabel": "Select Columns",
-                "visible": [Function],
-              },
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],

src/Explorer/Explorer.tsx

@@ -65,9 +65,10 @@ import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
 import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
+import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
+import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -195,7 +196,6 @@ export default class Explorer {
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
-  public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   public stringInputPane: StringInputPane;
@@ -566,13 +566,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.querySelectPane = new QuerySelectPane({
-      id: "queryselectpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.newVertexPane = new NewVertexPane({
       id: "newvertexpane",
       visible: ko.observable<boolean>(false),
@@ -610,7 +603,6 @@ export default class Explorer {
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
-      this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
       this.stringInputPane,
@@ -2361,4 +2353,11 @@ export default class Explorer {
       />
     );
   }
+
+  public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void {
+    this.openSidePanel(
+      "Select Column",
+      <TableQuerySelectPanel explorer={this} closePanel={this.closeSidePanel} queryViewModel={queryViewModal} />
+    );
+  }
 }

src/Explorer/Panes/PaneComponents.ts

@@ -9,7 +9,6 @@ import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
 import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
 import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
-import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
 
 export class PaneComponent {
   constructor(data: any) {
@@ -79,16 +78,6 @@ export class TableEditEntityPaneComponent {
     };
   }
 }
-
-export class TableQuerySelectPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: TableQuerySelectPaneTemplate,
-    };
-  }
-}
-
 export class CassandraAddCollectionPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/PanelComponent.less

@@ -152,3 +152,6 @@
 .removeIcon {
   color: @InfoIconColor;
 }
+.column-select-view {
+  margin: 20px 0px 0px 0px;
+}

src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap

@@ -238,27 +238,6 @@ exports[`Settings Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
         NewVertexPane {
           "buildString": [Function],
           "container": [Circular],
@@ -716,27 +695,6 @@ exports[`Settings Pane should render Default properly 1`] = `
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
       "refreshDatabaseAccount": [Function],
       "refreshNotebookList": [Function],
       "refreshTreeTitle": [Function],
@@ -1163,27 +1121,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
         NewVertexPane {
           "buildString": [Function],
           "container": [Circular],
@@ -1641,27 +1578,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
       "refreshDatabaseAccount": [Function],
       "refreshNotebookList": [Function],
       "refreshTreeTitle": [Function],

src/Explorer/Panes/Tables/QuerySelectPane.ts

@@ -1,174 +0,0 @@
-import * as ko from "knockout";
-import _ from "underscore";
-import * as Constants from "../../Tables/Constants";
-import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { ContextualPaneBase } from "../ContextualPaneBase";
-
-export interface ISelectColumn {
-  columnName: ko.Observable<string>;
-  selected: ko.Observable<boolean>;
-  editable: ko.Observable<boolean>;
-}
-
-export class QuerySelectPane extends ContextualPaneBase {
-  public titleLabel: string = "Select Columns";
-  public instructionLabel: string = "Select the columns that you want to query.";
-  public availableColumnsTableQueryLabel: string = "Available Columns";
-  public noColumnSelectedWarning: string = "At least one column should be selected.";
-
-  public columnOptions: ko.ObservableArray<ISelectColumn>;
-  public anyColumnSelected: ko.Computed<boolean>;
-  public canSelectAll: ko.Computed<boolean>;
-  public allSelected: ko.Computed<boolean>;
-
-  private selectedColumnOption: ISelectColumn = null;
-
-  public queryViewModel: QueryViewModel;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-
-    this.columnOptions = ko.observableArray<ISelectColumn>();
-    this.anyColumnSelected = ko.computed<boolean>(() => {
-      return _.some(this.columnOptions(), (value: ISelectColumn) => {
-        return value.selected();
-      });
-    });
-
-    this.canSelectAll = ko.computed<boolean>(() => {
-      return _.some(this.columnOptions(), (value: ISelectColumn) => {
-        return !value.selected();
-      });
-    });
-
-    this.allSelected = ko.pureComputed<boolean>({
-      read: () => {
-        return !this.canSelectAll();
-      },
-      write: (value) => {
-        if (value) {
-          this.selectAll();
-        } else {
-          this.clearAll();
-        }
-      },
-      owner: this,
-    });
-  }
-
-  public submit() {
-    this.queryViewModel.selectText(this.getParameters());
-    this.queryViewModel.getSelectMessage();
-    this.close();
-  }
-
-  public open() {
-    this.setTableColumns(this.queryViewModel.columnOptions());
-    this.setDisplayedColumns(this.queryViewModel.selectText(), this.columnOptions());
-    super.open();
-  }
-
-  private getParameters(): string[] {
-    if (this.canSelectAll() === false) {
-      return [];
-    }
-
-    var selectedColumns = this.columnOptions().filter((value: ISelectColumn) => value.selected() === true);
-
-    var columns: string[] = selectedColumns.map((value: ISelectColumn) => {
-      var name: string = value.columnName();
-      return name;
-    });
-
-    return columns;
-  }
-
-  public setTableColumns(columnNames: string[]): void {
-    var columns: ISelectColumn[] = columnNames.map((value: string) => {
-      var columnOption: ISelectColumn = {
-        columnName: ko.observable<string>(value),
-        selected: ko.observable<boolean>(true),
-        editable: ko.observable<boolean>(this.isEntityEditable(value)),
-      };
-      return columnOption;
-    });
-
-    this.columnOptions(columns);
-  }
-
-  public setDisplayedColumns(querySelect: string[], columns: ISelectColumn[]): void {
-    if (querySelect == null || _.isEmpty(querySelect)) {
-      return;
-    }
-    this.setSelected(querySelect, columns);
-  }
-
-  private setSelected(querySelect: string[], columns: ISelectColumn[]): void {
-    this.clearAll();
-    querySelect &&
-      querySelect.forEach((value: string) => {
-        for (var i = 0; i < columns.length; i++) {
-          if (value === columns[i].columnName()) {
-            columns[i].selected(true);
-          }
-        }
-      });
-  }
-
-  public availableColumnsCheckboxClick(): boolean {
-    if (this.canSelectAll()) {
-      return this.selectAll();
-    } else {
-      return this.clearAll();
-    }
-  }
-
-  public selectAll(): boolean {
-    const columnOptions = this.columnOptions && this.columnOptions();
-    columnOptions &&
-      columnOptions.forEach((value: ISelectColumn) => {
-        value.selected(true);
-      });
-    return true;
-  }
-
-  public clearAll(): boolean {
-    const columnOptions = this.columnOptions && this.columnOptions();
-    columnOptions &&
-      columnOptions.forEach((column: ISelectColumn) => {
-        if (this.isEntityEditable(column.columnName())) {
-          column.selected(false);
-        } else {
-          column.selected(true);
-        }
-      });
-    return true;
-  }
-
-  public handleClick = (data: ISelectColumn, event: KeyboardEvent): boolean => {
-    this.selectTargetItem($(event.currentTarget), data);
-    return true;
-  };
-
-  private selectTargetItem($target: JQuery, targetColumn: ISelectColumn): void {
-    this.selectedColumnOption = targetColumn;
-
-    $(".list-item.selected").removeClass("selected");
-    $target.addClass("selected");
-  }
-
-  private isEntityEditable(name: string) {
-    if (this.queryViewModel.queryTablesTab.container.isPreferredApiCassandra()) {
-      const cassandraKeys = this.queryViewModel.queryTablesTab.collection.cassandraKeys.partitionKeys
-        .concat(this.queryViewModel.queryTablesTab.collection.cassandraKeys.clusteringKeys)
-        .map((key) => key.property);
-      return !_.contains<string>(cassandraKeys, name);
-    }
-    return !(
-      name === Constants.EntityKeyNames.PartitionKey ||
-      name === Constants.EntityKeyNames.RowKey ||
-      name === Constants.EntityKeyNames.Timestamp
-    );
-  }
-}

src/Explorer/Panes/Tables/TableQuerySelectPane.html

@@ -1,79 +0,0 @@
-<div data-bind="visible: visible">
-  <div
-    class="contextual-pane-out"
-    data-bind="
-        click: cancel,
-        clickBubble: false"
-  ></div>
-  <div class="contextual-pane" id="queryselectpane">
-    <!-- Query Select form - Start -->
-    <div class="contextual-pane-in">
-      <form
-        class="paneContentContainer"
-        data-bind="
-                submit: submit"
-      >
-        <!-- Query Select header - Start -->
-        <div class="firstdivbg headerline">
-          Select Column
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                        click: cancel, event: { keydown: onCloseKeyPress }"
-          >
-            <img src="../../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Query Select header - End -->
-        <div class="paneMainContent paneContentContainer">
-          <!--<div class="row">
-                        <label id="instructionLabel" data-bind="text: instructionLabel"></label>
-                    </div>-->
-          <div><span>Select the columns that you want to query.</span></div>
-          <div class="column-options">
-            <div class="columns-border">
-              <input class="all-select-check" type="checkbox" data-bind="checked: allSelected" />
-              <label
-                style="font-weight: 700"
-                id="availableColumnsTableQueryLabel"
-                data-bind="text: availableColumnsTableQueryLabel"
-              ></label>
-            </div>
-            <div class="content">
-              <section>
-                <ul data-bind="foreach: columnOptions" aria-labelledby="availableColumnsTableQueryLabel" tabindex="0">
-                  <!-- ko template: {if: editable} -->
-                  <li
-                    class="list-item columns-border"
-                    data-bind="attr: { title: columnName }, click: $parent.handleClick "
-                  >
-                    <input type="checkbox" data-bind="attr: { title: columnName }, checked: selected" />
-                    <span data-bind="text: columnName"></span>
-                  </li>
-                  <!--/ko-->
-                  <!-- ko template: {ifnot: editable} -->
-                  <li class="list-item columns-border" data-bind="attr: { title: columnName } ">
-                    <input type="checkbox" disabled data-bind="checked: selected" />
-                    <span data-bind="text: columnName"></span>
-                  </li>
-                  <!--/ko-->
-                </ul>
-              </section>
-            </div>
-          </div>
-
-          <div class="row-label" data-bind="style: { visibility: anyColumnSelected() ? 'hidden': 'visible' }">
-            <label class="warning" role="alert" aria-atomic="true" data-bind="text: noColumnSelectedWarning"></label>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
-        </div>
-      </form>
-    </div>
-    <!-- Query Select form - End -->
-  </div>
-</div>

src/Explorer/Panes/Tables/TableQuerySelectPanel/index.test.tsx

@@ -0,0 +1,38 @@
+import { mount } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import Explorer from "../../../Explorer";
+import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
+import { TableQuerySelectPanel } from "./index";
+
+describe("Table query select Panel", () => {
+  const fakeExplorer = {} as Explorer;
+  const fakeQueryViewModal = {} as QueryViewModel;
+  fakeQueryViewModal.columnOptions = ko.observableArray<string>([""]);
+
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+    queryViewModel: fakeQueryViewModal,
+  };
+
+  it("should render Default properly", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should exist availableCheckbox by default", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper.exists("#availableCheckbox")).toBe(true);
+  });
+
+  it("Should checked availableCheckbox by default", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
+      id: "availableCheckbox",
+      label: "Available Columns",
+      checked: true,
+      onChange: expect.any(Function),
+    });
+  });
+});

src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx

@@ -0,0 +1,155 @@
+import { Checkbox, Text } from "office-ui-fabric-react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { userContext } from "../../../../UserContext";
+import Explorer from "../../../Explorer";
+import * as Constants from "../../../Tables/Constants";
+import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../../GenericRightPaneComponent";
+
+interface TableQuerySelectPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  queryViewModel: QueryViewModel;
+}
+
+interface ISelectColumn {
+  columnName: string;
+  selected: boolean;
+  editable: boolean;
+}
+
+export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps> = ({
+  explorer,
+  closePanel,
+  queryViewModel,
+}: TableQuerySelectPanelProps): JSX.Element => {
+  const [columnOptions, setColumnOptions] = useState<ISelectColumn[]>([
+    { columnName: "", selected: true, editable: false },
+  ]);
+  const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
+
+  const genericPaneProps: GenericRightPaneProps = {
+    container: explorer,
+    formError: "",
+    formErrorDetail: "",
+    id: "querySelectPane",
+    isExecuting: false,
+    title: "Select Column",
+    submitButtonText: "OK",
+    onClose: () => closePanel(),
+    onSubmit: () => submit(),
+  };
+
+  const submit = (): void => {
+    queryViewModel.selectText(getParameters());
+    queryViewModel.getSelectMessage();
+    closePanel();
+  };
+
+  const handleClick = (isChecked: boolean, selectedColumn: string): void => {
+    const columns = columnOptions.map((column) => {
+      if (column.columnName === selectedColumn) {
+        column.selected = isChecked;
+        return { ...column };
+      }
+      return { ...column };
+    });
+    canSelectAll();
+    setColumnOptions(columns);
+  };
+
+  useEffect(() => {
+    queryViewModel && setTableColumns(queryViewModel.columnOptions());
+  }, []);
+
+  const setTableColumns = (columnNames: string[]): void => {
+    const columns: ISelectColumn[] =
+      columnNames &&
+      columnNames.length &&
+      columnNames.map((value: string) => {
+        const columnOption: ISelectColumn = {
+          columnName: value,
+          selected: true,
+          editable: isEntityEditable(value),
+        };
+        return columnOption;
+      });
+    setColumnOptions(columns);
+  };
+
+  const isEntityEditable = (name: string): boolean => {
+    if (userContext.apiType === "Cassandra") {
+      const cassandraKeys = queryViewModel.queryTablesTab.collection.cassandraKeys.partitionKeys
+        .concat(queryViewModel.queryTablesTab.collection.cassandraKeys.clusteringKeys)
+        .map((key) => key.property);
+      return !cassandraKeys.includes(name);
+    }
+    return !(
+      name === Constants.EntityKeyNames.PartitionKey ||
+      name === Constants.EntityKeyNames.RowKey ||
+      name === Constants.EntityKeyNames.Timestamp
+    );
+  };
+
+  const availableColumnsCheckboxClick = (event: React.FormEvent<HTMLElement>, isChecked: boolean): void => {
+    setIsAvailableColumnChecked(isChecked);
+    selectClearAll(isChecked);
+  };
+
+  const selectClearAll = (isChecked: boolean): void => {
+    const columns: ISelectColumn[] = columnOptions.map((column: ISelectColumn) => {
+      if (isEntityEditable(column.columnName)) {
+        column.selected = isChecked;
+        return { ...column };
+      }
+      return { ...column };
+    });
+    setColumnOptions(columns);
+  };
+
+  const getParameters = (): string[] => {
+    const selectedColumns = columnOptions.filter((value: ISelectColumn) => value.selected === true);
+    const columns: string[] = selectedColumns.map((value: ISelectColumn) => {
+      const name: string = value.columnName;
+      return name;
+    });
+
+    return columns;
+  };
+
+  const canSelectAll = (): void => {
+    const canSelectAllColumn: boolean = columnOptions.some((value: ISelectColumn) => {
+      return !value.selected;
+    });
+    setIsAvailableColumnChecked(!canSelectAllColumn);
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          <Text>Select the columns that you want to query.</Text>
+          <div className="column-select-view">
+            <Checkbox
+              id="availableCheckbox"
+              label="Available Columns"
+              checked={isAvailableColumnChecked}
+              onChange={availableColumnsCheckboxClick}
+            />
+            {columnOptions.map((column) => {
+              return (
+                <Checkbox
+                  label={column.columnName}
+                  onChange={(_event, isChecked: boolean) => handleClick(isChecked, column.columnName)}
+                  key={column.columnName}
+                  checked={column.selected}
+                  disabled={!column.editable}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap

@@ -238,27 +238,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
         NewVertexPane {
           "buildString": [Function],
           "container": [Circular],
@@ -716,27 +695,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
       "refreshDatabaseAccount": [Function],
       "refreshNotebookList": [Function],
       "refreshTreeTitle": [Function],

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -239,27 +239,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           "title": [Function],
           "visible": [Function],
         },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
         NewVertexPane {
           "buildString": [Function],
           "container": [Circular],
@@ -720,27 +699,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
       "refreshAllDatabases": [Function],
       "refreshDatabaseAccount": [Function],
       "refreshNotebookList": [Function],

src/Explorer/Tables/QueryBuilder/QueryViewModel.ts

@@ -1,13 +1,12 @@
 import * as ko from "knockout";
 import * as _ from "underscore";
-
+import { KeyCodes } from "../../../Common/Constants";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import { getQuotedCqlIdentifier } from "../CqlUtilities";
+import * as DataTableUtilities from "../DataTable/DataTableUtilities";
+import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
 import QueryBuilderViewModel from "./QueryBuilderViewModel";
 import QueryClauseViewModel from "./QueryClauseViewModel";
-import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import * as DataTableUtilities from "../DataTable/DataTableUtilities";
-import { KeyCodes } from "../../../Common/Constants";
-import { getQuotedCqlIdentifier } from "../CqlUtilities";
 
 export default class QueryViewModel {
   public topValueLimitMessage: string = "Please input a number between 0 and 1000.";
@@ -198,8 +197,7 @@ export default class QueryViewModel {
   };
 
   public selectQueryOptions(): Promise<any> {
-    this.queryTablesTab.container.querySelectPane.queryViewModel = this;
+    this.queryTablesTab.container.openTableSelectQueryPanel(this);
-    this.queryTablesTab.container.querySelectPane.open();
     return null;
   }
 

src/Main.tsx

@@ -236,7 +236,6 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "graph-styling-pane", params: { data: graphStylingPane} }' />
       <div data-bind='component: { name: "table-add-entity-pane", params: { data: addTableEntityPane} }' />
       <div data-bind='component: { name: "table-edit-entity-pane", params: { data: editTableEntityPane} }' />
-      <div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' />
       <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
       <div data-bind='component: { name: "string-input-pane", params: { data: stringInputPane} }' />
       <div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />