ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-14 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

add ability to dynamically update tabs (#9911)

Browse Source 
* add dashboard and tabbedPanel samples

* add updateTabs to tabbedPanel component

* add updateTabs to tabbedPanel component
This commit is contained in:
Alan Ren
2020-04-09 12:02:00 -07:00
committed by GitHub
parent 82f21faf79
commit 23f1a08aa0
6 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
samples/sqlservices/src/controllers/modelViewDashboard.ts
View File

@@ -11,37 +11,33 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
dashboard.registerTabs(async (view: azdata.ModelView) => {
// Tab with toolbar
const button = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: 'Run',
label: 'Add databases tab',
iconPath: {
light: context.asAbsolutePath('images/compare.svg'),
dark: context.asAbsolutePath('images/compare-inverse.svg')
}
}).component();
button.onDidClick(() => {
vscode.window.showInformationMessage('Run button clicked');
});
const toolbar = view.modelBuilder.toolbarContainer().withItems([button]).withLayout({
orientation: azdata.Orientation.Horizontal
}).component();
const textComponent1 = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: 'text 1' }).component();
const input1 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 1' }).component();
const homeTab: azdata.DashboardTab = {
id: 'home',
toolbar: toolbar,
content: textComponent1,
content: input1,
title: 'Home',
icon: context.asAbsolutePath('images/home.svg') // icon can be the path of a svg file
};
// Tab with nested tabbed Panel
const textComponent2 = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: 'text 2' }).component();
const textComponent3 = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: 'text 3' }).component();
const addTabButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: 'Add a tab', width: '150px' }).component();
const removeTabButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: 'Remove a tab', width: '150px' }).component();
const container = view.modelBuilder.flexContainer().withItems([addTabButton, removeTabButton]).withLayout({ flexFlow: 'column' }).component();
const nestedTab1 = {
title: 'Tab1',
content: textComponent2,
content: container,
id: 'tab1',
icon: {
light: context.asAbsolutePath('images/user.svg'),
@@ -49,9 +45,10 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
}
};
const input2 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 2' }).component();
const nestedTab2 = {
title: 'Tab2',
content: textComponent3,
content: input2,
icon: {
light: context.asAbsolutePath('images/group.svg'),
dark: context.asAbsolutePath('images/group_inverse.svg')
@@ -59,6 +56,13 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
id: 'tab2'
};
const input3 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 4' }).component();
const nestedTab3 = {
title: 'Tab3',
content: input3,
id: 'tab3'
};
const tabbedPanel = view.modelBuilder.tabbedPanel().withTabs([
nestedTab1, nestedTab2
]).withLayout({
@@ -66,6 +70,15 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
showIcon: true
}).component();
addTabButton.onDidClick(() => {
tabbedPanel.updateTabs([nestedTab1, nestedTab2, nestedTab3]);
});
removeTabButton.onDidClick(() => {
tabbedPanel.updateTabs([nestedTab1, nestedTab3]);
});
const settingsTab: azdata.DashboardTab = {
id: 'settings',
content: tabbedPanel,
@@ -81,10 +94,23 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
]
};
// Databases tab
const databasesText = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'This is databases tab', width: '200px' }).component();
const databasesTab: azdata.DashboardTab = {
id: 'databases',
content: databasesText,
title: 'Databases',
icon: context.asAbsolutePath('images/default.svg')
};
button.onDidClick(() => {
dashboard.updateTabs([homeTab, databasesTab, securityTabGroup]);
});
return [
homeTab,
securityTabGroup
];
});
dashboard.open();
await dashboard.open();
}