Adding Diff view and Split view container as Model View Editor Components (#4831)

* intial code for diff view inside model view

* Adding basic Split View Container depending on Flex Layout

* Enabled resizing between top and bottom view

* cleaning up some of the sqlops references

* Adding height as per CR comment

src/sql/azdata.proposed.d.ts

@@ -2455,6 +2455,11 @@ declare module 'azdata' {
 
 	}
 
+	// Building on top of flex item
+	export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout> {
+
+	}
+
 	export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout> {
 
 	}
@@ -2695,6 +2700,19 @@ declare module 'azdata' {
 		position?: string;
 	}
 
+	export interface SplitViewLayout extends FlexLayout {
+
+		/**
+		 * Orientation of the views inside split
+		 */
+		orientation: string;
+
+		/**
+		 * SplitView height
+		 */
+		splitViewHeight: number | string;
+	}
+
 	export interface FlexItemLayout {
 		/**
 		 * Matches the order CSS property and its available values.
@@ -2769,6 +2787,9 @@ declare module 'azdata' {
 	export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> {
 	}
 
+	export interface SplitViewContainer extends Container<SplitViewLayout, FlexItemLayout> {
+	}
+
 	export interface FormContainer extends Container<FormLayout, FormItemLayout> {
 	}
 
@@ -3147,6 +3168,52 @@ declare module 'azdata' {
 
 	}
 
+	export interface DiffEditorComponent extends Component {
+		/**
+		 * The content inside the left text editor
+		 */
+		contentLeft: string;
+		/**
+		 * The content inside the right text editor
+		 */
+		contentRight: string;
+		/**
+		 * The languge mode for this text editor. The language mode is SQL by default.
+		 */
+		languageMode: string;
+		/**
+		 * The left editor Uri which will be used as a reference for VSCode Language Service.
+		 * Currently this is auto-generated by the framework but can be queried after
+		 * view initialization is completed
+		 */
+		readonly editorUriLeft: string;
+		/**
+		 * The right editor Uri which will be used as a reference for VSCode Language Service.
+		 * Currently this is auto-generated by the framework but can be queried after
+		 * view initialization is completed
+		 */
+		readonly editorUriRight: string;
+		/**
+		 * An event called when the editor content is updated
+		 */
+		readonly onContentChanged: vscode.Event<any>;
+
+		/**
+		 * An event called when the editor is created
+		 */
+		readonly onEditorCreated: vscode.Event<any>;
+
+		/**
+		 * Toggle for whether the editor should be automatically resized or not
+		 */
+		isAutoResizable: boolean;
+
+		/**
+		 * Minimum height for editor component
+		 */
+		minimumHeight: number;
+	}
+
 	export interface ButtonComponent extends Component, ButtonProperties {
 		/**
 		 * The label for the button

src/sql/parts/modelComponents/componentBase.ts

@@ -78,6 +78,10 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 
 	abstract setLayout(layout: any): void;
 
+	getHtml(): any{
+		return this._el.nativeElement;
+	}
+
 	public setDataProvider(handle: number, componentId: string, context: any): void {
 	}
 
@@ -102,6 +106,19 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		this.validate();
 	}
 
+	// Helper Function to update single property
+	public updateProperty(key: string, value: any): void {
+		if (key) {
+			this.properties[key] = value;
+
+			if (this.CSSStyles !== this._CSSStyles) {
+				this.updateStyles();
+			}
+			this.layout();
+			this.validate();
+		}
+	}
+
 	protected getProperties<TPropertyBag>(): TPropertyBag {
 		return this.properties as TPropertyBag;
 	}

src/sql/parts/modelComponents/components.contribution.ts

@@ -22,10 +22,12 @@ import TextComponent from './text.component';
 import LoadingComponent from './loadingComponent.component';
 import FileBrowserTreeComponent from './fileBrowserTree.component';
 import EditorComponent from './editor.component';
+import DiffEditorComponent from './diffeditor.component';
 import DomComponent from './dom.component';
 import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
 import HyperlinkComponent from 'sql/parts/modelComponents/hyperlink.component';
+import SplitViewContainer from 'sql/parts/modelComponents/splitviewContainer.component';
 
 export const DIV_CONTAINER = 'div-container';
 registerComponentType(DIV_CONTAINER, ModelComponentTypes.DivContainer, DivContainer);
@@ -33,6 +35,9 @@ registerComponentType(DIV_CONTAINER, ModelComponentTypes.DivContainer, DivContai
 export const FLEX_CONTAINER = 'flex-container';
 registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexContainer);
 
+export const SPLITVIEW_CONTAINER = 'splitView-container';
+registerComponentType(SPLITVIEW_CONTAINER, ModelComponentTypes.SplitViewContainer, SplitViewContainer);
+
 export const FORM_CONTAINER = 'form-container';
 registerComponentType(FORM_CONTAINER, ModelComponentTypes.Form, FormContainer);
 
@@ -88,6 +93,9 @@ registerComponentType(FILEBROWSERTREE_COMPONENT, ModelComponentTypes.FileBrowser
 export const EDITOR_COMPONENT = 'editor-component';
 registerComponentType(EDITOR_COMPONENT, ModelComponentTypes.Editor, EditorComponent);
 
+export const DIFF_EDITOR_COMPONENT = 'diff-editor-component';
+registerComponentType(DIFF_EDITOR_COMPONENT, ModelComponentTypes.DiffEditor, DiffEditorComponent);
+
 export const DOM_COMPONENT = 'dom-component';
 registerComponentType(DOM_COMPONENT, ModelComponentTypes.Dom, DomComponent);
 

src/sql/parts/modelComponents/diffeditor.component.ts

@@ -0,0 +1,215 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./editor';
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList
+} from '@angular/core';
+
+import * as azdata from 'azdata';
+import * as DOM from 'vs/base/browser/dom';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
+import { URI } from 'vs/base/common/uri';
+import { Schemas } from 'vs/base/common/network';
+import { IModeService } from 'vs/editor/common/services/modeService';
+import { IModelService } from 'vs/editor/common/services/modelService';
+
+import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import { SimpleProgressService } from 'vs/editor/standalone/browser/simpleServices';
+import { IProgressService } from 'vs/platform/progress/common/progress';
+import { TextDiffEditor } from 'vs/workbench/browser/parts/editor/textDiffEditor';
+import { DiffEditorInput } from 'vs/workbench/common/editor/diffEditorInput';
+import { TextDiffEditorModel} from 'vs/workbench/common/editor/textDiffEditorModel';
+import { CancellationTokenSource } from 'vs/base/common/cancellation';
+
+@Component({
+	template: '',
+	selector: 'modelview-diff-editor-component'
+})
+export default class DiffEditorComponent extends ComponentBase implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _editor: TextDiffEditor;
+	private _editorInput: DiffEditorInput;
+	private _editorModel: TextDiffEditorModel;
+	private _renderedContentLeft: string;
+	private _renderedContentRight: string;
+	private _languageMode: string;
+	private _isAutoResizable: boolean;
+	private _minimumHeight: number;
+	private _instancetiationService: IInstantiationService;
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IModelService) private _modelService: IModelService,
+		@Inject(IModeService) private _modeService: IModeService
+	) {
+		super(changeRef, el);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+		this._createEditor();
+		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
+			this.layout();
+		}));
+	}
+
+	private _createEditor(): void {
+		this._instantiationService = this._instantiationService.createChild(new ServiceCollection([IProgressService, new SimpleProgressService()]));
+		this._editor = this._instantiationService.createInstance(TextDiffEditor);
+		this._editor.create(this._el.nativeElement);
+		this._editor.setVisible(true);
+		let uri1 = this.createUri('source');
+		this.editorUriLeft = uri1.toString();
+		let uri2 = this.createUri('target');
+		this.editorUriRight = uri2.toString();
+
+		let cancellationTokenSource = new CancellationTokenSource();
+		let editorinput1 =	this._instantiationService.createInstance(UntitledEditorInput, uri1, false, 'plaintext', '', '');
+		let editorinput2 =	this._instantiationService.createInstance(UntitledEditorInput, uri2, false, 'plaintext', '', '');
+		this._editorInput = this._instantiationService.createInstance(DiffEditorInput, 'MyEditor', 'My description', editorinput1, editorinput2, true);
+		this._editor.setInput(this._editorInput, undefined, cancellationTokenSource.token);
+
+
+		this._editorInput.resolve().then(model => {
+			this._editorModel = model as TextDiffEditorModel;
+			this.updateModel();
+			this.layout();
+			this.validate();
+		});
+
+		this._register(this._editor);
+		this._register(this._editorInput);
+		this._register(this._editorModel);
+	}
+
+	private createUri(input:string): URI {
+		let uri = URI.from({ scheme: Schemas.untitled, path: `${this.descriptor.type}-${this.descriptor.id}-${input}` });
+		return uri;
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		let width: number = this.convertSizeToNumber(this.width);
+		let height: number = this.convertSizeToNumber(this.height);
+		if (this._isAutoResizable) {
+			height = Math.max(this._editor.maximumHeight, this._minimumHeight ? this._minimumHeight : 0);
+		}
+		this._editor.layout(new DOM.Dimension(
+			width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement),
+			height && height > 0 ? height : DOM.getContentHeight(this._el.nativeElement)));
+		let element = <HTMLElement>this._el.nativeElement;
+		element.style.position = this.position;
+
+		super.layout();
+	}
+
+	/// Editor Functions
+
+	private updateModel() {
+		if (this._editorModel) {
+			this._renderedContentLeft = this.contentLeft;
+			this._renderedContentRight = this.contentRight;
+			this._modelService.updateModel(this._editorModel.originalModel.textEditorModel, this._renderedContentLeft);
+			this._modelService.updateModel(this._editorModel.modifiedModel.textEditorModel, this._renderedContentRight);
+		}
+	}
+
+	private updateLanguageMode() {
+		if (this._editorModel && this._editor) {
+			this._languageMode = this.languageMode;
+			let languageSelection = this._modeService.create(this._languageMode);
+			this._modelService.setMode(this._editorModel.originalModel.textEditorModel, languageSelection);
+			this._modelService.setMode(this._editorModel.modifiedModel.textEditorModel, languageSelection);
+		}
+	}
+
+	/// IComponent implementation
+	public setLayout(layout: any): void {
+		// TODO allow configuring the look and feel
+	}
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		if (this.contentLeft !== this._renderedContentLeft || this.contentRight !== this._renderedContentRight) {
+			this.updateModel();
+		}
+		if (this.languageMode !== this._languageMode) {
+			this.updateLanguageMode();
+		}
+		this._isAutoResizable = this.isAutoResizable;
+		this._minimumHeight = this.minimumHeight;
+		this.layout();
+		this.validate();
+	}
+
+	// CSS-bound properties
+	public get contentLeft(): string {
+		return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentLeft, undefined);
+	}
+
+	public set contentLeft(newValue: string) {
+		this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentLeft) => { properties.contentLeft = contentLeft; }, newValue);
+	}
+
+	public get contentRight(): string {
+		return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentRight, undefined);
+	}
+
+	public set contentRight(newValue: string) {
+		this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentRight) => { properties.contentRight = contentRight; }, newValue);
+	}
+
+	public get languageMode(): string {
+		return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.languageMode, undefined);
+	}
+
+	public set languageMode(newValue: string) {
+		this.setPropertyFromUI<azdata.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
+	}
+
+	public get isAutoResizable(): boolean {
+		return this.getPropertyOrDefault<azdata.EditorProperties, boolean>((props) => props.isAutoResizable, false);
+	}
+
+	public set isAutoResizable(newValue: boolean) {
+		this.setPropertyFromUI<azdata.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
+	}
+
+	public get minimumHeight(): number {
+		return this.getPropertyOrDefault<azdata.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight);
+	}
+
+	public set minimumHeight(newValue: number) {
+		this.setPropertyFromUI<azdata.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
+	}
+
+	public get editorUriLeft(): string {
+		return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriLeft, '');
+	}
+
+	public set editorUriLeft(newValue: string) {
+		this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriLeft) => { properties.editorUriLeft = editorUriLeft; }, newValue);
+	}
+
+	public get editorUriRight(): string {
+		return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriRight, '');
+	}
+
+	public set editorUriRight(newValue: string) {
+		this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriRight) => { properties.editorUriRight = editorUriRight; }, newValue);
+	}
+}

src/sql/parts/modelComponents/editor.css

@@ -7,4 +7,10 @@
 	height: 100%;
 	width : 100%;
 	display: block;
+}
+
+modelview-diff-editor-component {
+	height: 100%;
+	width : 100%;
+	display: block;
 }

src/sql/parts/modelComponents/flexContainer.component.ts

@@ -18,7 +18,7 @@ import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentW
 
 import types = require('vs/base/common/types');
 
-class FlexItem {
+export class FlexItem {
 	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { }
 }
 

src/sql/parts/modelComponents/interfaces.ts

@@ -23,6 +23,7 @@ export interface IComponent extends IDisposable {
 	addToContainer?: (componentDescriptor: IComponentDescriptor, config: any, index?: number) => void;
 	removeFromContainer?: (componentDescriptor: IComponentDescriptor) => void;
 	setLayout?: (layout: any) => void;
+	getHtml: () => any;
 	setProperties?: (properties: { [key: string]: any; }) => void;
 	enabled: boolean;
 	readonly valid?: boolean;

src/sql/parts/modelComponents/splitviewContainer.component.ts

@@ -0,0 +1,178 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./flexContainer';
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
+} from '@angular/core';
+
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { FlexItemLayout, SplitViewLayout } from 'azdata';
+import { FlexItem } from './flexContainer.component';
+import { ContainerBase, ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { Event, Emitter } from 'vs/base/common/event';
+import { SplitView, Orientation, Sizing, IView } from 'vs/base/browser/ui/splitview/splitview';
+
+class SplitPane implements IView {
+	orientation: Orientation;
+	element: HTMLElement;
+	minimumSize: number;
+	maximumSize: number;
+	onDidChange: Event<number> = Event.None;
+	size: number;
+	component: ComponentBase;
+	layout(size: number): void {
+		this.size = size;
+		try {
+			if (this.orientation === Orientation.VERTICAL) {
+				this.component.updateProperty('height', size);
+			}
+			else {
+				this.component.updateProperty('width', size);
+			}
+		} catch { }
+	}
+}
+
+@Component({
+	template: `
+		<div *ngIf="items" class="splitViewContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
+			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
+				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+				</model-component-wrapper>
+			</div>
+		</div>
+	`
+})
+
+export default class SplitViewContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _flexFlow: string;
+	private _justifyContent: string;
+	private _alignItems: string;
+	private _alignContent: string;
+	private _textAlign: string;
+	private _height: string;
+	private _width: string;
+	private _position: string;
+	private _splitView: SplitView;
+	private _orientation : Orientation;
+	private _splitViewHeight : number;
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
+	) {
+		super(changeRef, el);
+		this._flexFlow = '';	// default
+		this._justifyContent = '';	// default
+		this._orientation = Orientation.VERTICAL; // default
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	ngAfterViewInit(): void {
+		this._splitView = this._register(new SplitView(this._el.nativeElement, { orientation: this._orientation }));
+	}
+
+	private GetCorrespondingView(component: IComponent, orientation: Orientation): IView {
+		let c = component as ComponentBase;
+		let basicView: SplitPane = new SplitPane();
+		basicView.orientation = orientation;
+		basicView.element = c.getHtml(),
+		basicView.minimumSize = orientation === Orientation.VERTICAL ? c.convertSizeToNumber(c.height) : c.convertSizeToNumber(c.width);
+		basicView.maximumSize = Number.MAX_VALUE;
+		return basicView;
+	}
+
+	/// IComponent implementation
+
+	public setLayout(layout: SplitViewLayout): void {
+		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
+		this._justifyContent = layout.justifyContent ? layout.justifyContent : '';
+		this._alignItems = layout.alignItems ? layout.alignItems : '';
+		this._alignContent = layout.alignContent ? layout.alignContent : '';
+		this._textAlign = layout.textAlign ? layout.textAlign : '';
+		this._position = layout.position ? layout.position : '';
+		this._height = this.convertSize(layout.height);
+		this._width = this.convertSize(layout.width);
+		this._orientation = layout.orientation.toLowerCase() === 'vertical' ? Orientation.VERTICAL : Orientation.HORIZONTAL;
+		this._splitViewHeight = this.convertSizeToNumber(layout.splitViewHeight);
+
+		if (this._componentWrappers) {
+			let i : number = 0;
+			this._componentWrappers.forEach(item => {
+				var component = item.modelStore.getComponent(item.descriptor.id);
+				item.modelStore.validate(component).then(value => {
+					if(value === true){
+						let view = this.GetCorrespondingView(component, this._orientation);
+						this._splitView.addView(view, Sizing.Split(i));
+					}
+					else{
+						console.log('Could not add views inside split view container');
+					}
+				});
+				i++;
+			});
+		}
+		this._splitView.layout(this._splitViewHeight);
+	}
+
+	// CSS-bound properties
+	public get flexFlow(): string {
+		return this._flexFlow;
+	}
+
+	public get justifyContent(): string {
+		return this._justifyContent;
+	}
+
+	public get alignItems(): string {
+		return this._alignItems;
+	}
+
+	public get height(): string {
+		return this._height;
+	}
+
+	public get width(): string {
+		return this._width;
+	}
+
+	public get alignContent(): string {
+		return this._alignContent;
+	}
+
+	public get textAlign(): string {
+		return this._textAlign;
+	}
+
+	public get position(): string {
+		return this._position;
+	}
+
+	public get orientation(): string {
+		return this._orientation.toString();
+	}
+
+	private getItemFlex(item: FlexItem): string {
+		return item.config ? item.config.flex : '1 1 auto';
+	}
+	private getItemOrder(item: FlexItem): number {
+		return item.config ? item.config.order : 0;
+	}
+	private getItemStyles(item: FlexItem): { [key: string]: string } {
+		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
+	}
+}

src/sql/sqlops.proposed.d.ts

@@ -67,6 +67,7 @@ declare module 'sqlops' {
 		withProperties<U>(properties: U): ComponentBuilder<T>;
 		withValidation(validation: (component: T) => boolean): ComponentBuilder<T>;
 	}
+
 	export interface ContainerBuilder<T extends Component, TLayout, TItemLayout> extends ComponentBuilder<T> {
 		withLayout(layout: TLayout): ContainerBuilder<T, TLayout, TItemLayout>;
 		withItems(components: Array<Component>, itemLayout?: TItemLayout): ContainerBuilder<T, TLayout, TItemLayout>;

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -144,6 +144,7 @@ export enum ModelComponentTypes {
 	NavContainer,
 	DivContainer,
 	FlexContainer,
+	SplitViewContainer,
 	Card,
 	InputBox,
 	DropDown,
@@ -164,6 +165,7 @@ export enum ModelComponentTypes {
 	TreeComponent,
 	FileBrowserTree,
 	Editor,
+	DiffEditor,
 	Dom,
 	Hyperlink
 }

src/sql/workbench/api/node/extHostModelView.ts

@@ -52,6 +52,13 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return container;
 	}
 
+	splitViewContainer(): azdata.SplitViewBuilder {
+		let id = this.getNextComponentId();
+		let container: GenericContainerBuilder<azdata.SplitViewContainer, any, any> = new GenericContainerBuilder<azdata.SplitViewContainer, azdata.SplitViewLayout, azdata.FlexItemLayout>(this._proxy, this._handle, ModelComponentTypes.SplitViewContainer, id);
+		this._componentBuilders.set(id, container);
+		return container;
+	}
+
 	formContainer(): azdata.FormBuilder {
 		let id = this.getNextComponentId();
 		let container = new FormContainerBuilder(this._proxy, this._handle, ModelComponentTypes.Form, id, this);
@@ -129,6 +136,13 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	diffeditor(): azdata.ComponentBuilder<azdata.DiffEditorComponent> {
+		let id = this.getNextComponentId();
+		let builder: ComponentBuilderImpl<azdata.DiffEditorComponent> = this.getComponentBuilder(new DiffEditorWrapper(this._proxy, this._handle, id), id);
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	button(): azdata.ComponentBuilder<azdata.ButtonComponent> {
 		let id = this.getNextComponentId();
 		let builder: ComponentBuilderImpl<azdata.ButtonComponent> = this.getComponentBuilder(new ButtonWrapper(this._proxy, this._handle, id), id);
@@ -940,6 +954,84 @@ class EditorWrapper extends ComponentWrapper implements azdata.EditorComponent {
 	}
 }
 
+class DiffEditorWrapper extends ComponentWrapper implements azdata.DiffEditorComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.DiffEditor, id);
+		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
+		this._emitterMap.set(ComponentEventType.onComponentCreated, new Emitter<any>());
+	}
+
+	public get contentLeft(): string {
+		return this.properties['contentLeft'];
+	}
+
+	public set contentLeft(v: string) {
+		this.setProperty('contentLeft', v);
+	}
+
+	public get contentRight(): string {
+		return this.properties['contentRight'];
+	}
+
+	public set contentRight(v: string) {
+		this.setProperty('contentRight', v);
+	}
+
+	public get languageMode(): string {
+		return this.properties['languageMode'];
+	}
+	public set languageMode(v: string) {
+		this.setProperty('languageMode', v);
+	}
+
+	public get editorUri(): string {
+		return this.properties['editorUri'];
+	}
+
+	public get isAutoResizable(): boolean {
+		return this.properties['isAutoResizable'];
+	}
+
+	public set isAutoResizable(v: boolean) {
+		this.setProperty('isAutoResizable', v);
+	}
+
+	public get minimumHeight(): number {
+		return this.properties['minimumHeight'];
+	}
+
+	public set minimumHeight(v: number) {
+		this.setProperty('minimumHeight', v);
+	}
+
+	public get onContentChanged(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter && emitter.event;
+	}
+
+	public get onEditorCreated(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onComponentCreated);
+		return emitter && emitter.event;
+	}
+
+	public get editorUriLeft(): string {
+		return this.properties['editorUriLeft'];
+	}
+
+	public set editorUriLeft(v: string) {
+		this.setProperty('editorUriLeft', v);
+	}
+
+	public get editorUriRight(): string {
+		return this.properties['editorUriRight'];
+	}
+
+	public set editorUriRight(v: string) {
+		this.setProperty('editorUriRight', v);
+	}
+}
+
 class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonComponent {
 
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {