From 70e756b82de5315b36039a6d4ebe317eb220bf33 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 4 May 2023 21:53:42 -0700
Subject: [PATCH] fix duplicate required indicator (#22976)

---
 src/sql/workbench/browser/modal/dialogHelper.ts     | 13 ++-----------
 src/sql/workbench/browser/modal/optionsDialog.ts    |  5 +++--
 .../services/connection/browser/connectionWidget.ts |  3 ++-
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/sql/workbench/browser/modal/dialogHelper.ts b/src/sql/workbench/browser/modal/dialogHelper.ts
index ad50a1f49f..c509b0f15b 100644
--- a/src/sql/workbench/browser/modal/dialogHelper.ts
+++ b/src/sql/workbench/browser/modal/dialogHelper.ts
@@ -9,8 +9,7 @@ import { append, $ } from 'vs/base/browser/dom';
 import * as types from 'vs/base/common/types';
 import * as azdata from 'azdata';
 import { wrapStringWithNewLine } from 'sql/workbench/common/sqlWorkbenchUtils';
-
-export const requiredIndicatorSpan = 'span.required-indicator';
+import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 
 export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>, showRequiredIndicator: boolean = false, title?: string, titleMaxWidth?: number): HTMLElement {
 	let rowContainer = append(container, $('tr'));
@@ -31,7 +30,7 @@ export function appendRow(container: HTMLElement, label: string, labelClass: str
 
 	append(labelContainer, $('div')).innerText = label;
 	if (showRequiredIndicator) {
-		appendRequiredIndicator(labelContainer);
+		labelContainer.classList.add(RequiredIndicatorClassName);
 	}
 	let inputCellContainer = append(rowContainer, $(`td.${cellContainerClass}`));
 
@@ -81,14 +80,6 @@ export function getCategoryName(categories: azdata.CategoryValue[], categoryDisp
 	return categoryName;
 }
 
-export function appendRequiredIndicator(labelContainer: HTMLElement): HTMLElement {
-	const indicator = append(labelContainer, $(requiredIndicatorSpan));
-	indicator.innerText = '*';
-	indicator.style.color = 'red';
-	indicator.style.marginLeft = '5px';
-	return indicator;
-}
-
 export function getOptionContainerByName(parentContainer: HTMLElement, optionName: string): HTMLElement | undefined {
 	for (let i = 0; i < parentContainer.childElementCount; i++) {
 		if (parentContainer.children.item(i).classList.contains(`option-${optionName}`)) {
diff --git a/src/sql/workbench/browser/modal/optionsDialog.ts b/src/sql/workbench/browser/modal/optionsDialog.ts
index 77b6e27ea4..0f5c3975c0 100644
--- a/src/sql/workbench/browser/modal/optionsDialog.ts
+++ b/src/sql/workbench/browser/modal/optionsDialog.ts
@@ -32,6 +32,7 @@ import { GroupHeaderBackground } from 'sql/platform/theme/common/colorRegistry';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { AdsWidget } from 'sql/base/browser/ui/adsWidget';
 import { Actions } from 'sql/platform/connection/common/constants';
+import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 
 export interface IOptionsDialogOptions extends IModalOptions {
 	cancelLabel?: string;
@@ -246,7 +247,7 @@ export class OptionsDialog extends Modal {
 						let element = DialogHelper.getOptionContainerByName(container, optionAction.optionName) as HTMLElement;
 						// Append required indicator when not present.
 						if (element && element.childElementCount === 1) {
-							DialogHelper.appendRequiredIndicator(element);
+							element.classList.add(RequiredIndicatorClassName);
 						}
 					}
 					// Force selection event if option value is available.
@@ -274,7 +275,7 @@ export class OptionsDialog extends Modal {
 				let element = DialogHelper.getOptionContainerByName(container, optionAction.optionName) as HTMLElement;
 				// Append required indicator when not present.
 				if (element && element.childElementCount === 1) {
-					DialogHelper.appendRequiredIndicator(element);
+					element.classList.add(RequiredIndicatorClassName);
 				}
 			}
 		} else {
diff --git a/src/sql/workbench/services/connection/browser/connectionWidget.ts b/src/sql/workbench/services/connection/browser/connectionWidget.ts
index 2a7b928b55..dde54cf0df 100644
--- a/src/sql/workbench/services/connection/browser/connectionWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts
@@ -43,6 +43,7 @@ import { AdsWidget } from 'sql/base/browser/ui/adsWidget';
 import { createCSSRule } from 'vs/base/browser/dom';
 import { AuthLibrary, getAuthLibrary } from 'sql/workbench/services/accountManagement/utils';
 import { adjustForMssqlAppName } from 'sql/platform/connection/common/utils';
+import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 
 const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string");
 
@@ -362,7 +363,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 			if (optionAction.required) {
 				let element = DialogHelper.getOptionContainerByName(this._tableContainer, optionAction.optionName);
 				if (element) {
-					DialogHelper.appendRequiredIndicator(element);
+					element.classList.add(RequiredIndicatorClassName);
 				}
 			}
 		} else {