Adding option to create a resource group in sql migration dms page. (#15856)

* Pushing all changes

* Fixing more stuff

* Added new to the newly created resource group

* removing error message when user starts typing

* removing unused import

* Localizing some string
adding aria lables and loading text

* Adding focus to resource group input box

* switching to name instead of display name as it contains (new) param

* changing focus to resource group dropdown after creation of a new resource group

* fixing typo

extensions/sql-migration/src/dialog/createResourceGroup/createResourceGroupDialog.ts

@@ -0,0 +1,192 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import { azureResource } from 'azureResource';
+import { EventEmitter } from 'events';
+import { createResourceGroup } from '../../api/azure';
+import * as constants from '../../constants/strings';
+
+export class CreateResourceGroupDialog {
+	private _dialogObject!: azdata.window.Dialog;
+	private _view!: azdata.ModelView;
+	private _creationEvent: EventEmitter = new EventEmitter;
+
+	constructor(private _azureAccount: azdata.Account, private _subscription: azureResource.AzureResourceSubscription, private _location: string) {
+		this._dialogObject = azdata.window.createModelViewDialog(
+			'',
+			'CreateResourceGroupDialog',
+			550,
+			'callout',
+			'below',
+			false,
+			true,
+			<azdata.window.IDialogProperties>{
+				height: 20,
+				width: 20,
+				xPos: 0,
+				yPos: 0
+			}
+		);
+	}
+
+	async initialize(): Promise<azureResource.AzureResourceResourceGroup> {
+		let tab = azdata.window.createTab('sql.migration.CreateResourceGroupDialog');
+		await tab.registerContent(async (view: azdata.ModelView) => {
+			this._view = view;
+
+			const resourceGroupDescription = view.modelBuilder.text().withProps({
+				value: constants.RESOURCE_GROUP_DESCRIPTION,
+				CSSStyles: {
+					'font-size': '13px',
+					'margin-bottom': '10px'
+				}
+			}).component();
+			const nameLabel = view.modelBuilder.text().withProps({
+				value: constants.NAME,
+				CSSStyles: {
+					'font-size': '13px',
+					'font-weight': 'bold',
+				}
+			}).component();
+
+			const resourceGroupName = view.modelBuilder.inputBox().withProps({
+				ariaLabel: constants.NAME_OF_NEW_RESOURCE_GROUP
+			}).withValidation(c => {
+				let valid = false;
+				if (c.value!.length > 0 && c.value!.length <= 90 && /^[-\w\._\(\)]+$/.test(c.value!)) {
+					valid = true;
+				}
+				okButton.enabled = valid;
+				return valid;
+			}).component();
+
+			resourceGroupName.onTextChanged(e => {
+				errorBox.updateCssStyles({
+					'display': 'none'
+				});
+			});
+
+			const okButton = view.modelBuilder.button().withProps({
+				label: constants.OK,
+				width: '80px',
+				enabled: false
+			}).component();
+
+			okButton.onDidClick(async e => {
+				errorBox.updateCssStyles({
+					'display': 'none'
+				});
+				okButton.enabled = false;
+				cancelButton.enabled = false;
+				loading.loading = true;
+				try {
+					const resourceGroup = await createResourceGroup(this._azureAccount, this._subscription, resourceGroupName.value!, this._location);
+					this._creationEvent.emit('done', resourceGroup);
+				} catch (e) {
+					errorBox.updateCssStyles({
+						'display': 'inline'
+					});
+					errorBox.text = e.toString();
+					cancelButton.enabled = true;
+					resourceGroupName.validate();
+				} finally {
+					loading.loading = false;
+				}
+			});
+
+			const cancelButton = view.modelBuilder.button().withProps({
+				label: constants.CANCEL,
+				width: '80px'
+			}).component();
+
+			cancelButton.onDidClick(e => {
+				this._creationEvent.emit('done', undefined);
+			});
+
+			const loading = view.modelBuilder.loadingComponent().withProps({
+				loading: false,
+				loadingText: constants.CREATING_RESOURCE_GROUP,
+				loadingCompletedText: constants.RESOURCE_GROUP_CREATED
+			}).component();
+
+
+			const buttonContainer = view.modelBuilder.flexContainer().withProps({
+				CSSStyles: {
+					'margin-top': '5px'
+				}
+			}).component();
+
+			buttonContainer.addItem(okButton, {
+				flex: '0',
+				CSSStyles: {
+					'width': '80px'
+				}
+			});
+
+			buttonContainer.addItem(cancelButton, {
+				flex: '0',
+				CSSStyles: {
+					'margin-left': '8px',
+					'width': '80px'
+				}
+			});
+
+			buttonContainer.addItem(loading, {
+				flex: '0',
+				CSSStyles: {
+					'margin-left': '8px'
+				}
+			});
+
+			const errorBox = this._view.modelBuilder.infoBox().withProps({
+				style: 'error',
+				text: '',
+				CSSStyles: {
+					'display': 'none'
+				}
+			}).component();
+
+			const container = this._view.modelBuilder.flexContainer().withLayout({
+				flexFlow: 'column'
+			}).withItems([
+				resourceGroupDescription,
+				nameLabel,
+				resourceGroupName,
+				errorBox,
+				buttonContainer
+			]).component();
+
+			const formBuilder = view.modelBuilder.formContainer().withFormItems(
+				[
+					{
+						component: container
+					}
+				],
+				{
+					horizontal: false
+				}
+			);
+			const form = formBuilder.withLayout({ width: '100%' }).withProps({
+				CSSStyles: {
+					'padding': '0px !important'
+				}
+			}).component();
+			return view.initializeModel(form).then(v => {
+				resourceGroupName.focus();
+			});
+		});
+		this._dialogObject.okButton.label = constants.APPLY;
+		this._dialogObject.content = [tab];
+		azdata.window.openDialog(this._dialogObject);
+
+		return new Promise((resolve) => {
+			this._creationEvent.once('done', async (resourceGroup: azureResource.AzureResourceResourceGroup) => {
+				azdata.window.closeDialog(this._dialogObject);
+				resolve(resourceGroup);
+			});
+		});
+	}
+}

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

@@ -11,6 +11,7 @@ import * as constants from '../../constants/strings';
 import * as os from 'os';
 import { azureResource } from 'azureResource';
 import { IconPathHelper } from '../../constants/iconPathHelper';
+import { CreateResourceGroupDialog } from '../createResourceGroup/createResourceGroupDialog';
 import * as EventEmitter from 'events';
 
 export class CreateSqlMigrationServiceDialog {
@@ -22,6 +23,7 @@ export class CreateSqlMigrationServiceDialog {
 	private migrationServiceLocation!: azdata.InputBoxComponent;
 	private migrationServiceNameText!: azdata.InputBoxComponent;
 	private _formSubmitButton!: azdata.ButtonComponent;
+	private _createResourceGroupLink!: azdata.HyperlinkComponent;
 
 	private _statusLoadingComponent!: azdata.LoadingComponent;
 	private _refreshLoadingComponent!: azdata.LoadingComponent;
@@ -72,7 +74,7 @@ export class CreateSqlMigrationServiceDialog {
 
 
 				const subscription = this._model._targetSubscription;
-				const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).displayName;
+				const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).name;
 				const location = this._model._targetServerInstance.location;
 				const serviceName = this.migrationServiceNameText.value;
 
@@ -242,6 +244,29 @@ export class CreateSqlMigrationServiceDialog {
 			}
 		}).component();
 
+		this._createResourceGroupLink = this._view.modelBuilder.hyperlink().withProps({
+			label: constants.CREATE_NEW,
+			url: ''
+		}).component();
+
+		this._createResourceGroupLink.onDidClick(async e => {
+			const createResourceGroupDialog = new CreateResourceGroupDialog(this._model._azureAccount, this._model._targetSubscription, this._model._targetServerInstance.location);
+			const createdResourceGroup = await createResourceGroupDialog.initialize();
+			if (createdResourceGroup) {
+				this.migrationServiceResourceGroupDropdown.loading = true;
+				(<azdata.CategoryValue[]>this.migrationServiceResourceGroupDropdown.values).unshift({
+					displayName: constants.NEW_RESOURCE_GROUP(createdResourceGroup.name),
+					name: createdResourceGroup.name
+				});
+				this.migrationServiceResourceGroupDropdown.value = {
+					displayName: createdResourceGroup.name,
+					name: createdResourceGroup.name
+				};
+				this.migrationServiceResourceGroupDropdown.loading = false;
+				this.migrationServiceResourceGroupDropdown.focus();
+			}
+		});
+
 		this.migrationServiceNameText = this._view.modelBuilder.inputBox().component();
 
 		const locationDropdownLabel = this._view.modelBuilder.text().withProps({
@@ -279,6 +304,7 @@ export class CreateSqlMigrationServiceDialog {
 			this.migrationServiceLocation,
 			resourceGroupDropdownLabel,
 			this.migrationServiceResourceGroupDropdown,
+			this._createResourceGroupLink,
 			migrationServiceNameLabel,
 			this.migrationServiceNameText,
 			targetlabel,
@@ -316,7 +342,7 @@ export class CreateSqlMigrationServiceDialog {
 		this.migrationServiceResourceGroupDropdown.loading = true;
 		try {
 			this.migrationServiceResourceGroupDropdown.values = await this._model.getAzureResourceGroupDropdownValues(this._model._targetSubscription);
-			const selectedResourceGroupValue = this.migrationServiceResourceGroupDropdown.values.find(v => v.displayName.toLowerCase() === this._resourceGroupPreset.toLowerCase());
+			const selectedResourceGroupValue = this.migrationServiceResourceGroupDropdown.values.find(v => v.name.toLowerCase() === this._resourceGroupPreset.toLowerCase());
 			this.migrationServiceResourceGroupDropdown.value = (selectedResourceGroupValue) ? selectedResourceGroupValue : this.migrationServiceResourceGroupDropdown.values[0];
 		} finally {
 			this.migrationServiceResourceGroupDropdown.loading = false;
@@ -467,7 +493,7 @@ export class CreateSqlMigrationServiceDialog {
 
 	private async refreshStatus(): Promise<void> {
 		const subscription = this._model._targetSubscription;
-		const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).displayName;
+		const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).name;
 		const location = this._model._targetServerInstance.location;
 
 		const maxRetries = 5;
@@ -513,7 +539,7 @@ export class CreateSqlMigrationServiceDialog {
 	}
 	private async refreshAuthTable(): Promise<void> {
 		const subscription = this._model._targetSubscription;
-		const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).displayName;
+		const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).name;
 		const location = this._model._targetServerInstance.location;
 		const keys = await getSqlMigrationServiceAuthKeys(this._model._azureAccount, subscription, resourceGroup, location, this._createdMigrationService!.name);
 
@@ -589,6 +615,7 @@ export class CreateSqlMigrationServiceDialog {
 		this._formSubmitButton.enabled = enable;
 		this.migrationServiceResourceGroupDropdown.enabled = enable;
 		this.migrationServiceNameText.enabled = enable;
+		this._createResourceGroupLink.enabled = enable;
 	}
 }