Making source config more intiutive (#14849)

Adding loading component for assessment card

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

@@ -274,3 +274,6 @@ export function ENTER_YOUR_SQL_CREDS(sqlServerName: string) {
 	return localize('sql.migration.enter.your.sql.creds', "Enter the credentials for source SQL server instance ‘{0}’", sqlServerName);
 }
 export const USERNAME = localize('sql.migration.username', "Username");
+export const AUTHENTICATION_TYPE = localize('sql.migration.authentication.type', "Authentication Type");
+export const SQL_LOGIN = localize('sql.migration.sql.login', "SQL Login");
+export const WINDOWS_AUTHENTICATION = localize('sql.migration.windows.auth', "Windows Authentication");

extensions/sql-migration/src/models/stateMachine.ts

@@ -38,6 +38,11 @@ export enum MigrationTargetType {
 	SQLMI = 'sqlmi'
 }
 
+export enum MigrationSourceAuthenticationType {
+	Integrated = 'WindowsAuthentication',
+	Sql = 'SqlAuthentication'
+}
+
 export enum MigrationCutover {
 	ONLINE,
 	OFFLINE
@@ -88,7 +93,7 @@ export class MigrationStateModel implements Model, vscode.Disposable {
 	public _accountTenants!: azurecore.Tenant[];
 
 	public _connecionProfile!: azdata.connection.ConnectionProfile;
-	public _authenticationType!: string;
+	public _authenticationType!: MigrationSourceAuthenticationType;
 	public _sqlServerUsername!: string;
 	public _sqlServerPassword!: string;
 

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

@@ -30,6 +30,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 	private _resourceDropdown!: azdata.DropDownComponent;
 	private _rbg!: azdata.RadioCardGroupComponent;
 	private eventListener!: vscode.Disposable;
+	private _rbgLoader!: azdata.LoadingComponent;
 
 	private _supportedProducts: Product[] = [
 		{
@@ -222,10 +223,13 @@ export class SKURecommendationPage extends MigrationWizardPage {
 
 		this._rbg.selectedCardId = MigrationTargetType.SQLMI;
 
+		this._rbgLoader = this._view.modelBuilder.loadingComponent().withItem(
+			this._rbg
+		).component();
 
 		const component = view.modelBuilder.divContainer().withItems(
 			[
-				this._rbg
+				this._rbgLoader
 			]
 		).component();
 		return component;
@@ -246,9 +250,11 @@ export class SKURecommendationPage extends MigrationWizardPage {
 	private async constructDetails(): Promise<void> {
 		const serverName = (await this.migrationStateModel.getSourceConnectionProfile()).serverName;
 		this._igComponent.value = constants.ASSESSMENT_COMPLETED(serverName);
-		await this.migrationStateModel.getServerAssessments();
+		try {
-		if (this.migrationStateModel._assessmentResults) {
+			await this.migrationStateModel.getServerAssessments();
 			this._detailsComponent.value = constants.SKU_RECOMMENDATION_ALL_SUCCESSFUL(this.migrationStateModel._assessmentResults.databaseAssessments.length);
+		} catch (e) {
+			console.log(e);
 		}
 		this.refreshCardText();
 	}
@@ -298,14 +304,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 
 
 	public async onPageEnter(): Promise<void> {
-		try {
+		this.constructDetails();
-			this.migrationStateModel.getServerAssessments().then((result) => {
-				this.constructDetails();
-			});
-		} catch (e) {
-			console.log(e);
-		}
-
 		this.populateSubscriptionDropdown();
 		this.wizard.registerNavigationValidator((pageChangeInfo) => {
 			const errors: string[] = [];
@@ -362,6 +361,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 	}
 
 	public refreshCardText(): void {
+		this._rbgLoader.loading = true;
 		this.wizard.message = {
 			text: '',
 			level: azdata.window.MessageLevel.Error
@@ -399,7 +399,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 				cards: this._rbg.cards
 			});
 		}
-
+		this._rbgLoader.loading = false;
 	}
 }
 

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

@@ -6,12 +6,14 @@
 import * as azdata from 'azdata';
 import * as os from 'os';
 import { MigrationWizardPage } from '../models/migrationWizardPage';
-import { MigrationStateModel, StateChangeEvent } from '../models/stateMachine';
+import { MigrationSourceAuthenticationType, MigrationStateModel, StateChangeEvent } from '../models/stateMachine';
 import * as constants from '../constants/strings';
 import { createLabelTextComponent, createHeadingTextComponent } from './wizardController';
 
 export class SqlSourceConfigurationPage extends MigrationWizardPage {
 	private _view!: azdata.ModelView;
+	private _usernameInput!: azdata.InputBoxComponent;
+	private _password!: azdata.InputBoxComponent;
 
 	constructor(wizard: azdata.window.Wizard, migrationStateModel: MigrationStateModel) {
 		super(wizard, azdata.window.createWizardPage(constants.SOURCE_CONFIGURATION, 'MigrationModePage'), migrationStateModel);
@@ -50,11 +52,15 @@ export class SqlSourceConfigurationPage extends MigrationWizardPage {
 		switch (connectionProfile.authenticationType) {
 			case 'SqlLogin':
 				username = connectionProfile.userName;
-				this.migrationStateModel._authenticationType = 'SqlAuthentication';
+				this.migrationStateModel._authenticationType = MigrationSourceAuthenticationType.Sql;
 				break;
 			case 'Integrated':
-				username = os.userInfo().username;
+				if (process.env.USERDOMAIN && process.env.USERNAME) {
-				this.migrationStateModel._authenticationType = 'WindowsAuthentication';
+					username = process.env.USERDOMAIN + '\\' + process.env.USERNAME;
+				} else {
+					username = os.userInfo().username;
+				}
+				this.migrationStateModel._authenticationType = MigrationSourceAuthenticationType.Integrated;
 				break;
 			default:
 				username = '';
@@ -70,15 +76,25 @@ export class SqlSourceConfigurationPage extends MigrationWizardPage {
 			}
 		);
 
+		const authenticationTypeLable = this._view.modelBuilder.text().withProps({
+			value: constants.AUTHENTICATION_TYPE
+		}).component();
+
+		const authenticationTypeInput = this._view.modelBuilder.inputBox().withProps({
+			value: this.migrationStateModel._authenticationType === MigrationSourceAuthenticationType.Sql ? 'SQL Login' : 'Windows Authentication',
+			enabled: false
+		}).component();
+
 		const usernameLable = this._view.modelBuilder.text().withProps({
 			value: constants.USERNAME,
 			requiredIndicator: true
 		}).component();
-		const usernameInput = this._view.modelBuilder.inputBox().withProps({
+		this._usernameInput = this._view.modelBuilder.inputBox().withProps({
 			value: username,
-			required: true
+			required: true,
+			enabled: false
 		}).component();
-		usernameInput.onTextChanged(value => {
+		this._usernameInput.onTextChanged(value => {
 			this.migrationStateModel._sqlServerUsername = value;
 		});
 
@@ -86,12 +102,12 @@ export class SqlSourceConfigurationPage extends MigrationWizardPage {
 			value: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_LABEL,
 			requiredIndicator: true
 		}).component();
-		const passwordInput = this._view.modelBuilder.inputBox().withProps({
+		this._password = this._view.modelBuilder.inputBox().withProps({
 			value: (await azdata.connection.getCredentials(this.migrationStateModel.sourceConnectionId)).password,
 			required: true,
 			inputType: 'password'
 		}).component();
-		passwordInput.onTextChanged(value => {
+		this._password.onTextChanged(value => {
 			this.migrationStateModel._sqlServerPassword = value;
 		});
 
@@ -99,10 +115,12 @@ export class SqlSourceConfigurationPage extends MigrationWizardPage {
 			[
 				sourceCredText,
 				enterYourCredText,
+				authenticationTypeLable,
+				authenticationTypeInput,
 				usernameLable,
-				usernameInput,
+				this._usernameInput,
 				passwordLabel,
-				passwordInput
+				this._password
 			]
 		).withLayout({
 			flexFlow: 'column'