Designer: property descriptions (#17668)

* format * added strings * format doc * use codicon instead * show descriptions in property pane only * fix ssdt string bug * fix overflow option * review comments * review comments * changes
2026-01-23 09:35:39 -05:00 · 2021-11-16 14:50:05 -08:00
parent 6725e07ece
commit 2a127beb28
8 changed files with 119 additions and 1 deletions
--- a/src/sql/workbench/browser/designer/designer.ts
+++ b/src/sql/workbench/browser/designer/designer.ts
@@ -551,6 +551,11 @@ export class Designer extends Disposable implements IThemable {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: args.value });
 					}
 				});
+				input.onInputFocus(() => {
+					if (!isMainView) {
+						this._propertiesPane.updateDescription(componentDefinition);
+					}
+				});
 				if (setWidth && inputProperties.width !== undefined) {
 					input.width = inputProperties.width as number;
 				}
@@ -566,6 +571,11 @@ export class Designer extends Disposable implements IThemable {
 				dropdown.onDidSelect((e) => {
 					this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected });
 				});
+				dropdown.onDidFocus(() => {
+					if (!isMainView) {
+						this._propertiesPane.updateDescription(componentDefinition);
+					}
+				});
 				component = dropdown;
 				break;
 			case 'checkbox':
@@ -578,6 +588,11 @@ export class Designer extends Disposable implements IThemable {
 				checkbox.onChange((newValue) => {
 					this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue });
 				});
+				checkbox.onFocus(() => {
+					if (!isMainView) {
+						this._propertiesPane.updateDescription(componentDefinition);
+					}
+				});
 				component = checkbox;
 				break;
 			case 'table':
--- a/src/sql/workbench/browser/designer/designerPropertiesPane.ts
+++ b/src/sql/workbench/browser/designer/designerPropertiesPane.ts
@@ -23,11 +23,17 @@ export class DesignerPropertiesPane {
 	private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
 	private _groupHeaders: HTMLElement[] = [];

+	// Description variables
+	private _descriptionContainer: HTMLElement;
+	private _descriptionTitleContainer: HTMLElement;
+	private _descriptionTextContainer: HTMLElement;
+
 	constructor(container: HTMLElement, private _createComponents: CreateComponentsFunc, private _setComponentValue: SetComponentValueFunc) {
 		const titleContainer = container.appendChild(DOM.$('.title-container'));
 		this._titleElement = titleContainer.appendChild(DOM.$('div'));
 		this._contentElement = container.appendChild(DOM.$('.properties-content.components-grid'));
 		this._titleElement.innerText = localize('tableDesigner.propertiesPaneTitle', "Properties");
+		this.createDescriptionComponent(container);
 	}

 	public get groupHeaders(): HTMLElement[] {
@@ -42,6 +48,15 @@ export class DesignerPropertiesPane {
 		return this._objectPath;
 	}

+	public updateDescription(definition: DesignerDataPropertyInfo) {
+		const title: string = definition.componentProperties.title;
+		const description: string = definition.description;
+		if (title && description) {
+			this._descriptionTitleContainer.innerText = title;
+			this._descriptionTextContainer.innerText = description;
+		}
+	}
+
 	public clear(): void {
 		this._componentMap.forEach((value) => {
 			value.component.dispose();
@@ -52,6 +67,15 @@ export class DesignerPropertiesPane {
 		this._objectPath = undefined;
 	}

+	private createDescriptionComponent(container: HTMLElement) {
+		this._descriptionContainer = container.appendChild(DOM.$('.description-component'));
+		this._descriptionTitleContainer = this._descriptionContainer.appendChild(DOM.$('')).appendChild(DOM.$('.description-component-label'));
+		this._descriptionTitleContainer.classList.add('codicon', 'info');
+		this._descriptionTextContainer = this._descriptionContainer.appendChild(DOM.$('.description-component-content'));
+		this._descriptionTitleContainer.innerText = '';
+		this._descriptionTextContainer.innerText = '';
+	}
+
 	public show(item: ObjectInfo): void {
 		if (!equals(item.path, this._objectPath)) {
 			this.clear();
--- a/src/sql/workbench/browser/designer/media/designer.css
+++ b/src/sql/workbench/browser/designer/media/designer.css
@@ -102,3 +102,25 @@
 	font-weight: bold;
 	line-height: 25px;
 }
+
+.designer-component .description-component {
+	margin: 15px;
+	height: 90px;
+	overflow-y: auto;
+}
+
+.designer-component .description-component-label.codicon.info {
+	background-repeat: no-repeat;
+	background-position: 2px center;
+	padding-left: 25px;
+	background-size: 16px;
+	font-size: 15px;
+	font-weight: 600;
+	margin-block-start: 0px;
+	scroll-margin-block-end: 0px;
+}
+
+.designer-component .description-component-content {
+	padding-top: 10px;
+	padding-left: 25px;
+}
--- a/src/sql/workbench/services/tableDesigner/browser/tableDesignerComponentInput.ts
+++ b/src/sql/workbench/services/tableDesigner/browser/tableDesignerComponentInput.ts
@@ -10,6 +10,7 @@ import { localize } from 'vs/nls';
 import { designers } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { Emitter, Event } from 'vs/base/common/event';
 import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
+import { ColumnPropertyDescriptions, TablePropertyDescriptions } from 'sql/workbench/services/tableDesigner/browser/tableDesignerStrings';
 import { deepClone, equals } from 'vs/base/common/objects';

 export class TableDesignerComponentInput implements DesignerComponentInput {
@@ -149,6 +150,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			{
 				componentType: 'dropdown',
 				propertyName: designers.TableProperty.Schema,
+				description: TablePropertyDescriptions.SCHEMA,
 				componentProperties: <DropDownProperties>{
 					title: localize('tableDesigner.schemaTitle', "Schema"),
 					values: designerInfo.schemas
@@ -156,6 +158,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'input',
 				propertyName: designers.TableProperty.Description,
+				description: TablePropertyDescriptions.DESCRIPTION,
 				componentProperties: {
 					title: localize('tableDesigner.descriptionTitle', "Description")
 				}
@@ -175,6 +178,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			{
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.Name,
+				description: ColumnPropertyDescriptions.NAME,
 				componentProperties: {
 					title: localize('tableDesigner.columnNameTitle', "Name"),
 					width: 150
@@ -182,6 +186,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'dropdown',
 				propertyName: designers.TableColumnProperty.Type,
+				description: ColumnPropertyDescriptions.DATA_TYPE,
 				componentProperties: {
 					title: localize('tableDesigner.columnTypeTitle', "Type"),
 					width: 100,
@@ -190,6 +195,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.Length,
+				description: ColumnPropertyDescriptions.LENGTH,
 				componentProperties: {
 					title: localize('tableDesigner.columnLengthTitle', "Length"),
 					width: 60
@@ -197,6 +203,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.DefaultValue,
+				description: ColumnPropertyDescriptions.DEFAULT_VALUE_OR_BINDING,
 				componentProperties: {
 					title: localize('tableDesigner.columnDefaultValueTitle', "Default Value"),
 					width: 150
@@ -204,18 +211,21 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'checkbox',
 				propertyName: designers.TableColumnProperty.AllowNulls,
+				description: ColumnPropertyDescriptions.ALLOW_NULLS,
 				componentProperties: {
 					title: localize('tableDesigner.columnAllowNullTitle', "Allow Nulls"),
 				}
 			}, {
 				componentType: 'checkbox',
 				propertyName: designers.TableColumnProperty.IsPrimaryKey,
+				description: ColumnPropertyDescriptions.PRIMARY_KEY,
 				componentProperties: {
 					title: localize('tableDesigner.columnIsPrimaryKeyTitle', "Primary Key"),
 				}
 			}, {
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.Precision,
+				description: ColumnPropertyDescriptions.PRECISION,
 				componentProperties: {
 					title: localize('tableDesigner.columnPrecisionTitle', "Precision"),
 					width: 60
@@ -223,6 +233,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			}, {
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.Scale,
+				description: ColumnPropertyDescriptions.NAME,
 				componentProperties: {
 					title: localize('tableDesigner.columnScaleTitle', "Scale"),
 					width: 60
@@ -273,6 +284,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
 			components: [{
 				componentType: 'input',
 				propertyName: designers.TableColumnProperty.Name,
+				description: TablePropertyDescriptions.NAME,
 				componentProperties: {
 					title: localize('tableDesigner.nameTitle', "Table name"),
 					width: 200
--- a/src/sql/workbench/services/tableDesigner/browser/tableDesignerStrings.ts
+++ b/src/sql/workbench/services/tableDesigner/browser/tableDesignerStrings.ts
@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { localize } from 'vs/nls';
+
+export const TablePropertyDescriptions = {
+	NAME: localize('designer.table.description.name', "The name of the table object."),
+	DESCRIPTION: localize('designer.table.description.description', "Description for the table."),
+	SCHEMA: localize('designer.table.description.schema', "The schema that contains the table.")
+};
+
+export const ColumnPropertyDescriptions = {
+	NAME: localize('designer.column.description.name', "The name of the column object."),
+	ALLOW_NULLS: localize('designer.column.description.allowNulls', "Specifies whether the column may have a NULL value."),
+	DATA_TYPE: localize('designer.column.description.dataType', "Displays the data type name for the column"),
+	DEFAULT_VALUE_OR_BINDING: localize('designer.column.description.defaultValueBinding', "A predefined global default value for the column or binding."),
+	DESCRIPTION: localize('designer.column.description.description', "Description for the column."),
+	LENGTH: localize('designer.column.description.length', "The maximum length (in characters) that can be stored in this database object."),
+	PRECISION: localize('designer.column.description.precision', "For numeric data, the maximum number of decimal digits that can be stored in this database object."),
+	PRIMARY_KEY: localize('designer.column.description.primaryKey', "Specifies whether the column is included in the primary key for the table.")
+};