Dev/brih/task/make dropdowns searchable (#15615)

* make dropdown controls editable, searchable

* updte method name and return type

* update error message, and dropdown index selection logic

* address review feedback
This commit is contained in:
brian-harris
2021-06-07 17:55:08 -07:00
committed by GitHub
parent f7dc9ec2be
commit d8b693341e
8 changed files with 171 additions and 84 deletions

View File

@@ -11,6 +11,8 @@ import { Blob, MigrationSourceAuthenticationType, MigrationStateModel, Migration
import * as constants from '../constants/strings';
import { IconPathHelper } from '../constants/iconPathHelper';
import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
import { findDropDownItemIndex, selectDropDownIndex } from '../api/utils';
export class DatabaseBackupPage extends MigrationWizardPage {
private _view!: azdata.ModelView;
@@ -392,6 +394,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
private createTargetDatabaseContainer(): azdata.FlexContainer {
const WIZARD_INPUT_COMPONENT_WIDTH = '200px';
const headerCssStyles: azdata.CssStyles = {
'border': 'none',
'font-size': '13px',
@@ -433,7 +436,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
rowCssStyles: rowCssStyle,
headerCssStyles: headerCssStyles,
isReadOnly: true,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
},
{
displayName: constants.TARGET_DATABASE_NAME,
@@ -441,7 +444,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
rowCssStyles: rowCssStyle,
headerCssStyles: headerCssStyles,
isReadOnly: true,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
},
{
displayName: constants.RESOURCE_GROUP,
@@ -449,7 +452,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
rowCssStyles: rowCssStyle,
headerCssStyles: headerCssStyles,
isReadOnly: true,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
},
{
displayName: constants.STORAGE_ACCOUNT,
@@ -457,7 +460,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
rowCssStyles: rowCssStyle,
headerCssStyles: headerCssStyles,
isReadOnly: true,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
},
{
displayName: constants.BLOB_CONTAINER,
@@ -465,7 +468,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
rowCssStyles: rowCssStyle,
headerCssStyles: headerCssStyles,
isReadOnly: true,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
}
]
}).component();
@@ -551,12 +554,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
}
}).component();
this._networkShareStorageAccountResourceGroupDropdown = this._view.modelBuilder.dropDown().withProps({
width: WIZARD_INPUT_COMPONENT_WIDTH
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
}).component();
this._networkShareStorageAccountResourceGroupDropdown.onValueChanged(e => {
if (e.selected) {
this.migrationStateModel._databaseBackup.networkShare.resourceGroup = this.migrationStateModel.getAzureResourceGroup(e.index);
this.loadNetworkShareStorageDropdown();
this._networkShareStorageAccountResourceGroupDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._networkShareStorageAccountResourceGroupDropdown, value);
if (selectedIndex > -1) {
this.migrationStateModel._databaseBackup.networkShare.resourceGroup = this.migrationStateModel.getAzureResourceGroup(selectedIndex);
await this.loadNetworkShareStorageDropdown();
}
});
@@ -572,11 +578,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._networkShareContainerStorageAccountDropdown = this._view.modelBuilder.dropDown()
.withProps({
required: true,
width: WIZARD_INPUT_COMPONENT_WIDTH
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
}).component();
this._networkShareContainerStorageAccountDropdown.onValueChanged((value) => {
if (value.selected) {
this.migrationStateModel._databaseBackup.networkShare.storageAccount = this.migrationStateModel.getStorageAccount(value.index);
const selectedIndex = findDropDownItemIndex(this._networkShareContainerStorageAccountDropdown, value);
if (selectedIndex > -1) {
this.migrationStateModel._databaseBackup.networkShare.storageAccount = this.migrationStateModel.getStorageAccount(selectedIndex);
}
});
@@ -587,8 +596,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
height: 25
}).component();
this._networkShareContainerStorageAccountRefreshButton.onDidClick((e) => {
this.loadNetworkShareStorageDropdown();
this._networkShareContainerStorageAccountRefreshButton.onDidClick(async (value) => {
await this.loadNetworkShareStorageDropdown();
});
const storageAccountContainer = this._view.modelBuilder.flexContainer().component();
@@ -628,6 +637,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
public async onPageEnter(): Promise<void> {
if (this.migrationStateModel.refreshDatabaseBackupPage) {
const WIZARD_INPUT_COMPONENT_WIDTH = '200px';
const connectionProfile = await this.migrationStateModel.getSourceConnectionProfile();
const queryProvider = azdata.dataprotocol.getProvider<azdata.QueryProvider>((await this.migrationStateModel.getSourceConnectionProfile()).providerId, azdata.DataProviderType.QueryProvider);
const query = 'select SUSER_NAME()';
@@ -656,7 +666,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
const targetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
required: true,
value: db,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
}).withValidation(c => {
if (this._networkShareTargetDatabaseNames.filter(t => t.value === c.value).length > 1) { //Making sure no databases have duplicate values.
c.validationErrorMessage = constants.DUPLICATE_NAME_ERROR;
@@ -680,7 +690,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
const blobtargetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
required: true,
value: db,
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH
}).withValidation(c => {
if (this._blobContainerTargetDatabaseNames.filter(t => t.value === c.value).length > 1) { //Making sure no databases have duplicate values.
c.validationErrorMessage = constants.DUPLICATE_NAME_ERROR;
@@ -702,24 +712,31 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._blobContainerTargetDatabaseNames.push(blobtargetDatabaseInput);
const blobContainerResourceDropdown = this._view.modelBuilder.dropDown().withProps({
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
}).component();
blobContainerResourceDropdown.onValueChanged(e => {
if (e.selected && e.selected !== constants.RESOURCE_GROUP_NOT_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].resourceGroup = this.migrationStateModel.getAzureResourceGroup(e.index);
blobContainerResourceDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(blobContainerResourceDropdown, value);
if (selectedIndex > -1 && value !== constants.RESOURCE_GROUP_NOT_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].resourceGroup = this.migrationStateModel.getAzureResourceGroup(selectedIndex);
}
this.loadblobStorageDropdown(index);
await this.loadblobStorageDropdown(index);
});
this._blobContainerResourceGroupDropdowns.push(blobContainerResourceDropdown);
const blobContainerStorageAccountDropdown = this._view.modelBuilder.dropDown()
.withProps({
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
}).component();
blobContainerStorageAccountDropdown.onValueChanged(async (value) => {
if (value.selected && value.selected !== constants.NO_STORAGE_ACCOUNT_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].storageAccount = this.migrationStateModel.getStorageAccount(value.index);
const selectedIndex = findDropDownItemIndex(blobContainerStorageAccountDropdown, value);
if (selectedIndex > -1 && value !== constants.NO_STORAGE_ACCOUNT_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].storageAccount = this.migrationStateModel.getStorageAccount(selectedIndex);
}
await this.loadBlobContainerDropdown(index);
});
@@ -727,11 +744,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
const blobContainerDropdown = this._view.modelBuilder.dropDown()
.withProps({
width: '200px'
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
}).component();
blobContainerDropdown.onValueChanged(async (value) => {
if (value.selected && value.selected !== constants.NO_BLOBCONTAINERS_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].blobContainer = this.migrationStateModel.getBlobContainer(value.index);
blobContainerDropdown.onValueChanged(value => {
const selectedIndex = findDropDownItemIndex(blobContainerStorageAccountDropdown, value);
if (selectedIndex > -1 && value !== constants.NO_BLOBCONTAINERS_FOUND) {
this.migrationStateModel._databaseBackup.blobs[index].blobContainer = this.migrationStateModel.getBlobContainer(selectedIndex);
}
});
this._blobContainerDropdowns.push(blobContainerDropdown);
@@ -953,11 +973,12 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._networkShareStorageAccountResourceGroupDropdown.loading = true;
try {
this._networkShareStorageAccountResourceGroupDropdown.values = await this.migrationStateModel.getAzureResourceGroupDropdownValues(this.migrationStateModel._databaseBackup.subscription);
selectDropDownIndex(this._networkShareStorageAccountResourceGroupDropdown, 0);
} catch (error) {
console.log(error);
} finally {
this._networkShareStorageAccountResourceGroupDropdown.loading = false;
this.loadNetworkShareStorageDropdown();
await this.loadNetworkShareStorageDropdown();
}
}
@@ -965,6 +986,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._networkShareContainerStorageAccountDropdown.loading = true;
try {
this._networkShareContainerStorageAccountDropdown.values = await this.migrationStateModel.getStorageAccountValues(this.migrationStateModel._databaseBackup.subscription, this.migrationStateModel._databaseBackup.networkShare.resourceGroup);
selectDropDownIndex(this._networkShareContainerStorageAccountDropdown, 0);
} catch (error) {
console.log(error);
} finally {
@@ -976,7 +998,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._blobContainerResourceGroupDropdowns.forEach(v => v.loading = true);
try {
const resourceGroupValues = await this.migrationStateModel.getAzureResourceGroupDropdownValues(this.migrationStateModel._databaseBackup.subscription);
this._blobContainerResourceGroupDropdowns.forEach(v => v.values = resourceGroupValues);
this._blobContainerResourceGroupDropdowns.forEach(dropDown => {
dropDown.values = resourceGroupValues;
selectDropDownIndex(dropDown, 0);
});
} catch (error) {
console.log(error);
} finally {
@@ -988,6 +1013,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._blobContainerStorageAccountDropdowns[index].loading = true;
try {
this._blobContainerStorageAccountDropdowns[index].values = await this.migrationStateModel.getStorageAccountValues(this.migrationStateModel._databaseBackup.subscription, this.migrationStateModel._databaseBackup.blobs[index].resourceGroup);
selectDropDownIndex(this._blobContainerStorageAccountDropdowns[index], 0);
} catch (error) {
console.log(error);
} finally {
@@ -1000,6 +1026,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
try {
const blobContainerValues = await this.migrationStateModel.getBlobContainerValues(this.migrationStateModel._databaseBackup.subscription, this.migrationStateModel._databaseBackup.blobs[index].storageAccount);
this._blobContainerDropdowns[index].values = blobContainerValues;
selectDropDownIndex(this._blobContainerDropdowns[index], 0);
} catch (error) {
console.log(error);
} finally {