Add option to show and hide the action bar in the query results view (#21560)

* Show and hide action bar in results view

* Updates show action bar setting description

* Removes excess padding

* Code review change
This commit is contained in:
Lewis Sanchez
2023-01-11 16:16:08 -08:00
committed by GitHub
parent 9708b470c7
commit 7683259097
3 changed files with 44 additions and 21 deletions

View File

@@ -62,6 +62,7 @@ const HEADER_HEIGHT = 26;
const MIN_GRID_HEIGHT_ROWS = 8;
const ESTIMATED_SCROLL_BAR_HEIGHT = 15;
const BOTTOM_PADDING = 15;
const NO_ACTIONBAR_ADDITIONAL_PADDING = 75;
const ACTIONBAR_WIDTH = 36;
// minimum height needed to show the full actionbar
@@ -478,18 +479,12 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
// actionsOrientation controls the orientation (horizontal or vertical) of the actionBar
private build(): void {
let actionBarContainer = document.createElement('div');
// Create a horizontal actionbar if orientation passed in is HORIZONTAL
if (this.options.actionOrientation === ActionsOrientation.HORIZONTAL) {
actionBarContainer.className = 'grid-panel action-bar horizontal';
this.container.appendChild(actionBarContainer);
}
this.tableContainer = document.createElement('div');
this.tableContainer.className = 'grid-panel';
this.tableContainer.style.display = 'inline-block';
this.tableContainer.style.width = `calc(100% - ${ACTIONBAR_WIDTH}px)`;
let actionBarWidth = this.showActionBar ? ACTIONBAR_WIDTH : 0;
this.tableContainer.style.width = `calc(100% - ${actionBarWidth}px)`;
this.container.appendChild(this.tableContainer);
@@ -563,12 +558,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
if (this.styles) {
this.table.style(this.styles);
}
// If the actionsOrientation passed in is "VERTICAL" (or no actionsOrientation is passed in at all), create a vertical actionBar
if (this.options.actionOrientation === ActionsOrientation.VERTICAL) {
actionBarContainer.className = 'grid-panel action-bar vertical';
actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
this.container.appendChild(actionBarContainer);
}
let context: IGridActionContext = {
gridDataProvider: this.gridDataProvider,
table: this.table,
@@ -576,14 +566,15 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
batchId: this.resultSet.batchId,
resultId: this.resultSet.id
};
this.actionBar = new ActionBar(actionBarContainer, {
orientation: this.options.actionOrientation, context: context
});
this.initializeActionBar(context);
// update context before we run an action
this.selectionModel.onSelectedRangesChanged.subscribe(e => {
this.actionBar.context = this.generateContext();
});
this.rebuildActionBar();
this.selectionModel.onSelectedRangesChanged.subscribe(async e => {
if (this.state) {
this.state.selection = this.selectionModel.getSelectedRanges();
@@ -628,6 +619,26 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
}));
}
private initializeActionBar(context: IGridActionContext): void {
let actionBarContainer = document.createElement('div');
// Create a horizontal actionbar if orientation passed in is HORIZONTAL
if (this.options.actionOrientation === ActionsOrientation.HORIZONTAL) {
actionBarContainer.className = 'grid-panel action-bar horizontal';
this.container.appendChild(actionBarContainer);
}
// if the actionsOrientation passed in is "VERTICAL" (or no actionsOrientation is passed in at all), create a vertical actionBar
else {
actionBarContainer.className = 'grid-panel action-bar vertical';
actionBarContainer.style.width = (this.showActionBar ? ACTIONBAR_WIDTH : 0) + 'px';
this.container.appendChild(actionBarContainer);
}
this.actionBar = new ActionBar(actionBarContainer, {
orientation: this.options.actionOrientation, context: context
});
}
private restoreScrollState() {
if (this.state.scrollPositionX || this.state.scrollPositionY) {
this.table.grid.scrollTo(this.state.scrollPositionY);
@@ -810,11 +821,17 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
public get minimumSize(): number {
// clamp between ensuring we can show the actionbar, while also making sure we don't take too much space
// if there is only one table then allow a minimum size of ROW_HEIGHT
return this.isOnlyTable ? ROW_HEIGHT : Math.max(Math.min(this.maxSize, MIN_GRID_HEIGHT), ACTIONBAR_HEIGHT + BOTTOM_PADDING);
let actionBarHeight = this.showActionBar ? ACTIONBAR_HEIGHT : 0;
let bottomPadding = this.showActionBar ? BOTTOM_PADDING : BOTTOM_PADDING + NO_ACTIONBAR_ADDITIONAL_PADDING;
return this.isOnlyTable ? ROW_HEIGHT : Math.max(Math.min(this.maxSize, MIN_GRID_HEIGHT), actionBarHeight + bottomPadding);
}
public get maximumSize(): number {
return Math.max(this.maxSize, ACTIONBAR_HEIGHT + BOTTOM_PADDING);
let actionBarHeight = this.showActionBar ? ACTIONBAR_HEIGHT : 0;
let bottomPadding = this.showActionBar ? BOTTOM_PADDING : BOTTOM_PADDING + NO_ACTIONBAR_ADDITIONAL_PADDING;
return Math.max(this.maxSize, actionBarHeight + bottomPadding);
}
private loadData(offset: number, count: number): Thenable<T[]> {
@@ -933,7 +950,7 @@ class GridTable<T> extends GridTableBase<T> {
super(state, resultSet, {
actionOrientation: ActionsOrientation.VERTICAL,
inMemoryDataProcessing: true,
showActionBar: true,
showActionBar: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.showActionBar,
inMemoryDataCountThreshold: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.inMemoryDataProcessingThreshold,
}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService);
this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id);

View File

@@ -442,6 +442,11 @@ const queryEditorConfiguration: IConfigurationNode = {
'description': localize('queryEditor.results.openAfterSave', "Whether to open the file in Azure Data Studio after the result is saved."),
'default': true
},
'queryEditor.results.showActionBar': {
'type': 'boolean',
'description': localize('queryEditor.results.showActionBar', "Whether to show the action bar in the query results view"),
'default': true
},
'queryEditor.messages.showBatchTime': {
'type': 'boolean',
'description': localize('queryEditor.messages.showBatchTime', "Should execution time be shown for individual batches"),