Adding visual label to find node widget (#23197)

This commit is contained in:
Aasim Khan
2023-05-24 10:21:38 -07:00
committed by GitHub
parent 9f3ce333af
commit a1c5adf4b2
2 changed files with 17 additions and 3 deletions

View File

@@ -69,7 +69,12 @@ However we always want it to be the width of the container it is resizing.
flex-direction: row;
padding: 5px;
height: auto;
width: 420px;
width: 460px;
}
.eps-container .execution-plan .plan .plan-action-container .search-node-widget .property-name-label {
flex: 0 60px;
line-height: 26px
}
/* input bar styling in search node action view */

View File

@@ -53,11 +53,20 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase {
@IThemeService public readonly themeService: IThemeService
) {
super(DOM.$('.search-node-widget'), 'searchWidget');
const labelId = 'search-node-widget-label';
const dialogLabel = localize('executionPlanFindNodeLabel', 'Find nodes');
this.container.setAttribute('role', 'dialog');
this.container.setAttribute('aria-labelledby', labelId);
const label = DOM.$('label.property-name-label');
label.innerText = dialogLabel;
label.id = labelId;
this.container.appendChild(label);
// property name dropdown
this._propertyNameSelectBoxContainer = DOM.$('.search-widget-property-name-select-box .dropdown-container');
this.container.appendChild(this._propertyNameSelectBoxContainer);
this._propertyNameSelectBoxContainer.style.width = '150px';
this._propertyNameSelectBoxContainer.style.width = '120px';
const propDropdownOptions = this._executionPlanDiagram.getUniqueElementProperties();
this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], this.contextViewService, this._propertyNameSelectBoxContainer));
@@ -148,7 +157,7 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase {
// Initial focus is set to the search text input box
public focus() {
this._searchTextInputBox.focus();
this._propertyNameSelectBox.focus();
}
public searchNodes(): void {