Separator component (#9310)

* Separator component

extensions/agent/src/dialogs/operatorDialog.ts

@@ -361,9 +361,15 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				}, {
 					component: pagerFridayCheckboxContainer,
 					title: ''
+				}, {
+					component: view.modelBuilder.separator().component(),
+					title: ''
 				}, {
 					component: pagerSaturdayCheckboxContainer,
 					title: ''
+				}, {
+					component: view.modelBuilder.separator().component(),
+					title: ''
 				}, {
 					component: pagerSundayCheckboxContainer,
 					title: ''

extensions/machine-learning-services/src/test/views/externalLanguages/utils.ts

@@ -169,7 +169,8 @@ export function createContext(): TestContext {
 			toolbarContainer: undefined!,
 			loadingComponent: () => loadingBuilder,
 			fileBrowserTree: undefined!,
-			hyperlink: undefined!
+			hyperlink: undefined!,
+			separator: undefined!
 		}
 	};
 	let tab: azdata.window.DialogTab = {

src/sql/azdata.proposed.d.ts

@@ -126,6 +126,7 @@ declare module 'azdata' {
 
 	export interface ModelBuilder {
 		radioCardGroup(): ComponentBuilder<RadioCardGroupComponent>;
+		separator(): ComponentBuilder<SeparatorComponent>;
 	}
 
 	export interface RadioCard {
@@ -160,6 +161,9 @@ declare module 'azdata' {
 		onSelectionChanged: vscode.Event<any>;
 	}
 
+	export interface SeparatorComponent extends Component {
+	}
+
 	export interface DeclarativeTableProperties extends ComponentProperties {
 	}
 

src/sql/base/browser/ui/separator/separator.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from 'vs/base/common/lifecycle';
+
+export class Separator extends Disposable {
+	private readonly element: HTMLHRElement;
+
+	constructor(container: HTMLElement) {
+		super();
+
+		this.element = document.createElement('hr');
+		container.append(this.element);
+	}
+}

src/sql/platform/dashboard/browser/interfaces.ts

@@ -125,5 +125,6 @@ export enum ModelComponentTypes {
 	Dom,
 	Hyperlink,
 	Image,
-	RadioCardGroup
+	RadioCardGroup,
+	Separator
 }

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

@@ -163,6 +163,13 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	separator(): azdata.ComponentBuilder<azdata.SeparatorComponent> {
+		let id = this.getNextComponentId();
+		let builder: ComponentBuilderImpl<azdata.SeparatorComponent> = this.getComponentBuilder(new SeparatorWrapper(this._proxy, this._handle, id), id);
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	dropDown(): azdata.ComponentBuilder<azdata.DropDownComponent> {
 		let id = this.getNextComponentId();
 		let builder: ComponentBuilderImpl<azdata.DropDownComponent> = this.getComponentBuilder(new DropDownWrapper(this._proxy, this._handle, id), id);
@@ -1534,6 +1541,12 @@ class FileBrowserTreeComponentWrapper extends ComponentWrapper implements azdata
 	}
 }
 
+class SeparatorWrapper extends ComponentWrapper implements azdata.SeparatorComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.Separator, id);
+	}
+}
+
 class DivContainerWrapper extends ComponentWrapper implements azdata.DivContainer {
 	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
 		super(proxy, handle, type, id);

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

@@ -173,7 +173,8 @@ export enum ModelComponentTypes {
 	Dom,
 	Hyperlink,
 	Image,
-	RadioCardGroup
+	RadioCardGroup,
+	Separator
 }
 
 export enum ColumnSizingMode {

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

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
+	ViewChild, ElementRef, OnDestroy, AfterViewInit
+} from '@angular/core';
+
+
+import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { Separator } from 'sql/base/browser/ui/separator/separator';
+
+@Component({
+	selector: `modelview-separator`,
+	template: `
+		<div #separator> </div>
+	`
+})
+export default class SeparatorComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	private _separator: Separator;
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	@ViewChild('separator', { read: ElementRef }) private _separatorContainer: ElementRef;
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+	) {
+		super(changeRef, el);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngAfterViewInit(): void {
+		if (this._separatorContainer) {
+			this._separator = new Separator(this._separatorContainer.nativeElement);
+			this._register(this._separator);
+		}
+	}
+
+	setLayout(layout: any): void {
+		// Change look and feel
+		this.layout();
+	}
+}

src/sql/workbench/contrib/modelView/browser/components.contribution.ts

@@ -30,6 +30,7 @@ import { registerComponentType } from 'sql/platform/dashboard/browser/modelCompo
 import HyperlinkComponent from 'sql/workbench/browser/modelComponents/hyperlink.component';
 import SplitViewContainer from 'sql/workbench/browser/modelComponents/splitviewContainer.component';
 import RadioCardGroup from 'sql/workbench/browser/modelComponents/radioCardGroup.component';
+import SeparatorComponent from 'sql/workbench/browser/modelComponents/separator.component';
 import { ModelComponentTypes } from 'sql/platform/dashboard/browser/interfaces';
 
 export const DIV_CONTAINER = 'div-container';
@@ -110,3 +111,6 @@ registerComponentType(HYPERLINK_COMPONENT, ModelComponentTypes.Hyperlink, Hyperl
 
 export const RADIOCARDGROUP_COMPONENT = 'radiocardgroup-component';
 registerComponentType(RADIOCARDGROUP_COMPONENT, ModelComponentTypes.RadioCardGroup, RadioCardGroup);
+
+export const SEPARATOR_COMPONENT = 'separator-component';
+registerComponentType(SEPARATOR_COMPONENT, ModelComponentTypes.Separator, SeparatorComponent);