Added clickable more info links to designer validation issues (#19365)

* added clickable more info links to designer validation issues

* fix selection issue

* remove more info if none

* change quote style

* clear the dom node

src/sql/workbench/browser/designer/designer.ts

@@ -983,7 +983,6 @@ export class Designer extends Disposable implements IThemable {
 				table.onBlur((e) => {
 					currentTableActions.forEach(a => a.updateState());
 					table.grid.setSelectedRows([]);
-					table.grid.resetActiveCell();
 				});
 				component = table;
 				break;

src/sql/workbench/browser/designer/designerIssuesTabPanelView.ts

@@ -15,6 +15,8 @@ import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticip
 import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground } from 'vs/platform/theme/common/colorRegistry';
 import { Codicon } from 'vs/base/common/codicons';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Link } from 'vs/platform/opener/browser/link';
 
 export class DesignerIssuesTabPanelView extends Disposable implements IPanelView {
 	private _container: HTMLElement;
@@ -23,13 +25,16 @@ export class DesignerIssuesTabPanelView extends Disposable implements IPanelView
 
 	public readonly onIssueSelected: Event<DesignerPropertyPath> = this._onIssueSelected.event;
 
-	constructor(@IThemeService private _themeService: IThemeService) {
+	constructor(
+		@IThemeService private _themeService: IThemeService,
+		@IInstantiationService private _instantiationService: IInstantiationService
+	) {
 		super();
 	}
 
 	render(container: HTMLElement): void {
 		this._container = container.appendChild(DOM.$('.issues-container'));
-		this._issueList = new List<DesignerIssue>('designerIssueList', this._container, new DesignerIssueListDelegate(), [new TableFilterListRenderer()], {
+		this._issueList = new List<DesignerIssue>('designerIssueList', this._container, new DesignerIssueListDelegate(), [this._instantiationService.createInstance(TableFilterListRenderer)], {
 			multipleSelectionSupport: false,
 			keyboardSupport: true,
 			mouseSupport: true,
@@ -87,14 +92,21 @@ class DesignerIssueListDelegate implements IListVirtualDelegate<DesignerIssue> {
 interface DesignerIssueListItemTemplate {
 	issueText: HTMLDivElement;
 	issueIcon: HTMLDivElement;
+	issueMoreInfoLink: HTMLDivElement;
 }
 
 class TableFilterListRenderer implements IListRenderer<DesignerIssue, DesignerIssueListItemTemplate> {
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService
+	) { }
+
 	renderTemplate(container: HTMLElement): DesignerIssueListItemTemplate {
 		const data: DesignerIssueListItemTemplate = Object.create(null);
 		const issueItem = container.appendChild(DOM.$('.issue-item'));
 		data.issueIcon = issueItem.appendChild(DOM.$(''));
 		data.issueText = issueItem.appendChild(DOM.$('.issue-text'));
+		data.issueMoreInfoLink = issueItem.appendChild(DOM.$('.issue-more-info'));
 		return data;
 	}
 
@@ -114,6 +126,15 @@ class TableFilterListRenderer implements IListRenderer<DesignerIssue, DesignerIs
 				break;
 		}
 		templateData.issueIcon.className = `issue-icon ${iconClass}`;
+		if (element.moreInfoLink) {
+			const linkElement = this._instantiationService.createInstance(Link, {
+				label: localize('designer.moreInfoLink', "More information"),
+				href: element.moreInfoLink
+			}, undefined);
+			templateData.issueMoreInfoLink.appendChild(linkElement.el);
+		} else {
+			DOM.clearNode(templateData.issueMoreInfoLink);
+		}
 	}
 
 	public disposeTemplate(templateData: DesignerIssueListItemTemplate): void {

src/sql/workbench/browser/designer/interfaces.ts

@@ -239,7 +239,12 @@ export type DesignerPropertyPath = (string | number)[];
 export const DesignerRootObjectPath: DesignerPropertyPath = [];
 
 export type DesignerIssueSeverity = 'error' | 'warning' | 'information';
-export type DesignerIssue = { description: string, propertyPath?: DesignerPropertyPath, severity: DesignerIssueSeverity };
+export type DesignerIssue = {
+	description: string,
+	propertyPath?: DesignerPropertyPath,
+	severity: DesignerIssueSeverity,
+	moreInfoLink?: string;
+};
 
 export interface DesignerEditResult {
 	isValid: boolean;

src/sql/workbench/browser/designer/media/designer.css

@@ -46,12 +46,15 @@
 }
 
 .designer-component .issues-container .issue-item .issue-text {
-	flex: 1 1 auto;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	user-select: text;
 }
 
+.designer-component .issues-container .issue-item .issue-more-info {
+	padding-left: 10px;
+}
+
 .designer-component .tabbed-panel-container {
 	flex: 1 1 auto;
 	overflow: hidden;