add toggle button for properties container (#16335)

src/sql/azdata.proposed.d.ts

@@ -1016,4 +1016,11 @@ declare module 'azdata' {
 	export interface VisualizationOptions {
 		type: VisualizationType;
 	}
+
+	export interface PropertiesContainerComponentProperties {
+		/**
+		 * Whether to show the button that will hide/show the content of the container. Default value is false.
+		 */
+		showToggleButton?: boolean;
+	}
 }

src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css

@@ -61,3 +61,7 @@ properties-container .splitter {
 properties-container .columnLayout .splitter {
 	display: none;
 }
+
+properties-container .actionbar-container {
+	justify-content: center;
+}

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html

@@ -4,7 +4,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div class="grid-container {{gridDisplayLayout}}">
+<div *ngIf="this._togglePropertiesAction.expanded" class="grid-container {{gridDisplayLayout}}">
 	<ng-template ngFor let-item [ngForOf]="propertyItems">
 		<div class="property {{propertyLayout}}">
 			<div class="propertyName">{{item.displayName}}</div>
@@ -13,3 +13,4 @@
 		</div>
 	</ng-template>
 </div>
+<div [style.display]="this.showToggleButton ? 'flex': 'none'"  class="actionbar-container" #actionbar></div>

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts

@@ -4,9 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/propertiesContainer';
-import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import * as DOM from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
+import { TogglePropertiesAction } from 'sql/base/browser/ui/propertiesContainer/togglePropertiesAction';
 
 enum GridDisplayLayout {
 	twoColumns = 'twoColumns',
@@ -27,10 +29,14 @@ export interface PropertyItem {
 	selector: 'properties-container',
 	templateUrl: decodeURI(require.toUrl('./propertiesContainer.component.html'))
 })
-export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
+export class PropertiesContainer extends Disposable implements OnInit, OnDestroy, AfterViewInit {
 	public gridDisplayLayout = GridDisplayLayout.twoColumns;
 	public propertyLayout = PropertyLayoutDirection.row;
 	private _propertyItems: PropertyItem[] = [];
+	private _showToggleButton: boolean = false;
+	private _actionbar: ActionBar;
+	private _togglePropertiesAction: TogglePropertiesAction = new TogglePropertiesAction();
+	@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
@@ -38,6 +44,16 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
 		super();
 	}
 
+	ngAfterViewInit(): void {
+		this._togglePropertiesAction.onDidChange((e) => {
+			if (e.expanded !== undefined) {
+				this._changeRef.detectChanges();
+			}
+		});
+		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+		this._actionbar.push(this._togglePropertiesAction, { icon: true, label: false });
+	}
+
 	ngOnInit() {
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, () => this.layoutPropertyItems()));
 		this._changeRef.detectChanges();
@@ -74,4 +90,15 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
 	public get propertyItems(): PropertyItem[] {
 		return this._propertyItems;
 	}
+
+	public get showToggleButton(): boolean {
+		return this._showToggleButton;
+	}
+
+	public set showToggleButton(v: boolean) {
+		if (this._showToggleButton !== v) {
+			this._showToggleButton = v;
+			this._changeRef.detectChanges();
+		}
+	}
 }

src/sql/base/browser/ui/propertiesContainer/togglePropertiesAction.ts

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Action } from 'vs/base/common/actions';
+import * as nls from 'vs/nls';
+
+export class TogglePropertiesAction extends Action {
+	private static readonly ID = 'TogglePropertiesAction';
+	private static readonly COLLPASE_LABEL = nls.localize('hideProperties', "Hide properties");
+	private static readonly EXPAND_LABEL = nls.localize('showProperties', "Show Properties");
+	private static readonly COLLAPSE_ICON = 'codicon-chevron-up';
+	private static readonly EXPAND_ICON = 'codicon-chevron-down';
+
+	constructor(
+	) {
+		super(TogglePropertiesAction.ID, TogglePropertiesAction.COLLPASE_LABEL, TogglePropertiesAction.COLLAPSE_ICON);
+		this.expanded = true;
+	}
+
+	override async run(): Promise<void> {
+		this.expanded = !this.expanded;
+		this.class = this.expanded ? TogglePropertiesAction.COLLAPSE_ICON : TogglePropertiesAction.EXPAND_ICON;
+		this.label = this.expanded ? TogglePropertiesAction.COLLPASE_LABEL : TogglePropertiesAction.EXPAND_LABEL;
+	}
+}

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

@@ -47,6 +47,7 @@ export default class PropertiesContainerComponent extends ComponentBase<azdata.P
 	public override setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this._propertiesContainer.propertyItems = this.propertyItems;
+		this._propertiesContainer.showToggleButton = this.showToggleButton;
 	}
 
 	public get propertyItems(): PropertyItem[] {
@@ -57,6 +58,10 @@ export default class PropertiesContainerComponent extends ComponentBase<azdata.P
 		this.setPropertyFromUI<azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue);
 		this._propertiesContainer.propertyItems = newValue;
 	}
+
+	public get showToggleButton(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.showToggleButton, false);
+	}
 }
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {