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

src/sql/parts/jobManagement/common/jobActions.ts

@@ -12,12 +12,14 @@ import Severity from 'vs/base/common/severity';
 import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.component';
 import { IJobManagementService } from '../common/interfaces';
 import { ICommandService } from 'vs/platform/commands/common/commands';
-import { IConnectionManagementService } from '../../connection/common/connectionManagement';
+import { JobsViewComponent } from '../views/jobsView.component';
+import { AlertsViewComponent } from 'sql/parts/jobManagement/views/alertsView.component';
+import { OperatorsViewComponent } from 'sql/parts/jobManagement/views/operatorsView.component';
+import { ProxiesViewComponent } from 'sql/parts/jobManagement/views/proxiesView.component';
 
 export enum JobActions {
 	Run = 'run',
-	Stop = 'stop',
-	NewStep = 'newStep'
+	Stop = 'stop'
 }
 
 export interface IJobActionInfo {
@@ -25,6 +27,50 @@ export interface IJobActionInfo {
 	targetObject: any;
 }
 
+// Job actions
+
+export class JobsRefreshAction extends Action {
+	public static ID = 'jobaction.refresh';
+	public static LABEL = nls.localize('jobaction.refresh', "Refresh Jobs");
+
+	constructor(
+	) {
+		super(JobsRefreshAction.ID, JobsRefreshAction.LABEL, 'refreshIcon');
+	}
+
+	public run(context: JobsViewComponent): TPromise<boolean> {
+		return new TPromise<boolean>((resolve, reject) => {
+			if (context) {
+				context.refreshJobs();
+				resolve(true);
+			} else {
+				reject(false);
+			}
+		});
+	}
+}
+
+export class NewJobAction extends Action {
+	public static ID = 'jobaction.newJob';
+	public static LABEL = nls.localize('jobaction.newJob', "New Job");
+
+	constructor(
+	) {
+		super(NewJobAction.ID, NewJobAction.LABEL, 'newStepIcon');
+	}
+
+	public run(context: JobsViewComponent): TPromise<boolean> {
+		return new TPromise<boolean>((resolve, reject) => {
+			try {
+				context.openCreateJobDialog();
+				resolve(true);
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+}
+
 export class RunJobAction extends Action {
 	public static ID = 'jobaction.runJob';
 	public static LABEL = nls.localize('jobaction.run', "Run");
@@ -95,32 +141,6 @@ export class StopJobAction extends Action {
 	}
 }
 
-export class NewStepAction extends Action {
-	public static ID = 'jobaction.newStep';
-	public static LABEL = nls.localize('jobaction.newStep', "New Step");
-
-	constructor(
-		@INotificationService private notificationService: INotificationService,
-		@ICommandService private _commandService: ICommandService,
-		@IConnectionManagementService private _connectionService
-	) {
-		super(NewStepAction.ID, NewStepAction.LABEL, 'newStepIcon');
-	}
-
-	public run(context: JobHistoryComponent): TPromise<boolean> {
-		let ownerUri = context.ownerUri;
-		let jobName = context.agentJobInfo.name;
-		let server = context.serverName;
-		let stepId = 0;
-		if (context.agentJobHistoryInfo && context.agentJobHistoryInfo.steps) {
-			stepId = context.agentJobHistoryInfo.steps.length + 1;
-		}
-		return new TPromise<boolean>((resolve, reject) => {
-			resolve(this._commandService.executeCommand('agent.openNewStepDialog', ownerUri, jobName, server, stepId));
-		});
-	}
-}
-
 export class EditJobAction extends Action {
 	public static ID = 'jobaction.editJob';
 	public static LABEL = nls.localize('jobaction.editJob', "Edit Job");
@@ -171,6 +191,55 @@ export class DeleteJobAction extends Action {
 	}
 }
 
+// Step Actions
+
+export class NewStepAction extends Action {
+	public static ID = 'jobaction.newStep';
+	public static LABEL = nls.localize('jobaction.newStep', "New Step");
+
+	constructor(
+		@ICommandService private _commandService: ICommandService
+	) {
+		super(NewStepAction.ID, NewStepAction.LABEL, 'newStepIcon');
+	}
+
+	public run(context: JobHistoryComponent): TPromise<boolean> {
+		let ownerUri = context.ownerUri;
+		let jobName = context.agentJobInfo.name;
+		let server = context.serverName;
+		let stepId = 0;
+		if (context.agentJobHistoryInfo && context.agentJobHistoryInfo.steps) {
+			stepId = context.agentJobHistoryInfo.steps.length + 1;
+		}
+		return new TPromise<boolean>((resolve, reject) => {
+			resolve(this._commandService.executeCommand('agent.openNewStepDialog', ownerUri, jobName, server, stepId));
+		});
+	}
+}
+
+// Alert Actions
+
+export class NewAlertAction extends Action {
+	public static ID = 'jobaction.newAlert';
+	public static LABEL = nls.localize('jobaction.newAlert', "New Alert");
+
+	constructor(
+	) {
+		super(NewAlertAction.ID, NewAlertAction.LABEL, 'newStepIcon');
+	}
+
+	public run(context: AlertsViewComponent): TPromise<boolean> {
+		return new TPromise<boolean>((resolve, reject) => {
+			try {
+				context.openCreateAlertDialog();
+				resolve(true);
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+}
+
 export class EditAlertAction extends Action {
 	public static ID = 'jobaction.editAlert';
 	public static LABEL = nls.localize('jobaction.editAlert', "Edit Alert");
@@ -222,6 +291,29 @@ export class DeleteAlertAction extends Action {
 	}
 }
 
+// Operator Actions
+
+export class NewOperatorAction extends Action {
+	public static ID = 'jobaction.newOperator';
+	public static LABEL = nls.localize('jobaction.newOperator', "New Operator");
+
+	constructor(
+	) {
+		super(NewOperatorAction.ID, NewOperatorAction.LABEL, 'newStepIcon');
+	}
+
+	public run(context: OperatorsViewComponent): TPromise<boolean> {
+		return new TPromise<boolean>((resolve, reject) => {
+			try {
+				context.openCreateOperatorDialog();
+				resolve(true);
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+}
+
 export class EditOperatorAction extends Action {
 	public static ID = 'jobaction.editAlert';
 	public static LABEL = nls.localize('jobaction.editOperator', "Edit Operator");
@@ -273,6 +365,29 @@ export class DeleteOperatorAction extends Action {
 }
 
 
+// Proxy Actions
+
+export class NewProxyAction extends Action {
+	public static ID = 'jobaction.newProxy';
+	public static LABEL = nls.localize('jobaction.newProxy', "New Proxy");
+
+	constructor(
+	) {
+		super(NewProxyAction.ID, NewProxyAction.LABEL, 'newStepIcon');
+	}
+
+	public run(context: ProxiesViewComponent): TPromise<boolean> {
+		return new TPromise<boolean>((resolve, reject) => {
+			try {
+				context.openCreateProxyDialog();
+				resolve(true);
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+}
+
 export class EditProxyAction extends Action {
 	public static ID = 'jobaction.editProxy';
 	public static LABEL = nls.localize('jobaction.editProxy', "Edit Proxy");

src/sql/parts/jobManagement/common/media/jobs.css

@@ -22,7 +22,7 @@ jobhistory-component {
 }
 
 .job-heading-container {
-    height: 49px;
+    height: 50px;
     border-bottom: 3px solid #f4f4f4;
     display: -webkit-box;
 }
@@ -315,3 +315,24 @@ table.jobprevruns > tbody {
 	width : 100%;
     display: block;
 }
+
+.vs .action-label.icon.refreshIcon {
+	background-image: url('refresh.svg');
+}
+
+.vs-dark .action-label.icon.refreshIcon,
+.hc-black .action-label.icon.refreshIcon  {
+	background-image: url('refresh_inverse.svg');
+}
+
+.actionbar-container .monaco-action-bar > ul.actions-container {
+	padding-top: 10px;
+}
+
+jobsview-component .actionbar-container {
+    height: 40px;
+}
+
+.actionbar-container .monaco-action-bar > ul.actions-container > li.action-item {
+	padding-left: 20px;
+}

src/sql/parts/jobManagement/common/media/refresh.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#212121;}</style></defs><title>refresh</title><path class="cls-1" d="M12.51,1.59a8.06,8.06,0,0,1,3.06,4A7.83,7.83,0,0,1,16,8.2a7.91,7.91,0,0,1-.29,2.12,8.13,8.13,0,0,1-.8,1.91A8,8,0,0,1,12,15.11a8.1,8.1,0,0,1-1.91.8,8.06,8.06,0,0,1-4.25,0A8.08,8.08,0,0,1,4,15.11a8,8,0,0,1-2.87-2.87,8.07,8.07,0,0,1-.8-1.91,8,8,0,0,1,0-4.25,8.11,8.11,0,0,1,.82-1.94,7.86,7.86,0,0,1,1.3-1.66A8,8,0,0,1,4.14,1.2H2V.2H6v4H5V1.88A7,7,0,0,0,1.28,6.24a7,7,0,0,0,0,3.82,7,7,0,0,0,1.8,3.09A7,7,0,0,0,6.14,15a7,7,0,0,0,3.71,0,7,7,0,0,0,1.67-.71,7,7,0,0,0,3.22-4.18,7,7,0,0,0-.13-4.12,7.07,7.07,0,0,0-2.68-3.52,6.78,6.78,0,0,0-2.07-1l.27-1A7.67,7.67,0,0,1,12.51,1.59Z"/></svg>

src/sql/parts/jobManagement/common/media/refresh_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>refresh_inverse</title><path class="cls-1" d="M12.51,1.59a8.06,8.06,0,0,1,3.06,4A7.83,7.83,0,0,1,16,8.2a7.91,7.91,0,0,1-.29,2.12,8.13,8.13,0,0,1-.8,1.91A8,8,0,0,1,12,15.11a8.1,8.1,0,0,1-1.91.8,8.06,8.06,0,0,1-4.25,0A8.08,8.08,0,0,1,4,15.11a8,8,0,0,1-2.87-2.87,8.07,8.07,0,0,1-.8-1.91,8,8,0,0,1,0-4.25,8.11,8.11,0,0,1,.82-1.94,7.86,7.86,0,0,1,1.3-1.66A8,8,0,0,1,4.14,1.2H2V.2H6v4H5V1.88A7,7,0,0,0,1.28,6.24a7,7,0,0,0,0,3.82,7,7,0,0,0,1.8,3.09A7,7,0,0,0,6.14,15a7,7,0,0,0,3.71,0,7,7,0,0,0,1.67-.71,7,7,0,0,0,3.22-4.18,7,7,0,0,0-.13-4.12,7.07,7.07,0,0,0-2.68-3.52,6.78,6.78,0,0,0-2.07-1l.27-1A7.67,7.67,0,0,1,12.51,1.59Z"/></svg>

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);
 	}