Generate Template link and blob container dropdown fix (#25553)

* temp

* dropdown fix

* removed node module chnages

* resolved comments

---------

Co-authored-by: ROSHAN SAHU <roshansahu@microsoft.com>

extensions/sql-migration/src/dialog/skuRecommendationResults/SelectStorageAccountDialog.ts

@@ -6,7 +6,6 @@
 import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import * as azurecore from 'azurecore';
-import { MigrationServiceContext } from '../../models/migrationLocalStorage';
 import * as styles from '../../constants/styles';
 import * as constants from '../../constants/strings';
 import * as utils from '../../api/utils';
@@ -42,7 +41,6 @@ export class SelectStorageAccountDialog {
 	private _dialog: azdata.window.Dialog;
 	private _view!: azdata.ModelView;
 	private _disposables: vscode.Disposable[] = [];
-	private _serviceContext!: MigrationServiceContext;
 	private _azureAccounts!: azdata.Account[];
 	private _accountTenants!: azurecore.Tenant[];
 	private _azureTenant!: azurecore.Tenant;
@@ -278,7 +276,7 @@ export class SelectStorageAccountDialog {
 						? utils.deepClone(selectedLocation)!
 						: undefined!;
 				} else {
-					this.migrationStateModel._location = undefined!;
+					this._location = undefined!;
 				}
 
 				await utils.clearDropDown(this._azureResourceGroupDropdown);
@@ -340,8 +338,6 @@ export class SelectStorageAccountDialog {
 					this._storageAccount = (selectedStorageAccount)
 						? utils.deepClone(selectedStorageAccount)!
 						: undefined!;
-				} else {
-					this._serviceContext.migrationService = undefined;
 				}
 				await utils.clearDropDown(this._blobContainerDropdown);
 				await this._populateBlobContainer();
@@ -365,6 +361,16 @@ export class SelectStorageAccountDialog {
 				CSSStyles: { ...DROPDOWN_CSS },
 			}).component();
 
+		this._disposables.push(
+			this._blobContainerDropdown.onValueChanged(async (value) => {
+				if (value && value !== undefined) {
+					const selectedBlobContainer = this._blobContainers?.find(rg => rg.name === (<azdata.CategoryValue>this._blobContainerDropdown.value)?.displayName);
+					this._blobContainer = (selectedBlobContainer)
+						? utils.deepClone(selectedBlobContainer)!
+						: undefined!;
+				}
+			}));
+
 		return this._view.modelBuilder.flexContainer()
 			.withItems([
 				subscriptionDropdownLabel,

extensions/sql-migration/src/wizard/assessmentDetailsPage/assessmentDetailsHeader.ts

@@ -32,6 +32,7 @@ export class AssessmentDetailsHeader {
 	private _generateTemplateLink!: azdata.HyperlinkComponent;
 	private _linksContainer!: azdata.FlexContainer;
 	private _separator!: azdata.TextComponent;
+	private _azureRecommendationLoadingText!: azdata.TextComponent;
 
 	// public getter for target type selection drop down.
 	public get targetTypeDropdown() {
@@ -219,8 +220,18 @@ export class AssessmentDetailsHeader {
 				CSSStyles: styles.SEPARATOR,
 			}).component();
 
+			this._azureRecommendationLoadingText = this._view.modelBuilder.text().withProps({
+				value: constants.LOADING_RECOMMENDATIONS,
+				CSSStyles: {
+					'font-size': '13px',
+					'font-weight': '400',
+					'line-height': '18px',
+					'display': 'none'
+				},
+			}).component();
+
 			this._linksContainer.addItems([this._viewDetailsLink, this._separator, this._generateTemplateLink]);
-			cardContainer.addItem(this._linksContainer);
+			cardContainer.addItems([this._azureRecommendationLoadingText, this._linksContainer]);
 		}
 
 		this._valueContainers.push(cardText);
@@ -232,23 +243,14 @@ export class AssessmentDetailsHeader {
 		// this value is populated to handle the case when user selects a target type and want to resume later.
 		this._targetSelectionDropdown.value = this.getTargetTypeBasedOnModel(migrationStateModel._targetType);
 
-		const assessmentHeaderValues: { value: string | string[] | undefined; }[] = [];
-		if (!this._readonly) {
-			const recommendedConfigurations = await utils.getRecommendedConfiguration(migrationStateModel._targetType, migrationStateModel);
-			let configurationValue = recommendedConfigurations[0] ?? "--";
-			if (migrationStateModel._targetType === MigrationTargetType.SQLVM && recommendedConfigurations?.length > 1) {
-				configurationValue = recommendedConfigurations[0] + "\n" + recommendedConfigurations[1];
-			}
-			assessmentHeaderValues.push({
-				value: configurationValue
-			})
+		await this._viewDetailsLink.updateCssStyles({ 'display': 'none' });
+		await this._generateTemplateLink.updateCssStyles({ 'display': 'none' });
+		await this._separator.updateCssStyles({ 'display': 'none' });
 
-			if (configurationValue !== "--") {
-				await this._viewDetailsLink.updateCssStyles({ 'display': 'block' });
-				await this._generateTemplateLink.updateCssStyles({ 'display': 'block' });
-				await this._separator.updateCssStyles({ 'display': 'block' });
-			}
-		}
+
+
+		const assessmentHeaderValues: { value: string | string[] | undefined; }[] = [];
+		assessmentHeaderValues.push({ value: "" });
 		assessmentHeaderValues.push(
 			{
 				value: String(migrationStateModel._assessmentResults?.databaseAssessments?.length)
@@ -261,6 +263,27 @@ export class AssessmentDetailsHeader {
 		let index = 0;
 		this._valueContainers.forEach((valueContainer) =>
 			valueContainer.value = assessmentHeaderValues[index++].value);
+
+		if (!this._readonly) {
+			const recommendedConfigurations = await utils.getRecommendedConfiguration(migrationStateModel._targetType, migrationStateModel);
+			await this._azureRecommendationLoadingText.updateCssStyles({ 'display': 'block' });
+			await this.migrationStateModel.getSkuRecommendations();
+			let configurationValue = recommendedConfigurations[0] ?? "--";
+			if (migrationStateModel._targetType === MigrationTargetType.SQLVM && recommendedConfigurations?.length > 1) {
+				configurationValue = recommendedConfigurations[0] + "\n" + recommendedConfigurations[1];
+			}
+
+			this._valueContainers[0].value = configurationValue;
+
+			if (configurationValue !== "--") {
+				await this._viewDetailsLink.updateCssStyles({ 'display': 'block' });
+				await this._generateTemplateLink.updateCssStyles({ 'display': 'block' });
+				await this._separator.updateCssStyles({ 'display': 'block' });
+			}
+
+			await this._azureRecommendationLoadingText.updateCssStyles({ 'display': 'none' });
+		}
+
 	}
 
 	// function that create target selection dropdown