diff --git a/extensions/sql-migration/src/constants/strings.ts b/extensions/sql-migration/src/constants/strings.ts index 80ab2ecea4..49f5a1a087 100644 --- a/extensions/sql-migration/src/constants/strings.ts +++ b/extensions/sql-migration/src/constants/strings.ts @@ -217,6 +217,7 @@ export const CLOSE = localize('sql.migration.close', "Close"); export const DATA_UPLOADED = localize('sql.migration.data.uploaded.size', "Data Uploaded/Size"); export const COPY_THROUGHPUT = localize('sql.migration.copy.throughput', "Copy Throughput (MBPS)"); export const NEW_SUPPORT_REQUEST = localize('sql.migration.newSupportRequest', "New support request"); +export const ALL_FIELDS_REQUIRED = localize('sql.migration.all.fields.required', 'All fields are required.'); //Summary Page export const SUMMARY_PAGE_TITLE = localize('sql.migration.summary.page.title', "Summary"); diff --git a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts index 3bd73bd552..279232120b 100644 --- a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts +++ b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts @@ -227,6 +227,7 @@ export class CreateSqlMigrationServiceDialog { const resourceGroupDropdownLabel = this._view.modelBuilder.text().withProps({ value: constants.RESOURCE_GROUP, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -242,6 +243,7 @@ export class CreateSqlMigrationServiceDialog { const migrationServiceNameLabel = this._view.modelBuilder.text().withProps({ value: constants.NAME, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' diff --git a/extensions/sql-migration/src/wizard/databaseBackupPage.ts b/extensions/sql-migration/src/wizard/databaseBackupPage.ts index 05d218867a..6e7d959226 100644 --- a/extensions/sql-migration/src/wizard/databaseBackupPage.ts +++ b/extensions/sql-migration/src/wizard/databaseBackupPage.ts @@ -193,6 +193,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { const usernameLable = this._view.modelBuilder.text().withProps({ value: constants.USERNAME, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -210,6 +211,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { const sqlPasswordLabel = this._view.modelBuilder.text().withProps({ value: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_LABEL, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -245,6 +247,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { const networkLocationInputBoxLabel = this._view.modelBuilder.text().withProps({ value: constants.DATABASE_BACKUP_NETWORK_SHARE_LOCATION_LABEL, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -287,6 +290,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.DATABASE_BACKUP_NETWORK_SHARE_WINDOWS_USER_LABEL, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -317,6 +321,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_LABEL, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -497,7 +502,16 @@ export class DatabaseBackupPage extends MigrationWizardPage { this._newtworkShareTargetDatabaseNamesTable ]).component(); + const allFieldsRequiredLabel = this._view.modelBuilder.text() + .withProps({ + value: constants.ALL_FIELDS_REQUIRED, + CSSStyles: { + 'font-size': '13px', + } + }).component(); + this._blobTableContainer = this._view.modelBuilder.flexContainer().withItems([ + allFieldsRequiredLabel, this._blobContainerTargetDatabaseNamesTable ]).component(); @@ -536,6 +550,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.SUBSCRIPTION, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -552,6 +567,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.LOCATION, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -568,6 +584,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.RESOURCE_GROUP, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' @@ -593,6 +610,7 @@ export class DatabaseBackupPage extends MigrationWizardPage { .withProps({ value: constants.STORAGE_ACCOUNT, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold' diff --git a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts index 93ca8de763..0d247848fe 100644 --- a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts +++ b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts @@ -157,6 +157,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage { const subscriptionLabel = this._view.modelBuilder.text().withProps({ value: constants.SUBSCRIPTION, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -164,11 +165,13 @@ export class IntergrationRuntimePage extends MigrationWizardPage { }).component(); this._subscription = this._view.modelBuilder.inputBox().withProps({ enabled: false, + required: true, width: WIZARD_INPUT_COMPONENT_WIDTH, }).component(); const locationLabel = this._view.modelBuilder.text().withProps({ value: constants.LOCATION, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -176,12 +179,13 @@ export class IntergrationRuntimePage extends MigrationWizardPage { }).component(); this._location = this._view.modelBuilder.inputBox().withProps({ enabled: false, + required: true, width: WIZARD_INPUT_COMPONENT_WIDTH, }).component(); - const resourceGroupLabel = this._view.modelBuilder.text().withProps({ value: constants.RESOURCE_GROUP, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -191,9 +195,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage { ariaLabel: constants.RESOURCE_GROUP, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); - this._disposables.push(this._resourceGroupDropdown.onValueChanged(async (value) => { const selectedIndex = findDropDownItemIndex(this._resourceGroupDropdown, value); this.migrationStateModel._sqlMigrationServiceResourceGroup = this.migrationStateModel.getAzureResourceGroup(selectedIndex).name; @@ -204,19 +208,19 @@ export class IntergrationRuntimePage extends MigrationWizardPage { const migrationServcieDropdownLabel = this._view.modelBuilder.text().withProps({ value: constants.IR_PAGE_TITLE, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', } }).component(); - this._dmsDropdown = this._view.modelBuilder.dropDown().withProps({ ariaLabel: constants.IR_PAGE_TITLE, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); - this._disposables.push(this._dmsDropdown.onValueChanged(async (value) => { if (value && value !== constants.SQL_MIGRATION_SERVICE_NOT_FOUND_ERROR) { if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) { @@ -533,4 +537,3 @@ export class IntergrationRuntimePage extends MigrationWizardPage { } } } - diff --git a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts b/extensions/sql-migration/src/wizard/skuRecommendationPage.ts index 848cf46a71..5a1edc6ec0 100644 --- a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts +++ b/extensions/sql-migration/src/wizard/skuRecommendationPage.ts @@ -289,6 +289,7 @@ export class SKURecommendationPage extends MigrationWizardPage { const managedInstanceSubscriptionDropdownLabel = this._view.modelBuilder.text().withProps({ value: constants.SUBSCRIPTION, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -298,6 +299,7 @@ export class SKURecommendationPage extends MigrationWizardPage { ariaLabel: constants.SUBSCRIPTION, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); this._disposables.push(this._managedInstanceSubscriptionDropdown.onValueChanged(async (value) => { @@ -313,6 +315,7 @@ export class SKURecommendationPage extends MigrationWizardPage { const azureLocationLabel = this._view.modelBuilder.text().withProps({ value: constants.LOCATION, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -322,6 +325,7 @@ export class SKURecommendationPage extends MigrationWizardPage { ariaLabel: constants.LOCATION, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); this._disposables.push(this._azureLocationDropdown.onValueChanged(async (value) => { @@ -335,6 +339,7 @@ export class SKURecommendationPage extends MigrationWizardPage { const azureResourceGroupLabel = this._view.modelBuilder.text().withProps({ value: constants.RESOURCE_GROUP, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', @@ -344,6 +349,7 @@ export class SKURecommendationPage extends MigrationWizardPage { ariaLabel: constants.RESOURCE_GROUP, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); this._disposables.push(this._azureResourceGroupDropdown.onValueChanged(async (value) => { @@ -353,19 +359,21 @@ export class SKURecommendationPage extends MigrationWizardPage { await this.populateResourceInstanceDropdown(); } })); + this._resourceDropdownLabel = this._view.modelBuilder.text().withProps({ value: constants.MANAGED_INSTANCE, width: WIZARD_INPUT_COMPONENT_WIDTH, + requiredIndicator: true, CSSStyles: { 'font-size': '13px', 'font-weight': 'bold', } }).component(); - this._resourceDropdown = this._view.modelBuilder.dropDown().withProps({ ariaLabel: constants.MANAGED_INSTANCE, width: WIZARD_INPUT_COMPONENT_WIDTH, editable: true, + required: true, fireOnTextChange: true, }).component(); this._disposables.push(this._resourceDropdown.onValueChanged(value => {