fixing double scroll bar issue on DSC tab (#24560)

This commit is contained in:
Sai Avishkar Sreerama
2023-10-03 11:40:55 -05:00
committed by GitHub
parent cc148930c7
commit 5ed263ecd2

View File

@@ -94,12 +94,10 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
private valueForPrimaryInput: azdata.InputBoxComponent; private valueForPrimaryInput: azdata.InputBoxComponent;
private valueForSecondaryInput: azdata.InputBoxComponent; private valueForSecondaryInput: azdata.InputBoxComponent;
private setSecondaryCheckboxForInputType: azdata.CheckBoxComponent; private setSecondaryCheckboxForInputType: azdata.CheckBoxComponent;
private dscPrimaryValueDropdownGroup: azdata.GroupContainer; private dscPrimaryValueDropdown: azdata.FlexContainer;
private dscSecondaryValueDropdownGroup: azdata.GroupContainer; private dscSecondaryValueDropdown: azdata.FlexContainer;
private dscSecondaryCheckboxForDropdownGroup: azdata.GroupContainer; private dscPrimaryValueInput: azdata.FlexContainer;
private dscPrimaryValueInputGroup: azdata.GroupContainer; private dscSecondaryValueInput: azdata.FlexContainer;
private dscSecondaryValueInputGroup: azdata.GroupContainer;
private dscSecondaryCheckboxForInputGroup: azdata.GroupContainer;
private setFocusToInput: azdata.InputBoxComponent = undefined; private setFocusToInput: azdata.InputBoxComponent = undefined;
private currentRowObjectInfo: DatabaseScopedConfigurationsInfo; private currentRowObjectInfo: DatabaseScopedConfigurationsInfo;
// Query store Tab // Query store Tab
@@ -1391,7 +1389,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Cannot set the 'ELEVATE_ONLINE (11) and ELEVATE_RESUMABLE (12)' option for the secondaries replica while this option is only allowed to be set for the primary // Cannot set the 'ELEVATE_ONLINE (11) and ELEVATE_RESUMABLE (12)' option for the secondaries replica while this option is only allowed to be set for the primary
if (this.currentRowObjectInfo.id === 11 || this.currentRowObjectInfo.id === 12) { if (this.currentRowObjectInfo.id === 11 || this.currentRowObjectInfo.id === 12) {
await this.dscPrimaryValueDropdownGroup.updateCssStyles({ 'visibility': 'visible' }); await this.dscPrimaryValueDropdown.updateCssStyles({ 'display': 'inline-flex' });
if (JSON.stringify(this.valueForPrimaryDropdown.values) !== JSON.stringify(this.viewInfo.dscElevateOptions) || if (JSON.stringify(this.valueForPrimaryDropdown.values) !== JSON.stringify(this.viewInfo.dscElevateOptions) ||
this.valueForPrimaryDropdown.value !== this.currentRowObjectInfo.valueForPrimary) { this.valueForPrimaryDropdown.value !== this.currentRowObjectInfo.valueForPrimary) {
await this.valueForPrimaryDropdown.updateProperties({ await this.valueForPrimaryDropdown.updateProperties({
@@ -1414,7 +1412,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
} }
// Cannot set the 'AUTO_ABORT_PAUSED_INDEX (25)' option for the secondaries replica while this option is only allowed to be set for the primary. // Cannot set the 'AUTO_ABORT_PAUSED_INDEX (25)' option for the secondaries replica while this option is only allowed to be set for the primary.
else if (this.currentRowObjectInfo.id === 25) { else if (this.currentRowObjectInfo.id === 25) {
await this.dscPrimaryValueInputGroup.updateCssStyles({ 'visibility': 'visible', 'margin-top': '-175px' }); await this.dscPrimaryValueInput.updateCssStyles({ 'display': 'inline-flex' });
await this.valueForPrimaryInput.updateProperties({ await this.valueForPrimaryInput.updateProperties({
value: this.currentRowObjectInfo.valueForPrimary value: this.currentRowObjectInfo.valueForPrimary
, max: PAUSED_RESUMABLE_INDEX_Max_Limit , max: PAUSED_RESUMABLE_INDEX_Max_Limit
@@ -1443,7 +1441,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
// Cannot set the 'IDENTITY_CACHE (6)' option for the secondaries replica while this option is only allowed to be set for the primary. // Cannot set the 'IDENTITY_CACHE (6)' option for the secondaries replica while this option is only allowed to be set for the primary.
// Cannot set the 'GLOBAL_TEMPORARY_TABLE_AUTO_DROP (21)' option for the secondaries replica while this option is only allowed to be set for the primary. // Cannot set the 'GLOBAL_TEMPORARY_TABLE_AUTO_DROP (21)' option for the secondaries replica while this option is only allowed to be set for the primary.
else if (this.currentRowObjectInfo.id === 6 || this.currentRowObjectInfo.id === 21) { else if (this.currentRowObjectInfo.id === 6 || this.currentRowObjectInfo.id === 21) {
await this.dscPrimaryValueDropdownGroup.updateCssStyles({ 'visibility': 'visible' }); await this.dscPrimaryValueDropdown.updateCssStyles({ 'display': 'inline-flex' });
if (JSON.stringify(this.valueForPrimaryDropdown.values) !== JSON.stringify(this.viewInfo.propertiesOnOffOptions) || if (JSON.stringify(this.valueForPrimaryDropdown.values) !== JSON.stringify(this.viewInfo.propertiesOnOffOptions) ||
this.valueForPrimaryDropdown.value !== this.currentRowObjectInfo.valueForPrimary) { this.valueForPrimaryDropdown.value !== this.currentRowObjectInfo.valueForPrimary) {
await this.valueForPrimaryDropdown.updateProperties({ await this.valueForPrimaryDropdown.updateProperties({
@@ -1517,13 +1515,12 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
width: 150, width: 150,
min: 0 min: 0
}); });
const primaryContainer = this.createLabelInputContainer(localizedConstants.ValueForPrimaryColumnHeader, this.valueForPrimaryInput); this.dscPrimaryValueInput = this.createLabelInputContainer(localizedConstants.ValueForPrimaryColumnHeader, this.valueForPrimaryInput);
this.dscPrimaryValueInputGroup = this.createGroup('', [primaryContainer], false, true); this.dscPrimaryValueInput.display = 'none';
await this.dscPrimaryValueInputGroup.updateCssStyles({ 'visibility': 'hidden' });
// Apply Primary To Secondary checkbox // Apply Primary To Secondary checkbox
this.setSecondaryCheckboxForInputType = this.createCheckbox(localizedConstants.SetSecondaryText, async (checked) => { this.setSecondaryCheckboxForInputType = this.createCheckbox(localizedConstants.SetSecondaryText, async (checked) => {
await this.dscSecondaryValueInputGroup.updateCssStyles({ 'visibility': checked ? 'hidden' : 'visible' }); await this.dscSecondaryValueInput.updateCssStyles({ 'display': checked ? 'none' : 'inline-flex' });
this.currentRowObjectInfo.valueForSecondary = this.currentRowObjectInfo.valueForPrimary; this.currentRowObjectInfo.valueForSecondary = this.currentRowObjectInfo.valueForPrimary;
await this.valueForSecondaryInput.updateProperties({ value: this.currentRowObjectInfo.valueForSecondary }); await this.valueForSecondaryInput.updateProperties({ value: this.currentRowObjectInfo.valueForSecondary });
if (this.dscTable.data[this.currentRowId][2] !== this.currentRowObjectInfo.valueForSecondary) { if (this.dscTable.data[this.currentRowId][2] !== this.currentRowObjectInfo.valueForSecondary) {
@@ -1531,8 +1528,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
await this.updateDscTable(this.dscTable.data); await this.updateDscTable(this.dscTable.data);
} }
}, true); }, true);
this.dscSecondaryCheckboxForInputGroup = this.createGroup('', [this.setSecondaryCheckboxForInputType], false, true); this.setSecondaryCheckboxForInputType.display = 'none';
await this.dscSecondaryCheckboxForInputGroup.updateCssStyles({ 'visibility': 'hidden' });
// Value for Secondary // Value for Secondary
this.valueForSecondaryInput = this.createInputBox(async (newValue) => { this.valueForSecondaryInput = this.createInputBox(async (newValue) => {
@@ -1549,13 +1545,12 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
width: 150, width: 150,
min: 0 min: 0
}); });
const secondaryContainer = this.createLabelInputContainer(localizedConstants.ValueForSecondaryColumnHeader, this.valueForSecondaryInput); this.dscSecondaryValueInput = this.createLabelInputContainer(localizedConstants.ValueForSecondaryColumnHeader, this.valueForSecondaryInput);
this.dscSecondaryValueInputGroup = this.createGroup('', [secondaryContainer], false, true); this.dscSecondaryValueInput.display = 'none';
await this.dscSecondaryValueInputGroup.updateCssStyles({ 'visibility': 'hidden' });
const maxDopGroup = this.createGroup('', [this.dscPrimaryValueInputGroup, this.dscSecondaryCheckboxForInputGroup, this.dscSecondaryValueInputGroup], false, true); const inputTypegroup = this.createGroup('', [this.dscPrimaryValueInput, this.setSecondaryCheckboxForInputType, this.dscSecondaryValueInput], false, true);
await maxDopGroup.updateCssStyles({ 'margin-left': '-10px' }); await inputTypegroup.updateCssStyles({ 'margin-top': '-30px' });
return maxDopGroup; return inputTypegroup;
} }
/** /**
@@ -1579,18 +1574,16 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
await this.updateDscTable(this.dscTable.data); await this.updateDscTable(this.dscTable.data);
} }
}, [], '', true, 150) }, [], '', true, 150)
const primaryContainer = this.createLabelInputContainer(localizedConstants.ValueForPrimaryColumnHeader, this.valueForPrimaryDropdown); this.dscPrimaryValueDropdown = this.createLabelInputContainer(localizedConstants.ValueForPrimaryColumnHeader, this.valueForPrimaryDropdown);
this.dscPrimaryValueDropdownGroup = this.createGroup('', [primaryContainer], false, true); this.dscPrimaryValueDropdown.display = 'none';
await this.dscPrimaryValueDropdownGroup.updateCssStyles({ 'visibility': 'hidden' });
// Apply Primary To Secondary checkbox // Apply Primary To Secondary checkbox
this.setSecondaryCheckboxForDropdowns = this.createCheckbox(localizedConstants.SetSecondaryText, async (checked) => { this.setSecondaryCheckboxForDropdowns = this.createCheckbox(localizedConstants.SetSecondaryText, async (checked) => {
await this.dscSecondaryValueDropdownGroup.updateCssStyles({ 'visibility': checked ? 'hidden' : 'visible' }); await this.dscSecondaryValueDropdown.updateCssStyles({ 'display': checked ? 'none' : 'inline-flex' });
this.currentRowObjectInfo.valueForSecondary = this.currentRowObjectInfo.valueForPrimary; this.currentRowObjectInfo.valueForSecondary = this.currentRowObjectInfo.valueForPrimary;
await this.valueForSecondaryDropdown.updateProperties({ value: this.currentRowObjectInfo.valueForSecondary }); await this.valueForSecondaryDropdown.updateProperties({ value: this.currentRowObjectInfo.valueForSecondary });
}, true); }, true);
this.dscSecondaryCheckboxForDropdownGroup = this.createGroup('', [this.setSecondaryCheckboxForDropdowns], false, true); this.setSecondaryCheckboxForDropdowns.display = 'none';
await this.dscSecondaryCheckboxForDropdownGroup.updateCssStyles({ 'visibility': 'hidden' });
// Value for Secondary // Value for Secondary
this.valueForSecondaryDropdown = this.createDropdown(localizedConstants.ValueForSecondaryColumnHeader, async (newValue) => { this.valueForSecondaryDropdown = this.createDropdown(localizedConstants.ValueForSecondaryColumnHeader, async (newValue) => {
@@ -1602,13 +1595,10 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
} }
} }
}, [], '', true, 150); }, [], '', true, 150);
const secondaryContainer = this.createLabelInputContainer(localizedConstants.ValueForSecondaryColumnHeader, this.valueForSecondaryDropdown); this.dscSecondaryValueDropdown = this.createLabelInputContainer(localizedConstants.ValueForSecondaryColumnHeader, this.valueForSecondaryDropdown);
this.dscSecondaryValueDropdownGroup = this.createGroup('', [secondaryContainer], false, true); this.dscSecondaryValueDropdown.display = 'none';
await this.dscSecondaryValueDropdownGroup.updateCssStyles({ 'visibility': 'hidden' });
const valueGroup = this.createGroup('', [this.dscPrimaryValueDropdownGroup, this.dscSecondaryCheckboxForDropdownGroup, this.dscSecondaryValueDropdownGroup], true, true); return this.createGroup('', [this.dscPrimaryValueDropdown, this.setSecondaryCheckboxForDropdowns, this.dscSecondaryValueDropdown], true, true);
await valueGroup.updateCssStyles({ 'margin-left': '-10px' });
return valueGroup;
} }
/** /**
@@ -1617,9 +1607,9 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
*/ */
private async showDropdownsSection(isSecondaryCheckboxChecked: boolean): Promise<void> { private async showDropdownsSection(isSecondaryCheckboxChecked: boolean): Promise<void> {
this.setSecondaryCheckboxForDropdowns.checked = isSecondaryCheckboxChecked; this.setSecondaryCheckboxForDropdowns.checked = isSecondaryCheckboxChecked;
await this.dscPrimaryValueDropdownGroup.updateCssStyles({ 'visibility': 'visible' }); this.setSecondaryCheckboxForDropdowns.display = 'inline-flex';
await this.dscSecondaryCheckboxForDropdownGroup.updateCssStyles({ 'visibility': 'visible' }); await this.dscPrimaryValueDropdown.updateCssStyles({ 'display': 'inline-flex' });
await this.dscSecondaryValueDropdownGroup.updateCssStyles({ 'visibility': isSecondaryCheckboxChecked ? 'hidden' : 'visible' }); await this.dscSecondaryValueDropdown.updateCssStyles({ 'display': isSecondaryCheckboxChecked ? 'none' : 'inline-flex' });
} }
/** /**
@@ -1628,21 +1618,21 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
*/ */
private async showInputSection(isSecondaryCheckboxChecked: boolean): Promise<void> { private async showInputSection(isSecondaryCheckboxChecked: boolean): Promise<void> {
this.setSecondaryCheckboxForInputType.checked = isSecondaryCheckboxChecked; this.setSecondaryCheckboxForInputType.checked = isSecondaryCheckboxChecked;
await this.dscPrimaryValueInputGroup.updateCssStyles({ 'visibility': 'visible', 'margin-top': '-175px' }); this.setSecondaryCheckboxForInputType.display = 'inline-flex';
await this.dscSecondaryCheckboxForInputGroup.updateCssStyles({ 'visibility': 'visible', 'margin-top': '-120px' }); await this.dscPrimaryValueInput.updateCssStyles({ 'display': 'inline-flex' });
await this.dscSecondaryValueInputGroup.updateCssStyles({ 'visibility': isSecondaryCheckboxChecked ? 'hidden' : 'visible', 'margin-top': '-85px' }); await this.dscSecondaryValueInput.updateCssStyles({ 'display': isSecondaryCheckboxChecked ? 'none' : 'inline-flex' });
} }
/** /**
* Set all primary and secondary groups to hidden * Set all primary and secondary groups to hidden
*/ */
private async hideDropdownAndInputSections(): Promise<void> { private async hideDropdownAndInputSections(): Promise<void> {
await this.dscPrimaryValueInputGroup.updateCssStyles({ 'visibility': 'hidden', 'margin-top': '0px' }); await this.dscPrimaryValueInput.updateCssStyles({ 'display': 'none' });
await this.dscSecondaryCheckboxForInputGroup.updateCssStyles({ 'visibility': 'hidden', 'margin-top': '0px' }); this.setSecondaryCheckboxForInputType.display = 'none';
await this.dscSecondaryValueInputGroup.updateCssStyles({ 'visibility': 'hidden', 'margin-top': '0px' }); await this.dscSecondaryValueInput.updateCssStyles({ 'display': 'none' });
await this.dscPrimaryValueDropdownGroup.updateCssStyles({ 'visibility': 'hidden' }); await this.dscPrimaryValueDropdown.updateCssStyles({ 'display': 'none' });
await this.dscSecondaryCheckboxForDropdownGroup.updateCssStyles({ 'visibility': 'hidden' }); this.setSecondaryCheckboxForDropdowns.display = 'none';
await this.dscSecondaryValueDropdownGroup.updateCssStyles({ 'visibility': 'hidden' }); await this.dscSecondaryValueDropdown.updateCssStyles({ 'display': 'none' });
} }
/** /**