Update action collapsed state with emitter (#1099)

src/sql/parts/dashboard/common/actions.ts

@@ -8,6 +8,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IDisposable } from 'vs/base/common/lifecycle';
+import Event from 'vs/base/common/event';
 
 import { IAngularEventingService, AngularEventType, IAngularEvent } from 'sql/services/angularEventing/angularEventingService';
 import { INewDashboardTabDialogService } from 'sql/parts/dashboard/newDashboardTabDialog/interface';
@@ -209,13 +210,15 @@ export class CollapseWidgetAction extends Action {
 		private _uri: string,
 		private _widgetUuid: string,
 		private collpasedState: boolean,
+		private collapsedStateChangedEvent: Event<boolean>,
 		@IAngularEventingService private _angularEventService: IAngularEventingService
 	) {
 		super(
 			CollapseWidgetAction.ID,
 			collpasedState ? CollapseWidgetAction.EXPAND_LABEL : CollapseWidgetAction.COLLPASE_LABEL,
 			collpasedState ? CollapseWidgetAction.EXPAND_ICON : CollapseWidgetAction.COLLAPSE_ICON
 		);
+		this.collapsedStateChangedEvent(collapsed => this._updateState(collapsed));
 	}
 
 	run(): TPromise<boolean> {
@@ -225,7 +228,11 @@ export class CollapseWidgetAction extends Action {
 	}
 
 	private _toggleState(): void {
-		this.collpasedState = !this.collpasedState;
+		this._updateState(!this.collpasedState);
+	}
+
+	private _updateState(collapsed: boolean): void {
+		this.collpasedState = collapsed;
 		this._setClass(this.collpasedState ? CollapseWidgetAction.EXPAND_ICON : CollapseWidgetAction.COLLAPSE_ICON);
 		this._setLabel(this.collpasedState ? CollapseWidgetAction.EXPAND_LABEL : CollapseWidgetAction.COLLPASE_LABEL);
 	}

src/sql/parts/dashboard/contents/dashboardWidgetWrapper.component.ts

@@ -35,6 +35,7 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { memoize } from 'vs/base/common/decorators';
 import { generateUuid } from 'vs/base/common/uuid';
+import { Emitter } from 'vs/base/common/event';
 
 const componentMap: { [x: string]: Type<IDashboardWidget> } = {
 	'properties-widget': PropertiesWidgetComponent,
@@ -63,12 +64,17 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 			return;
 		}
 		this._collapsed = val;
+		if (this.collapsedStateChangedEmitter) {
+			this.collapsedStateChangedEmitter.fire(this._collapsed);
+		}
 		this._changeref.detectChanges();
 		if (!val) {
 			this.loadWidget();
 		}
 	}
 
+	private collapsedStateChangedEmitter: Emitter<boolean>;
+
 	@memoize
 	public get guid(): string {
 		return generateUuid();
@@ -108,7 +114,8 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
 		if (this._actions) {
 			if (this.collapsable) {
-				this._actionbar.push(this._bootstrap.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed), { icon: true, label: false });
+				this.collapsedStateChangedEmitter = new Emitter<boolean>();
+				this._actionbar.push(this._bootstrap.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed, this.collapsedStateChangedEmitter.event), { icon: true, label: false });
 			}
 			this._actionbar.push(this._bootstrap.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions, this._component.actionsContext), { icon: true, label: false });
 		}