From 0c6324a4c1823a10d6f3a7ee29baf78a6c3ec7b9 Mon Sep 17 00:00:00 2001 From: Hardikkumar Nai <80053762+hardiknai-techm@users.noreply.github.com> Date: Tue, 15 Jun 2021 03:27:47 +0530 Subject: [PATCH] Remove Explorer.openTableSelectQueryPanel (#881) Co-authored-by: Steve Faulkner --- .eslintignore | 1 - src/Explorer/Explorer.tsx | 6 -- .../QueryBuilder/QueryBuilderViewModel.ts | 4 +- .../QueryBuilder/QueryClauseViewModel.ts | 12 ++-- .../{QueryViewModel.ts => QueryViewModel.tsx} | 59 +++++++++---------- 5 files changed, 37 insertions(+), 45 deletions(-) rename src/Explorer/Tables/QueryBuilder/{QueryViewModel.ts => QueryViewModel.tsx} (81%) diff --git a/.eslintignore b/.eslintignore index 7db848c1e..6ba78c7f9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -133,7 +133,6 @@ src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts -src/Explorer/Tables/QueryBuilder/QueryViewModel.ts src/Explorer/Tables/TableDataClient.ts src/Explorer/Tables/TableEntityProcessor.ts src/Explorer/Tables/Utilities.ts diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index 4231371b5..108f5df35 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -58,10 +58,8 @@ import { GitHubReposPanel } from "./Panes/GitHubReposPanel/GitHubReposPanel"; import { SaveQueryPane } from "./Panes/SaveQueryPane/SaveQueryPane"; import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksPanel"; import { StringInputPane } from "./Panes/StringInputPane/StringInputPane"; -import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel"; import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane"; import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane"; -import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel"; import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient"; import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab"; import { TabsManager } from "./Tabs/TabsManager"; @@ -1513,8 +1511,4 @@ export default class Explorer { .getState() .openSidePanel(title, ); } - - public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void { - useSidePanel.getState().openSidePanel("Select Column", ); - } } diff --git a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts index 59988c26e..58fdc654a 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts +++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts @@ -792,7 +792,7 @@ export default class QueryBuilderViewModel { return null; } - public checkIfClauseChanged(clause: QueryClauseViewModel): void { - this._queryViewModel.checkIfBuilderChanged(clause); + public checkIfClauseChanged(): void { + this._queryViewModel.checkIfBuilderChanged(); } } diff --git a/src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts index 2137f8405..8acd74518 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts +++ b/src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts @@ -89,7 +89,7 @@ export default class QueryClauseViewModel { ); this.and_or.subscribe((value) => { - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); }); this.field.subscribe((value) => { this.changeField(); @@ -103,13 +103,13 @@ export default class QueryClauseViewModel { // } }); this.customTimeValue.subscribe((value) => { - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); }); this.value.subscribe((value) => { - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); }); this.operator.subscribe((value) => { - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); }); this._groupCheckSubscription = this.checkedForGrouping.subscribe((value) => { this._queryBuilderViewModel.updateCanGroupClauses(); @@ -184,7 +184,7 @@ export default class QueryClauseViewModel { this.type(QueryBuilderConstants.TableType.String); } } - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); } private resetFromTimestamp(): void { @@ -216,7 +216,7 @@ export default class QueryClauseViewModel { this.timeValue(""); this.customTimeValue(""); } - this._queryBuilderViewModel.checkIfClauseChanged(this); + this._queryBuilderViewModel.checkIfClauseChanged(); } // private customTimestampDialog(): Promise { diff --git a/src/Explorer/Tables/QueryBuilder/QueryViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx similarity index 81% rename from src/Explorer/Tables/QueryBuilder/QueryViewModel.ts rename to src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx index 69ba3ae47..f816cad60 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.ts +++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx @@ -1,16 +1,18 @@ import * as ko from "knockout"; +import React from "react"; import * as _ from "underscore"; import { KeyCodes } from "../../../Common/Constants"; +import { useSidePanel } from "../../../hooks/useSidePanel"; import { userContext } from "../../../UserContext"; +import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel"; 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"; export default class QueryViewModel { - public topValueLimitMessage: string = "Please input a number between 0 and 1000."; + public readonly topValueLimitMessage: string = "Please input a number between 0 and 1000."; public queryBuilderViewModel = ko.observable(); public isHelperActive = ko.observable(true); public isEditorActive = ko.observable(false); @@ -49,7 +51,7 @@ export default class QueryViewModel { this.queryTextIsReadOnly = ko.computed(() => { return userContext.apiType !== "Cassandra"; }); - let initialOptions = this._tableEntityListViewModel.headers; + const initialOptions = this._tableEntityListViewModel.headers; this.columnOptions = ko.observableArray(initialOptions); this.focusTopResult = ko.observable(false); this.focusExpandIcon = ko.observable(false); @@ -63,12 +65,12 @@ export default class QueryViewModel { this.topValue() !== this.unchangedSaveTop() ); - this.queryBuilderViewModel().clauseArray.subscribe((value) => { + this.queryBuilderViewModel().clauseArray.subscribe(() => { this.setFilter(); }); this.isExceedingLimit = ko.computed(() => { - var currentTopValue: number = this.topValue(); + const currentTopValue: number = this.topValue(); return currentTopValue < 0 || currentTopValue > 1000; }); @@ -111,7 +113,7 @@ export default class QueryViewModel { DataTableUtilities.forceRecalculateTableSize(); // Fix for 261924, forces the resize event so DataTableBindingManager will redo the calculation on table size. }; - public ontoggleAdvancedOptionsKeyDown = (source: any, event: KeyboardEvent): boolean => { + public ontoggleAdvancedOptionsKeyDown = (source: string, event: KeyboardEvent): boolean => { if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) { this.toggleAdvancedOptions(); event.stopPropagation(); @@ -125,31 +127,29 @@ export default class QueryViewModel { }; private setFilter = (): string => { - var queryString = this.isEditorActive() + const queryString = this.isEditorActive() ? this.queryText() : userContext.apiType === "Cassandra" ? this.queryBuilderViewModel().getCqlFilterFromClauses() : this.queryBuilderViewModel().getODataFilterFromClauses(); - var filter = queryString; + const filter = queryString; this.queryText(filter); return this.queryText(); }; private setSqlFilter = (): string => { - var filter = this.queryBuilderViewModel().getSqlFilterFromClauses(); - return filter; + return this.queryBuilderViewModel().getSqlFilterFromClauses(); }; private setCqlFilter = (): string => { - var filter = this.queryBuilderViewModel().getCqlFilterFromClauses(); - return filter; + return this.queryBuilderViewModel().getCqlFilterFromClauses(); }; public isHelperEnabled = ko .computed(() => { return ( this.queryText() === this.unchangedText() || - this.queryText() === null || + this.queryText() === undefined || this.queryText() === "" || this.isHelperActive() ); @@ -159,13 +159,13 @@ export default class QueryViewModel { }); public runQuery = (): DataTables.DataTable => { - var filter = this.setFilter(); + let filter = this.setFilter(); if (filter && userContext.apiType !== "Cassandra") { filter = filter.replace(/"/g, "'"); } - var top = this.topValue(); - var selectOptions = this._getSelectedResults(); - var select = selectOptions; + const top = this.topValue(); + const selectOptions = this._getSelectedResults(); + const select = selectOptions; this._tableEntityListViewModel.tableQuery.filter = filter; this._tableEntityListViewModel.tableQuery.top = top; this._tableEntityListViewModel.tableQuery.select = select; @@ -177,16 +177,16 @@ export default class QueryViewModel { }; public clearQuery = (): DataTables.DataTable => { - this.queryText(null); - this.topValue(null); - this.selectText(null); + this.queryText(); + this.topValue(); + this.selectText(); this.selectMessage(""); // clears the queryBuilder and adds a new blank clause this.queryBuilderViewModel().queryClauses.removeAll(); this.queryBuilderViewModel().addNewClause(); - this._tableEntityListViewModel.tableQuery.filter = null; - this._tableEntityListViewModel.tableQuery.top = null; - this._tableEntityListViewModel.tableQuery.select = null; + this._tableEntityListViewModel.tableQuery.filter = undefined; + this._tableEntityListViewModel.tableQuery.top = undefined; + this._tableEntityListViewModel.tableQuery.select = undefined; this._tableEntityListViewModel.oDataQuery(""); this._tableEntityListViewModel.sqlQuery("SELECT * FROM c"); this._tableEntityListViewModel.cqlQuery( @@ -197,12 +197,11 @@ export default class QueryViewModel { return this._tableEntityListViewModel.reloadTable(false); }; - public selectQueryOptions(): Promise { - this.queryTablesTab.container.openTableSelectQueryPanel(this); - return null; + public selectQueryOptions() { + useSidePanel.getState().openSidePanel("Select Column", ); } - public onselectQueryOptionsKeyDown = (source: any, event: KeyboardEvent): boolean => { + public onselectQueryOptionsKeyDown = (source: string, event: KeyboardEvent): boolean => { if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) { this.selectQueryOptions(); event.stopPropagation(); @@ -212,7 +211,7 @@ export default class QueryViewModel { }; public getSelectMessage(): void { - if (_.isEmpty(this.selectText()) || this.selectText() === null) { + if (_.isEmpty(this.selectText()) || this.selectText() === undefined) { this.selectMessage(""); } else { this.selectMessage(`${this.selectText().length} of ${this.columnOptions().length} columns selected.`); @@ -220,7 +219,7 @@ export default class QueryViewModel { } public isSelected = ko.computed(() => { - return !(_.isEmpty(this.selectText()) || this.selectText() === null); + return !(_.isEmpty(this.selectText()) || this.selectText() === undefined); }); private setCheckToSave(): void { @@ -230,7 +229,7 @@ export default class QueryViewModel { this.isSaveEnabled(false); } - public checkIfBuilderChanged(clause: QueryClauseViewModel): void { + public checkIfBuilderChanged(): void { this.setFilter(); } }