Enabling Files tab to the database properties (#24138)

* initial changes for loadin dsc table with real values from smo

* Displaying diff columns for DSC for diff sql server

* checkbox maiants the selection

* elevate option fails to load correct value when set to when_supported option

* all working till maxdop, todo pause option, save

* commented MAXDOP changes, as it is causing issues

* primary,sec,checkbox working as expected, TODO:MaxDop etc options,saving,tests

* Undo MAXDOP commented code

* refactored with service data

* column header width adjustments

* Maxdop and pause resume options completed, apply button is failing now

* Removed option names from loc  and using Id instead as names may change in future like in doc

* Apply button fixed

* refactored to reduce table reload

* Ledger digest completed

* refactor done: maxdop secondary shows wrong data from pause_resume

* refactor more: all working but table focus disturbs on update table

* adds conditions for unsupported dsc to <2016 server

* maxdop secondary checkbox fix

* rows still loses focus after value change due to update table row data

* Fixed updating secondary dropdown value

* reusing the private method and removed the duplicated codes

* initial commit - fullText and owner need revision

* Enter key in input type allows the change to update the table data, reduces the live update issues

* Setting focus to the current row

* loading data, need stylings-increase col length, etc

* using the existed setTableData method

* Adding new file dialog

* creating addFile, but not displaying in table, issue with appendData

* Adding row to the table, options are getting from STS

* all working except InPercent value

* code review comment updates

* Input type checkbox update table additional validation

* all except path

* fixing the input type focus and reverting the enterKeyPress logic

* browse path is created, need stylings,refactor,filestream selection and add

* fixing the flickering issue with data refresh

* new file options toggle and grid display string updates

* moving code inline and using actual component

* cleanup

* Add file saving is done, except one styling issue with autogrowth section

* add,remove working, need to edit file

* add, edit, remove - all working, need css fixes and -1 fix

* addressing code review comments

* adding local changes adn fixing for edit file

* adjusting css

* addressing code review comment for using loc var instead of duplicated line of code to get the rowinfo

* all fixed, need testing and refactor

* vBump STS  and fixing required field causing the apply button not enable for other options on main branch

* fixing autogrowth radio buttons change updates

* all working except some css

* disabled size for filestream

* fixing filegroups and filetypes scnearios, added filename validation for newfile, todo:editingNew file

* added max and min values to the inputs

* editing filename validation completed, all done exccept CSS

* all fixed except scroll bar

* edit db file header, filename enable issue fix

* PR comment supporting updates for STS

* min updates

* modfying addButtonsForTable method and reusing it for edit button

* code review comment updates

* Dialogbase addbuttons to table refactored

* more typo fixes

* removing fulltext index prop

* service fix

* using path.join instead of hardcoded separators

* final commit changes

extensions/mssql/src/ui/dialogBase.ts

@@ -21,6 +21,11 @@ export function getTableHeight(rowCount: number, minRowCount: number = DefaultMi
 	return Math.min(Math.max(rowCount, minRowCount), maxRowCount) * TableRowHeight + TableColumnHeaderHeight;
 }
 
+export interface DialogButton {
+	buttonAriaLabel: string;
+	buttonHandler: (button: azdata.ButtonComponent) => Promise<void>
+}
+
 export type TableListItemEnabledStateGetter<T> = (item: T) => boolean;
 export type TableListItemValueGetter<T> = (item: T) => string[];
 export type TableListItemComparer<T> = (item1: T, item2: T) => boolean;
@@ -72,6 +77,8 @@ export abstract class DialogBase<DialogResult> {
 
 	protected onFormFieldChange(): void { }
 
+	protected get removeButtonEnabled(): boolean { return true; }
+
 	protected validateInput(): Promise<string[]> { return Promise.resolve([]); }
 
 	public async open(): Promise<void> {
@@ -155,7 +162,7 @@ export abstract class DialogBase<DialogResult> {
 	}
 
 	/**
-	 * Creates an input box. If properties are not passed in, then an input box is created with the following default properties: 
+	 * 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
@@ -270,28 +277,48 @@ export abstract class DialogBase<DialogResult> {
 		return table;
 	}
 
-	protected addButtonsForTable(table: azdata.TableComponent, addButtonAriaLabel: string, removeButtonAriaLabel: string, addHandler: (button: azdata.ButtonComponent) => Promise<void>, removeHandler: (button: azdata.ButtonComponent) => Promise<void>): azdata.FlexContainer {
-		let addButton: azdata.ButtonComponent;
-		let removeButton: azdata.ButtonComponent;
-		const updateButtons = () => {
+	protected addButtonsForTable(table: azdata.TableComponent, addbutton: DialogButton, removeButton: DialogButton, editButton: DialogButton = undefined): azdata.FlexContainer {
+		let addButtonComponent: azdata.ButtonComponent;
+		let editButtonComponent: azdata.ButtonComponent;
+		let removeButtonComponent: azdata.ButtonComponent;
+		let buttonComponents: azdata.ButtonComponent[] = [];
+		const updateButtons = (isRemoveEnabled: boolean = undefined) => {
 			this.onFormFieldChange();
-			removeButton.enabled = table.selectedRows?.length === 1 && table.selectedRows[0] !== -1 && table.selectedRows[0] < table.data.length;
+			const tableSelectedRowsLengthCheck = table.selectedRows?.length === 1 && table.selectedRows[0] !== -1 && table.selectedRows[0] < table.data.length;
+			if (editButton !== undefined) {
+				editButtonComponent.enabled = tableSelectedRowsLengthCheck;
+			}
+			removeButtonComponent.enabled = !!isRemoveEnabled && tableSelectedRowsLengthCheck;
 		}
-		addButton = this.createButton(uiLoc.AddText, addButtonAriaLabel, async () => {
-			await addHandler(addButton);
+		addButtonComponent = this.createButton(uiLoc.AddText, addbutton.buttonAriaLabel, async () => {
+			await addbutton.buttonHandler(addButtonComponent);
 			updateButtons();
 		});
-		removeButton = this.createButton(uiLoc.RemoveText, removeButtonAriaLabel, async () => {
-			await removeHandler(removeButton);
+		buttonComponents.push(addButtonComponent);
+
+		if (editButton !== undefined) {
+			editButtonComponent = this.createButton(uiLoc.EditText, editButton.buttonAriaLabel, async () => {
+				await editButton.buttonHandler(editButtonComponent);
+				updateButtons();
+			}, false);
+			buttonComponents.push(editButtonComponent);
+		}
+
+		removeButtonComponent = this.createButton(uiLoc.RemoveText, removeButton.buttonAriaLabel, async () => {
+			await removeButton.buttonHandler(removeButtonComponent);
 			if (table.selectedRows.length === 1 && table.selectedRows[0] >= table.data.length) {
 				table.selectedRows = [table.data.length - 1];
 			}
 			updateButtons();
 		}, false);
+		buttonComponents.push(removeButtonComponent);
+
 		this.disposables.push(table.onRowSelected(() => {
-			updateButtons();
+			const isRemoveButtonEnabled = this.removeButtonEnabled;
+			updateButtons(isRemoveButtonEnabled);
 		}));
-		return this.createButtonContainer([addButton, removeButton]);
+
+		return this.createButtonContainer(buttonComponents)
 	}
 
 	protected createDropdown(ariaLabel: string, handler: (newValue: string) => Promise<void>, values: string[], value: string | undefined, enabled: boolean = true, width: number = DefaultInputWidth, editable?: boolean, strictSelection?: boolean): azdata.DropDownComponent {
@@ -344,11 +371,12 @@ export abstract class DialogBase<DialogResult> {
 		}).withItems(items, { flex: '0 0 auto' }).component();
 	}
 
-	protected createRadioButton(label: string, groupName: string, checked: boolean, handler: (checked: boolean) => Promise<void>): azdata.RadioButtonComponent {
+	protected createRadioButton(label: string, groupName: string, checked: boolean, handler: (checked: boolean) => Promise<void>, enabled: boolean = true): azdata.RadioButtonComponent {
 		const radio = this.modelView.modelBuilder.radioButton().withProps({
 			label: label,
 			name: groupName,
-			checked: checked
+			checked: checked,
+			enabled: enabled
 		}).component();
 		this.disposables.push(radio.onDidChangeCheckedState(async checked => {
 			await handler(checked);

extensions/mssql/src/ui/localizedConstants.ts

@@ -14,6 +14,7 @@ export const LoadingDialogCompletedText: string = localize('mssql.ui.loadingDial
 export const ScriptText: string = localize('mssql.ui.scriptText', "Script");
 export const SelectText = localize('objectManagement.selectLabel', "Select");
 export const AddText = localize('objectManagement.addText', "Add…");
+export const EditText = localize('objectManagement.editText', "Edit");
 export const RemoveText = localize('objectManagement.removeText', "Remove");
 export const NoActionScriptedMessage: string = localize('mssql.ui.noActionScriptedMessage', "There is no action to be scripted.");
 export const ScriptGeneratedText: string = localize('mssql.ui.scriptGenerated', "Script has been generated successfully. You can close the dialog to view it in the newly opened editor.")