Fix horizontal split view not working (#23889)

* Horizontal splitview sorta working

* remove the old element

* support getting size from model view container

* cleanup

* make splitViewHeight optional

* Update src/sql/azdata.proposed.d.ts

Co-authored-by: Charles Gagnon <chgagnon@microsoft.com>

* fix test

---------

Co-authored-by: Charles Gagnon <chgagnon@microsoft.com>

extensions/query-store/src/common/utils.ts

@@ -57,21 +57,19 @@ export function createTwoComponentFlexContainer(view: azdata.ModelView, firstCom
 /**
  * Creates a vertical splitview
  * @param view
- * @param topComponent
+ * @param firstComponent
- * @param bottomComponent
+ * @param secondComponent
- * @param splitViewHeight
+ * @param orientation orientation of the split view - horizontal or vertical
  * @returns Vertical SplitViewContainer with the top and bottom components
  */
-export function createVerticalSplitView(view: azdata.ModelView, topComponent: azdata.Component, bottomComponent: azdata.Component, splitViewHeight: number): azdata.SplitViewContainer {
+export function createSplitView(view: azdata.ModelView, firstComponent: azdata.Component, secondComponent: azdata.Component, orientation: string): azdata.SplitViewContainer {
-	// TODO: figure out why the horizontal spliview isn't working
-
 	const splitview = <azdata.SplitViewContainer>view.modelBuilder.splitViewContainer().component();
-	splitview.addItem(topComponent);
+	splitview.addItem(firstComponent);
-	splitview.addItem(bottomComponent);
+	splitview.addItem(secondComponent);
 
 	splitview.setLayout({
-		orientation: 'vertical',
+		orientation: orientation,
-		splitViewHeight: splitViewHeight
+		splitViewSize: undefined // setting this to undefined will default the splitview size to use the model view container's size
 	});
 
 	return splitview;

extensions/query-store/src/reports/baseQueryStoreReport.ts

@@ -59,19 +59,17 @@ export abstract class BaseQueryStoreReport {
 				break;
 			}
 			case 2: {
-				// TODO: replace 800 to have the number be based on how big the window is
 				// one container on top, one on the bottom
-				mainContainer = this.resizeable ? utils.createVerticalSplitView(view, containers[0], containers[1], 800) : utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'column');
+				mainContainer = this.resizeable ? utils.createSplitView(view, containers[0], containers[1], 'vertical') : utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'column');
 				break;
 			} case 3: {
 				// 2 containers on top, one on the bottom
-				// TODO: support portrait and landscape view. Right now it's landscape view only
+				mainContainer = this.resizeable ? utils.createSplitView(view, utils.createSplitView(view, containers[0], containers[1], 'horizontal'), containers[2], 'vertical')
-				mainContainer = this.resizeable ? utils.createVerticalSplitView(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), containers[2], 800)
 					: utils.createTwoComponentFlexContainer(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), containers[2], 'column');
 				break;
 			} case 4: {
 				// 2 containers on top, 2 on the bottom
-				mainContainer = this.resizeable ? utils.createVerticalSplitView(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), utils.createTwoComponentFlexContainer(view, containers[2], containers[3], 'row'), 800)
+				mainContainer = this.resizeable ? utils.createSplitView(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), utils.createTwoComponentFlexContainer(view, containers[2], containers[3], 'row'), 'vertical')
 					: utils.createTwoComponentFlexContainer(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), utils.createTwoComponentFlexContainer(view, containers[2], containers[3], 'row'), 'column');
 				break;
 			} default: {

extensions/query-store/src/test/utils.test.ts

@@ -5,7 +5,7 @@
 
 import * as azdata from 'azdata';
 import * as should from 'should';
-import { createOneComponentFlexContainer, createTwoComponentFlexContainer, createVerticalSplitView } from '../common/utils';
+import { createOneComponentFlexContainer, createTwoComponentFlexContainer, createSplitView } from '../common/utils';
 import { TestContext, createViewContext } from './testUtils';
 
 let testContext: TestContext;
@@ -29,8 +29,8 @@ describe('Test to verify flex container creation util function', () => {
 		should(flexContainer.valid).be.true();
 	});
 
-	it('Should create a component as expected with createVerticalSplitView', () => {
+	it('Should create a component as expected with createSplitView', () => {
-		let splitViewContainer: azdata.SplitViewContainer = createVerticalSplitView(testContext.view, testContext.component, testContext.component, 100);
+		let splitViewContainer: azdata.SplitViewContainer = createSplitView(testContext.view, testContext.component, testContext.component, 'vertical');
 		should(splitViewContainer.valid).be.true();
 	});
 });

extensions/schema-compare/src/schemaCompareMainWindow.ts

@@ -451,7 +451,7 @@ export class SchemaCompareMainWindow {
 			this.splitView.addItem(this.diffEditor);
 			this.splitView.setLayout({
 				orientation: 'vertical',
-				splitViewHeight: 800
+				splitViewSize: 800
 			});
 
 			// create a map of the differences to row numbers

src/sql/azdata.d.ts

@@ -3387,8 +3387,9 @@ declare module 'azdata' {
 
 		/**
 		 * SplitView height
+		 * @deprecated use splitViewSize instead
 		 */
-		splitViewHeight: number | string;
+		splitViewHeight?: number | string;
 	}
 
 	export interface FlexItemLayout {

src/sql/azdata.proposed.d.ts

@@ -2037,4 +2037,12 @@ declare module 'azdata' {
 		RemoteSession = 0,
 		LocalFile = 1
 	}
+
+	export interface SplitViewLayout extends FlexLayout {
+		/**
+		 * SplitView size. Height if the orientation is vertical, width if the orientation is horizontal
+		 * If undefined, the size of the model view container is used
+		 */
+		splitViewSize?: number | string | undefined;
+	}
 }

src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts

@@ -59,7 +59,7 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 	private _position: string;
 	private _splitView: SplitView;
 	private _orientation: Orientation;
-	private _splitViewHeight: number;
+	private _splitViewSize: number;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -103,8 +103,27 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 		this._position = layout.position ? layout.position : '';
 		this._height = convertSize(layout.height);
 		this._width = convertSize(layout.width);
-		this._orientation = layout.orientation.toLowerCase() === 'vertical' ? Orientation.VERTICAL : Orientation.HORIZONTAL;
+
-		this._splitViewHeight = convertSizeToNumber(layout.splitViewHeight);
+		if (!layout.splitViewSize) {
+			// if no size was passed in for the split view, use the dimensions of the model view container
+			const modelViewContainer = document.getElementsByClassName('model-view-container')[0] as HTMLDivElement;
+			const modelViewContainerRect = modelViewContainer.getBoundingClientRect();
+			this._splitViewSize = layout.orientation.toLowerCase() === 'vertical' ? modelViewContainerRect.height : modelViewContainerRect.width;
+		} else {
+			this._splitViewSize = convertSizeToNumber(layout.splitViewSize);
+		}
+
+		const layoutOrientation = layout.orientation.toLowerCase() === 'vertical' ? Orientation.VERTICAL : Orientation.HORIZONTAL;
+
+		if (this._orientation !== layoutOrientation) {
+			// have to recreate the splitview if the orientation changed because the SplitView needs the orientation when it's constructed for knowing
+			// which direction everyting should be (scrollbars, sashes, CSS classes), and these can't be swapped to the other orientation afterwards
+			this._splitView.el.remove();
+			this._splitView.dispose();
+
+			this._splitView = this._register(new SplitView(this._el.nativeElement, { orientation: layoutOrientation }));
+			this._orientation = layoutOrientation;
+		}
 
 		if (this._componentWrappers) {
 			this._componentWrappers.forEach(item => {
@@ -120,7 +139,8 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 				});
 			});
 		}
-		this._splitView.layout(this._splitViewHeight);
+
+		this._splitView.layout(this._splitViewSize);
 	}
 
 	// CSS-bound properties