added common action bar with context based actions for all pages (#1842)

src/sql/parts/jobManagement/views/alertsView.component.html

@@ -9,9 +9,7 @@
 	<h1 class="job-heading" *ngIf="_isCloud === true">No Alerts Available</h1>
 	<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
 </div>
-<div class="jobs-view-toolbar">
-	<div (click)="refreshJobs()" tabindex="0"><div class="small icon refresh"></div><span>{{RefreshText}}</span></div>
-	<div (click)="openCreateAlertDialog()" tabindex="0"><div class="small icon new"></div><span>{{NewAlertText}}</span></div>
-</div>
+
+<div #actionbarContainer class="actionbar-container"></div>
 
 <div #jobalertsgrid class="jobview-grid"></div>

src/sql/parts/jobManagement/views/alertsView.component.ts

@@ -20,15 +20,13 @@ import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { EditAlertAction, DeleteAlertAction } from 'sql/parts/jobManagement/common/jobActions';
+import { EditAlertAction, DeleteAlertAction, NewAlertAction } from 'sql/parts/jobManagement/common/jobActions';
 import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IAction } from 'vs/base/common/actions';
 import { TPromise } from 'vs/base/common/winjs.base';
-
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
@@ -42,9 +40,6 @@ export const ROW_HEIGHT: number = 45;
 })
 export class AlertsViewComponent extends JobManagementView implements OnInit {
 
-	private NewAlertText: string = nls.localize('jobAlertToolbar-NewJob', "New Alert");
-	private RefreshText: string = nls.localize('jobAlertToolbar-Refresh', "Refresh");
-
 	private columns: Array<Slick.Column<any>> = [
 		{ name: nls.localize('jobAlertColumns.name', 'Name'), field: 'name', width: 200, id: 'name' },
 		{ name: nls.localize('jobAlertColumns.lastOccurrenceDate', 'Last Occurrence'), field: 'lastOccurrenceDate', width: 200, id: 'lastOccurrenceDate' },
@@ -67,20 +62,19 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
 	@ViewChild('jobalertsgrid') _gridEl: ElementRef;
 
 	public alerts: sqlops.AgentAlertInfo[];
+	public contextAction = NewAlertAction;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
-		@Inject(IThemeService) private _themeService: IThemeService,
 		@Inject(ICommandService) private _commandService: ICommandService,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
-		@Inject(IKeybindingService) keybindingService: IKeybindingService
-	) {
-		super(commonService, contextMenuService, keybindingService);
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService) {
+		super(commonService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -111,6 +105,8 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
 		this.dataView = new Slick.Data.DataView();
 
 		$(this._gridEl.nativeElement).empty();
+		$(this.actionBarContainer.nativeElement).empty();
+		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
@@ -166,7 +162,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
 			: undefined;
 	}
 
-	private openCreateAlertDialog() {
+	public openCreateAlertDialog() {
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openCreateAlertDialog', ownerUri);
 	}

src/sql/parts/jobManagement/views/jobHistory.css

@@ -243,7 +243,6 @@ jobhistory-component > .jobhistory-heading-container > .icon.in-progress {
 
 jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container {
 	border-top: 3px solid #f4f4f4;
-	padding-top: 10px;
 }
 
 .vs-dark jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container {

src/sql/parts/jobManagement/views/jobManagementView.ts

@@ -3,16 +3,19 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { ElementRef, AfterContentChecked } from '@angular/core';
+import { ElementRef, AfterContentChecked, ViewChild } from '@angular/core';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { IAction } from 'vs/base/common/actions';
+import { IAction, Action } from 'vs/base/common/actions';
 import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Taskbar } from '../../../base/browser/ui/taskbar/taskbar';
+import { JobsRefreshAction } from 'sql/parts/jobManagement/common/jobActions';
 
 export abstract class JobManagementView extends Disposable implements AfterContentChecked {
 	protected isVisible: boolean = false;
@@ -22,11 +25,16 @@ export abstract class JobManagementView extends Disposable implements AfterConte
 	protected _visibilityElement: ElementRef;
 	protected _parentComponent: AgentViewComponent;
 	protected _table: Table<any>;
+	protected _actionBar: Taskbar;
+	public contextAction: any;
+
+	@ViewChild('actionbarContainer') protected actionBarContainer: ElementRef;
 
 	constructor(
 		protected _commonService: CommonServiceInterface,
 		protected _contextMenuService: IContextMenuService,
-		protected _keybindingService: IKeybindingService) {
+		protected _keybindingService: IKeybindingService,
+		protected _instantiationService: IInstantiationService) {
 		super();
 	}
 
@@ -87,4 +95,16 @@ export abstract class JobManagementView extends Disposable implements AfterConte
 	protected getCurrentTableObject(rowIndex: number): any {
 		return undefined;
 	}
+
+	protected initActionBar() {
+		let refreshAction = this._instantiationService.createInstance(JobsRefreshAction);
+		let newAction: Action = this._instantiationService.createInstance(this.contextAction);
+		let taskbar = <HTMLElement>this.actionBarContainer.nativeElement;
+		this._actionBar = new Taskbar(taskbar, this._contextMenuService);
+		this._actionBar.context = this;
+		this._actionBar.setContent([
+			{ action: refreshAction },
+			{ action: newAction }
+		]);
+	}
 }

src/sql/parts/jobManagement/views/jobsView.component.html

@@ -9,9 +9,7 @@
 	<h1 class="job-heading" *ngIf="_isCloud === true">No Jobs Available</h1>
 	<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
 </div>
-<div class="jobs-view-toolbar">
-	<div (click)="refreshJobs()" tabindex="0"><div class="small icon refresh"></div><span>{{RefreshText}}</span></div>
-	<div (click)="openCreateJobDialog()" tabindex="0"><div class="small icon new"></div><span>{{NewJobText}}</span></div>
-</div>
+
+<div #actionbarContainer class="actionbar-container"></div>
 
 <div #jobsgrid class="jobview-grid"></div>

src/sql/parts/jobManagement/views/jobsView.component.ts

@@ -21,7 +21,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowdetailview';
 import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService';
-import { EditJobAction, DeleteJobAction } from 'sql/parts/jobManagement/common/jobActions';
+import { EditJobAction, DeleteJobAction, NewJobAction } from 'sql/parts/jobManagement/common/jobActions';
 import { JobManagementUtilities } from 'sql/parts/jobManagement/common/jobManagementUtilities';
 import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
@@ -46,9 +46,6 @@ export const ROW_HEIGHT: number = 45;
 
 export class JobsViewComponent extends JobManagementView implements OnInit  {
 
-	private NewJobText: string = nls.localize("jobsToolbar-NewJob", "New Job");
-	private RefreshText: string = nls.localize("jobsToolbar-Refresh", "Refresh");
-
 	private columns: Array<Slick.Column<any>> = [
 		{
 			name: nls.localize('jobColumns.name', 'Name'),
@@ -87,6 +84,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 
 	public jobs: sqlops.AgentJobInfo[];
 	public jobHistories: { [jobId: string]: sqlops.AgentJobHistoryInfo[]; } = Object.create(null);
+	public contextAction = NewJobAction;
 
 	@ViewChild('jobsgrid') _gridEl: ElementRef;
 
@@ -98,11 +96,11 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
 		@Inject(IThemeService) private _themeService: IThemeService,
 		@Inject(ICommandService) private _commandService: ICommandService,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
-		@Inject(IKeybindingService)  keybindingService: IKeybindingService
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService,
 	) {
-		super(commonService, contextMenuService, keybindingService);
+		super(commonService, contextMenuService, keybindingService, instantiationService);
 		let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
 		this._serverName = commonService.connectionManagementService.connectionInfo.connectionProfile.serverName;
 		let jobCache = jobCacheObjectMap[this._serverName];
@@ -163,9 +161,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 
 		let filterPlugin = new HeaderFilter({}, this._themeService);
 		this.filterPlugin = filterPlugin;
-
 		$(this._gridEl.nativeElement).empty();
-
+		$(this.actionBarContainer.nativeElement).empty();
+		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, options);
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
@@ -844,12 +842,12 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		return job && job.length > 0 ? job[0] : undefined;
 	}
 
-	private openCreateJobDialog() {
+	public openCreateJobDialog() {
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openCreateJobDialog', ownerUri);
 	}
 
-	private refreshJobs() {
+	public refreshJobs() {
 		this._agentViewComponent.refresh = true;
 	}
 }

src/sql/parts/jobManagement/views/operatorsView.component.html

@@ -9,9 +9,7 @@
 	<h1 class="job-heading" *ngIf="_isCloud === true">No Operators Available</h1>
 	<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
 </div>
-<div class="jobs-view-toolbar">
-	<div (click)="refreshJobs()" tabindex="0"><div class="small icon refresh"></div><span>{{RefreshText}}</span></div>
-	<div (click)="openCreateOperatorDialog()" tabindex="0"><div class="small icon new"></div><span>{{NewOperatorText}}</span></div>
-</div>
+
+<div #actionbarContainer class="actionbar-container"></div>
 
 <div #operatorsgrid class="joboperatorsview-grid"></div>

src/sql/parts/jobManagement/views/operatorsView.component.ts

@@ -19,10 +19,9 @@ import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { EditOperatorAction, DeleteOperatorAction } from 'sql/parts/jobManagement/common/jobActions';
+import { EditOperatorAction, DeleteOperatorAction, NewOperatorAction } from 'sql/parts/jobManagement/common/jobActions';
 import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
@@ -42,9 +41,6 @@ export const ROW_HEIGHT: number = 45;
 
 export class OperatorsViewComponent extends JobManagementView implements OnInit {
 
-	private NewOperatorText: string = nls.localize('jobOperatorToolbar-NewItem', "New Operator");
-	private RefreshText: string = nls.localize('jobOperatorToolbar-Refresh', "Refresh");
-
 	private columns: Array<Slick.Column<any>> = [
 		{ name: nls.localize('jobOperatorsView.name', 'Name'), field: 'name', width: 200, id: 'name' },
 		{ name: nls.localize('jobOperatorsView.emailAddress', 'Email Address'), field: 'emailAddress', width: 200, id: 'emailAddress' },
@@ -54,7 +50,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 	private options: Slick.GridOptions<any> = {
 		syncColumnCellResize: true,
 		enableColumnReorder: false,
-		rowHeight: 45,
+		rowHeight: ROW_HEIGHT,
 		enableCellNavigation: true,
 		editable: false
 	};
@@ -66,20 +62,20 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 	@ViewChild('operatorsgrid') _gridEl: ElementRef;
 
 	public operators: sqlops.AgentOperatorInfo[];
+	public contextAction = NewOperatorAction;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
-		@Inject(IThemeService) private _themeService: IThemeService,
 		@Inject(ICommandService) private _commandService: ICommandService,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService)  keybindingService: IKeybindingService
 	) {
-		super(commonService, contextMenuService, keybindingService);
+		super(commonService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -110,6 +106,8 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 		this.dataView = new Slick.Data.DataView();
 
 		$(this._gridEl.nativeElement).empty();
+		$(this.actionBarContainer.nativeElement).empty();
+		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
@@ -163,7 +161,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 			: undefined;
 	}
 
-	private openCreateOperatorDialog() {
+	public openCreateOperatorDialog() {
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openCreateOperatorDialog', ownerUri);
 	}

src/sql/parts/jobManagement/views/proxiesView.component.html

@@ -9,9 +9,7 @@
 	<h1 class="job-heading" *ngIf="_isCloud === true">No Proxies Available</h1>
 	<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
 </div>
-<div class="jobs-view-toolbar">
-	<div (click)="refreshJobs()" tabindex="0"><div class="small icon refresh"></div><span>{{RefreshText}}</span></div>
-	<div (click)="openCreateProxyDialog()" tabindex="0"><div class="small icon new"></div><span>{{NewProxyText}}</span></div>
-</div>
+
+<div #actionbarContainer class="actionbar-container"></div>
 
 <div #proxiesgrid class="jobproxiesview-grid"></div>

src/sql/parts/jobManagement/views/proxiesView.component.ts

@@ -19,7 +19,7 @@ import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { EditProxyAction, DeleteProxyAction } from 'sql/parts/jobManagement/common/jobActions';
+import { EditProxyAction, DeleteProxyAction, NewProxyAction } from 'sql/parts/jobManagement/common/jobActions';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
@@ -28,7 +28,6 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IAction } from 'vs/base/common/actions';
 import { ICommandService } from 'vs/platform/commands/common/commands';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
 export const VIEW_SELECTOR: string = 'jobproxiesview-component';
@@ -63,6 +62,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 	private _isCloud: boolean;
 
 	public proxies: sqlops.AgentProxyInfo[];
+	public readonly contextAction = NewProxyAction;
 
 	@ViewChild('proxiesgrid') _gridEl: ElementRef;
 
@@ -71,14 +71,13 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
-		@Inject(IThemeService) private _themeService: IThemeService,
 		@Inject(ICommandService) private _commandService: ICommandService,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService)  keybindingService: IKeybindingService
 	) {
-		super(commonService, contextMenuService, keybindingService);
+		super(commonService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -109,6 +108,8 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 		this.dataView = new Slick.Data.DataView();
 
 		$(this._gridEl.nativeElement).empty();
+		$(this.actionBarContainer.nativeElement).empty();
+		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
@@ -161,7 +162,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 			: undefined;
 	}
 
-	private openCreateProxyDialog() {
+	public openCreateProxyDialog() {
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openCreateProxyDialog', ownerUri);
 	}