Adds add execution plan button and context menu to the bottom half of the plan comparison screen (#20770)

* Adds context menu option placeholder plan container

* Adds context menu and button to add execution plan to placeholder

* Minor clean up

* Replaces taskbar with button to add execution plans

* Removes unneeded CSS styling.

* Adjusts button type to secondary

src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts

@@ -12,7 +12,7 @@ import { ExecutionPlanCompareOrientation, ExecutionPlanComparisonPropertiesView
 import { IExecutionPlanService } from 'sql/workbench/services/executionPlan/common/interfaces';
 import { IHorizontalSashLayoutProvider, ISashEvent, IVerticalSashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
 import { Action } from 'vs/base/common/actions';
-import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
@@ -23,7 +23,6 @@ import { addIconClassName, disableTooltipIconClassName, enableTooltipIconClassNa
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { extname } from 'vs/base/common/path';
 import { INotificationService } from 'vs/platform/notification/common/notification';
-import { InfoBox } from 'sql/workbench/browser/ui/infoBox/infoBox';
 import { LoadingSpinner } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner';
 import { contrastBorder, editorWidgetBackground, errorForeground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader';
@@ -33,6 +32,10 @@ import { generateUuid } from 'vs/base/common/uuid';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { ExecutionPlanWidgetController } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetController';
 import { NodeSearchWidget } from 'sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget';
+import { Button } from 'sql/base/browser/ui/button/button';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';
+
+const ADD_EXECUTION_PLAN_STRING = localize('epCompare.addExecutionPlanLabel', 'Add execution plan');
 
 export class ExecutionPlanComparisonEditorView {
 
@@ -69,8 +72,8 @@ export class ExecutionPlanComparisonEditorView {
 	public bottomWidgetController: ExecutionPlanWidgetController;
 
 	private _placeholderContainer: HTMLElement;
+	private _placeholderButton: Button;
 	private _placeholderInfoboxContainer: HTMLElement;
-	private _placeholderInfobox: InfoBox;
 	private _placeholderLoading: LoadingSpinner;
 
 	private _topPlanContainer: HTMLElement;
@@ -128,7 +131,8 @@ export class ExecutionPlanComparisonEditorView {
 		@IContextViewService readonly contextViewService: IContextViewService,
 		@ITextFileService private readonly _textFileService: ITextFileService,
 		@INotificationService private _notificationService: INotificationService,
-		@IProgressService private _progressService: IProgressService
+		@IProgressService private _progressService: IProgressService,
+		@IContextMenuService private _contextMenuService: IContextMenuService
 	) {
 
 		this.container = DOM.$('.comparison-editor');
@@ -184,8 +188,39 @@ export class ExecutionPlanComparisonEditorView {
 		this.planSplitViewContainer = DOM.$('.split-view-container');
 		this._planComparisonContainer.appendChild(this.planSplitViewContainer);
 
+		const self = this;
 		this._placeholderContainer = DOM.$('.placeholder');
+
+		const contextMenuAction = [
+			this._instantiationService.createInstance(AddExecutionPlanAction)
+		];
+		this._placeholderContainer.oncontextmenu = (e: MouseEvent) => {
+			if (contextMenuAction) {
+				this._contextMenuService.showContextMenu({
+					getAnchor: () => {
+						return {
+							x: e.x,
+							y: e.y
+						};
+					},
+					getActions: () => contextMenuAction,
+					getActionsContext: () => (self)
+				});
+			}
+		};
+
 		this._placeholderInfoboxContainer = DOM.$('.placeholder-infobox');
+
+		this._placeholderButton = new Button(this._placeholderInfoboxContainer, { secondary: true });
+		attachButtonStyler(this._placeholderButton, this.themeService);
+		this._placeholderButton.label = ADD_EXECUTION_PLAN_STRING;
+		this._placeholderButton.ariaLabel = ADD_EXECUTION_PLAN_STRING;
+		this._placeholderButton.enabled = true;
+		this._placeholderButton.onDidClick(e => {
+			const addExecutionPlanAction = this._instantiationService.createInstance(AddExecutionPlanAction);
+			addExecutionPlanAction.run(self);
+		});
+
 		this._placeholderLoading = new LoadingSpinner(this._placeholderContainer, {
 			fullSize: true,
 			showText: true
@@ -193,11 +228,6 @@ export class ExecutionPlanComparisonEditorView {
 		this._placeholderContainer.appendChild(this._placeholderInfoboxContainer);
 		this._placeholderLoading.loadingMessage = localize('epComapre.LoadingPlanMessage', "Loading execution plan");
 		this._placeholderLoading.loadingCompletedMessage = localize('epComapre.LoadingPlanCompleteMessage', "Execution plan successfully loaded");
-		this._placeholderInfobox = this._instantiationService.createInstance(InfoBox, this._placeholderInfoboxContainer, {
-			style: 'information',
-			text: ''
-		});
-		this._placeholderInfobox.text = localize('epComapre.placeholderInfoboxText', "Add execution plans to compare");
 
 		this._topPlanContainer = DOM.$('.plan-container');
 		this.planSplitViewContainer.appendChild(this._topPlanContainer);