add options to customize the model view dashboard (#9872)

* add options to customize the mv dashboard

* rename the property

src/sql/azdata.proposed.d.ts

@@ -224,8 +224,20 @@ declare module 'azdata' {
 	 * Layout of TabbedPanelComponent, can be used to initialize the component when using ModelBuilder
 	 */
 	export interface TabbedPanelLayout {
+		/**
+		 * Tab orientation
+		 */
 		orientation: TabOrientation;
+
+		/**
+		 * Whether to show the tab icon
+		 */
 		showIcon: boolean;
+
+		/**
+		 * Whether to show the tab navigation pane even when there is only one tab
+		 */
+		alwaysShowTabs: boolean;
 	}
 
 	/**
@@ -300,7 +312,7 @@ declare module 'azdata' {
 			open(): Thenable<void>;
 		}
 
-		export function createModelViewDashboard(title: string): ModelViewDashboard;
+		export function createModelViewDashboard(title: string, options?: ModelViewDashboardOptions): ModelViewDashboard;
 	}
 
 	export interface DashboardTab extends Tab {
@@ -321,5 +333,17 @@ declare module 'azdata' {
 		 */
 		tabs: DashboardTab[];
 	}
+
+	export interface ModelViewDashboardOptions {
+		/**
+		 * Whether to show the tab icon, default is true
+		 */
+		showIcon?: boolean;
+
+		/**
+		 * Whether to show the tab navigation pane even when there is only one tab, default is false
+		 */
+		alwaysShowTabs?: boolean;
+	}
 }
 

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

@@ -28,7 +28,7 @@ export interface IPanelOptions {
 	/**
 	 * Whether or not to show the tabs if there is only one tab present
 	 */
-	showTabsWhenOne?: boolean;
+	alwaysShowTabs?: boolean;
 	layout?: NavigationBarLayout;
 	showIcon?: boolean;
 }
@@ -39,7 +39,7 @@ export enum NavigationBarLayout {
 }
 
 const defaultOptions: IPanelOptions = {
-	showTabsWhenOne: true,
+	alwaysShowTabs: true,
 	layout: NavigationBarLayout.horizontal,
 	showIcon: false
 };
@@ -50,7 +50,7 @@ let idPool = 0;
 	selector: 'panel',
 	template: `
 		<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
-			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
+			<div *ngIf="!options.alwaysShowTabs ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabContainer">
 					<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
 						<button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button>

src/sql/workbench/api/common/extHostModelViewDialog.ts

@@ -459,7 +459,8 @@ class WizardImpl implements azdata.window.Wizard {
 
 class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
 	constructor(
-		private _editor: ModelViewEditorImpl
+		private _editor: ModelViewEditorImpl,
+		private _options?: azdata.ModelViewDashboardOptions
 	) {
 	}
 	registerTabs(handler: (view: azdata.ModelView) => Thenable<(azdata.DashboardTab | azdata.DashboardTabGroup)[]>): void {
@@ -481,7 +482,8 @@ class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
 
 			const tabbedPanel = view.modelBuilder.tabbedPanel().withTabs(tabs).withLayout({
 				orientation: 'vertical',
-				showIcon: true
+				showIcon: this._options?.showIcon ?? true,
+				alwaysShowTabs: this._options?.alwaysShowTabs ?? false
 			}).component();
 			return view.initializeModel(tabbedPanel);
 		});
@@ -613,9 +615,9 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		return editor;
 	}
 
-	public createModelViewDashboard(title: string, extension: IExtensionDescription): azdata.window.ModelViewDashboard {
+	public createModelViewDashboard(title: string, options: azdata.ModelViewDashboardOptions | undefined, extension: IExtensionDescription): azdata.window.ModelViewDashboard {
 		const editor = this.createModelViewEditor(title, extension, { supportsSave: false }) as ModelViewEditorImpl;
-		return new ModelViewDashboardImpl(editor);
+		return new ModelViewDashboardImpl(editor, options);
 	}
 
 	public updateDialogContent(dialog: azdata.window.Dialog): void {

src/sql/workbench/api/common/sqlExtHost.api.impl.ts

@@ -418,8 +418,8 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				createWizard(title: string): azdata.window.Wizard {
 					return extHostModelViewDialog.createWizard(title);
 				},
-				createModelViewDashboard(title: string): azdata.window.ModelViewDashboard {
+				createModelViewDashboard(title: string, options?: azdata.ModelViewDashboardOptions): azdata.window.ModelViewDashboard {
-					return extHostModelViewDialog.createModelViewDashboard(title, extension);
+					return extHostModelViewDialog.createModelViewDashboard(title, options, extension);
 				},
 				MessageLevel: sqlExtHostTypes.MessageLevel
 			};

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -840,4 +840,5 @@ export enum TabOrientation {
 export interface TabbedPanelLayout {
 	orientation: TabOrientation;
 	showIcon: boolean;
+	alwaysShowTabs: boolean;
 }

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

@@ -57,7 +57,7 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 
 	setLayout(layout: TabbedPanelLayout): void {
 		this._panel.options = {
-			showTabsWhenOne: true,
+			alwaysShowTabs: layout.alwaysShowTabs,
 			layout: layout.orientation === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical,
 			showIcon: layout.showIcon
 		};

src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts

@@ -157,7 +157,7 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 			});
 			this.propertiesWidget = properties ? properties[0] : undefined;
 			this._panel.options = {
-				showTabsWhenOne: true,
+				alwaysShowTabs: true,
 				layout: NavigationBarLayout.vertical,
 				showIcon: true
 			};

src/sql/workbench/contrib/jobManagement/browser/agentView.component.ts

@@ -46,7 +46,7 @@ export class AgentViewComponent {
 	public readonly operatorsComponentTitle: string = nls.localize('jobview.Operators', "Operators");
 
 	public readonly panelOpt: IPanelOptions = {
-		showTabsWhenOne: true,
+		alwaysShowTabs: true,
 		layout: NavigationBarLayout.horizontal,
 		showIcon: true
 	};