Add required indicator across SQL Migration extension (#16057)

extensions/sql-migration/src/constants/strings.ts

@@ -217,6 +217,7 @@ export const CLOSE = localize('sql.migration.close', "Close");
 export const DATA_UPLOADED = localize('sql.migration.data.uploaded.size', "Data Uploaded/Size");
 export const COPY_THROUGHPUT = localize('sql.migration.copy.throughput', "Copy Throughput (MBPS)");
 export const NEW_SUPPORT_REQUEST = localize('sql.migration.newSupportRequest', "New support request");
+export const ALL_FIELDS_REQUIRED = localize('sql.migration.all.fields.required', 'All fields are required.');
 
 //Summary Page
 export const SUMMARY_PAGE_TITLE = localize('sql.migration.summary.page.title', "Summary");

extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts

@@ -227,6 +227,7 @@ export class CreateSqlMigrationServiceDialog {
 
 		const resourceGroupDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.RESOURCE_GROUP,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold'
@@ -242,6 +243,7 @@ export class CreateSqlMigrationServiceDialog {
 
 		const migrationServiceNameLabel = this._view.modelBuilder.text().withProps({
 			value: constants.NAME,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold'

extensions/sql-migration/src/wizard/databaseBackupPage.ts

@@ -193,6 +193,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 		const usernameLable = this._view.modelBuilder.text().withProps({
 			value: constants.USERNAME,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -210,6 +211,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 		const sqlPasswordLabel = this._view.modelBuilder.text().withProps({
 			value: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_LABEL,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -245,6 +247,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 		const networkLocationInputBoxLabel = this._view.modelBuilder.text().withProps({
 			value: constants.DATABASE_BACKUP_NETWORK_SHARE_LOCATION_LABEL,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold'
@@ -287,6 +290,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.DATABASE_BACKUP_NETWORK_SHARE_WINDOWS_USER_LABEL,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'
@@ -317,6 +321,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_LABEL,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'
@@ -497,7 +502,16 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			this._newtworkShareTargetDatabaseNamesTable
 		]).component();
 
+		const allFieldsRequiredLabel = this._view.modelBuilder.text()
+			.withProps({
+				value: constants.ALL_FIELDS_REQUIRED,
+				CSSStyles: {
+					'font-size': '13px',
+				}
+			}).component();
+
 		this._blobTableContainer = this._view.modelBuilder.flexContainer().withItems([
+			allFieldsRequiredLabel,
 			this._blobContainerTargetDatabaseNamesTable
 		]).component();
 
@@ -536,6 +550,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.SUBSCRIPTION,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'
@@ -552,6 +567,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.LOCATION,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'
@@ -568,6 +584,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.RESOURCE_GROUP,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'
@@ -593,6 +610,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.STORAGE_ACCOUNT,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				requiredIndicator: true,
 				CSSStyles: {
 					'font-size': '13px',
 					'font-weight': 'bold'

extensions/sql-migration/src/wizard/integrationRuntimePage.ts

@@ -157,6 +157,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 
 		const subscriptionLabel = this._view.modelBuilder.text().withProps({
 			value: constants.SUBSCRIPTION,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -164,11 +165,13 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		}).component();
 		this._subscription = this._view.modelBuilder.inputBox().withProps({
 			enabled: false,
+			required: true,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 		}).component();
 
 		const locationLabel = this._view.modelBuilder.text().withProps({
 			value: constants.LOCATION,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -176,12 +179,13 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		}).component();
 		this._location = this._view.modelBuilder.inputBox().withProps({
 			enabled: false,
+			required: true,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 		}).component();
 
-
 		const resourceGroupLabel = this._view.modelBuilder.text().withProps({
 			value: constants.RESOURCE_GROUP,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -191,9 +195,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			ariaLabel: constants.RESOURCE_GROUP,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
-
 		this._disposables.push(this._resourceGroupDropdown.onValueChanged(async (value) => {
 			const selectedIndex = findDropDownItemIndex(this._resourceGroupDropdown, value);
 			this.migrationStateModel._sqlMigrationServiceResourceGroup = this.migrationStateModel.getAzureResourceGroup(selectedIndex).name;
@@ -204,19 +208,19 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 
 		const migrationServcieDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.IR_PAGE_TITLE,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
 			}
 		}).component();
-
 		this._dmsDropdown = this._view.modelBuilder.dropDown().withProps({
 			ariaLabel: constants.IR_PAGE_TITLE,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
-
 		this._disposables.push(this._dmsDropdown.onValueChanged(async (value) => {
 			if (value && value !== constants.SQL_MIGRATION_SERVICE_NOT_FOUND_ERROR) {
 				if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) {
@@ -533,4 +537,3 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		}
 	}
 }
-

extensions/sql-migration/src/wizard/skuRecommendationPage.ts

@@ -289,6 +289,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		const managedInstanceSubscriptionDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.SUBSCRIPTION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -298,6 +299,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 			ariaLabel: constants.SUBSCRIPTION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
 		this._disposables.push(this._managedInstanceSubscriptionDropdown.onValueChanged(async (value) => {
@@ -313,6 +315,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		const azureLocationLabel = this._view.modelBuilder.text().withProps({
 			value: constants.LOCATION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -322,6 +325,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 			ariaLabel: constants.LOCATION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
 		this._disposables.push(this._azureLocationDropdown.onValueChanged(async (value) => {
@@ -335,6 +339,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		const azureResourceGroupLabel = this._view.modelBuilder.text().withProps({
 			value: constants.RESOURCE_GROUP,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
@@ -344,6 +349,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 			ariaLabel: constants.RESOURCE_GROUP,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
 		this._disposables.push(this._azureResourceGroupDropdown.onValueChanged(async (value) => {
@@ -353,19 +359,21 @@ export class SKURecommendationPage extends MigrationWizardPage {
 				await this.populateResourceInstanceDropdown();
 			}
 		}));
+
 		this._resourceDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.MANAGED_INSTANCE,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			requiredIndicator: true,
 			CSSStyles: {
 				'font-size': '13px',
 				'font-weight': 'bold',
 			}
 		}).component();
-
 		this._resourceDropdown = this._view.modelBuilder.dropDown().withProps({
 			ariaLabel: constants.MANAGED_INSTANCE,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			editable: true,
+			required: true,
 			fireOnTextChange: true,
 		}).component();
 		this._disposables.push(this._resourceDropdown.onValueChanged(value => {