Add typing for TabbedPanelLayout and set defaults (#9955)

* Add typing for TabbedPanelLayout on withLayout and set appropriate defaults

* Move enum def

src/sql/azdata.proposed.d.ts

@@ -231,19 +231,19 @@ declare module 'azdata' {
 	 */
 	export interface TabbedPanelLayout {
 		/**
-		 * Tab orientation
+		 * Tab orientation. Default horizontal.
 		 */
-		orientation: TabOrientation;
+		orientation?: TabOrientation;
 
 		/**
-		 * Whether to show the tab icon
+		 * Whether to show the tab icon. Default false.
 		 */
-		showIcon: boolean;
+		showIcon?: boolean;
 
 		/**
-		 * Whether to show the tab navigation pane even when there is only one tab
+		 * Whether to show the tab navigation pane even when there is only one tab. Default false.
 		 */
-		alwaysShowTabs: boolean;
+		alwaysShowTabs?: boolean;
 	}
 
 	/**
@@ -289,12 +289,12 @@ declare module 'azdata' {
 	/**
 	 * Builder for TabbedPannelComponent
 	 */
-	export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, any, any> {
+	export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any> {
 		/**
 		 * Add the tabs to the component
 		 * @param tabs tabs/tab groups to be added
 		 */
-		withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, any, any>;
+		withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any>;
 	}
 
 	export interface InputBoxProperties extends ComponentProperties {

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

@@ -13,6 +13,7 @@ import * as azdata from 'azdata';
 
 import { SqlMainContext, ExtHostModelViewDialogShape, MainThreadModelViewDialogShape, ExtHostModelViewShape, ExtHostBackgroundTaskManagementShape } from 'sql/workbench/api/common/sqlExtHost.protocol';
 import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
+import { TabOrientation } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 const DONE_LABEL = nls.localize('dialogDoneLabel', "Done");
 const CANCEL_LABEL = nls.localize('dialogCancelLabel', "Cancel");
@@ -481,7 +482,7 @@ class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
 			const dashboardTabs = await handler(view);
 			const tabs = this.createTabs(dashboardTabs, view);
 			this._tabbedPanel = view.modelBuilder.tabbedPanel().withTabs(tabs).withLayout({
-				orientation: 'vertical',
+				orientation: TabOrientation.Vertical,
 				showIcon: this._options?.showIcon ?? true,
 				alwaysShowTabs: this._options?.alwaysShowTabs ?? false
 			}).component();

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

@@ -836,7 +836,6 @@ export enum TabOrientation {
 	Horizontal = 'horizontal'
 }
 
-
 export interface TabbedPanelLayout {
 	orientation: TabOrientation;
 	showIcon: boolean;

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

@@ -5,14 +5,13 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import { NavigationBarLayout, PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
 import { TabType } from 'sql/base/browser/ui/panel/tab.component';
-// eslint-disable-next-line code-import-patterns
-import { TabOrientation, TabbedPanelLayout } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import 'vs/css!./media/tabbedPanel';
 import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
+import { TabbedPanelLayout } from 'azdata';
 
 export interface TabConfig {
 	title: string;
@@ -29,6 +28,14 @@ interface Tab {
 	iconClass?: string;
 }
 
+/**
+ * Defines the tab orientation of TabbedPanelComponent
+ */
+export enum TabOrientation {
+	Vertical = 'vertical',
+	Horizontal = 'horizontal'
+}
+
 @Component({
 	templateUrl: decodeURI(require.toUrl('./tabbedPanel.component.html'))
 })
@@ -62,9 +69,9 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 
 	setLayout(layout: TabbedPanelLayout): void {
 		this._panel.options = {
-			alwaysShowTabs: layout.alwaysShowTabs,
+			alwaysShowTabs: layout.alwaysShowTabs ?? false,
-			layout: layout.orientation === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical,
+			layout: (layout.orientation ?? TabOrientation.Horizontal) === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical,
-			showIcon: layout.showIcon
+			showIcon: layout.showIcon ?? false
 		};
 	}