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
2026-01-20 09:35:38 -05:00 · 2021-07-01 13:48:10 -07:00
parent b1a9d6baa1
commit 225788a121
9 changed files with 270 additions and 5 deletions
--- a/extensions/sql-migration/src/dialog/createResourceGroup/createResourceGroupDialog.ts
+++ b/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);
+			});
+		});
+	}
+}