ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-13 17:22:15 -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 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 {

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 memoryOptimizedFilegroupsTable: azdata.TableComponent;
private rowsFilegroupNameInput: azdata.InputBoxComponent;
private rowsFilegroupNameContainer: azdata.FlexContainer;
private rowsFileGroupButtonContainer: azdata.FlexContainer;
private filestreamFilegroupNameInput: azdata.InputBoxComponent;
private filestreamFilegroupNameContainer: azdata.FlexContainer;
private filestreamFileGroupButtonContainer: azdata.FlexContainer;
private memoryOptimizedFilegroupNameInput: azdata.InputBoxComponent;
private memoryOptimizedFilegroupNameContainer: azdata.FlexContainer;
private memoryOptimizedFileGroupButtonContainer: azdata.FlexContainer;
private newFileGroupTemporaryId: number = 0;
private rowDataFileGroupsTableRows: FileGroup[] = [];
private filestreamDataFileGroupsTableRows: FileGroup[] = [];
@@ -211,8 +217,8 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Initilaize FileGroups Tab
if (!isUndefinedOrNull(this.objectInfo.filegroups)) {
const rowsFileGroupSection = await this.initializeRowsFileGroupSection();
const fileStreamFileGroupSection = this.initializeFileStreamFileGroupSection();
const memoryOptimizedFileGroupSection = this.initializeMemoryOptimizedFileGroupSection();
const fileStreamFileGroupSection = await this.initializeFileStreamFileGroupSection();
const memoryOptimizedFileGroupSection = await this.initializeMemoryOptimizedFileGroupSection();
this.fileGroupsTab = {
title: localizedConstants.FileGroupsSectionHeader,
id: this.fileGroupsTabId,
@@ -784,17 +790,16 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px'
}
}).component();
this.rowsFilegroupNameInput = this.getFilegroupNameInput(this.rowsFilegroupsTable, FileGroupType.RowsFileGroup);
this.rowsFilegroupNameContainer = await this.getFilegroupNameGroup(this.rowsFilegroupsTable, FileGroupType.RowsFileGroup);
const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => 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<Database, Databas
async () => {
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<azdata.GroupContainer> {
const data = this.getTableData(FileGroupType.FileStreamDataFileGroup);
this.filestreamFilegroupsTable = this.modelView.modelBuilder.table().withProps({
columns: [{
@@ -860,7 +863,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px'
}
}).component();
this.filestreamFilegroupNameInput = this.getFilegroupNameInput(this.filestreamFilegroupsTable, FileGroupType.FileStreamDataFileGroup);
this.filestreamFilegroupNameContainer = await this.getFilegroupNameGroup(this.filestreamFilegroupsTable, FileGroupType.FileStreamDataFileGroup);
const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.filestreamFilegroupsTable)
@@ -869,8 +872,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
buttonAriaLabel: localizedConstants.RemoveButton,
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.filestreamFilegroupsTable.onCellAction(async (arg: azdata.ICheckboxCellActionEventArgs) => {
let filegroup = this.filestreamDataFileGroupsTableRows[arg.row];
@@ -892,7 +894,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
async () => {
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<Database, Databas
)
);
const filestreamContainer = this.modelView.modelBuilder.flexContainer().withItems([this.filestreamFilegroupNameInput]).component();
filestreamContainer.addItems([filestreamFileGroupButtonContainer], { flex: '0 0 auto' });
return this.createGroup(localizedConstants.FileStreamFileGroupsSectionText, [this.filestreamFilegroupsTable, filestreamContainer], true);
return this.createGroup(localizedConstants.FileStreamFileGroupsSectionText, [this.filestreamFilegroupsTable, this.filestreamFilegroupNameContainer, this.filestreamFileGroupButtonContainer], true);
}
/**
* Initializes the memory optimized filegroups section and updates the table data
* @returns Memory optimized filegroups container
*/
private initializeMemoryOptimizedFileGroupSection(): azdata.GroupContainer {
private async initializeMemoryOptimizedFileGroupSection(): Promise<azdata.GroupContainer> {
const data = this.getTableData(FileGroupType.MemoryOptimizedDataFileGroup);
this.memoryOptimizedFilegroupsTable = this.modelView.modelBuilder.table().withProps({
columns: [{
@@ -927,7 +927,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
'margin-left': '10px'
}
}).component();
this.memoryOptimizedFilegroupNameInput = this.getFilegroupNameInput(this.memoryOptimizedFilegroupsTable, FileGroupType.MemoryOptimizedDataFileGroup);
this.memoryOptimizedFilegroupNameContainer = await this.getFilegroupNameGroup(this.memoryOptimizedFilegroupsTable, FileGroupType.MemoryOptimizedDataFileGroup);
const addButtonComponent: DialogButton = {
buttonAriaLabel: localizedConstants.AddFilegroupText,
buttonHandler: () => this.onAddDatabaseFileGroupsButtonClicked(this.memoryOptimizedFilegroupsTable),
@@ -937,14 +937,13 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
buttonAriaLabel: localizedConstants.RemoveButton,
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.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<Database, Databas
)
);
const memoryOptimizedContainer = this.modelView.modelBuilder.flexContainer().withItems([this.memoryOptimizedFilegroupNameInput]).component();
memoryOptimizedContainer.addItems([memoryOptimizedFileGroupButtonContainer], { flex: '0 0 auto' });
return this.createGroup(localizedConstants.MemoryOptimizedFileGroupsSectionText, [this.memoryOptimizedFilegroupsTable, memoryOptimizedContainer], true);
return this.createGroup(localizedConstants.MemoryOptimizedFileGroupsSectionText, [this.memoryOptimizedFilegroupsTable, this.memoryOptimizedFilegroupNameContainer, this.memoryOptimizedFileGroupButtonContainer], true);
}
/**
@@ -1027,6 +1024,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Refresh the table with new row data
this.updateFileGroupsOptionsAndTableRows();
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]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
var newData = this.getTableData(FileGroupType.RowsFileGroup);
await this.rowsFilegroupNameInput.updateCssStyles({ 'visibility': 'hidden' });
this.rowsFilegroupNameContainer.display = 'none';
}
}
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]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
var newData = this.getTableData(FileGroupType.FileStreamDataFileGroup);
await this.filestreamFilegroupNameInput.updateCssStyles({ 'visibility': 'hidden' });
this.filestreamFilegroupNameContainer.display = 'none';
}
}
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]]);
this.objectInfo.filegroups?.splice(removeFilegroupIndex, 1);
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
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',
enabled: true,
value: '',
width: 200,
CSSStyles: { 'margin': '5px 0px 0px 10px', 'visibility': 'hidden' }
})
width: DefaultInputWidth
});
}
/**