Disable the upgradeExistingDatabases radio button if databases don't exist. (#13067)

* Created a function to disable the upgrade existing databases radio button if no databases exist.

* Created helper functions for the upgrade database radio button and new database radio button and abstracted the code accordingly.

* Made changes to helper function names and signatures, and added the enableUpgradeRadioButton() helper function.

* Made some changes to the enableUpgradeRadioButton helper function.

* Made changes to helper functions to ensure the radio buttons enable accordingly when a server is changed from the server dropdown.

* Made changes to helper functions and checks.

* Made additional checks to the populateDatabaseDropdown function.

* Added the logic to select the new radio button when upgrade radio button is disabled.

extensions/dacpac/src/wizard/pages/deployConfigPage.ts

@@ -16,6 +16,9 @@ export class DeployConfigPage extends DacFxConfigPage {
 	private databaseComponent: azdata.FormComponent;
 	private formBuilder: azdata.FormBuilder;
 	private form: azdata.FormContainer;
+	// variables for radio buttons to update them if no databases exist.
+	private upgradeRadioButton: azdata.RadioButtonComponent;
+	private newRadioButton: azdata.RadioButtonComponent;
 
 	public constructor(instance: DataTierApplicationWizard, wizardPage: azdata.window.WizardPage, model: DacFxDataModel, view: azdata.ModelView) {
 		super(instance, wizardPage, model, view);
@@ -49,7 +52,7 @@ export class DeployConfigPage extends DacFxConfigPage {
 
 	async onPageEnter(): Promise<boolean> {
 		let r1 = await this.populateServerDropdown();
-		let r2 = await this.populateDeployDatabaseDropdown();
+		let r2 = await this.populateDatabaseDropdown();
 		// get existing database values to verify if new database name is valid
 		await this.getDatabaseValues();
 		return r1 && r2;
@@ -96,7 +99,7 @@ export class DeployConfigPage extends DacFxConfigPage {
 		};
 	}
 
-	private async createRadiobuttons(): Promise<azdata.FormComponent> {
+	private createRadiobuttons(): azdata.FormComponent {
 		let upgradeRadioButton = this.view.modelBuilder.radioButton()
 			.withProperties({
 				name: 'updateExistingOrCreateNew',
@@ -110,48 +113,25 @@ export class DeployConfigPage extends DacFxConfigPage {
 			}).component();
 
 		upgradeRadioButton.onDidClick(() => {
-			this.model.upgradeExisting = true;
-			this.formBuilder.removeFormItem(this.databaseComponent);
-			this.formBuilder.addFormItem(this.databaseDropdownComponent, { horizontal: true, componentWidth: 400 });
-			this.model.database = (<azdata.CategoryValue>this.databaseDropdown.value).name;
 
-			// add deploy plan page and remove and re-add summary page so that it has the correct page number
+			this.updateUpgradeRadioButton();
-			this.instance.wizard.removePage(DeployNewOperationPath.summary);
-			let deployPlanPage = this.instance.pages.get(PageName.deployPlan);
-			let summaryPage = this.instance.pages.get(PageName.summary);
-			this.instance.wizard.addPage(deployPlanPage.wizardPage, DeployOperationPath.deployPlan);
-			this.instance.wizard.addPage(summaryPage.wizardPage, DeployOperationPath.summary);
 		});
 
 		newRadioButton.onDidClick(() => {
-			this.model.upgradeExisting = false;
-			this.formBuilder.removeFormItem(this.databaseDropdownComponent);
-			this.formBuilder.addFormItem(this.databaseComponent, { horizontal: true, componentWidth: 400 });
-			this.model.database = this.databaseTextBox.value;
-			this.instance.setDoneButton(Operation.deploy);
 
-			// remove deploy plan page and readd summary page so that it has the correct page number
+			this.updateNewRadioButton();
-			this.instance.wizard.removePage(DeployOperationPath.summary);
-			this.instance.wizard.removePage(DeployOperationPath.deployPlan);
-			let summaryPage = this.instance.pages.get(PageName.summary);
-			this.instance.wizard.addPage(summaryPage.wizardPage, DeployNewOperationPath.summary);
 		});
 
+		// Saving instances of the radio buttons to update if databases don't exist
+		this.upgradeRadioButton = upgradeRadioButton;
+		this.newRadioButton = newRadioButton;
+
 		//Initialize with upgrade existing true
 		upgradeRadioButton.checked = true;
 		this.model.upgradeExisting = true;
 
-		let flexRadioButtonsModel = this.view.modelBuilder.flexContainer()
+		// Display the radio buttons on the window
-			.withLayout({
+		return this.createRadioButtonFlexContainer(upgradeRadioButton, newRadioButton);
-				flexFlow: 'row',
-			}).withItems([
-				upgradeRadioButton, newRadioButton]
-			).component();
-
-		return {
-			component: flexRadioButtonsModel,
-			title: loc.targetDatabase
-		};
 	}
 
 	protected async createDeployDatabaseDropdown(): Promise<azdata.FormComponent> {
@@ -175,7 +155,7 @@ export class DeployConfigPage extends DacFxConfigPage {
 		};
 	}
 
-	protected async populateDeployDatabaseDropdown(): Promise<boolean> {
+	protected async populateDatabaseDropdown(): Promise<boolean> {
 		this.databaseLoader.loading = true;
 		this.databaseDropdown.updateProperties({ values: [] });
 		if (!this.model.server) {
@@ -184,15 +164,100 @@ export class DeployConfigPage extends DacFxConfigPage {
 		}
 		let values = await this.getDatabaseValues();
 
+		this.databaseDropdown.updateProperties({
+			values: values
+		});
+
+		this.databaseLoader.loading = false;
+
+		/*
+		Check to avoid having the new radio button checked by default.
+		*/
+		if (this.newRadioButton.checked) {
+			this.newRadioButton.checked = values.length === 0 ? true : false;
+			this.upgradeRadioButton.enabled = values.length === 0 ? false : true;
+		}
+
+		/*
+		Check if databases exist for the selected server.
+		*/
+		if (values.length === 0) {
+			/*
+			Set the upgrade radio button to be disabled and call the updateNewRadioButton function
+			to update the new radio button accordingly.
+			*/
+			this.upgradeRadioButton.enabled = false;
+			this.newRadioButton.checked = true;
+			this.updateNewRadioButton();
+		}
+		else {
+			/*
+			Set the upgrade radio button to be enabled and call the updateUpgradeRadioButton function
+			to update the upgrade radio button accordingly.
+			*/
+			this.upgradeRadioButton.enabled = true;
+			this.updateUpgradeRadioButton();
+		}
+
 		//set the database to the first dropdown value if upgrading, otherwise it should get set to the textbox value
 		if (this.model.upgradeExisting) {
 			this.model.database = values[0];
 		}
 
-		this.databaseDropdown.updateProperties({
-			values: values
-		});
-		this.databaseLoader.loading = false;
 		return true;
 	}
+
+	/*
+	Function that is used to update the window if upgrade radio button is selected.
+	*/
+	private updateUpgradeRadioButton(): void {
+		this.model.upgradeExisting = true;
+		this.formBuilder.removeFormItem(this.databaseComponent);
+		this.formBuilder.addFormItem(this.databaseDropdownComponent, { horizontal: true, componentWidth: 400 });
+
+		// add deploy plan page and remove and re-add summary page so that it has the correct page number
+		if (this.instance.wizard.pages.length < 4) {
+			this.instance.wizard.removePage(DeployNewOperationPath.summary);
+			let deployPlanPage = this.instance.pages.get(PageName.deployPlan);
+			let summaryPage = this.instance.pages.get(PageName.summary);
+			this.instance.wizard.addPage(deployPlanPage.wizardPage, DeployOperationPath.deployPlan);
+			this.instance.wizard.addPage(summaryPage.wizardPage, DeployOperationPath.summary);
+		}
+	}
+
+	/*
+	Function that is used to update the window if new radio button is selected.
+	*/
+	private updateNewRadioButton(): void {
+		this.model.upgradeExisting = false;
+		this.formBuilder.removeFormItem(this.databaseDropdownComponent);
+		this.formBuilder.addFormItem(this.databaseComponent, { horizontal: true, componentWidth: 400 });
+		this.instance.setDoneButton(Operation.deploy);
+
+		// remove deploy plan page and read summary page so that it has the correct page number
+		if (this.instance.wizard.pages.length >= 4) {
+			this.instance.wizard.removePage(DeployOperationPath.summary);
+			this.instance.wizard.removePage(DeployOperationPath.deployPlan);
+			let summaryPage = this.instance.pages.get(PageName.summary);
+			this.instance.wizard.addPage(summaryPage.wizardPage, DeployNewOperationPath.summary);
+		}
+	}
+
+	/*
+	Function to create the radio button flex container on the window.
+	*/
+	private createRadioButtonFlexContainer(upgradeRadioButton: azdata.RadioButtonComponent, newRadioButton: azdata.RadioButtonComponent): azdata.FormComponent {
+		let flexRadioButtonsModel = this.view.modelBuilder.flexContainer()
+			.withLayout({
+				flexFlow: 'row',
+			}).withItems([
+				upgradeRadioButton, newRadioButton]
+			).component();
+
+		return {
+			component: flexRadioButtonsModel,
+			title: loc.targetDatabase
+		};
+	}
+
 }