From 3fbca593bebf2fd7a495e13892bf437f070e347e Mon Sep 17 00:00:00 2001 From: Barbara Valdez <34872381+barbaravaldez@users.noreply.github.com> Date: Tue, 15 Aug 2023 13:36:02 -0700 Subject: [PATCH] Refactor create inputbox method (#24113) Co-authored-by: Charles Gagnon --- .../ui/applicationRoleDialog.ts | 9 +- .../src/objectManagement/ui/databaseDialog.ts | 104 +++++++++++-- .../objectManagement/ui/databaseRoleDialog.ts | 19 ++- .../objectManagement/ui/findObjectDialog.ts | 5 +- .../src/objectManagement/ui/loginDialog.ts | 9 +- .../ui/serverPropertiesDialog.ts | 146 +++++++++++++++--- .../objectManagement/ui/serverRoleDialog.ts | 19 ++- .../src/objectManagement/ui/userDialog.ts | 10 +- extensions/mssql/src/ui/dialogBase.ts | 30 ++-- 9 files changed, 284 insertions(+), 67 deletions(-) diff --git a/extensions/mssql/src/objectManagement/ui/applicationRoleDialog.ts b/extensions/mssql/src/objectManagement/ui/applicationRoleDialog.ts index 1d0bf46061..2962e09c9b 100644 --- a/extensions/mssql/src/objectManagement/ui/applicationRoleDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/applicationRoleDialog.ts @@ -61,9 +61,14 @@ export class ApplicationRoleDialog extends PrincipalDialogBase { + this.nameInput = this.createInputBox(async (newValue) => { this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + }, { + ariaLabel: localizedConstants.NameText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput); this.defaultSchemaDropdown = this.createDropdown(localizedConstants.DefaultSchemaText, async (newValue) => { diff --git a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts index 972f8ae692..56c32c97a4 100644 --- a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts @@ -154,7 +154,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase { + this.nameInput = this.createInputBox(async () => { this.objectInfo.name = this.nameInput.value; }, props); containers.push(this.createLabelInputContainer(localizedConstants.NameText, this.nameInput)); @@ -221,11 +221,21 @@ export class DatabaseDialog extends ObjectManagementDialogBase { }, this.objectInfo.lastDatabaseBackup, this.options.isNewObject); + this.lastDatabaseBackupInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.LastDatabaseBackupText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.lastDatabaseBackup + }); const lastDatabaseBackupContainer = this.createLabelInputContainer(localizedConstants.LastDatabaseBackupText, this.lastDatabaseBackupInput); // Last Database Log Backup - this.lastDatabaseLogBackupInput = this.createInputBox(localizedConstants.LastDatabaseLogBackupText, async () => { }, this.objectInfo.lastDatabaseLogBackup, this.options.isNewObject); + this.lastDatabaseLogBackupInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.LastDatabaseLogBackupText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.lastDatabaseLogBackup + }); const lastDatabaseLogBackupContainer = this.createLabelInputContainer(localizedConstants.LastDatabaseLogBackupText, this.lastDatabaseLogBackupInput); this.backupSection = this.createGroup(localizedConstants.BackupSectionHeader, [ @@ -236,43 +246,93 @@ export class DatabaseDialog extends ObjectManagementDialogBase { }, this.objectInfo.name, this.options.isNewObject); + this.nameInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.NamePropertyText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(localizedConstants.NamePropertyText, this.nameInput); // Database Status - this.statusInput = this.createInputBox(localizedConstants.StatusText, async () => { }, this.objectInfo.status, this.options.isNewObject); + this.statusInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.StatusText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.status + }); const statusContainer = this.createLabelInputContainer(localizedConstants.StatusText, this.statusInput); // Database Owner - this.ownerInput = this.createInputBox(localizedConstants.OwnerPropertyText, async () => { }, this.objectInfo.owner, this.options.isNewObject); + this.ownerInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.OwnerPropertyText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.owner + }); const ownerContainer = this.createLabelInputContainer(localizedConstants.OwnerPropertyText, this.ownerInput); // Created Date - this.dateCreatedInput = this.createInputBox(localizedConstants.DateCreatedText, async () => { }, this.objectInfo.dateCreated, this.options.isNewObject); + this.dateCreatedInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.DateCreatedText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.dateCreated + }); const dateCreatedContainer = this.createLabelInputContainer(localizedConstants.DateCreatedText, this.dateCreatedInput); // Size - this.sizeInput = this.createInputBox(localizedConstants.SizeText, async () => { }, convertNumToTwoDecimalStringInMB(this.objectInfo.sizeInMb), this.options.isNewObject); + this.sizeInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.SizeText, + inputType: 'text', + enabled: this.options.isNewObject, + value: convertNumToTwoDecimalStringInMB(this.objectInfo.sizeInMb) + }); const sizeContainer = this.createLabelInputContainer(localizedConstants.SizeText, this.sizeInput); // Space Available - this.spaceAvailabeInput = this.createInputBox(localizedConstants.SpaceAvailableText, async () => { }, convertNumToTwoDecimalStringInMB(this.objectInfo.spaceAvailableInMb), this.options.isNewObject); + this.spaceAvailabeInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.SpaceAvailableText, + inputType: 'text', + enabled: this.options.isNewObject, + value: convertNumToTwoDecimalStringInMB(this.objectInfo.spaceAvailableInMb) + }); const spaceAvailabeContainer = this.createLabelInputContainer(localizedConstants.SpaceAvailableText, this.spaceAvailabeInput); // Number of Users - this.numberOfUsersInput = this.createInputBox(localizedConstants.NumberOfUsersText, async () => { }, this.objectInfo.numberOfUsers.toString(), this.options.isNewObject); + this.numberOfUsersInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.NumberOfUsersText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.numberOfUsers.toString() + }); const numberOfUsersContainer = this.createLabelInputContainer(localizedConstants.NumberOfUsersText, this.numberOfUsersInput); // Memory Allocated To Memory Optimized Objects - this.memoryAllocatedInput = this.createInputBox(localizedConstants.MemoryAllocatedText, async () => { }, convertNumToTwoDecimalStringInMB(this.objectInfo.memoryAllocatedToMemoryOptimizedObjectsInMb), this.options.isNewObject); + this.memoryAllocatedInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.MemoryAllocatedText, + inputType: 'text', + enabled: this.options.isNewObject, + value: convertNumToTwoDecimalStringInMB(this.objectInfo.memoryAllocatedToMemoryOptimizedObjectsInMb) + }); const memoryAllocatedContainer = this.createLabelInputContainer(localizedConstants.MemoryAllocatedText, this.memoryAllocatedInput); // Memory Used By Memory Optimized Objects - this.memoryUsedInput = this.createInputBox(localizedConstants.MemoryUsedText, async () => { }, convertNumToTwoDecimalStringInMB(this.objectInfo.memoryUsedByMemoryOptimizedObjectsInMb), this.options.isNewObject); + this.memoryUsedInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.MemoryUsedText, + inputType: 'text', + enabled: this.options.isNewObject, + value: convertNumToTwoDecimalStringInMB(this.objectInfo.memoryUsedByMemoryOptimizedObjectsInMb) + }); const memoryUsedContainer = this.createLabelInputContainer(localizedConstants.MemoryUsedText, this.memoryUsedInput); // Collation - this.collationInput = this.createInputBox(localizedConstants.CollationText, async () => { }, this.objectInfo.collationName, this.options.isNewObject); + this.collationInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.CollationText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.collationName + }); const collationContainer = this.createLabelInputContainer(localizedConstants.CollationText, this.collationInput); this.databaseSection = this.createGroup(localizedConstants.DatabaseSectionHeader, [ @@ -384,10 +444,17 @@ export class DatabaseDialog extends ObjectManagementDialogBase { + this.targetRecoveryTimeInSecInput = this.createInputBox(async (newValue) => { this.objectInfo.targetRecoveryTimeInSec = Number(newValue); - }, this.objectInfo.targetRecoveryTimeInSec.toString(), true, 'number', DefaultInputWidth, true, 0); + }, props); const targetRecoveryTimeContainer = this.createLabelInputContainer(localizedConstants.TargetRecoveryTimeInSecondsText, this.targetRecoveryTimeInSecInput); const recoverySection = this.createGroup(localizedConstants.RecoverySectionHeader, [ @@ -409,7 +476,12 @@ export class DatabaseDialog extends ObjectManagementDialogBase { }, this.objectInfo.status, this.options.isNewObject); + this.statusInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.StatusText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.status + }); containers.push(this.createLabelInputContainer(localizedConstants.DatabaseStateText, this.statusInput)); // Encryption Enabled diff --git a/extensions/mssql/src/objectManagement/ui/databaseRoleDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseRoleDialog.ts index be9a324c8b..b4d7454b65 100644 --- a/extensions/mssql/src/objectManagement/ui/databaseRoleDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/databaseRoleDialog.ts @@ -45,14 +45,25 @@ export class DatabaseRoleDialog extends PrincipalDialogBase { + this.nameInput = this.createInputBox(async (newValue) => { this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + }, { + ariaLabel: localizedConstants.NameText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput); - this.ownerInput = this.createInputBox(localizedConstants.OwnerText, async (newValue) => { + this.ownerInput = this.createInputBox(async (newValue) => { this.objectInfo.owner = newValue; - }, this.objectInfo.owner, true, 'text', 210); + }, { + ariaLabel: localizedConstants.OwnerText, + inputType: 'text', + enabled: true, + value: this.objectInfo.owner, + width: 210 + }); const browseOwnerButton = this.createButton(localizedConstants.BrowseText, localizedConstants.BrowseOwnerButtonAriaLabel, async () => { const dialog = new FindObjectDialog(this.objectManagementService, { objectTypes: localizedConstants.getObjectTypeInfo([ diff --git a/extensions/mssql/src/objectManagement/ui/findObjectDialog.ts b/extensions/mssql/src/objectManagement/ui/findObjectDialog.ts index f8d8d91451..9f69a8c20d 100644 --- a/extensions/mssql/src/objectManagement/ui/findObjectDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/findObjectDialog.ts @@ -65,7 +65,10 @@ export class FindObjectDialog extends DialogBase { }, (item1, item2) => { return item1.name === item2.name; }); - this.searchTextInputBox = this.createInputBox(localizedConstants.SearchTextLabel, async () => { }); + this.searchTextInputBox = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.SearchTextLabel, + inputType: 'text' + }); const searchTextRow = this.createLabelInputContainer(localizedConstants.SearchTextLabel, this.searchTextInputBox); this.findButton = this.createButton(localizedConstants.FindText, localizedConstants.FindText, async () => { await this.onFindObjectButtonClick(); diff --git a/extensions/mssql/src/objectManagement/ui/loginDialog.ts b/extensions/mssql/src/objectManagement/ui/loginDialog.ts index f19b215e76..706c38fc40 100644 --- a/extensions/mssql/src/objectManagement/ui/loginDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/loginDialog.ts @@ -107,9 +107,14 @@ export class LoginDialog extends PrincipalDialogBase { } private initializeGeneralSection(): void { - this.nameInput = this.createInputBox(objectManagementLoc.NameText, async (newValue) => { + this.nameInput = this.createInputBox(async (newValue) => { this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + }, { + ariaLabel: objectManagementLoc.NameText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(objectManagementLoc.NameText, this.nameInput); this.authTypeDropdown = this.createDropdown(objectManagementLoc.AuthTypeText, diff --git a/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts b/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts index 6b34008cfc..73f60e45ac 100644 --- a/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as azdata from 'azdata'; import { ObjectManagementDialogBase, ObjectManagementDialogOptions } from './objectManagementDialogBase'; -import { DefaultInputWidth } from '../../ui/dialogBase'; import { IObjectManagementService } from 'mssql'; import * as localizedConstants from '../localizedConstants'; import { ViewGeneralServerPropertiesDocUrl, ViewMemoryServerPropertiesDocUrl } from '../constants'; @@ -88,60 +87,143 @@ export class ServerPropertiesDialog extends ObjectManagementDialogBase { - this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + this.nameInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.NameText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput); - this.hardwareGenerationInput = this.createInputBox(localizedConstants.HardwareGenerationText, async () => { }, this.objectInfo.hardwareGeneration.toString(), this.options.isNewObject); + this.hardwareGenerationInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.HardwareGenerationText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.hardwareGeneration.toString() + }); const hardwareGenerationContainer = this.createLabelInputContainer(localizedConstants.HardwareGenerationText, this.hardwareGenerationInput); this.languageDropdown = this.createDropdown(localizedConstants.LanguageText, async () => { }, [this.objectInfo.language], this.objectInfo.language, this.options.isNewObject); const languageContainer = this.createLabelInputContainer(localizedConstants.LanguageText, this.languageDropdown); - this.memoryInput = this.createInputBox(localizedConstants.MemoryText, async () => { }, this.objectInfo.memoryInMB.toString().concat(' MB'), this.options.isNewObject); + this.memoryInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.MemoryText, + inputType: 'text', + enabled: this.options.isNewObject, + value: localizedConstants.StringValueInMB(this.objectInfo.memoryInMB.toString()) + }); const memoryContainer = this.createLabelInputContainer(localizedConstants.MemoryText, this.memoryInput); - this.operatingSystemInput = this.createInputBox(localizedConstants.OperatingSystemText, async () => { }, this.objectInfo.operatingSystem, this.options.isNewObject); + this.operatingSystemInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.OperatingSystemText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.operatingSystem + }); const operatingSystemContainer = this.createLabelInputContainer(localizedConstants.OperatingSystemText, this.operatingSystemInput); - this.platformInput = this.createInputBox(localizedConstants.PlatformText, async () => { }, this.objectInfo.platform, this.options.isNewObject); + this.platformInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.PlatformText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.platform + }); const platformContainer = this.createLabelInputContainer(localizedConstants.PlatformText, this.platformInput); - this.processorsInput = this.createInputBox(localizedConstants.ProcessorsText, async () => { }, this.objectInfo.processors, this.options.isNewObject); + this.processorsInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.ProcessorsText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.processors + }); const processorsContainer = this.createLabelInputContainer(localizedConstants.ProcessorsText, this.processorsInput); - this.isClusteredInput = this.createInputBox(localizedConstants.IsClusteredText, async () => { }, this.objectInfo.isClustered.toString(), this.options.isNewObject); + this.isClusteredInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.IsClusteredText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.isClustered.toString() + }); const isClusteredContainer = this.createLabelInputContainer(localizedConstants.IsClusteredText, this.isClusteredInput); - this.isHadrEnabledInput = this.createInputBox(localizedConstants.IsHadrEnabledText, async () => { }, this.objectInfo.isHadrEnabled.toString(), this.options.isNewObject); + this.isHadrEnabledInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.IsHadrEnabledText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.isHadrEnabled.toString() + }); const isHadrEnabledContainer = this.createLabelInputContainer(localizedConstants.IsHadrEnabledText, this.isHadrEnabledInput); - this.isPolyBaseInstalledInput = this.createInputBox(localizedConstants.IsPolyBaseInstalledText, async () => { }, this.objectInfo.isPolyBaseInstalled.toString(), this.options.isNewObject); + this.isPolyBaseInstalledInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.IsPolyBaseInstalledText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.isPolyBaseInstalled.toString() + }); const isPolyBaseInstalledContainer = this.createLabelInputContainer(localizedConstants.IsPolyBaseInstalledText, this.isPolyBaseInstalledInput); - this.isXTPSupportedInput = this.createInputBox(localizedConstants.IsXTPSupportedText, async () => { }, this.objectInfo.isXTPSupported.toString(), this.options.isNewObject); + this.isXTPSupportedInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.IsXTPSupportedText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.isXTPSupported.toString() + }); const isXTPSupportedContainer = this.createLabelInputContainer(localizedConstants.IsXTPSupportedText, this.isXTPSupportedInput); - this.productInput = this.createInputBox(localizedConstants.ProductText, async () => { }, this.objectInfo.product, this.options.isNewObject); + this.productInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.ProductText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.product + }); const productContainer = this.createLabelInputContainer(localizedConstants.ProductText, this.productInput); - this.reservedStorageSizeInMBInput = this.createInputBox(localizedConstants.ReservedStorageSizeInMBText, async () => { }, localizedConstants.StringValueInMB(this.objectInfo.reservedStorageSizeMB.toString()), this.options.isNewObject); + this.reservedStorageSizeInMBInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.ReservedStorageSizeInMBText, + inputType: 'text', + enabled: this.options.isNewObject, + value: localizedConstants.StringValueInMB(this.objectInfo.reservedStorageSizeMB.toString()) + }); const reservedStorageSizeInMBContainer = this.createLabelInputContainer(localizedConstants.ReservedStorageSizeInMBText, this.reservedStorageSizeInMBInput); - this.rootDirectoryInput = this.createInputBox(localizedConstants.RootDirectoryText, async () => { }, this.objectInfo.rootDirectory, this.options.isNewObject); + this.rootDirectoryInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.RootDirectoryText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.rootDirectory + }); const rootDirectoryContainer = this.createLabelInputContainer(localizedConstants.RootDirectoryText, this.rootDirectoryInput); - this.serverCollationInput = this.createInputBox(localizedConstants.ServerCollationText, async () => { }, this.objectInfo.serverCollation, this.options.isNewObject); + this.serverCollationInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.ServerCollationText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.serverCollation + }); const serverCollationContainer = this.createLabelInputContainer(localizedConstants.ServerCollationText, this.serverCollationInput); - this.serviceTierInput = this.createInputBox(localizedConstants.ServiceTierText, async () => { }, this.objectInfo.serviceTier, this.options.isNewObject); + this.serviceTierInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.ServiceTierText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.serviceTier + }); const serviceTierContainer = this.createLabelInputContainer(localizedConstants.ServiceTierText, this.serviceTierInput); - this.storageSpaceUsageInMBInput = this.createInputBox(localizedConstants.StorageSpaceUsageInMBText, async () => { }, localizedConstants.StringValueInMB(this.objectInfo.storageSpaceUsageInMB.toString()), this.options.isNewObject); + this.storageSpaceUsageInMBInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.StorageSpaceUsageInMBText, + inputType: 'text', + enabled: this.options.isNewObject, + value: localizedConstants.StringValueInMB(this.objectInfo.storageSpaceUsageInMB.toString()) + }); const storageSpaceUsageInMbContainer = this.createLabelInputContainer(localizedConstants.StorageSpaceUsageInMBText, this.storageSpaceUsageInMBInput); - this.versionInput = this.createInputBox(localizedConstants.VersionText, async () => { }, this.objectInfo.version, this.options.isNewObject); + this.versionInput = this.createInputBox(async () => { }, { + ariaLabel: localizedConstants.VersionText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.version + }); const versionContainer = this.createLabelInputContainer(localizedConstants.VersionText, this.versionInput); let platformItems = [ @@ -181,14 +263,30 @@ export class ServerPropertiesDialog extends ObjectManagementDialogBase { + const minServerProps: azdata.InputBoxProperties = { + ariaLabel: localizedConstants.minServerMemoryText, + inputType: 'number', + enabled: isEnabled, + max: this.objectInfo.minServerMemory.maximumValue, + min: this.objectInfo.minServerMemory.minimumValue, + required: true + }; + this.minServerMemoryInput = this.createInputBox(async (newValue) => { this.objectInfo.minServerMemory.value = +newValue; - }, this.objectInfo.minServerMemory.value.toString(), isEnabled, 'number', DefaultInputWidth, true, this.objectInfo.minServerMemory.minimumValue, this.objectInfo.minServerMemory.maximumValue); + }, minServerProps); const minMemoryContainer = this.createLabelInputContainer(localizedConstants.minServerMemoryText, this.minServerMemoryInput); - this.maxServerMemoryInput = this.createInputBox(localizedConstants.maxServerMemoryText, async (newValue) => { + const maxServerProps: azdata.InputBoxProperties = { + ariaLabel: localizedConstants.maxServerMemoryText, + inputType: 'number', + enabled: isEnabled, + max: this.objectInfo.maxServerMemory.maximumValue, + min: this.objectInfo.maxServerMemory.minimumValue, + required: true + }; + this.maxServerMemoryInput = this.createInputBox(async (newValue) => { this.objectInfo.maxServerMemory.value = +newValue; - }, this.objectInfo.maxServerMemory.value.toString(), isEnabled, 'number', DefaultInputWidth, true, this.objectInfo.maxServerMemory.minimumValue, this.objectInfo.maxServerMemory.maximumValue); + }, maxServerProps); const maxMemoryContainer = this.createLabelInputContainer(localizedConstants.maxServerMemoryText, this.maxServerMemoryInput); this.memorySection = this.createGroup('', [ diff --git a/extensions/mssql/src/objectManagement/ui/serverRoleDialog.ts b/extensions/mssql/src/objectManagement/ui/serverRoleDialog.ts index f811e53771..99955502b2 100644 --- a/extensions/mssql/src/objectManagement/ui/serverRoleDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/serverRoleDialog.ts @@ -50,14 +50,25 @@ export class ServerRoleDialog extends PrincipalDialogBase { + this.nameInput = this.createInputBox(async (newValue) => { this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + }, { + ariaLabel: localizedConstants.NameText, + inputType: 'text', + enabled: this.options.isNewObject, + value: this.objectInfo.name + }); const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput); - this.ownerInput = this.createInputBox(localizedConstants.OwnerText, async (newValue) => { + this.ownerInput = this.createInputBox(async (newValue) => { this.objectInfo.owner = newValue; - }, this.objectInfo.owner, !this.viewInfo.isFixedRole, 'text', 210); + }, { + ariaLabel: localizedConstants.OwnerText, + inputType: 'text', + enabled: !this.viewInfo.isFixedRole, + value: this.objectInfo.owner, + width: 210 + }); const browseOwnerButton = this.createButton(localizedConstants.BrowseText, localizedConstants.BrowseOwnerButtonAriaLabel, async () => { const dialog = new FindObjectDialog(this.objectManagementService, { objectTypes: localizedConstants.getObjectTypeInfo([ diff --git a/extensions/mssql/src/objectManagement/ui/userDialog.ts b/extensions/mssql/src/objectManagement/ui/userDialog.ts index 053bb0a710..ca24e3d9d4 100644 --- a/extensions/mssql/src/objectManagement/ui/userDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/userDialog.ts @@ -76,9 +76,15 @@ export class UserDialog extends PrincipalDialogBase { } private initializeGeneralSection(): void { - this.nameInput = this.createInputBox(localizedConstants.NameText, async (newValue) => { + const props: azdata.InputBoxProperties = { + ariaLabel: localizedConstants.NameText, + value: this.objectInfo.name, + enabled: this.options.isNewObject + }; + + this.nameInput = this.createInputBox(async (newValue) => { this.objectInfo.name = newValue; - }, this.objectInfo.name, this.options.isNewObject); + }, props); const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput); this.defaultSchemaDropdown = this.createDropdown(localizedConstants.DefaultSchemaText, async (newValue) => { diff --git a/extensions/mssql/src/ui/dialogBase.ts b/extensions/mssql/src/ui/dialogBase.ts index 28f0a9c6b0..6cbfb21222 100644 --- a/extensions/mssql/src/ui/dialogBase.ts +++ b/extensions/mssql/src/ui/dialogBase.ts @@ -143,10 +143,26 @@ export abstract class DialogBase { } protected createPasswordInputBox(ariaLabel: string, textChangeHandler: (newValue: string) => Promise, value: string = '', enabled: boolean = true, width: number = DefaultInputWidth): azdata.InputBoxComponent { - return this.createInputBox(ariaLabel, textChangeHandler, value, enabled, 'password', width); + return this.createInputBox(textChangeHandler, { + ariaLabel: ariaLabel, + value: value, + enabled: enabled, + inputType: 'password', + width: width + }); } - protected createInputBoxWithProperties(textChangeHandler: (newValue: string) => Promise, properties: azdata.InputBoxProperties, customValidation?: () => Promise): azdata.InputBoxComponent { + /** + * Creates an input box. If properties are not passed in, then an input box is created with the following default properties: + * inputType - text + * width - DefaultInputWidth + * value - empty + * enabled - true + * @param textChangeHandler - Function called on text changed. + * @param properties - Inputbox properties. + * @param customValidation - Dynamic validation function. + */ + protected createInputBox(textChangeHandler: (newValue: string) => Promise, properties: azdata.InputBoxProperties, customValidation?: () => Promise): azdata.InputBoxComponent { properties.width = properties.width ?? DefaultInputWidth; properties.inputType = properties.inputType ?? 'text'; properties.value = properties.value ?? ''; @@ -164,16 +180,6 @@ export abstract class DialogBase { return inputBoxComponent; } - protected createInputBox(ariaLabel: string, textChangeHandler: (newValue: string) => Promise, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth, required?: boolean, min?: number, max?: number): azdata.InputBoxComponent { - const inputbox = this.modelView.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width, required: required, min: min, max: max }).component(); - this.disposables.push(inputbox.onTextChanged(async () => { - await textChangeHandler(inputbox.value!); - this.onFormFieldChange(); - await this.runValidation(false); - })); - return inputbox; - } - protected createGroup(header: string, items: azdata.Component[], collapsible: boolean = true, collapsed: boolean = false): azdata.GroupContainer { return this.modelView.modelBuilder.groupContainer().withLayout({ header: header,