add required indicator (#22971)

src/sql/base/browser/ui/label/label.ts

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./media/label';
+
+export const RequiredIndicatorClassName = 'required-indicator';

src/sql/base/browser/ui/label/media/label.css

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.required-indicator:after {
+	content: '*';
+	color: red;
+	margin-left: 2px;
+}

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

@@ -21,6 +21,7 @@ import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/
 import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 
 export enum TextType {
 	Normal = 'Normal',
@@ -50,7 +51,6 @@ const errorTextClass = 'error-text';
 		<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
 			<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive"></p>
 			<div #textContainer id="textContainer"></div>
-			<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
 			<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
 				<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 			</div>
@@ -160,7 +160,13 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		if (typeof this.value !== 'string') {
 			return;
 		}
-		DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
+		const textContainerElement = <HTMLElement>this.textContainer.nativeElement;
+		DOM.clearNode((textContainerElement));
+		if (this.requiredIndicator) {
+			textContainerElement.classList.add(RequiredIndicatorClassName);
+		} else {
+			textContainerElement.classList.remove(RequiredIndicatorClassName);
+		}
 		const links = this.getPropertyOrDefault<azdata.LinkArea[]>((props) => props.links, []);
 		// The text may contain link placeholders so go through and create those and insert them as needed now
 		let text = this.value;
@@ -177,13 +183,13 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 			if (curText && typeof text === 'string') {
 				const textElement = this.createTextElement();
 				textElement.innerText = text.slice(0, placeholderIndex);
-				(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
+				textContainerElement.appendChild(textElement);
 			}
 
 			// Now insert the link element
 			const link = links[i];
 			const linkElement = this._register(this.instantiationService.createInstance(Link,
-				(<HTMLElement>this.textContainer.nativeElement), {
+				textContainerElement, {
 				label: link.text,
 				href: link.url
 			}, undefined));
@@ -195,7 +201,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 				}
 			}
 
-			(<HTMLElement>this.textContainer.nativeElement).appendChild(linkElement.el);
+			textContainerElement.appendChild(linkElement.el);
 
 			// And finally update the text to remove the text up through the placeholder we just added
 			text = text.slice(placeholderIndex + 3);
@@ -205,7 +211,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		if (text && typeof text === 'string') {
 			const textElement = this.createTextElement();
 			textElement.innerText = text;
-			(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
+			textContainerElement.appendChild(textElement);
 		}
 	}
 

src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts

@@ -30,6 +30,7 @@ import { attachModalDialogStyler } from 'sql/workbench/common/styler';
 import { assertIsDefined, isUndefinedOrNull } from 'vs/base/common/types';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
+import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 
 interface IRenderedServerGroupDialog {
 	groupNameInputBox: InputBox;
@@ -96,13 +97,14 @@ export class ServerGroupDialog extends Modal {
 		// Connection Group Name
 		const serverGroupNameLabel = localize('connectionGroupName', "Server group name");
 
-		DOM.append(body, DOM.$('.dialog-label')).innerText = serverGroupNameLabel;
+		DOM.append(body, DOM.$(`.dialog-label.${RequiredIndicatorClassName}`)).innerText = serverGroupNameLabel;
 
 		this._groupNameInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, {
 			validationOptions: {
 				validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: localize('MissingGroupNameError', "Group name is required.") }) : null
 			},
-			ariaLabel: serverGroupNameLabel
+			ariaLabel: serverGroupNameLabel,
+			required: true
 		});
 
 		// Connection Group Description