ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Remove custom splitview (#3467)

Browse Source 
* working on options dialog

* working through options dialog

* trying to work through modifying options dialog

* working on converting scrollablesplitview

* fixed options working through profiler

* fix profiler

* fix account dialog

* trying to fix problems with splitpanel

* fix insights dialog

* moving through

* fix last list, need to verify looks and functionality

* fix look of account dialog

* formatting

* formatting

* working through scrollable bugs

* working on problem with view size

* fix margin issues

* fix styler for dialogs

* add panel styles to insights

* create instantiation issues

* fix test

* fix test

* remove unused code

* formatting

* working through insight dialog issues

* fix table updating

* remove console logs
This commit is contained in:
Anthony Dresser
2019-01-15 15:00:34 -08:00
committed by GitHub
parent 4de3cc8a09
commit 27816acaeb
32 changed files with 795 additions and 2351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/sql/parts/accountManagement/accountDialog/accountDialog.ts
View File

@@ -8,35 +8,87 @@
import 'vs/css!./media/accountDialog';
import 'vs/css!sql/parts/accountManagement/common/media/accountActions';
import * as DOM from 'vs/base/browser/dom';
import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
import { List } from 'vs/base/browser/ui/list/listWidget';
import { IListService, ListService } from 'vs/platform/list/browser/listService';
import { IPartService } from 'vs/workbench/services/part/common/partService';
import { Event, Emitter } from 'vs/base/common/event';
import { localize } from 'vs/nls';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { ActionRunner } from 'vs/base/common/actions';
import { IAction } from 'vs/base/common/actions';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { SplitView, Sizing } from 'vs/base/browser/ui/splitview/splitview';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { values } from 'vs/base/common/map';
import * as sqlops from 'sqlops';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/base/browser/ui/modal/modal';
import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
import { attachModalDialogStyler, attachButtonStyler, attachPanelStyler } from 'sql/common/theme/styler';
import { AccountViewModel } from 'sql/parts/accountManagement/accountDialog/accountViewModel';
import { AddAccountAction } from 'sql/parts/accountManagement/common/accountActions';
import { AccountListRenderer, AccountListDelegate } from 'sql/parts/accountManagement/common/accountListRenderer';
import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
import { FixedListView } from 'sql/platform/views/fixedListView';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
class AccountPanel extends ViewletPanel {
public index: number;
private accountList: List<sqlops.Account>;
constructor(
private options: IViewletPanelOptions,
@IKeybindingService keybindingService: IKeybindingService,
@IContextMenuService contextMenuService: IContextMenuService,
@IConfigurationService configurationService: IConfigurationService,
@IInstantiationService private instantiationService: IInstantiationService,
@IThemeService private themeService: IThemeService
) {
super(options, keybindingService, contextMenuService, configurationService);
}
protected renderBody(container: HTMLElement): void {
this.accountList = new List<sqlops.Account>(container, new AccountListDelegate(AccountDialog.ACCOUNTLIST_HEIGHT), [this.instantiationService.createInstance(AccountListRenderer)]);
this.disposables.push(attachListStyler(this.accountList, this.themeService));
}
protected layoutBody(size: number): void {
if (this.accountList) {
this.accountList.layout(size);
}
}
public get length(): number {
return this.accountList.length;
}
public focus() {
this.accountList.domFocus();
}
public updateAccounts(accounts: sqlops.Account[]) {
this.accountList.splice(0, this.accountList.length, accounts);
}
public setSelection(indexes: number[]) {
this.accountList.setSelection(indexes);
}
public getActions(): IAction[] {
return [this.instantiationService.createInstance(
AddAccountAction,
this.options.id
)];
}
}
export interface IProviderViewUiComponent {
view: FixedListView<sqlops.Account>;
view: AccountPanel;
addAccountAction: AddAccountAction;
}
@@ -46,13 +98,10 @@ export class AccountDialog extends Modal {
public viewModel: AccountViewModel;
// MEMBER VARIABLES ////////////////////////////////////////////////////
private _providerViews: { [providerId: string]: IProviderViewUiComponent } = {};
private _providerViewsMap = new Map<string, IProviderViewUiComponent>();
private _closeButton: Button;
private _addAccountButton: Button;
private _delegate: AccountListDelegate;
private _accountRenderer: AccountListRenderer;
private _actionRunner: ActionRunner;
private _splitView: SplitView;
private _container: HTMLElement;
private _splitViewContainer: HTMLElement;
@@ -68,10 +117,10 @@ export class AccountDialog extends Modal {
constructor(
@IPartService partService: IPartService,
@IThemeService themeService: IThemeService,
@IListService private _listService: IListService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IKeybindingService private _keybindingService: IKeybindingService,
@IConfigurationService private _configurationService: IConfigurationService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
@@ -86,11 +135,6 @@ export class AccountDialog extends Modal {
contextKeyService,
{ hasSpinner: true }
);
let self = this;
this._delegate = new AccountListDelegate(AccountDialog.ACCOUNTLIST_HEIGHT);
this._accountRenderer = this._instantiationService.createInstance(AccountListRenderer);
this._actionRunner = new ActionRunner();
// Setup the event emitters
this._onAddAccountErrorEmitter = new Emitter<string>();
@@ -98,28 +142,25 @@ export class AccountDialog extends Modal {
// Create the view model and wire up the events
this.viewModel = this._instantiationService.createInstance(AccountViewModel);
this.viewModel.addProviderEvent(arg => { self.addProvider(arg); });
this.viewModel.removeProviderEvent(arg => { self.removeProvider(arg); });
this.viewModel.updateAccountListEvent(arg => { self.updateProviderAccounts(arg); });
this.viewModel.addProviderEvent(arg => { this.addProvider(arg); });
this.viewModel.removeProviderEvent(arg => { this.removeProvider(arg); });
this.viewModel.updateAccountListEvent(arg => { this.updateProviderAccounts(arg); });
// Load the initial contents of the view model
this.viewModel.initialize()
.then(addedProviders => {
for (let addedProvider of addedProviders) {
self.addProvider(addedProvider);
this.addProvider(addedProvider);
}
});
}
// MODAL OVERRIDE METHODS //////////////////////////////////////////////
protected layout(height?: number): void {
// Ignore height as it's a subcomponent being laid out
this._splitView.layout(DOM.getContentHeight(this._container));
}
public render() {
let self = this;
super.render();
attachModalDialogStyler(this, this._themeService);
this._closeButton = this.addFooterButton(localize('accountDialog.close', 'Close'), () => this.close());
@@ -128,7 +169,7 @@ export class AccountDialog extends Modal {
protected renderBody(container: HTMLElement) {
this._container = container;
this._splitViewContainer = DOM.$('div.account-view');
this._splitViewContainer = DOM.$('div.account-view.monaco-panel-view');
DOM.append(container, this._splitViewContainer);
this._splitView = new SplitView(this._splitViewContainer);
@@ -143,7 +184,7 @@ export class AccountDialog extends Modal {
this._addAccountButton = new Button(buttonSection);
this._addAccountButton.label = localize('accountDialog.addConnection', 'Add an account');
this._register(this._addAccountButton.onDidClick(() => {
(<IProviderViewUiComponent>Object.values(this._providerViews)[0]).addAccountAction.run();
(<IProviderViewUiComponent>values(this._providerViewsMap)[0]).addAccountAction.run();
}));
DOM.append(container, this._noaccountViewContainer);
@@ -189,20 +230,19 @@ export class AccountDialog extends Modal {
private showSplitView() {
this._splitViewContainer.hidden = false;
this._noaccountViewContainer.hidden = true;
let views = this._splitView.getViews();
if (views && views.length > 0) {
let firstView = views[0];
if (firstView instanceof FixedListView) {
firstView.list.setSelection([0]);
firstView.list.domFocus();
if (values(this._providerViewsMap).length > 0) {
let firstView = values(this._providerViewsMap)[0];
if (firstView instanceof AccountPanel) {
firstView.setSelection([0]);
firstView.focus();
}
}
}
private isEmptyLinkedAccount(): boolean {
for (var providerId in this._providerViews) {
var listView = this._providerViews[providerId].view;
if (listView && listView.list.length > 0) {
for (let provider of values(this._providerViewsMap)) {
let listView = provider.view;
if (listView && listView.length > 0) {
return false;
}
}
@@ -211,23 +251,21 @@ export class AccountDialog extends Modal {
public dispose(): void {
super.dispose();
for (let key in this._providerViews) {
if (this._providerViews[key].addAccountAction) {
this._providerViews[key].addAccountAction.dispose();
for (let provider of values(this._providerViewsMap)) {
if (provider.addAccountAction) {
provider.addAccountAction.dispose();
}
if (this._providerViews[key].view) {
this._providerViews[key].view.dispose();
if (provider.view) {
provider.view.dispose();
}
delete this._providerViews[key];
}
}
// PRIVATE HELPERS /////////////////////////////////////////////////////
private addProvider(newProvider: AccountProviderAddedEventParams) {
let self = this;
// Skip adding the provider if it already exists
if (this._providerViews[newProvider.addedProvider.id]) {
if (this._providerViewsMap.get(newProvider.addedProvider.id)) {
return;
}
@@ -237,37 +275,35 @@ export class AccountDialog extends Modal {
AddAccountAction,
newProvider.addedProvider.id
);
addAccountAction.addAccountCompleteEvent(() => { self.hideSpinner(); });
addAccountAction.addAccountErrorEvent(msg => { self._onAddAccountErrorEmitter.fire(msg); });
addAccountAction.addAccountStartEvent(() => { self.showSpinner(); });
addAccountAction.addAccountCompleteEvent(() => { this.hideSpinner(); });
addAccountAction.addAccountErrorEvent(msg => { this._onAddAccountErrorEmitter.fire(msg); });
addAccountAction.addAccountStartEvent(() => { this.showSpinner(); });
// Create a fixed list view for the account provider
let providerViewContainer = DOM.$('.provider-view');
let accountList = new List<sqlops.Account>(providerViewContainer, this._delegate, [this._accountRenderer]);
let providerView = new FixedListView<sqlops.Account>(
undefined,
false,
newProvider.addedProvider.displayName,
accountList,
providerViewContainer,
22,
[addAccountAction],
this._actionRunner,
this._contextMenuService,
let providerView = new AccountPanel(
{
id: newProvider.addedProvider.id,
title: newProvider.addedProvider.displayName,
ariaHeaderLabel: newProvider.addedProvider.displayName
},
this._keybindingService,
this._contextMenuService,
this._configurationService,
this._instantiationService,
this._themeService
);
// Append the list view to the split view
this._splitView.addView(providerView);
this._register(attachListStyler(accountList, this._themeService));
attachPanelStyler(providerView, this._themeService);
const insertIndex = this._splitView.length;
// Append the list view to the split view
this._splitView.addView(providerView, Sizing.Distribute, insertIndex);
providerView.render();
providerView.index = insertIndex;
let listService = <ListService>this._listService;
this._register(listService.register(accountList));
this._splitView.layout(DOM.getContentHeight(this._container));
// Set the initial items of the list
providerView.updateList(newProvider.initialAccounts);
providerView.updateAccounts(newProvider.initialAccounts);
if (newProvider.initialAccounts.length > 0 && this._splitViewContainer.hidden) {
this.showSplitView();
@@ -276,31 +312,31 @@ export class AccountDialog extends Modal {
this.layout();
// Store the view for the provider and action
this._providerViews[newProvider.addedProvider.id] = { view: providerView, addAccountAction: addAccountAction };
this._providerViewsMap.set(newProvider.addedProvider.id, { view: providerView, addAccountAction: addAccountAction });
}
private removeProvider(removedProvider: sqlops.AccountProviderMetadata) {
// Skip removing the provider if it doesn't exist
let providerView = this._providerViews[removedProvider.id];
let providerView = this._providerViewsMap.get(removedProvider.id);
if (!providerView || !providerView.view) {
return;
}
// Remove the list view from the split view
this._splitView.removeView(providerView.view);
this._splitView.removeView(providerView.view.index);
this._splitView.layout(DOM.getContentHeight(this._container));
// Remove the list view from our internal map
delete this._providerViews[removedProvider.id];
this._providerViewsMap.delete(removedProvider.id);
this.layout();
}
private updateProviderAccounts(args: UpdateAccountListEventParams) {
let providerMapping = this._providerViews[args.providerId];
let providerMapping = this._providerViewsMap.get(args.providerId);
if (!providerMapping || !providerMapping.view) {
return;
}
providerMapping.view.updateList(args.accountList);
providerMapping.view.updateAccounts(args.accountList);
if (args.accountList.length > 0 && this._splitViewContainer.hidden) {
this.showSplitView();