diff --git a/extensions/mssql/src/objectManagement/localizedConstants.ts b/extensions/mssql/src/objectManagement/localizedConstants.ts index 2e405486ad62..c691b8608e00 100644 --- a/extensions/mssql/src/objectManagement/localizedConstants.ts +++ b/extensions/mssql/src/objectManagement/localizedConstants.ts @@ -467,6 +467,7 @@ export const PurgeQueryDataButtonText = localize('objectManagement.databasePrope export const YesText = localize('objectManagement.databaseProperties.yesText', "Yes"); export const NotAvailableText = localize('objectManagement.databaseProperties.notAvailableText', "N/A"); export const PurgeQueryStoreDataMessage = (databaseName: string) => localize('objectManagement.databaseProperties.purgeQueryStoreDataMessage', "Are you sure you want to purge the Query Store data from '{0}'?", databaseName); +export const fileGroupsNameInput = localize('objectManagement.filegroupsNameInput', "Filegroup Name"); // Util functions export function getNodeTypeDisplayName(type: string, inTitle: boolean = false): string { diff --git a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts index 0a7b90b9e1fc..958e46021a31 100644 --- a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts @@ -58,8 +58,14 @@ export class DatabaseDialog extends ObjectManagementDialogBase this.onAddDatabaseFileGroupsButtonClicked(this.rowsFilegroupsTable) }; const removeButtonComponent: DialogButton = { buttonAriaLabel: localizedConstants.RemoveButton, - buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.rowsFilegroupsTable) + buttonHandler: () => this.onRemoveDatabaseFileGroupsButtonClicked(this.rowsFilegroupsTable) }; - const rowsFileGroupButtonContainer = this.addButtonsForTable(this.rowsFilegroupsTable, addButtonComponent, removeButtonComponent); - + this.rowsFileGroupButtonContainer = this.addButtonsForTable(this.rowsFilegroupsTable, addButtonComponent, removeButtonComponent); this.disposables.push( this.rowsFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => { let filegroup = this.rowDataFileGroupsTableRows[arg.row]; @@ -820,23 +825,21 @@ export class DatabaseDialog extends ObjectManagementDialogBase { if (this.rowsFilegroupsTable.selectedRows.length === 1) { const fileGroup = this.rowDataFileGroupsTableRows[this.rowsFilegroupsTable.selectedRows[0]]; - await this.rowsFilegroupNameInput.updateCssStyles({ 'visibility': fileGroup.id < 0 ? 'visible' : 'hidden' }); + this.rowsFilegroupNameContainer.display = fileGroup.id < 0 ? 'inline-flex' : 'none'; this.rowsFilegroupNameInput.value = fileGroup.name; this.onFormFieldChange(); } } ) ); - const rowContainer = this.modelView.modelBuilder.flexContainer().withItems([this.rowsFilegroupNameInput]).component(); - rowContainer.addItems([rowsFileGroupButtonContainer], { flex: '0 0 auto' }); - return this.createGroup(localizedConstants.RowsFileGroupsSectionText, [this.rowsFilegroupsTable, rowContainer], true); + return this.createGroup(localizedConstants.RowsFileGroupsSectionText, [this.rowsFilegroupsTable, this.rowsFilegroupNameContainer, this.rowsFileGroupButtonContainer], true); } /** * Initializes the filestream filegroups section and updates the table data * @returns filestream data filegroups container */ - private initializeFileStreamFileGroupSection(): azdata.GroupContainer { + private async initializeFileStreamFileGroupSection(): Promise { const data = this.getTableData(FileGroupType.FileStreamDataFileGroup); this.filestreamFilegroupsTable = this.modelView.modelBuilder.table().withProps({ columns: [{ @@ -860,7 +863,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase this.onAddDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable) @@ -869,8 +872,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase this.onRemoveDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable) }; - const filestreamFileGroupButtonContainer = this.addButtonsForTable(this.filestreamFilegroupsTable, addButtonComponent, removeButtonComponent); - + this.filestreamFileGroupButtonContainer = this.addButtonsForTable(this.filestreamFilegroupsTable, addButtonComponent, removeButtonComponent); this.disposables.push( this.filestreamFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => { let filegroup = this.filestreamDataFileGroupsTableRows[arg.row]; @@ -892,7 +894,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase { if (this.filestreamFilegroupsTable.selectedRows.length === 1) { const fileGroup = this.filestreamDataFileGroupsTableRows[this.filestreamFilegroupsTable.selectedRows[0]]; - await this.filestreamFilegroupNameInput.updateCssStyles({ 'visibility': fileGroup.id < 0 ? 'visible' : 'hidden' }); + this.filestreamFilegroupNameContainer.display = fileGroup.id < 0 ? 'inline-flex' : 'none'; this.filestreamFilegroupNameInput.value = fileGroup.name; this.onFormFieldChange(); } @@ -900,16 +902,14 @@ export class DatabaseDialog extends ObjectManagementDialogBase { const data = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup); this.memoryOptimizedFilegroupsTable = this.modelView.modelBuilder.table().withProps({ columns: [{ @@ -927,7 +927,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase this.onAddDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable), @@ -937,14 +937,13 @@ export class DatabaseDialog extends ObjectManagementDialogBase this.onRemoveDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable) }; - const memoryOptimizedFileGroupButtonContainer = this.addButtonsForTable(this.memoryOptimizedFilegroupsTable, addButtonComponent, removeButtonComponent); - + this.memoryOptimizedFileGroupButtonContainer = this.addButtonsForTable(this.memoryOptimizedFilegroupsTable, addButtonComponent, removeButtonComponent); this.disposables.push( this.memoryOptimizedFilegroupsTable.onRowSelected( async () => { if (this.memoryOptimizedFilegroupsTable.selectedRows.length === 1) { const fileGroup = this.memoryoptimizedFileGroupsTableRows[this.memoryOptimizedFilegroupsTable.selectedRows[0]]; - await this.memoryOptimizedFilegroupNameInput.updateCssStyles({ 'visibility': fileGroup.id < 0 ? 'visible' : 'hidden' }); + this.memoryOptimizedFilegroupNameContainer.display = fileGroup.id < 0 ? 'inline-flex' : 'none'; this.memoryOptimizedFilegroupNameInput.value = fileGroup.name; this.onFormFieldChange(); } @@ -952,9 +951,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase { + const fgInput = this.getFilegroupNameInput(table, filegroupType); + if (table === this.rowsFilegroupsTable) { + this.rowsFilegroupNameInput = fgInput; + } else if (table === this.filestreamFilegroupsTable) { + this.filestreamFilegroupNameInput = fgInput; + } else if (table === this.memoryOptimizedFilegroupsTable) { + this.memoryOptimizedFilegroupNameInput = fgInput; + } + + let fgInputGroupcontainer = this.createLabelInputContainer(localizedConstants.fileGroupsNameInput, [fgInput], false); + await fgInputGroupcontainer.updateCssStyles({ 'margin': '0px 0px -10px 10px' }); + fgInputGroupcontainer.display = 'none'; + return fgInputGroupcontainer; } /** @@ -1113,9 +1136,8 @@ export class DatabaseDialog extends ObjectManagementDialogBase