Fix clickable being announced for all modelview text (#8384)

* Fix clickable being announced for all modelview text

* Remove unused method

* Move API changes into proposed

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts

@@ -302,7 +302,11 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 				CSSStyles: { 'user-select': 'none' }
 			}).component();
 		serviceStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${overviewIconColumnWidthPx}px`, 'min-width': `${overviewIconColumnWidthPx}px` } });
-		const nameCell = this.modelBuilder.text().withProperties({ value: getServiceNameDisplayText(serviceStatus.serviceName), CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink } }).component();
+		const nameCell = this.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			label: getServiceNameDisplayText(serviceStatus.serviceName),
+			url: '',
+			CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
+		}).component();
 		nameCell.onDidClick(() => {
 			this.dashboard.switchToServiceTab(serviceStatus.serviceName);
 		});
@@ -337,13 +341,13 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
 		endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.hyperlink } });
 	}
 	else if (endpoint.name === Endpoint.sqlServerMaster) {
-		const endpointCell = modelBuilder.text()
+		const endpointCell = modelBuilder.hyperlink()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProperties<azdata.HyperlinkComponentProperties>({
-				value: endpoint.endpoint,
 				title: endpoint.endpoint,
+				label: endpoint.endpoint,
+				url: '',
 				CSSStyles: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.text, ...cssStyles.hyperlink }
-			})
+			}).component();
-			.component();
 		endpointCell.onDidClick(async () => {
 			const connProfile = bdcModel.getSqlServerMasterConnectionProfile();
 			const result = await azdata.connection.connect(connProfile, true, true);

src/sql/azdata.d.ts

@@ -3288,16 +3288,14 @@ declare module 'azdata' {
 	}
 
 	export interface TextComponent extends Component, TextComponentProperties {
-		/**
+
-		 * An event called when the text is clicked
-		 */
-		onDidClick: vscode.Event<any>;
 	}
 
 	export interface ImageComponent extends Component, ImageComponentProperties {
 	}
 
 	export interface HyperlinkComponent extends Component, HyperlinkComponentProperties {
+
 	}
 
 	export interface InputBoxComponent extends Component, InputBoxProperties {

src/sql/azdata.proposed.d.ts

@@ -79,4 +79,11 @@ declare module 'azdata' {
 	export namespace dataprotocol {
 		export function registerSerializationProvider(provider: SerializationProvider): vscode.Disposable;
 	}
+
+	export interface HyperlinkComponent {
+		/**
+		 * An event called when the text is clicked
+		 */
+		onDidClick: vscode.Event<any>;
+	}
 }

src/sql/sqlops.proposed.d.ts

@@ -736,10 +736,7 @@ declare module 'sqlops' {
 	}
 
 	export interface TextComponent extends Component, TextComponentProperties {
-		/**
+
-		 * An event called when the text is clicked
-		 */
-		onDidClick: vscode.Event<any>;
 	}
 
 	export interface ImageComponent extends Component, ImageComponentProperties {
@@ -747,6 +744,10 @@ declare module 'sqlops' {
 	}
 
 	export interface HyperlinkComponent extends Component, HyperlinkComponentProperties {
+		/**
+		 * An event called when the text is clicked
+		 */
+		onDidClick: vscode.Event<any>;
 	}
 
 	export interface InputBoxComponent extends Component, InputBoxProperties {

src/sql/workbench/api/common/extHostModelView.ts

@@ -1176,7 +1176,6 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
 		super(proxy, handle, ModelComponentTypes.Text, id);
 		this.properties = {};
-		this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
 	}
 
 	public get value(): string {
@@ -1192,11 +1191,6 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 	public set title(title: string) {
 		this.setProperty('title', title);
 	}
-
-	public get onDidClick(): vscode.Event<any> {
-		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
-		return emitter && emitter.event;
-	}
 }
 
 class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {
@@ -1534,6 +1528,7 @@ class HyperlinkComponentWrapper extends ComponentWrapper implements azdata.Hyper
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
 		super(proxy, handle, ModelComponentTypes.Hyperlink, id);
 		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
 	}
 
 	public get label(): string {
@@ -1549,6 +1544,11 @@ class HyperlinkComponentWrapper extends ComponentWrapper implements azdata.Hyper
 	public set url(v: string) {
 		this.setProperty('url', v);
 	}
+
+	public get onDidClick(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
+		return emitter && emitter.event;
+	}
 }
 
 class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.GroupContainer {

src/sql/workbench/browser/modelComponents/hyperlink.component.ts

@@ -10,12 +10,12 @@ import {
 
 import * as azdata from 'azdata';
 
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces';
 import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent';
 
 @Component({
 	selector: 'modelview-hyperlink',
-	template: `<a [href]="getUrl()" [title]="title" target="blank">{{getLabel()}}</a>`
+	template: `<a [href]="getUrl()" [title]="title" target="blank" (click)="onClick()">{{getLabel()}}</a>`
 })
 export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
@@ -65,4 +65,14 @@ export default class HyperlinkComponent extends TitledComponent implements IComp
 	public getUrl(): string {
 		return this.url;
 	}
+
+	public onClick(): boolean {
+		this.fireEvent({
+			eventType: ComponentEventType.onDidClick,
+			args: undefined
+		});
+		// If we don't have a URL then return false since that just defaults to the URL for the workbench. We assume
+		// if a blank url is specified then the caller is handling the click themselves.
+		return !!this.url;
+	}
 }

src/sql/workbench/browser/modelComponents/text.component.ts

@@ -11,7 +11,7 @@ import {
 
 import * as azdata from 'azdata';
 
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent';
 
@@ -19,14 +19,14 @@ import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledCom
 	selector: 'modelview-text',
 	template: `
 	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
-		<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
+	<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole"></p>
 		<p  *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
 		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description">
 			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 		</div>
 	</div>
 	<ng-template #noDiv>
-		<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
+	<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [ngStyle]="this.CSSStyles"></p>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
@@ -98,11 +98,4 @@ export default class TextComponent extends TitledComponent implements IComponent
 	public get showDiv(): boolean {
 		return this.requiredIndicator || !!this.description;
 	}
-
-	public onClick() {
-		this.fireEvent({
-			eventType: ComponentEventType.onDidClick,
-			args: undefined
-		});
-	}
 }