ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-12 19:18:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix horizontal split view not working (#23889)

Browse Source 
* 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>
This commit is contained in:
Kim Santiago
2023-07-17 12:31:04 -10:00
committed by GitHub
parent 0e17a05985
commit eeab2b4abe
7 changed files with 49 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
extensions/query-store/src/common/utils.ts
View File

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

8
extensions/query-store/src/reports/baseQueryStoreReport.ts
View File

@@ -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.createVerticalSplitView(view, utils.createTwoComponentFlexContainer(view, containers[0], containers[1], 'row'), containers[2], 800)
mainContainer = this.resizeable ? utils.createSplitView(view, utils.createSplitView(view, containers[0], containers[1], 'horizontal'), containers[2], 'vertical')
: 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: {

6
extensions/query-store/src/test/utils.test.ts
View File

@@ -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', () => {
let splitViewContainer: azdata.SplitViewContainer = createVerticalSplitView(testContext.view, testContext.component, testContext.component, 100);
it('Should create a component as expected with createSplitView', () => {
let splitViewContainer: azdata.SplitViewContainer = createSplitView(testContext.view, testContext.component, testContext.component, 'vertical');
should(splitViewContainer.valid).be.true();
});
});