Add functionality to expand and collapse all property rows. (#20746)

* Adds ability to expand and collapse all property rows

* Removes duplicate collapse/expand all logic

* Code review changes

* Removes unnecessary enum

* Updates comment

* Code review changes

* Code review changes

* Minor clean up

* Renames expand/collapse method

* Corrects collapse all action IDs and labels
This commit is contained in:
Lewis Sanchez
2022-10-06 20:47:20 -07:00
committed by GitHub
parent 5b07fbef2a
commit 00ff3ac50f
2 changed files with 60 additions and 2 deletions

View File

@@ -112,7 +112,7 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
this.populateTable(columns, this.convertPropertiesToTableRows(this._model.graphElement?.properties));
}
private convertPropertiesToTableRows(properties: azdata.executionPlan.ExecutionPlanGraphElementProperty[]): Slick.SlickData[] {
private convertPropertiesToTableRows(properties: azdata.executionPlan.ExecutionPlanGraphElementProperty[] | undefined): Slick.SlickData[] {
if (!properties) {
return [];
}

View File

@@ -118,7 +118,13 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
this._headerActions = this._register(new ActionBar(this._headerActionsContainer, {
orientation: ActionsOrientation.HORIZONTAL, context: this
}));
this._headerActions.pushAction([new SortPropertiesByDisplayOrderAction(), new SortPropertiesAlphabeticallyAction(), new SortPropertiesReverseAlphabeticallyAction()], { icon: true, label: false });
this._headerActions.pushAction([
new SortPropertiesByDisplayOrderAction(),
new SortPropertiesAlphabeticallyAction(),
new SortPropertiesReverseAlphabeticallyAction(),
new ExpandAllPropertiesAction(),
new CollapseAllPropertiesAction()
], { icon: true, label: false });
this._propertiesSearchInputContainer = DOM.$('.table-search');
this._propertiesSearchInputContainer.classList.add('codicon', searchIconClassNames);
@@ -258,10 +264,36 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
this.resizeTable();
}
private repopulateTable() {
this._tableComponent.setData(this.flattenTableData(this._tableData, -1));
this.resizeTable();
}
public updateTableColumns(columns: Slick.Column<Slick.SlickData>[]) {
this._tableComponent.columns = columns;
}
public setPropertyRowsExpanded(expand: boolean): void {
this.setPropertyRowsExpandedHelper(this._tableComponent.getData().getItems(), expand);
this.repopulateTable();
}
/**
* Expands or collapses the rows of the properties table recursively.
*
* @param rows The rows to be expanded or collapsed.
* @param expand Flag indicating if the rows should be expanded or collapsed.
*/
private setPropertyRowsExpandedHelper(rows: Slick.SlickData[], expand: boolean): void {
rows.forEach(row => {
if (row.treeGridChildren && row.treeGridChildren.length > 0) {
row.expanded = expand;
this.setPropertyRowsExpandedHelper(row.treeGridChildren, expand);
}
});
}
private resizeTable(): void {
const spaceOccupied = (this._titleBarContainer.getBoundingClientRect().height
+ this._headerContainer.getBoundingClientRect().height
@@ -400,6 +432,32 @@ export enum PropertiesSortType {
ReverseAlphabetical
}
export class ExpandAllPropertiesAction extends Action {
public static ID = 'ep.propertiesView.expandAllProperties';
public static LABEL = localize('executionPlanExpandAllProperties', 'Expand All');
constructor() {
super(ExpandAllPropertiesAction.ID, ExpandAllPropertiesAction.LABEL, Codicon.expandAll.classNames);
}
public override async run(context: ExecutionPlanPropertiesViewBase): Promise<void> {
context.setPropertyRowsExpanded(true);
}
}
export class CollapseAllPropertiesAction extends Action {
public static ID = 'ep.propertiesView.collapseAllProperties';
public static LABEL = localize('executionPlanCollapseAllProperties', 'Collapse All');
constructor() {
super(CollapseAllPropertiesAction.ID, CollapseAllPropertiesAction.LABEL, Codicon.collapseAll.classNames);
}
public override async run(context: ExecutionPlanPropertiesViewBase): Promise<void> {
context.setPropertyRowsExpanded(false);
}
}
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
const menuBackgroundColor = theme.getColor(listHoverBackground);