From f44e78aef4f32083a20f5fb242e32115aa932d47 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Wed, 15 Apr 2020 16:42:42 -0700 Subject: [PATCH] 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 | 16 ++++++++-------- .../api/common/extHostModelViewDialog.ts | 3 ++- src/sql/workbench/api/common/sqlExtHostTypes.ts | 1 - .../modelComponents/tabbedPanel.component.ts | 17 ++++++++++++----- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index dd41fa4bdf..99a6db0f29 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/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 { + export interface TabbedPanelComponentBuilder extends ContainerBuilder { /** * Add the tabs to the component * @param tabs tabs/tab groups to be added */ - withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder; + withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder; } export interface InputBoxProperties extends ComponentProperties { diff --git a/src/sql/workbench/api/common/extHostModelViewDialog.ts b/src/sql/workbench/api/common/extHostModelViewDialog.ts index 221bfefcfe..f59115acb3 100644 --- a/src/sql/workbench/api/common/extHostModelViewDialog.ts +++ b/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(); diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index 6bf492e7cf..963ce57fad 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -836,7 +836,6 @@ export enum TabOrientation { Horizontal = 'horizontal' } - export interface TabbedPanelLayout { orientation: TabOrientation; showIcon: boolean; diff --git a/src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts b/src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts index 1297b19637..f147307ff5 100644 --- a/src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts +++ b/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 imple setLayout(layout: TabbedPanelLayout): void { this._panel.options = { - alwaysShowTabs: layout.alwaysShowTabs, - layout: layout.orientation === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical, - showIcon: layout.showIcon + alwaysShowTabs: layout.alwaysShowTabs ?? false, + layout: (layout.orientation ?? TabOrientation.Horizontal) === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical, + showIcon: layout.showIcon ?? false }; }