mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-03-17 11:03:14 -04:00
Create separate ScriptableDialogBase (#22974)
* Create separate ScriptableDialogBase * more
This commit is contained in:
Charles Gagnon
332
extensions/mssql/src/ui/dialogBase.ts
Normal file
332
extensions/mssql/src/ui/dialogBase.ts
Normal file
@@ -0,0 +1,332 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as azdata from 'azdata';
|
||||
import * as vscode from 'vscode';
|
||||
import { EOL } from 'os';
|
||||
import * as uiLoc from '../ui/localizedConstants';
|
||||
|
||||
export const DefaultLabelWidth = 150;
|
||||
export const DefaultInputWidth = 300;
|
||||
export const DefaultTableWidth = DefaultInputWidth + DefaultLabelWidth;
|
||||
export const DefaultMaxTableHeight = 400;
|
||||
export const DefaultMinTableRowCount = 1;
|
||||
export const TableRowHeight = 25;
|
||||
export const TableColumnHeaderHeight = 30;
|
||||
|
||||
export function getTableHeight(rowCount: number, minRowCount: number = DefaultMinTableRowCount, maxHeight: number = DefaultMaxTableHeight): number {
|
||||
return Math.min(Math.max(rowCount, minRowCount) * TableRowHeight + TableColumnHeaderHeight, maxHeight);
|
||||
}
|
||||
|
||||
export type TableListItemEnabledStateGetter<T> = (item: T) => boolean;
|
||||
export type TableListItemValueGetter<T> = (item: T) => string[];
|
||||
export type TableListItemComparer<T> = (item1: T, item2: T) => boolean;
|
||||
export const DefaultTableListItemEnabledStateGetter: TableListItemEnabledStateGetter<any> = (item: any) => true;
|
||||
export const DefaultTableListItemValueGetter: TableListItemValueGetter<any> = (item: any) => [item?.toString() ?? ''];
|
||||
export const DefaultTableListItemComparer: TableListItemComparer<any> = (item1: any, item2: any) => item1 === item2;
|
||||
|
||||
|
||||
export abstract class DialogBase<DialogResult> {
|
||||
protected readonly disposables: vscode.Disposable[] = [];
|
||||
protected readonly dialogObject: azdata.window.Dialog;
|
||||
|
||||
private _modelView: azdata.ModelView;
|
||||
private _loadingComponent: azdata.LoadingComponent;
|
||||
private _formContainer: azdata.DivContainer;
|
||||
private _closePromise: Promise<DialogResult | undefined>;
|
||||
|
||||
constructor(title: string, name: string, width: azdata.window.DialogWidth = 'narrow', style: azdata.window.DialogStyle = 'flyout') {
|
||||
this.dialogObject = azdata.window.createModelViewDialog(title, name, width, style);
|
||||
this.dialogObject.okButton.label = uiLoc.OkText;
|
||||
this.dialogObject.registerCloseValidator(async (): Promise<boolean> => {
|
||||
const confirmed = await this.onConfirmation();
|
||||
if (!confirmed) {
|
||||
return false;
|
||||
}
|
||||
return await this.runValidation();
|
||||
});
|
||||
this._closePromise = new Promise<DialogResult | undefined>(resolve => {
|
||||
this.disposables.push(this.dialogObject.onClosed(async (reason: azdata.window.CloseReason) => {
|
||||
await this.dispose(reason);
|
||||
const result = reason === 'ok' ? this.dialogResult : undefined;
|
||||
resolve(result);
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
public waitForClose(): Promise<DialogResult | undefined> {
|
||||
return this._closePromise;
|
||||
}
|
||||
|
||||
protected get dialogResult(): DialogResult | undefined { return undefined; }
|
||||
|
||||
protected async onConfirmation(): Promise<boolean> { return true; }
|
||||
|
||||
protected abstract initialize(): Promise<void>;
|
||||
|
||||
protected get formContainer(): azdata.DivContainer { return this._formContainer; }
|
||||
|
||||
protected get modelView(): azdata.ModelView { return this._modelView; }
|
||||
|
||||
protected onFormFieldChange(): void { }
|
||||
|
||||
protected validateInput(): Promise<string[]> { return Promise.resolve([]); }
|
||||
|
||||
public async open(): Promise<void> {
|
||||
try {
|
||||
this.onLoadingStatusChanged(true);
|
||||
const initializeDialogPromise = new Promise<void>((async resolve => {
|
||||
await this.dialogObject.registerContent(async view => {
|
||||
this._modelView = view;
|
||||
this._formContainer = this.createFormContainer([]);
|
||||
this._loadingComponent = view.modelBuilder.loadingComponent().withItem(this._formContainer).withProps({
|
||||
loading: true,
|
||||
loadingText: uiLoc.LoadingDialogText,
|
||||
showText: true,
|
||||
CSSStyles: {
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
}
|
||||
}).component();
|
||||
await view.initializeModel(this._loadingComponent);
|
||||
resolve();
|
||||
});
|
||||
}));
|
||||
azdata.window.openDialog(this.dialogObject);
|
||||
await initializeDialogPromise;
|
||||
await this.initialize();
|
||||
this.onLoadingStatusChanged(false);
|
||||
} catch (err) {
|
||||
azdata.window.closeDialog(this.dialogObject);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
protected async dispose(reason: azdata.window.CloseReason): Promise<void> {
|
||||
this.disposables.forEach(disposable => disposable.dispose());
|
||||
}
|
||||
|
||||
protected async runValidation(showErrorMessage: boolean = true): Promise<boolean> {
|
||||
const errors = await this.validateInput();
|
||||
if (errors.length > 0 && (this.dialogObject.message?.text || showErrorMessage)) {
|
||||
this.dialogObject.message = {
|
||||
text: errors.join(EOL),
|
||||
level: azdata.window.MessageLevel.Error
|
||||
};
|
||||
} else {
|
||||
this.dialogObject.message = undefined;
|
||||
}
|
||||
return errors.length === 0;
|
||||
}
|
||||
|
||||
protected createLabelInputContainer(label: string, input: azdata.InputBoxComponent | azdata.DropDownComponent): azdata.FlexContainer {
|
||||
const labelComponent = this.modelView.modelBuilder.text().withProps({ width: DefaultLabelWidth, value: label, requiredIndicator: input.required }).component();
|
||||
const container = this.modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'horizontal', flexWrap: 'nowrap', alignItems: 'center' }).withItems([labelComponent], { flex: '0 0 auto' }).component();
|
||||
container.addItem(input, { flex: '1 1 auto' });
|
||||
return container;
|
||||
}
|
||||
|
||||
protected createCheckbox(label: string, handler: (checked: boolean) => Promise<void>, checked: boolean = false, enabled: boolean = true): azdata.CheckBoxComponent {
|
||||
const checkbox = this.modelView.modelBuilder.checkBox().withProps({
|
||||
label: label,
|
||||
checked: checked,
|
||||
enabled: enabled
|
||||
}).component();
|
||||
this.disposables.push(checkbox.onChanged(async () => {
|
||||
await handler(checkbox.checked!);
|
||||
this.onFormFieldChange();
|
||||
await this.runValidation(false);
|
||||
}));
|
||||
return checkbox;
|
||||
}
|
||||
|
||||
protected createPasswordInputBox(ariaLabel: string, textChangeHandler: (newValue: string) => Promise<void>, value: string = '', enabled: boolean = true, width: number = DefaultInputWidth): azdata.InputBoxComponent {
|
||||
return this.createInputBox(ariaLabel, textChangeHandler, value, enabled, 'password', width);
|
||||
}
|
||||
|
||||
protected createInputBox(ariaLabel: string, textChangeHandler: (newValue: string) => Promise<void>, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth): azdata.InputBoxComponent {
|
||||
const inputbox = this.modelView.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width }).component();
|
||||
this.disposables.push(inputbox.onTextChanged(async () => {
|
||||
await textChangeHandler(inputbox.value!);
|
||||
this.onFormFieldChange();
|
||||
await this.runValidation(false);
|
||||
}));
|
||||
return inputbox;
|
||||
}
|
||||
|
||||
protected createGroup(header: string, items: azdata.Component[], collapsible: boolean = true, collapsed: boolean = false): azdata.GroupContainer {
|
||||
return this.modelView.modelBuilder.groupContainer().withLayout({
|
||||
header: header,
|
||||
collapsible: collapsible,
|
||||
collapsed: collapsed
|
||||
}).withItems(items).component();
|
||||
}
|
||||
|
||||
protected createTableList<T>(ariaLabel: string,
|
||||
columnNames: string[],
|
||||
allItems: T[],
|
||||
selectedItems: T[],
|
||||
maxHeight: number = DefaultMaxTableHeight,
|
||||
enabledStateGetter: TableListItemEnabledStateGetter<T> = DefaultTableListItemEnabledStateGetter,
|
||||
rowValueGetter: TableListItemValueGetter<T> = DefaultTableListItemValueGetter,
|
||||
itemComparer: TableListItemComparer<T> = DefaultTableListItemComparer): azdata.TableComponent {
|
||||
const data = this.getDataForTableList(allItems, selectedItems, enabledStateGetter, rowValueGetter, itemComparer);
|
||||
const table = this.modelView.modelBuilder.table().withProps(
|
||||
{
|
||||
ariaLabel: ariaLabel,
|
||||
data: data,
|
||||
columns: [
|
||||
{
|
||||
value: uiLoc.SelectedText,
|
||||
type: azdata.ColumnType.checkBox,
|
||||
options: { actionOnCheckbox: azdata.ActionOnCellCheckboxCheck.customAction }
|
||||
}, ...columnNames.map(name => {
|
||||
return { value: name };
|
||||
})
|
||||
],
|
||||
width: DefaultTableWidth,
|
||||
height: getTableHeight(data.length, DefaultMinTableRowCount, maxHeight)
|
||||
}
|
||||
).component();
|
||||
this.disposables.push(table.onCellAction!((arg: azdata.ICheckboxCellActionEventArgs) => {
|
||||
const item = allItems[arg.row];
|
||||
const idx = selectedItems.findIndex(i => itemComparer(i, item));
|
||||
if (arg.checked && idx === -1) {
|
||||
selectedItems.push(item);
|
||||
} else if (!arg.checked && idx !== -1) {
|
||||
selectedItems.splice(idx, 1)
|
||||
}
|
||||
this.onFormFieldChange();
|
||||
}));
|
||||
return table;
|
||||
}
|
||||
|
||||
protected setTableData(table: azdata.TableComponent, data: any[][], maxHeight: number = DefaultMaxTableHeight) {
|
||||
table.data = data;
|
||||
table.height = getTableHeight(data.length, DefaultMinTableRowCount, maxHeight);
|
||||
}
|
||||
|
||||
protected getDataForTableList<T>(
|
||||
allItems: T[],
|
||||
selectedItems: T[],
|
||||
enabledStateGetter: TableListItemEnabledStateGetter<T> = DefaultTableListItemEnabledStateGetter,
|
||||
rowValueGetter: TableListItemValueGetter<T> = DefaultTableListItemValueGetter,
|
||||
itemComparer: TableListItemComparer<T> = DefaultTableListItemComparer): any[][] {
|
||||
return allItems.map(item => {
|
||||
const idx = selectedItems.findIndex(i => itemComparer(i, item));
|
||||
const stateColumnValue = { checked: idx !== -1, enabled: enabledStateGetter(item) };
|
||||
return [stateColumnValue, ...rowValueGetter(item)];
|
||||
});
|
||||
}
|
||||
|
||||
protected createTable(ariaLabel: string, columns: azdata.TableColumn[], data: any[][], maxHeight: number = DefaultMaxTableHeight): azdata.TableComponent {
|
||||
const table = this.modelView.modelBuilder.table().withProps(
|
||||
{
|
||||
ariaLabel: ariaLabel,
|
||||
data: data,
|
||||
columns: columns,
|
||||
width: DefaultTableWidth,
|
||||
height: getTableHeight(data.length, DefaultMinTableRowCount, maxHeight)
|
||||
}
|
||||
).component();
|
||||
return table;
|
||||
}
|
||||
|
||||
protected addButtonsForTable(table: azdata.TableComponent, addButtonAriaLabel: string, removeButtonAriaLabel: string, addHandler: () => Promise<void>, removeHandler: () => void): azdata.FlexContainer {
|
||||
let addButton: azdata.ButtonComponent;
|
||||
let removeButton: azdata.ButtonComponent;
|
||||
const updateButtons = () => {
|
||||
removeButton.enabled = table.selectedRows.length > 0;
|
||||
}
|
||||
addButton = this.createButton(uiLoc.AddText, addButtonAriaLabel, async () => {
|
||||
await addHandler();
|
||||
updateButtons();
|
||||
});
|
||||
removeButton = this.createButton(uiLoc.RemoveText, removeButtonAriaLabel, async () => {
|
||||
await removeHandler();
|
||||
updateButtons();
|
||||
}, false);
|
||||
this.disposables.push(table.onRowSelected(() => {
|
||||
updateButtons();
|
||||
}));
|
||||
return this.createButtonContainer([addButton, removeButton]);
|
||||
}
|
||||
|
||||
protected createDropdown(ariaLabel: string, handler: (newValue: string) => Promise<void>, values: string[], value: string | undefined, enabled: boolean = true, width: number = DefaultInputWidth): azdata.DropDownComponent {
|
||||
// Automatically add an empty item to the beginning of the list if the current value is not specified.
|
||||
// This is needed when no meaningful default value can be provided.
|
||||
// Create a new array so that the original array isn't modified.
|
||||
const dropdownValues = [];
|
||||
dropdownValues.push(...values);
|
||||
if (!value) {
|
||||
dropdownValues.unshift('');
|
||||
}
|
||||
const dropdown = this.modelView.modelBuilder.dropDown().withProps({
|
||||
ariaLabel: ariaLabel,
|
||||
values: dropdownValues,
|
||||
value: value,
|
||||
width: width,
|
||||
enabled: enabled
|
||||
}).component();
|
||||
this.disposables.push(dropdown.onValueChanged(async () => {
|
||||
await handler(<string>dropdown.value!);
|
||||
this.onFormFieldChange();
|
||||
await this.runValidation(false);
|
||||
}));
|
||||
return dropdown;
|
||||
}
|
||||
|
||||
protected createButton(label: string, ariaLabel: string, handler: () => Promise<void>, enabled: boolean = true): azdata.ButtonComponent {
|
||||
const button = this.modelView.modelBuilder.button().withProps({
|
||||
label: label,
|
||||
ariaLabel: ariaLabel,
|
||||
enabled: enabled,
|
||||
secondary: true,
|
||||
CSSStyles: { 'min-width': '70px', 'margin-left': '5px' }
|
||||
}).component();
|
||||
this.disposables.push(button.onDidClick(async () => {
|
||||
await handler();
|
||||
}));
|
||||
return button;
|
||||
}
|
||||
|
||||
protected createButtonContainer(items: azdata.ButtonComponent[], justifyContent: azdata.JustifyContentType = 'flex-end'): azdata.FlexContainer {
|
||||
return this.modelView.modelBuilder.flexContainer().withProps({
|
||||
CSSStyles: { 'margin': '5px 0' }
|
||||
}).withLayout({
|
||||
flexFlow: 'horizontal',
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: justifyContent
|
||||
}).withItems(items, { flex: '0 0 auto' }).component();
|
||||
}
|
||||
|
||||
protected removeItem(container: azdata.DivContainer | azdata.FlexContainer, item: azdata.Component): void {
|
||||
if (container.items.indexOf(item) !== -1) {
|
||||
container.removeItem(item);
|
||||
}
|
||||
}
|
||||
|
||||
protected addItem(container: azdata.DivContainer | azdata.FlexContainer, item: azdata.Component, index?: number): void {
|
||||
if (container.items.indexOf(item) === -1) {
|
||||
if (index === undefined) {
|
||||
container.addItem(item);
|
||||
} else {
|
||||
container.insertItem(item, index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected onLoadingStatusChanged(isLoading: boolean): void {
|
||||
if (this._loadingComponent) {
|
||||
this._loadingComponent.loading = isLoading;
|
||||
}
|
||||
}
|
||||
|
||||
private createFormContainer(items: azdata.Component[]): azdata.DivContainer {
|
||||
return this.modelView.modelBuilder.divContainer().withLayout({ width: 'calc(100% - 20px)', height: 'calc(100% - 20px)' }).withProps({
|
||||
CSSStyles: { 'padding': '10px' }
|
||||
}).withItems(items, { CSSStyles: { 'margin-block-end': '10px' } }).component();
|
||||
}
|
||||
}
|
||||
22
extensions/mssql/src/ui/localizedConstants.ts
Normal file
22
extensions/mssql/src/ui/localizedConstants.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as nls from 'vscode-nls';
|
||||
const localize = nls.loadMessageBundle();
|
||||
|
||||
export const HelpText: string = localize('mssql.ui.helpText', "Help");
|
||||
export const YesText: string = localize('mssql.ui.yesText', "Yes");
|
||||
export const OkText: string = localize('mssql.ui.OkText', "OK");
|
||||
export const LoadingDialogText: string = localize('mssql.ui.loadingDialog', "Loading dialog...");
|
||||
export const ScriptText: string = localize('mssql.ui.scriptText', "Script");
|
||||
export const SelectedText = localize('objectManagement.selectedLabel', "Selected");
|
||||
export const AddText = localize('objectManagement.addText', "Add…");
|
||||
export const RemoveText = localize('objectManagement.removeText', "Remove");
|
||||
export const NoActionScriptedMessage: string = localize('mssql.ui.noActionScriptedMessage', "There is no action to be scripted.");
|
||||
export const ScriptGeneratedText: string = localize('mssql.ui.scriptGenerated', "Script has been generated successfully. You can close the dialog to view it in the newly opened editor.")
|
||||
|
||||
export function scriptError(error: string): string {
|
||||
return localize('mssql.ui.scriptError', "An error occurred while generating the script. {0}", error);
|
||||
}
|
||||
110
extensions/mssql/src/ui/scriptableDialogBase.ts
Normal file
110
extensions/mssql/src/ui/scriptableDialogBase.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as azdata from 'azdata';
|
||||
import * as vscode from 'vscode';
|
||||
import * as localizedConstants from './localizedConstants';
|
||||
import { DialogBase } from './dialogBase';
|
||||
import { getErrorMessage } from '../utils';
|
||||
import { providerId } from '../constants';
|
||||
|
||||
export interface ScriptableDialogOptions {
|
||||
/**
|
||||
* The width of the dialog, defaults to narrow if not set
|
||||
*/
|
||||
width?: azdata.window.DialogWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Base class for a scriptable dialog - that is a dialog that has a "Script" button which will
|
||||
* open a new editor with the generated script when clicked. This also includes a "Help" button
|
||||
* to open up a given URL when clicked.
|
||||
*/
|
||||
export abstract class ScriptableDialogBase<OptionsType extends ScriptableDialogOptions> extends DialogBase<void> {
|
||||
private _helpButton: azdata.window.Button;
|
||||
private _scriptButton: azdata.window.Button;
|
||||
|
||||
constructor(title: string, name: string, protected readonly options: OptionsType) {
|
||||
super(title, name, options.width || 'narrow', 'flyout'
|
||||
);
|
||||
this._helpButton = azdata.window.createButton(localizedConstants.HelpText, 'left');
|
||||
this.disposables.push(this._helpButton.onClick(async () => {
|
||||
await vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(this.helpUrl));
|
||||
}));
|
||||
this._scriptButton = azdata.window.createButton(localizedConstants.ScriptText, 'left');
|
||||
this.disposables.push(this._scriptButton.onClick(async () => { await this.onScriptButtonClick(); }));
|
||||
this.dialogObject.customButtons = [this._helpButton, this._scriptButton];
|
||||
}
|
||||
|
||||
/**
|
||||
* Called after initializeData to initialize the UI components of the dialog.
|
||||
*/
|
||||
protected abstract initializeUI(): Promise<void>;
|
||||
|
||||
/**
|
||||
* Called before initializeUI to initialize the data for the dialog.
|
||||
*/
|
||||
protected abstract initializeData(): Promise<void>;
|
||||
|
||||
/**
|
||||
* The URL to open when the Help button is clicked
|
||||
*/
|
||||
protected abstract get helpUrl(): string;
|
||||
|
||||
/**
|
||||
* Whether the dialog is currently dirty, which will control what buttons are enabled.
|
||||
*/
|
||||
protected abstract get isDirty(): boolean;
|
||||
|
||||
protected override onFormFieldChange(): void {
|
||||
this._scriptButton.enabled = this.isDirty;
|
||||
this.dialogObject.okButton.enabled = this.isDirty;
|
||||
}
|
||||
|
||||
protected override async initialize(): Promise<void> {
|
||||
await this.initializeData();
|
||||
await this.initializeUI();
|
||||
}
|
||||
|
||||
protected override onLoadingStatusChanged(isLoading: boolean): void {
|
||||
super.onLoadingStatusChanged(isLoading);
|
||||
this._helpButton.enabled = !isLoading;
|
||||
this.dialogObject.okButton.enabled = this._scriptButton.enabled = isLoading ? false : this.isDirty;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the script button is clicked, returns the script that will be opened up in a new editor.
|
||||
*/
|
||||
protected abstract generateScript(): Promise<string>;
|
||||
|
||||
private async onScriptButtonClick(): Promise<void> {
|
||||
this.onLoadingStatusChanged(true);
|
||||
try {
|
||||
const isValid = await this.runValidation();
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
let message: string;
|
||||
const script = await this.generateScript();
|
||||
if (script) {
|
||||
message = localizedConstants.ScriptGeneratedText;
|
||||
await azdata.queryeditor.openQueryDocument({ content: script }, providerId);
|
||||
} else {
|
||||
message = localizedConstants.NoActionScriptedMessage;
|
||||
}
|
||||
this.dialogObject.message = {
|
||||
text: message,
|
||||
level: azdata.window.MessageLevel.Information
|
||||
};
|
||||
} catch (err) {
|
||||
this.dialogObject.message = {
|
||||
text: localizedConstants.scriptError(getErrorMessage(err)),
|
||||
level: azdata.window.MessageLevel.Error
|
||||
};
|
||||
} finally {
|
||||
this.onLoadingStatusChanged(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user