diff --git a/src/Common/TableEntity.tsx b/src/Common/TableEntity.tsx index 3a38f275e..095677cdb 100644 --- a/src/Common/TableEntity.tsx +++ b/src/Common/TableEntity.tsx @@ -95,7 +95,6 @@ export const TableEntity: FunctionComponent = ({ = ({ onChange={onEntityTypeChange} options={options} disabled={isPropertyTypeDisable} - id="entityTypeId" styles={dropdownStyles} /> = ({ /> {!isEntityValueDisable && ( - editEntity + editEntity )} {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && ( - delete entity + delete entity )} diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx index a2f3002c0..49d0424f4 100644 --- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx +++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx @@ -1,7 +1,6 @@ import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react"; import { useBoolean } from "@fluentui/react-hooks"; import React, { FunctionComponent, useEffect, useState } from "react"; -import * as _ from "underscore"; import AddPropertyIcon from "../../../../images/Add-property.svg"; import RevertBackIcon from "../../../../images/RevertBack.svg"; import { TableEntity } from "../../../Common/TableEntity"; @@ -12,7 +11,6 @@ import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities"; import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel"; import * as Entities from "../../Tables/Entities"; import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient"; -import * as TableEntityProcessor from "../../Tables/TableEntityProcessor"; import * as Utilities from "../../Tables/Utilities"; import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab"; // import QueryTablesTab from "../../Tabs/QueryTablesTab"; @@ -110,42 +108,11 @@ export const AddTableEntityPanel: FunctionComponent = const entity: Entities.ITableEntity = entityFromAttributes(entities); const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity); - await tableEntityListViewModel.addEntityToCache(newEntity); - if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) { - // tableEntityListViewModel.redrawTableThrottled(); - reloadEntities(); - } + // await tableEntityListViewModel.addEntityToCache(newEntity); + reloadEntities(); closeSidePanel(); }; - const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => { - let newHeaders: string[] = []; - const keys = Object.keys(newEntity); - keys && - keys.forEach((key: string) => { - if ( - !_.contains(viewModel.headers, key) && - key !== TableEntityProcessor.keyProperties.attachments && - key !== TableEntityProcessor.keyProperties.etag && - key !== TableEntityProcessor.keyProperties.resourceId && - key !== TableEntityProcessor.keyProperties.self && - (!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey) - ) { - newHeaders.push(key); - } - }); - - let newHeadersInserted = false; - if (newHeaders.length) { - if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) { - newHeaders = viewModel.headers.concat(newHeaders); - } - viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false); - newHeadersInserted = true; - } - return newHeadersInserted; - }; - /* Add new entity row */ const addNewEntity = (): void => { const cloneEntities: EntityRowType[] = [...entities]; diff --git a/src/Explorer/Tables/DataTable/DataTableViewModel.ts b/src/Explorer/Tables/DataTable/DataTableViewModel.ts index 7f38ea536..ec013650f 100644 --- a/src/Explorer/Tables/DataTable/DataTableViewModel.ts +++ b/src/Explorer/Tables/DataTable/DataTableViewModel.ts @@ -24,7 +24,6 @@ abstract class DataTableViewModel { /* Observables */ public items = ko.observableArray(); - public items1: Entities.ITableEntity[]; public selected = ko.observableArray(); public table: DataTables.DataTable; @@ -53,7 +52,6 @@ abstract class DataTableViewModel { constructor() { this.items([]); - this.items1 = []; this.selected([]); // Late bound this.dataTableOperationManager = null; @@ -176,7 +174,6 @@ abstract class DataTableViewModel { var renderData = this.cache.data.slice(startIndex, endIndex); this.items(renderData); - this.items1 = renderData; if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) { TelemetryProcessor.traceSuccess( diff --git a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts index ee0174168..422745b77 100644 --- a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts +++ b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts @@ -155,11 +155,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { * fnCallback - is the render callback with data to render. * oSetting: current settings used for table initialization. */ - public renderNextPageAndupdateCache(sSource?: any, aoData?: any, fnCallback?: any, oSettings?: any): Promise { - var tablePageSize: number; - var draw: number; + public renderNextPageAndupdateCache(sSource?: any, aoData?: any, fnCallback?: any): Promise { + var tablePageSize: number = 100; var prefetchNeeded = true; - var columnSortOrder: any; + // var columnSortOrder: any; // Threshold(pages) for triggering cache prefetch. // If number remaining pages in cache falls below prefetchThreshold prefetch will be triggered. var prefetchThreshold = 10; @@ -170,11 +169,12 @@ export default class TableEntityListViewModel extends DataTableViewModel { // Check if prefetch needed. if (this.tablePageStartIndex + tablePageSize <= this.cache.length || this.allDownloaded) { prefetchNeeded = false; - if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) { - this.sortColumns(columnSortOrder, oSettings); - } - // this.renderPage(this.tablePageStartIndex, tablePageSize); - this.renderPage(0, 100); + // if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) { + // this.sortColumns(columnSortOrder, oSettings); + // } + this.tablePageStartIndex = 0; + this.renderPage(this.tablePageStartIndex, tablePageSize); + // this.renderPage(0, 100); if ( !this.allDownloaded && this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column @@ -195,10 +195,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { tableQuery, this.tablePageStartIndex, tablePageSize, - downloadSize, - draw, - oSettings, - columnSortOrder + downloadSize + // draw, + // oSettings, + // columnSortOrder ); } return undefined; @@ -358,11 +358,12 @@ export default class TableEntityListViewModel extends DataTableViewModel { tableQuery: Entities.ITableQuery, tablePageStartIndex: number, tablePageSize: number, - downloadSize: number, - draw: number, - oSettings: any, - columnSortOrder: any + downloadSize: number + // draw: number,/ + // oSettings: any, + // columnSortOrder: any ): void { + console.log("🚀 ~ file: TableEntityListViewModel.ts ~ line 366 ~ TableEntityListViewModel ~ prefetchAndRender"); this.queryErrorMessage(null); if (this.cache.serverCallInProgress) { return; @@ -452,6 +453,7 @@ export default class TableEntityListViewModel extends DataTableViewModel { downloadSize: number, currentRetry: number = 0 ): Q.Promise { + console.log("🚀 ~ file: TableEntityListViewModel.ts ~ line 456 ~ TableEntityListViewModel ~ prefetchData"); if (!this.cache.serverCallInProgress) { this.cache.serverCallInProgress = true; this.allDownloaded = false; diff --git a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts index 2a244c0fa..9fb78fa0c 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts +++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts @@ -474,7 +474,7 @@ export default class QueryBuilderViewModel { return true; }; - public onAddNewClauseKeyDown = (source: any, event: KeyboardEvent): boolean => { + public onAddNewClauseKeyDown = (event: React.KeyboardEvent): boolean => { if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) { this.addClauseIndex(this.clauseArray().length - 1, null); event.stopPropagation(); diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx index d485d2abc..ab58057cb 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx @@ -38,6 +38,8 @@ export interface IQueryTableEntityClauseProps { onQueryTableEntityCheck: (ev?: React.FormEvent, checked?: boolean) => void; onDropdownChange: (selectedOption: IDropdownOption, selectedOptionType: string) => void; onEntityValueChange: (event: React.FormEvent, newInput?: string) => void; + onAddNewClauseKeyDown?: (ev: React.KeyboardEvent) => void; + onDeleteCaluseKeyDown?: (ev: React.KeyboardEvent) => void; } export const QueryTableEntityClause: FunctionComponent = ({ @@ -61,6 +63,8 @@ export const QueryTableEntityClause: FunctionComponent { const cancelImageProps: IImageProps = { width: 14, @@ -87,7 +91,15 @@ export const QueryTableEntityClause: FunctionComponent - Add new clause + Add new clause delete clause @@ -106,7 +120,7 @@ export const QueryTableEntityClause: FunctionComponent @@ -134,7 +148,7 @@ export const QueryTableEntityClause: FunctionComponent {isTimeStampSelected ? ( @@ -144,7 +158,7 @@ export const QueryTableEntityClause: FunctionComponent ) : ( diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx index 913100838..79c934789 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx @@ -28,6 +28,7 @@ import QueryTextIcon from "../../../../images/Query-Text.svg"; import StatusWraning from "../../../../images/QueryBuilder/StatusWarning_16x.png"; import TriangleDown from "../../../../images/Triangle-down.svg"; import TriangleRight from "../../../../images/Triangle-right.svg"; +import { NormalizedEventKey } from "../../../Common/Constants"; import { queryDocuments } from "../../../Common/dataAccess/queryDocuments"; import { handleError } from "../../../Common/ErrorHandlingUtils"; import * as HeadersUtility from "../../../Common/HeadersUtility"; @@ -97,12 +98,12 @@ class QueryTablesTabComponent extends Component { const { tableEntityListViewModel, selectedQueryText } = this.state; - tableEntityListViewModel.renderNextPageAndupdateCache(); + // tableEntityListViewModel.renderNextPageAndupdateCache(); let headers: string[] = []; //eslint-disable-next-line let documents: any = {}; @@ -362,6 +364,10 @@ class QueryTablesTabComponent extends Component { - if (isInitialLoad) { + if (isInitialLoad && headers.length > 0) { this.loadFilterExample(); this.onItemsSelectionChanged(true); } @@ -628,6 +635,22 @@ class QueryTablesTabComponent extends Component): void { + if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) { + this.toggleAdvancedOptions(); + event.stopPropagation(); + } + } + + public selectQueryOptionsKeyDown(event: React.KeyboardEvent): void { + if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) { + this.state.queryViewModel.selectQueryOptions(this.state.headers, (selectMessage: string) => + this.getSelectMessage(selectMessage) + ); + event.stopPropagation(); + } + } + public selectEditor(): void { this.setState({ isEditorActive: true, @@ -684,6 +707,13 @@ class QueryTablesTabComponent extends Component, indexToRemove: number): void { + if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) { + this.onDeleteClause(indexToRemove); + event.stopPropagation(); + } + } + onAddNewClause = (): void => { const { queryTableRows, queryViewModel, headers } = this.state; this.state.queryViewModel.queryBuilderViewModel().addNewClause(); @@ -717,6 +747,15 @@ class QueryTablesTabComponent extends Component): void { + console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 723 ~ QueryTablesTabComponent ~ event", event); + if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) { + this.state.queryViewModel.queryBuilderViewModel().onAddNewClauseKeyDown(event); + this.onAddNewClause(); + event.stopPropagation(); + } + } + private onEntityValueChange = (newInput: string, index: number) => { const { queryTableRows } = this.state; const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows]; @@ -816,10 +855,22 @@ class QueryTablesTabComponent extends Component this.onDropdownChange(selectedOption, selectedOptionType, index) } + onAddNewClauseKeyDown={(event: React.KeyboardEvent) => + this.onAddNewClauseKeyDown(event) + } + onDeleteCaluseKeyDown={(event: React.KeyboardEvent) => + this.onDeleteClauseKeyDown(event, index) + } /> ))} -
+
) => this.onAddNewClauseKeyDown(ev)} + tabIndex={0} + >
)}
-
this.toggleAdvancedOptions()}> - this.state.queryViewModel.ontoggleAdvancedOptionsKeyDown} - // data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }" - tabIndex={0} - > +
this.toggleAdvancedOptions()} + onKeyDown={(event: React.KeyboardEvent) => this.toggleAdvancedOptionsKeyDown(event)} + > + {!this.state.isExpanded && (