ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding fiilegroup name label to the input box and auto focus of newly added row (#24536)

Browse Source 
* adds nameupdate textbox

* fixed rows table remove button

* input value update on row selection

* using display prop instead of visible css property

* select newly added cell automatically

* sets remove button to next row after deleting a row
This commit is contained in:
Sai Avishkar Sreerama
2023-10-02 12:11:57 -05:00
committed by GitHub
parent 405122daeb
commit 549464dab1
2 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/mssql/src/objectManagement/localizedConstants.ts
View File

@@ -468,6 +468,7 @@ export const PurgeQueryDataButtonText = localize('objectManagement.databasePrope
export const YesText = localize('objectManagement.databaseProperties.yesText', "Yes"); export const YesText = localize('objectManagement.databaseProperties.yesText', "Yes");
export const NotAvailableText = localize('objectManagement.databaseProperties.notAvailableText', "N/A"); 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 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 // Util functions
export function getNodeTypeDisplayName(type: string, inTitle: boolean = false): string { export function getNodeTypeDisplayName(type: string, inTitle: boolean = false): string {

88
extensions/mssql/src/objectManagement/ui/databaseDialog.ts
View File

@@ -58,8 +58,14 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
private filestreamFilegroupsTable: azdata.TableComponent; private filestreamFilegroupsTable: azdata.TableComponent;
private memoryOptimizedFilegroupsTable: azdata.TableComponent; private memoryOptimizedFilegroupsTable: azdata.TableComponent;
private rowsFilegroupNameInput: azdata.InputBoxComponent; private rowsFilegroupNameInput: azdata.InputBoxComponent;
private rowsFilegroupNameContainer: azdata.FlexContainer;
private rowsFileGroupButtonContainer: azdata.FlexContainer;
private filestreamFilegroupNameInput: azdata.InputBoxComponent; private filestreamFilegroupNameInput: azdata.InputBoxComponent;
private filestreamFilegroupNameContainer: azdata.FlexContainer;
private filestreamFileGroupButtonContainer: azdata.FlexContainer;
private memoryOptimizedFilegroupNameInput: azdata.InputBoxComponent; private memoryOptimizedFilegroupNameInput: azdata.InputBoxComponent;
private memoryOptimizedFilegroupNameContainer: azdata.FlexContainer;
private memoryOptimizedFileGroupButtonContainer: azdata.FlexContainer;
private newFileGroupTemporaryId: number = 0; private newFileGroupTemporaryId: number = 0;
private rowDataFileGroupsTableRows: FileGroup[] = []; private rowDataFileGroupsTableRows: FileGroup[] = [];
private filestreamDataFileGroupsTableRows: FileGroup[] = []; private filestreamDataFileGroupsTableRows: FileGroup[] = [];
@@ -211,8 +217,8 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Initilaize FileGroups Tab // Initilaize FileGroups Tab
if (!isUndefinedOrNull(this.objectInfo.filegroups)) { if (!isUndefinedOrNull(this.objectInfo.filegroups)) {
const rowsFileGroupSection = await this.initializeRowsFileGroupSection(); const rowsFileGroupSection = await this.initializeRowsFileGroupSection();
const fileStreamFileGroupSection = this.initializeFileStreamFileGroupSection(); const fileStreamFileGroupSection = await this.initializeFileStreamFileGroupSection();
const memoryOptimizedFileGroupSection = this.initializeMemoryOptimizedFileGroupSection(); const memoryOptimizedFileGroupSection = await this.initializeMemoryOptimizedFileGroupSection();
this.fileGroupsTab = { this.fileGroupsTab = {
title: localizedConstants.FileGroupsSectionHeader, title: localizedConstants.FileGroupsSectionHeader,
id: this.fileGroupsTabId, id: this.fileGroupsTabId,
@@ -784,17 +790,16 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px' 'margin-left': '10px'
} }
}).component(); }).component();
this.rowsFilegroupNameInput = this.getFilegroupNameInput(this.rowsFilegroupsTable, FileGroupType.RowsFileGroup); this.rowsFilegroupNameContainer = await this.getFilegroupNameGroup(this.rowsFilegroupsTable, FileGroupType.RowsFileGroup);
const addButtonComponent: DialogButton = { const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText, buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.rowsFilegroupsTable) buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.rowsFilegroupsTable)
}; };
const removeButtonComponent: DialogButton = { const removeButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.RemoveButton, 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.disposables.push(
this.rowsFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => { this.rowsFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => {
let filegroup = this.rowDataFileGroupsTableRows[arg.row]; let filegroup = this.rowDataFileGroupsTableRows[arg.row];
@@ -820,23 +825,21 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
async () => { async () => {
if (this.rowsFilegroupsTable.selectedRows.length === 1) { if (this.rowsFilegroupsTable.selectedRows.length === 1) {
const fileGroup = this.rowDataFileGroupsTableRows[this.rowsFilegroupsTable.selectedRows[0]]; 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.rowsFilegroupNameInput.value = fileGroup.name;
this.onFormFieldChange(); this.onFormFieldChange();
} }
} }
) )
); );
const rowContainer = this.modelView.modelBuilder.flexContainer().withItems([this.rowsFilegroupNameInput]).component(); return this.createGroup(localizedConstants.RowsFileGroupsSectionText, [this.rowsFilegroupsTable, this.rowsFilegroupNameContainer, this.rowsFileGroupButtonContainer], true);
rowContainer.addItems([rowsFileGroupButtonContainer], { flex: '0 0 auto' });
return this.createGroup(localizedConstants.RowsFileGroupsSectionText, [this.rowsFilegroupsTable, rowContainer], true);
} }
/** /**
* Initializes the filestream filegroups section and updates the table data * Initializes the filestream filegroups section and updates the table data
* @returns filestream data filegroups container * @returns filestream data filegroups container
*/ */
private initializeFileStreamFileGroupSection(): azdata.GroupContainer { private async initializeFileStreamFileGroupSection(): Promise<azdata.GroupContainer> {
const data = this.getTableData(FileGroupType.FileStreamDataFileGroup); const data = this.getTableData(FileGroupType.FileStreamDataFileGroup);
this.filestreamFilegroupsTable = this.modelView.modelBuilder.table().withProps({ this.filestreamFilegroupsTable = this.modelView.modelBuilder.table().withProps({
columns: [{ columns: [{
@@ -860,7 +863,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px' 'margin-left': '10px'
} }
}).component(); }).component();
this.filestreamFilegroupNameInput = this.getFilegroupNameInput(this.filestreamFilegroupsTable, FileGroupType.FileStreamDataFileGroup); this.filestreamFilegroupNameContainer = await this.getFilegroupNameGroup(this.filestreamFilegroupsTable, FileGroupType.FileStreamDataFileGroup);
const addButtonComponent: DialogButton = { const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText, buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable) buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable)
@@ -869,8 +872,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
buttonAriaLabel: localizedConstants.RemoveButton, buttonAriaLabel: localizedConstants.RemoveButton,
buttonHandler: () => this.onRemoveDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable) buttonHandler: () => this.onRemoveDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable)
}; };
const filestreamFileGroupButtonContainer = this.addButtonsForTable(this.filestreamFilegroupsTable, addButtonComponent, removeButtonComponent); this.filestreamFileGroupButtonContainer = this.addButtonsForTable(this.filestreamFilegroupsTable, addButtonComponent, removeButtonComponent);
this.disposables.push( this.disposables.push(
this.filestreamFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => { this.filestreamFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => {
let filegroup = this.filestreamDataFileGroupsTableRows[arg.row]; let filegroup = this.filestreamDataFileGroupsTableRows[arg.row];
@@ -892,7 +894,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
async () => { async () => {
if (this.filestreamFilegroupsTable.selectedRows.length === 1) { if (this.filestreamFilegroupsTable.selectedRows.length === 1) {
const fileGroup = this.filestreamDataFileGroupsTableRows[this.filestreamFilegroupsTable.selectedRows[0]]; 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.filestreamFilegroupNameInput.value = fileGroup.name;
this.onFormFieldChange(); this.onFormFieldChange();
} }
@@ -900,16 +902,14 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
) )
); );
const filestreamContainer = this.modelView.modelBuilder.flexContainer().withItems([this.filestreamFilegroupNameInput]).component(); return this.createGroup(localizedConstants.FileStreamFileGroupsSectionText, [this.filestreamFilegroupsTable, this.filestreamFilegroupNameContainer, this.filestreamFileGroupButtonContainer], true);
filestreamContainer.addItems([filestreamFileGroupButtonContainer], { flex: '0 0 auto' });
return this.createGroup(localizedConstants.FileStreamFileGroupsSectionText, [this.filestreamFilegroupsTable, filestreamContainer], true);
} }
/** /**
* Initializes the memory optimized filegroups section and updates the table data * Initializes the memory optimized filegroups section and updates the table data
* @returns Memory optimized filegroups container * @returns Memory optimized filegroups container
*/ */
private initializeMemoryOptimizedFileGroupSection(): azdata.GroupContainer { private async initializeMemoryOptimizedFileGroupSection(): Promise<azdata.GroupContainer> {
const data = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup); const data = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup);
this.memoryOptimizedFilegroupsTable = this.modelView.modelBuilder.table().withProps({ this.memoryOptimizedFilegroupsTable = this.modelView.modelBuilder.table().withProps({
columns: [{ columns: [{
@@ -927,7 +927,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px' 'margin-left': '10px'
} }
}).component(); }).component();
this.memoryOptimizedFilegroupNameInput = this.getFilegroupNameInput(this.memoryOptimizedFilegroupsTable, FileGroupType.MemoryOptimizedDataFileGroup); this.memoryOptimizedFilegroupNameContainer = await this.getFilegroupNameGroup(this.memoryOptimizedFilegroupsTable, FileGroupType.MemoryOptimizedDataFileGroup);
const addButtonComponent: DialogButton = { const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText, buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable), buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable),
@@ -937,14 +937,13 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
buttonAriaLabel: localizedConstants.RemoveButton, buttonAriaLabel: localizedConstants.RemoveButton,
buttonHandler: () => this.onRemoveDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable) buttonHandler: () => this.onRemoveDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable)
}; };
const memoryOptimizedFileGroupButtonContainer = this.addButtonsForTable(this.memoryOptimizedFilegroupsTable, addButtonComponent, removeButtonComponent); this.memoryOptimizedFileGroupButtonContainer = this.addButtonsForTable(this.memoryOptimizedFilegroupsTable, addButtonComponent, removeButtonComponent);
this.disposables.push( this.disposables.push(
this.memoryOptimizedFilegroupsTable.onRowSelected( this.memoryOptimizedFilegroupsTable.onRowSelected(
async () => { async () => {
if (this.memoryOptimizedFilegroupsTable.selectedRows.length === 1) { if (this.memoryOptimizedFilegroupsTable.selectedRows.length === 1) {
const fileGroup = this.memoryoptimizedFileGroupsTableRows[this.memoryOptimizedFilegroupsTable.selectedRows[0]]; 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.memoryOptimizedFilegroupNameInput.value = fileGroup.name;
this.onFormFieldChange(); this.onFormFieldChange();
} }
@@ -952,9 +951,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
) )
); );
const memoryOptimizedContainer = this.modelView.modelBuilder.flexContainer().withItems([this.memoryOptimizedFilegroupNameInput]).component(); return this.createGroup(localizedConstants.MemoryOptimizedFileGroupsSectionText, [this.memoryOptimizedFilegroupsTable, this.memoryOptimizedFilegroupNameContainer, this.memoryOptimizedFileGroupButtonContainer], true);
memoryOptimizedContainer.addItems([memoryOptimizedFileGroupButtonContainer], { flex: '0 0 auto' });
return this.createGroup(localizedConstants.MemoryOptimizedFileGroupsSectionText, [this.memoryOptimizedFilegroupsTable, memoryOptimizedContainer], true);
} }
/** /**
@@ -1027,6 +1024,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Refresh the table with new row data // Refresh the table with new row data
this.updateFileGroupsOptionsAndTableRows(); this.updateFileGroupsOptionsAndTableRows();
await this.setTableData(table, newData, DefaultMaxTableRowCount); await this.setTableData(table, newData, DefaultMaxTableRowCount);
table.setActiveCell(table.data?.length - 1, 0);
} }
} }
@@ -1059,7 +1057,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.rowDataFileGroupsTableRows[this.rowsFilegroupsTable.selectedRows[0]]); const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.rowDataFileGroupsTableRows[this.rowsFilegroupsTable.selectedRows[0]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1); this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
var newData = this.getTableData(FileGroupType.RowsFileGroup); var newData = this.getTableData(FileGroupType.RowsFileGroup);
await this.rowsFilegroupNameInput.updateCssStyles({ 'visibility': 'hidden' }); this.rowsFilegroupNameContainer.display = 'none';
} }
} }
else if (table === this.filestreamFilegroupsTable) { else if (table === this.filestreamFilegroupsTable) {
@@ -1067,7 +1065,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.filestreamDataFileGroupsTableRows[this.filestreamFilegroupsTable.selectedRows[0]]); const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.filestreamDataFileGroupsTableRows[this.filestreamFilegroupsTable.selectedRows[0]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1); this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
var newData = this.getTableData(FileGroupType.FileStreamDataFileGroup); var newData = this.getTableData(FileGroupType.FileStreamDataFileGroup);
await this.filestreamFilegroupNameInput.updateCssStyles({ 'visibility': 'hidden' }); this.filestreamFilegroupNameContainer.display = 'none';
} }
} }
else if (table === this.memoryOptimizedFilegroupsTable) { else if (table === this.memoryOptimizedFilegroupsTable) {
@@ -1075,13 +1073,38 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.memoryoptimizedFileGroupsTableRows[this.memoryOptimizedFilegroupsTable.selectedRows[0]]); const removeFilegroupIndex = this.objectInfo.filegroups.indexOf(this.memoryoptimizedFileGroupsTableRows[this.memoryOptimizedFilegroupsTable.selectedRows[0]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1); this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
var newData = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup); var newData = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup);
await this.memoryOptimizedFilegroupNameInput.updateCssStyles({ 'visibility': 'hidden' }); this.memoryOptimizedFilegroupNameContainer.display = 'none';
} }
} }
// Refresh the individual table rows object and table with updated data // Refresh the individual table rows object and table with updated data
this.updateFileGroupsOptionsAndTableRows(); this.updateFileGroupsOptionsAndTableRows();
await this.setTableData(table, newData) await this.setTableData(table, newData);
if (table.selectedRows !== undefined && table.selectedRows[0] !== undefined && table.selectedRows[0] < table.data?.length) {
table.setActiveCell(table.selectedRows[0], 0);
}
}
/**
* Creates the group container for filegroups input section
* @param table table component
* @param filegroupType filegroup type
* @returns filegroup name group container
*/
private async getFilegroupNameGroup(table: azdata.TableComponent, filegroupType: FileGroupType): Promise<azdata.FlexContainer> {
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<Database, Databas
inputType: 'text', inputType: 'text',
enabled: true, enabled: true,
value: '', value: '',
width: 200, width: DefaultInputWidth
CSSStyles: { 'margin': '5px 0px 0px 10px', 'visibility': 'hidden' } });
})
} }
/** /**