SQL Migration extension - accessibility bug - fixes filter enter and focus (#15953)

* fix filter enter and focus

* debounce and fix search

* refactor null check and undo change/remove await

* using control types to improve and remove 'any'
This commit is contained in:
brian-harris
2021-07-02 19:11:50 -07:00
committed by GitHub
parent 9f77c74b9f
commit 19e25f04b1
4 changed files with 59 additions and 2 deletions

View File

@@ -7,6 +7,7 @@ import { SqlMigrationAssessmentResultItem, SqlMigrationImpactedObjectInfo } from
import { IconPath, IconPathHelper } from '../../constants/iconPathHelper';
import { MigrationStateModel, MigrationTargetType } from '../../models/stateMachine';
import * as constants from '../../constants/strings';
import { debounce } from '../../api/utils';
const styleLeft: azdata.CssStyles = {
'border': 'none',
@@ -201,10 +202,13 @@ export class SqlDatabaseTree {
private createSearchComponent(): azdata.DivContainer {
let resourceSearchBox = this._view.modelBuilder.inputBox().withProps({
stopEnterPropagation: true,
placeHolder: constants.SEARCH,
width: 200
}).component();
resourceSearchBox.onTextChanged(value => this._filterTableList(value));
const searchContainer = this._view.modelBuilder.divContainer().withItems([resourceSearchBox]).withProps({
CSSStyles: {
'width': '200px',
@@ -215,6 +219,26 @@ export class SqlDatabaseTree {
return searchContainer;
}
@debounce(500)
private _filterTableList(value: string): void {
if (this._databaseTableValues && value?.length > 0) {
const filter: number[] = [];
this._databaseTableValues.forEach((row, index) => {
const flexContainer: azdata.FlexContainer = row[1]?.value as azdata.FlexContainer;
const textComponent: azdata.TextComponent = flexContainer.items[1] as azdata.TextComponent;
const cellText = textComponent.value?.toLowerCase();
const searchText: string = value.toLowerCase();
if (cellText?.includes(searchText)) {
filter.push(index);
}
});
this._databaseTable.setFilter(filter);
} else {
this._databaseTable.setFilter(undefined);
}
}
private createInstanceComponent(): azdata.DivContainer {
this._instanceTable = this._view.modelBuilder.declarativeTable().withProps(
{