ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-29 17:23:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

table designer validation support (#18438)

Browse Source 
* table designer validation

* vbump sts
This commit is contained in:
Alan Ren
2022-02-17 13:07:19 -08:00
committed by GitHub
parent e66192cbfd
commit 28ab7372d2
11 changed files with 186 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/sql/workbench/browser/designer/designer.ts
View File

@@ -6,7 +6,7 @@
import {
DesignerComponentInput, DesignerEditType, DesignerTab, DesignerEdit, DesignerEditPath, DesignerViewModel, DesignerDataPropertyInfo,
DesignerTableComponentRowData, DesignerTableProperties, InputBoxProperties, DropDownProperties, CheckBoxProperties,
DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, DesignerUIState, DesignerTextEditor, ScriptProperty, DesignerRootObjectPath
DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, DesignerUIState, ScriptProperty, DesignerRootObjectPath
}
from 'sql/workbench/browser/designer/interfaces';
import { IPanelTab, ITabbedPanelStyles, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
@@ -34,9 +34,10 @@ import { Color } from 'vs/base/common/color';
import { LoadingSpinner } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { DesignerScriptEditor } from 'sql/workbench/browser/designer/designerScriptEditor';
import { INotificationService } from 'vs/platform/notification/common/notification';
import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
import { DesignerMessagesTabPanelView } from 'sql/workbench/browser/designer/designerMessagesTabPanelView';
import { DesignerScriptEditorTabPanelView } from 'sql/workbench/browser/designer/designerScriptEditorTabPanelView';
export interface IDesignerStyle {
tabbedPanelStyles?: ITabbedPanelStyles;
@@ -56,6 +57,8 @@ export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, compo
const TableRowHeight = 25;
const TableHeaderRowHeight = 28;
const ScriptTabId = 'scripts';
const MessagesTabId = 'messages';
type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'TopContentView' | 'TabsView';
@@ -67,7 +70,8 @@ export class Designer extends Disposable implements IThemable {
private _editorContainer: HTMLElement;
private _horizontalSplitView: SplitView;
private _verticalSplitView: SplitView;
private _tabbedPanel: TabbedPanel;
private _contentTabbedPanel: TabbedPanel;
private _scriptTabbedPannel: TabbedPanel;
private _contentContainer: HTMLElement;
private _topContentContainer: HTMLElement;
private _propertiesPaneContainer: HTMLElement;
@@ -81,7 +85,8 @@ export class Designer extends Disposable implements IThemable {
private _inputDisposable: DisposableStore;
private _loadingTimeoutHandle: any;
private _groupHeaders: HTMLElement[] = [];
private _textEditor: DesignerTextEditor;
private _messagesView: DesignerMessagesTabPanelView;
private _scriptEditorView: DesignerScriptEditorTabPanelView;
constructor(private readonly _container: HTMLElement,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@@ -119,7 +124,7 @@ export class Designer extends Disposable implements IThemable {
this._propertiesPaneContainer = DOM.$('.properties-container');
this._verticalSplitView = new SplitView(this._verticalSplitViewContainer, { orientation: Orientation.VERTICAL });
this._horizontalSplitView = new SplitView(this._horizontalSplitViewContainer, { orientation: Orientation.HORIZONTAL });
this._tabbedPanel = new TabbedPanel(this._tabbedPanelContainer);
this._contentTabbedPanel = new TabbedPanel(this._tabbedPanelContainer);
this._container.appendChild(this._verticalSplitViewContainer);
this._contentContainer.appendChild(this._topContentContainer);
this._contentContainer.appendChild(this._tabbedPanelContainer);
@@ -132,11 +137,18 @@ export class Designer extends Disposable implements IThemable {
maximumSize: Number.POSITIVE_INFINITY,
onDidChange: Event.None
}, Sizing.Distribute);
this._textEditor = this._instantiationService.createInstance(DesignerScriptEditor, this._editorContainer);
this._scriptTabbedPannel = new TabbedPanel(this._editorContainer);
this._messagesView = new DesignerMessagesTabPanelView();
this._scriptEditorView = new DesignerScriptEditorTabPanelView(this._instantiationService);
this._scriptTabbedPannel.pushTab({
title: localize('designer.scriptTabTitle', "Scripts"),
identifier: ScriptTabId,
view: this._scriptEditorView
});
this._verticalSplitView.addView({
element: this._editorContainer,
layout: size => {
this._textEditor.layout(new DOM.Dimension(this._editorContainer.clientWidth, size));
this._scriptTabbedPannel.layout(new DOM.Dimension(this._editorContainer.clientWidth, size - this._scriptTabbedPannel.headersize));
},
minimumSize: 100,
maximumSize: Number.POSITIVE_INFINITY,
@@ -163,6 +175,7 @@ export class Designer extends Disposable implements IThemable {
onDidChange: Event.None
}, Sizing.Distribute);
this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, components, parentPath) => {
return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, 'PropertiesView');
}, (definition, component, viewModel) => {
@@ -244,7 +257,7 @@ export class Designer extends Disposable implements IThemable {
this._buttons = [];
this._componentMap.clear();
DOM.clearNode(this._topContentContainer);
this._tabbedPanel.clearTabs();
this._contentTabbedPanel.clearTabs();
this._propertiesPane.clear();
this._inputDisposable?.dispose();
this._groupHeaders = [];
@@ -287,7 +300,7 @@ export class Designer extends Disposable implements IThemable {
this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, 'TopContentView');
}
view.tabs.forEach(tab => {
this._tabbedPanel.pushTab(this.createTabView(tab));
this._contentTabbedPanel.pushTab(this.createTabView(tab));
});
this.layoutTabbedPanel();
this.updateComponentValues();
@@ -297,42 +310,37 @@ export class Designer extends Disposable implements IThemable {
private handleEditProcessedEvent(args: DesignerEditProcessedEventArgs): void {
const edit = args.edit;
const result = args.result;
if (result.isValid) {
this._supressEditProcessing = true;
try {
this.updateComponentValues();
if (edit.type === DesignerEditType.Add) {
// For tables in the main view, move focus to the first cell of the newly added row, and the properties pane will be showing the new object.
if (edit.path.length === 1) {
const propertyName = edit.path[0] as string;
const tableData = this._input.viewModel[propertyName] as DesignerTableProperties;
const table = this._componentMap.get(propertyName).component as Table<Slick.SlickData>;
try {
table.setActiveCell(tableData.data.length - 1, 0);
}
catch {
// Ignore the slick grid error when setting active cell.
}
} else {
this.updatePropertiesPane(this._propertiesPane.objectPath);
this._supressEditProcessing = true;
try {
this.updateComponentValues();
if (edit.type === DesignerEditType.Add) {
// For tables in the main view, move focus to the first cell of the newly added row, and the properties pane will be showing the new object.
if (edit.path.length === 1) {
const propertyName = edit.path[0] as string;
const tableData = this._input.viewModel[propertyName] as DesignerTableProperties;
const table = this._componentMap.get(propertyName).component as Table<Slick.SlickData>;
try {
table.setActiveCell(tableData.data.length - 1, 0);
}
} else if (edit.type === DesignerEditType.Update) {
// for edit, update the properties pane with new values of current object.
catch {
// Ignore the slick grid error when setting active cell.
}
} else {
this.updatePropertiesPane(this._propertiesPane.objectPath);
}
} else if (edit.type === DesignerEditType.Update) {
// for edit, update the properties pane with new values of current object.
this.updatePropertiesPane(this._propertiesPane.objectPath);
} else if (edit.type === DesignerEditType.Remove) {
// removing the secondary level entities, the properties pane needs to be updated to reflect the changes.
if (edit.path.length === 4) {
this.updatePropertiesPane(this._propertiesPane.objectPath);
} else if (edit.type === DesignerEditType.Remove) {
// removing the secondary level entities, the properties pane needs to be updated to reflect the changes.
if (edit.path.length === 4) {
this.updatePropertiesPane(this._propertiesPane.objectPath);
}
}
} catch (err) {
this._notificationService.error(err);
}
this._supressEditProcessing = false;
} else {
this._notificationService.error(result.errors.map(e => e.message));
} catch (err) {
this._notificationService.error(err);
}
this._supressEditProcessing = false;
}
private handleInputStateChangedEvent(args: DesignerStateChangedEventArgs): void {
@@ -378,7 +386,7 @@ export class Designer extends Disposable implements IThemable {
}
private layoutTabbedPanel() {
this._tabbedPanel.layout(new DOM.Dimension(this._tabbedPanelContainer.clientWidth, this._tabbedPanelContainer.clientHeight));
this._contentTabbedPanel.layout(new DOM.Dimension(this._tabbedPanelContainer.clientWidth, this._tabbedPanelContainer.clientHeight));
}
private layoutPropertiesPane() {
@@ -431,16 +439,36 @@ export class Designer extends Disposable implements IThemable {
}
private updateComponentValues(): void {
this.updateMessagesTab();
const viewModel = this._input.viewModel;
const scriptProperty = viewModel[ScriptProperty] as InputBoxProperties;
if (scriptProperty) {
this._textEditor.content = scriptProperty.value || '';
this._scriptEditorView.content = scriptProperty.value || '';
}
this._componentMap.forEach((value) => {
this.setComponentValue(value.defintion, value.component, viewModel);
});
}
private updateMessagesTab(): void {
if (!this._input) {
return;
}
if (this._scriptTabbedPannel.contains(MessagesTabId)) {
this._scriptTabbedPannel.removeTab(MessagesTabId);
}
if (this._input.validationErrors === undefined || this._input.validationErrors.length === 0) {
return;
}
this._scriptTabbedPannel.pushTab({
title: localize('designer.messagesTabTitle', "Errors ({0})", this._input.validationErrors.length),
identifier: MessagesTabId,
view: this._messagesView
});
this._scriptTabbedPannel.showTab(MessagesTabId);
this._messagesView.updateMessages(this._input.validationErrors);
}
private handleEdit(edit: DesignerEdit): void {
if (this._supressEditProcessing) {
return;
@@ -791,13 +819,13 @@ export class Designer extends Disposable implements IThemable {
private getUIState(): DesignerUIState {
return {
activeTabId: this._tabbedPanel.activeTabId
activeTabId: this._contentTabbedPanel.activeTabId
};
}
private restoreUIState(): void {
if (this._input.designerUIState) {
this._tabbedPanel.showTab(this._input.designerUIState.activeTabId);
this._contentTabbedPanel.showTab(this._input.designerUIState.activeTabId);
}
}
}

30
src/sql/workbench/browser/designer/designerMessagesTabPanelView.ts Normal file
View File

@@ -0,0 +1,30 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IPanelView } from 'sql/base/browser/ui/panel/panel';
import { Disposable } from 'vs/base/common/lifecycle';
import * as DOM from 'vs/base/browser/dom';
import { DesignerValidationError } from 'sql/workbench/browser/designer/interfaces';
export class DesignerMessagesTabPanelView extends Disposable implements IPanelView {
private _container: HTMLElement;
render(container: HTMLElement): void {
this._container = container.appendChild(DOM.$('.messages-container'));
}
layout(dimension: DOM.Dimension): void {
}
updateMessages(errors: DesignerValidationError[]) {
if (this._container) {
DOM.clearNode(this._container);
errors?.forEach(error => {
const messageItem = this._container.appendChild(DOM.$('.message-item.codicon.error'));
messageItem.innerText = error.message;
});
}
}
}

3
src/sql/workbench/browser/designer/designerScriptEditor.ts
View File

@@ -84,9 +84,6 @@ export class DesignerScriptEditor extends BaseTextEditor implements DesignerText
options.renderIndentGuides = false;
options.rulers = [];
options.glyphMargin = true;
options.minimap = {
enabled: true
};
}
return options;
}

32
src/sql/workbench/browser/designer/designerScriptEditorTabPanelView.ts Normal file
View File

@@ -0,0 +1,32 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IPanelView } from 'sql/base/browser/ui/panel/panel';
import { Disposable } from 'vs/base/common/lifecycle';
import * as DOM from 'vs/base/browser/dom';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { DesignerScriptEditor } from 'sql/workbench/browser/designer/designerScriptEditor';
export class DesignerScriptEditorTabPanelView extends Disposable implements IPanelView {
private _textEditor: DesignerScriptEditor;
constructor(private _instantiationService: IInstantiationService) {
super();
}
render(container: HTMLElement): void {
this._textEditor = this._instantiationService.createInstance(DesignerScriptEditor, container);
}
layout(dimension: DOM.Dimension): void {
this._textEditor.layout(dimension);
}
set content(content: string) {
if (this._textEditor) {
this._textEditor.content = content;
}
}
}

9
src/sql/workbench/browser/designer/interfaces.ts
View File

@@ -43,6 +43,11 @@ export interface DesignerComponentInput {
*/
readonly viewModel: DesignerViewModel;
/**
* Gets the validation errors.
*/
readonly validationErrors: DesignerValidationError[] | undefined;
/**
* Start initilizing the designer input object.
*/
@@ -210,9 +215,11 @@ export interface DesignerEdit {
export type DesignerEditPath = (string | number)[];
export const DesignerRootObjectPath: DesignerEditPath = [];
export type DesignerValidationError = { message: string, property?: DesignerEditPath };
export interface DesignerEditResult {
isValid: boolean;
errors?: { message: string, property?: DesignerEditPath }[];
errors?: DesignerValidationError[];
}
export interface DesignerTextEditor {

14
src/sql/workbench/browser/designer/media/designer.css
View File

@@ -29,6 +29,20 @@
height: 100%;
}
.designer-component .messages-container {
overflow: scroll;
height: 100%;
width: 100%;
}
.designer-component .messages-container .message-item {
padding: 0px 5px 0px 25px;
background-position: 5px center;
background-size: 16px 16px;
user-select: text;
line-height: 25px;
}
.designer-component .tabbed-panel-container {
flex: 1 1 auto;
overflow: hidden;

38
src/sql/workbench/contrib/query/browser/queryResultsView.ts
View File

@@ -257,27 +257,27 @@ export class QueryResultsView extends Disposable {
}
}));
if (this.input?.state.visibleTabs.has(this.chartTab.identifier) && !this._panelView.contains(this.chartTab)) {
if (this.input?.state.visibleTabs.has(this.chartTab.identifier) && !this._panelView.contains(this.chartTab.identifier)) {
this._panelView.pushTab(this.chartTab);
} else if (!this.input?.state.visibleTabs.has(this.chartTab.identifier) && this._panelView.contains(this.chartTab)) {
} else if (!this.input?.state.visibleTabs.has(this.chartTab.identifier) && this._panelView.contains(this.chartTab.identifier)) {
this._panelView.removeTab(this.chartTab.identifier);
}
if (this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && !this._panelView.contains(this.qp2Tab)) {
if (this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && !this._panelView.contains(this.qp2Tab.identifier)) {
this._panelView.pushTab(this.qp2Tab);
} else if (!this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && this._panelView.contains(this.qp2Tab)) {
} else if (!this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && this._panelView.contains(this.qp2Tab.identifier)) {
this._panelView.removeTab(this.qp2Tab.identifier);
}
if (this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && !this._panelView.contains(this.topOperationsTab)) {
if (this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && !this._panelView.contains(this.topOperationsTab.identifier)) {
this._panelView.pushTab(this.topOperationsTab);
} else if (!this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && this._panelView.contains(this.topOperationsTab)) {
} else if (!this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && this._panelView.contains(this.topOperationsTab.identifier)) {
this._panelView.removeTab(this.topOperationsTab.identifier);
}
// restore query model view tabs
this.dynamicModelViewTabs.forEach(tab => {
if (this._panelView.contains(tab)) {
if (this._panelView.contains(tab.identifier)) {
this._panelView.removeTab(tab.identifier);
}
});
@@ -291,7 +291,7 @@ export class QueryResultsView extends Disposable {
let tab = this._register(new QueryModelViewTab(parts[1], this.instantiationService));
tab.view.componentId = parts[2];
this.dynamicModelViewTabs.push(tab);
if (!this._panelView.contains(tab)) {
if (!this._panelView.contains(tab.identifier)) {
this._panelView.pushTab(tab, undefined, true);
}
}
@@ -381,7 +381,7 @@ export class QueryResultsView extends Disposable {
public chartData(dataId: { resultId: number, batchId: number }): void {
this.input?.state.visibleTabs.add(this.chartTab.identifier);
if (!this._panelView.contains(this.chartTab)) {
if (!this._panelView.contains(this.chartTab.identifier)) {
this._panelView.pushTab(this.chartTab);
}
@@ -390,19 +390,19 @@ export class QueryResultsView extends Disposable {
}
public hideChart() {
if (this._panelView.contains(this.chartTab)) {
if (this._panelView.contains(this.chartTab.identifier)) {
this._panelView.removeTab(this.chartTab.identifier);
}
}
public hideResults() {
if (this._panelView.contains(this.resultsTab)) {
if (this._panelView.contains(this.resultsTab.identifier)) {
this._panelView.removeTab(this.resultsTab.identifier);
}
}
public showResults() {
if (!this._panelView.contains(this.resultsTab)) {
if (!this._panelView.contains(this.resultsTab.identifier)) {
this._panelView.pushTab(this.resultsTab, 0);
}
this._panelView.showTab(this.resultsTab.identifier);
@@ -410,16 +410,16 @@ export class QueryResultsView extends Disposable {
public showTopOperations(xml: string) {
this.input?.state.visibleTabs.add(this.topOperationsTab.identifier);
if (!this._panelView.contains(this.topOperationsTab)) {
if (!this._panelView.contains(this.topOperationsTab.identifier)) {
this._panelView.pushTab(this.topOperationsTab);
}
this.topOperationsTab.view.showPlan(xml);
}
public showPlan2() {
if (!this._panelView.contains(this.qp2Tab)) {
if (!this._panelView.contains(this.qp2Tab.identifier)) {
this.input?.state.visibleTabs.add(this.qp2Tab.identifier);
if (!this._panelView.contains(this.qp2Tab)) {
if (!this._panelView.contains(this.qp2Tab.identifier)) {
this._panelView.pushTab(this.qp2Tab);
}
this._panelView.showTab(this.qp2Tab.identifier);
@@ -427,13 +427,13 @@ export class QueryResultsView extends Disposable {
}
public hideTopOperations() {
if (this._panelView.contains(this.topOperationsTab)) {
if (this._panelView.contains(this.topOperationsTab.identifier)) {
this._panelView.removeTab(this.topOperationsTab.identifier);
}
}
public hidePlan2() {
if (this._panelView.contains(this.qp2Tab)) {
if (this._panelView.contains(this.qp2Tab.identifier)) {
this.qp2Tab.clear();
this.input.state.queryPlan2State.clearQueryPlan2State();
this._panelView.removeTab(this.qp2Tab.identifier);
@@ -442,7 +442,7 @@ export class QueryResultsView extends Disposable {
public hideDynamicViewModelTabs() {
this.dynamicModelViewTabs.forEach(tab => {
if (this._panelView.contains(tab)) {
if (this._panelView.contains(tab.identifier)) {
this._panelView.removeTab(tab.identifier);
}
});
@@ -462,7 +462,7 @@ export class QueryResultsView extends Disposable {
this.dynamicModelViewTabs.push(tab);
this.input?.state.visibleTabs.add('querymodelview;' + title + ';' + componentId);
if (!this._panelView.contains(tab)) {
if (!this._panelView.contains(tab.identifier)) {
this._panelView.pushTab(tab, undefined, true);
}

8
src/sql/workbench/services/tableDesigner/browser/tableDesignerComponentInput.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import * as azdata from 'azdata';
import { DesignerViewModel, DesignerEdit, DesignerComponentInput, DesignerView, DesignerTab, DesignerDataPropertyInfo, DropDownProperties, DesignerTableProperties, DesignerEditProcessedEventArgs, DesignerAction, DesignerStateChangedEventArgs, DesignerEditPath } from 'sql/workbench/browser/designer/interfaces';
import { DesignerViewModel, DesignerEdit, DesignerComponentInput, DesignerView, DesignerTab, DesignerDataPropertyInfo, DropDownProperties, DesignerTableProperties, DesignerEditProcessedEventArgs, DesignerAction, DesignerStateChangedEventArgs, DesignerEditPath, DesignerValidationError } from 'sql/workbench/browser/designer/interfaces';
import { TableDesignerProvider } from 'sql/workbench/services/tableDesigner/common/interface';
import { localize } from 'vs/nls';
import { designers } from 'sql/workbench/api/common/sqlExtHostTypes';
@@ -22,6 +22,7 @@ const ErrorDialogTitle: string = localize('tableDesigner.ErrorDialogTitle', "Tab
export class TableDesignerComponentInput implements DesignerComponentInput {
private _viewModel: DesignerViewModel;
private _validationErrors?: DesignerValidationError[];
private _view: DesignerView;
private _valid: boolean = true;
private _dirty: boolean = false;
@@ -75,6 +76,10 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
return this._viewModel;
}
get validationErrors(): DesignerValidationError[] | undefined {
return this._validationErrors;
}
processEdit(edit: DesignerEdit): void {
const telemetryInfo = this.createTelemetryInfo();
telemetryInfo.tableObjectType = this.getObjectTypeFromPath(edit.path);
@@ -85,6 +90,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
this._provider.processTableEdit(this.tableInfo, edit).then(
result => {
this._viewModel = result.viewModel;
this._validationErrors = result.errors;
this.updateState(result.isValid, !equals(this._viewModel, this._originalViewModel), undefined);
this._onEditProcessed.fire({