Refactor options dialog to not use splitview (#9684)

* Refactor options dialog to not use splitview

* Fix test

src/sql/workbench/browser/modal/media/optionsDialog.css

@@ -3,11 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.optionsDialog-label {
+.optionsDialog-options .optionsDialog-label {
 	width: 120px;
 }
 
-.optionsDialog-input {
+.optionsDialog-options .optionsDialog-input {
 	width: 200px;
 }
 
@@ -22,27 +22,29 @@
 	overflow-y: auto;
 }
 
-.optionsDialog-options-groups {
+.optionsDialog-options .optionsDialog-options-groups {
 	margin: 10px 0px;
 	flex: 1 1;
 	overflow-y: auto;
 }
 
-.vs .optionsDialog-options-groups {
+.vs .optionsDialog-options .optionsDialog-options-groups {
 	box-shadow: 0 1px 4px 1px rgba(220, 220, 220, 0.71);
 }
 
-.vs-dark .optionsDialog-options-groups {
+.vs-dark .optionsDialog-options .optionsDialog-options-groups {
 	box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71);
 }
 
-.optionsDialog-options-groups .split-view-view .header {
-	padding-left: 28px !important;
+.optionsDialog-options .option-category-title {
+	font-size: 11px;
+	margin: 5px 0px;
+	padding-left: 20px !important;
+	font-weight: bold;
 	background-position-x: 8px !important;
-}
-
-.optionsDialog-options-groups .split-view-view .body {
-	padding-left: 5px !important;
+	text-transform: uppercase;
+	line-height: 22px;
+	align-items: center;
 }
 
 .backButtonIcon {
@@ -58,25 +60,25 @@
 	content: url('back_inverse.svg');
 }
 
-.optionsDialog-description {
+.optionsDialog-options .optionsDialog-description {
 	height: 90px;
 	margin: 15px;
 	overflow-y: auto;
 }
 
-.optionsDialog-description .modal-title {
+.optionsDialog-options .optionsDialog-description .modal-title {
 	background-repeat: no-repeat;
 	background-position: 2px center;
 	padding-left: 25px;
 	background-size: 16px;
 }
 
-.vs .optionsDialog-description .modal-title {
+.vs .optionsDialog-options .optionsDialog-description .modal-title {
 	background-image: url('info_notification.svg')
 }
 
-.vs-dark .optionsDialog-description .modal-title,
-.hc-black .optionsDialog-description .modal-title {
+.vs-dark .optionsDialog-options .optionsDialog-description .modal-title,
+.hc-black .optionsDialog-options .optionsDialog-description .modal-title {
 	background-image: url('info_notification_inverse.svg')
 }
 
@@ -86,13 +88,14 @@
 	flex-direction: column;
 }
 
-.optionsDialog-description-content {
+.optionsDialog-options .optionsDialog-description-content {
 	padding-top: 10px;
 	padding-left: 25px;
 }
 
-.optionsDialog-table{
+.optionsDialog-options .optionsDialog-table {
 	width:100%;
 	padding: 10px 19px 10px 10px;
 	border-spacing: 5px;
+	padding-left: 5px !important;
 }

src/sql/workbench/browser/modal/optionsDialog.ts

@@ -9,7 +9,6 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { IModalOptions, Modal } from './modal';
 import * as OptionsDialogHelper from './optionsDialogHelper';
 import { attachButtonStyler } from 'sql/platform/theme/common/styler';
-import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
 
 import * as azdata from 'azdata';
 
@@ -32,7 +31,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfigurationService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { ViewPane, IViewPaneOptions } from 'vs/workbench/browser/parts/views/viewPaneContainer';
-import { attachModalDialogStyler, attachPanelStyler } from 'sql/workbench/common/styler';
+import { attachModalDialogStyler } from 'sql/workbench/common/styler';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { ServiceOptionType } from 'sql/platform/connection/common/interfaces';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
@@ -77,16 +76,13 @@ export interface IOptionsDialogOptions extends IModalOptions {
 
 export class OptionsDialog extends Modal {
 	private _body: HTMLElement;
-	private _optionGroups: HTMLElement;
+	private _optionGroupsContainer: HTMLElement;
+	private _categoryTitles: HTMLElement[] = [];
 	private _dividerBuilder: HTMLElement;
 	private _optionTitle: HTMLElement;
 	private _optionDescription: HTMLElement;
 	private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
 	private _optionValues: { [optionName: string]: string };
-	private _optionRowSize = 31;
-	private _optionCategoryPadding = 30;
-	private height: number;
-	private splitview: ScrollableSplitView;
 
 	private _onOk = new Emitter<void>();
 	public onOk: Event<void> = this._onOk.event;
@@ -101,7 +97,6 @@ export class OptionsDialog extends Modal {
 		@ILayoutService layoutService: ILayoutService,
 		@IThemeService themeService: IThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IAdsTelemetryService telemetryService: IAdsTelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService,
@@ -132,8 +127,7 @@ export class OptionsDialog extends Modal {
 
 		this._dividerBuilder = append(this._body, $('div'));
 
-		this._optionGroups = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view'));
-		this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
+		this._optionGroupsContainer = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view'));
 
 		const descriptionContainer = append(this._body, $('div.optionsDialog-description'));
 
@@ -143,13 +137,20 @@ export class OptionsDialog extends Modal {
 
 	// Update theming that is specific to options dialog flyout body
 	private updateTheme(theme: IColorTheme): void {
-		let borderColor = theme.getColor(contrastBorder);
-		let border = borderColor ? borderColor.toString() : null;
+		const borderColor = theme.getColor(contrastBorder);
+		const border = borderColor ? borderColor.toString() : null;
+		const backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);
 		if (this._dividerBuilder) {
 			this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
 			this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
 			this._dividerBuilder.style.borderTopColor = border;
 		}
+		this._categoryTitles.forEach(titleElement => {
+			titleElement.style.borderWidth = border ? '1px 0px' : null;
+			titleElement.style.borderStyle = border ? 'solid none' : null;
+			titleElement.style.borderColor = border;
+			titleElement.style.backgroundColor = backgroundColor ? backgroundColor.toString() : null;
+		});
 	}
 
 	private onOptionLinkClicked(optionName: string): void {
@@ -231,36 +232,29 @@ export class OptionsDialog extends Modal {
 	public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
 		this._optionValues = optionValues;
 		let firstOption: string;
-		this.splitview.clear();
 		let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
 		for (let category in categoryMap) {
+			const title = append(this._optionGroupsContainer, $('h2.option-category-title'));
+			title.innerText = category;
+			this._categoryTitles.push(title);
+
 			let serviceOptions: azdata.ServiceOption[] = categoryMap[category];
 			let bodyContainer = $('table.optionsDialog-table');
 			this.fillInOptions(bodyContainer, serviceOptions);
-
-			let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
-			let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer, viewSize, { title: category, id: category });
-			this.splitview.addView(categoryView, viewSize);
-			categoryView.render();
-			attachPanelStyler(categoryView, this._themeService);
+			append(this._optionGroupsContainer, bodyContainer);
 
 			if (!firstOption) {
 				firstOption = serviceOptions[0].name;
 			}
 		}
-		if (this.height) {
-			this.splitview.layout(this.height - 120);
-		}
+		this.updateTheme(this._themeService.getColorTheme());
 		this.show();
 		let firstOptionWidget = this._optionElements[firstOption].optionWidget;
 		this.registerStyling();
-		firstOptionWidget.focus();
+		setTimeout(() => firstOptionWidget.focus(), 1);
 	}
 
 	protected layout(height?: number): void {
-		this.height = height;
-		// account for padding and the details view
-		this.splitview.layout(this.height - 120 - 20);
 	}
 
 	public dispose(): void {

src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts

@@ -91,7 +91,6 @@ suite('Advanced properties dialog tests', () => {
 			undefined, // partsService
 			undefined, // themeService
 			undefined, // Context view service
-			undefined, // instantiation Service
 			undefined, // telemetry service
 			new MockContextKeyService() // contextkeyservice
 		);