Fix some missed property name updates (#10135)

* Fix some missed property name updates

* Undo css addition

* Remove css
This commit is contained in:
Charles Gagnon
2020-04-23 07:44:16 -07:00
committed by GitHub
parent 7bd1dfdf0f
commit b1081bb610
5 changed files with 30 additions and 31 deletions

View File

@@ -5,7 +5,7 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
--> -->
<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'"> <div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
<ng-template ngFor let-item [ngForOf]="displayProperties"> <ng-template ngFor let-item [ngForOf]="propertyItems">
<div class="property {{propertyLayout}}" style="display:flex"> <div class="property {{propertyLayout}}" style="display:flex">
<div class="propertyName">{{item.displayName}}</div> <div class="propertyName">{{item.displayName}}</div>
<div class="splitter">:</div> <div class="splitter">:</div>

View File

@@ -2,8 +2,8 @@
* Copyright (c) Microsoft Corporation. All rights reserved. * Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/propertiesContainer';
import 'vs/css!./media/propertiesContainer';
import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core'; import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
import { EventType, addDisposableListener } from 'vs/base/browser/dom'; import { EventType, addDisposableListener } from 'vs/base/browser/dom';
import { Disposable } from 'vs/base/common/lifecycle'; import { Disposable } from 'vs/base/common/lifecycle';
@@ -18,7 +18,7 @@ enum PropertyLayoutDirection {
column = 'columnLayout' column = 'columnLayout'
} }
export interface DisplayProperty { export interface PropertyItem {
displayName: string; displayName: string;
value: string; value: string;
} }
@@ -35,8 +35,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
public gridDisplayLayout = GridDisplayLayout.twoColumns; public gridDisplayLayout = GridDisplayLayout.twoColumns;
public propertyLayout = PropertyLayoutDirection.row; public propertyLayout = PropertyLayoutDirection.row;
public height: number; public height: number;
private _propertyItems: PropertyItem[] = [];
private _displayProperties: DisplayProperty[] = [];
constructor( constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -46,7 +45,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
} }
ngOnInit() { ngOnInit() {
this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutDisplayProperties())); this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutPropertyItems()));
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }
@@ -54,7 +53,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
this.dispose(); this.dispose();
} }
private layoutDisplayProperties(): void { private layoutPropertyItems(): void {
// Reflow: // Reflow:
// 2 columns w/ horizontal alignment : 1366px and above // 2 columns w/ horizontal alignment : 1366px and above
// 2 columns w/ vertical alignment : 1024 - 1365px // 2 columns w/ vertical alignment : 1024 - 1365px
@@ -62,26 +61,26 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
if (window.innerWidth >= 1366) { if (window.innerWidth >= 1366) {
this.gridDisplayLayout = GridDisplayLayout.twoColumns; this.gridDisplayLayout = GridDisplayLayout.twoColumns;
this.propertyLayout = PropertyLayoutDirection.row; this.propertyLayout = PropertyLayoutDirection.row;
this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight; this.height = Math.ceil(this.propertyItems.length / 2) * horizontalPropertyHeight + collapseHeight;
} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) { } else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
this.gridDisplayLayout = GridDisplayLayout.twoColumns; this.gridDisplayLayout = GridDisplayLayout.twoColumns;
this.propertyLayout = PropertyLayoutDirection.column; this.propertyLayout = PropertyLayoutDirection.column;
this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight; this.height = Math.ceil(this.propertyItems.length / 2) * verticalPropertyHeight + collapseHeight;
} else if (window.innerWidth < 1024) { } else if (window.innerWidth < 1024) {
this.gridDisplayLayout = GridDisplayLayout.oneColumn; this.gridDisplayLayout = GridDisplayLayout.oneColumn;
this.propertyLayout = PropertyLayoutDirection.column; this.propertyLayout = PropertyLayoutDirection.column;
this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight; this.height = this.propertyItems.length * verticalPropertyHeight + collapseHeight;
} }
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }
public set displayProperties(displayProperties: DisplayProperty[]) { public set propertyItems(propertyItems: PropertyItem[]) {
this._displayProperties = displayProperties; this._propertyItems = propertyItems;
this.layoutDisplayProperties(); this.layoutPropertyItems();
} }
public get displayProperties(): DisplayProperty[] { public get propertyItems(): PropertyItem[] {
return this._displayProperties; return this._propertyItems;
} }
} }

View File

@@ -11,7 +11,7 @@ import {
import * as azdata from 'azdata'; import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces'; import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { PropertiesContainer, DisplayProperty } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component'; import { PropertiesContainer, PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
@Component({ @Component({
selector: `modelview-properties-container`, selector: `modelview-properties-container`,
@@ -41,15 +41,15 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
public setProperties(properties: { [key: string]: any; }): void { public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties); super.setProperties(properties);
this._propertiesContainer.displayProperties = this.displayProperties; this._propertiesContainer.propertyItems = this.propertyItems;
} }
public get displayProperties(): DisplayProperty[] { public get propertyItems(): PropertyItem[] {
return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props) => props.displayProperties, []); return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props) => props.propertyItems, []);
} }
public set displayProperties(newValue: azdata.PropertiesContainerItem[]) { public set propertyItems(newValue: azdata.PropertiesContainerItem[]) {
this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props, value) => props.displayProperties = value, newValue); this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue);
this._propertiesContainer.displayProperties = newValue; this._propertiesContainer.propertyItems = newValue;
} }
} }

View File

@@ -15,7 +15,7 @@ import * as nls from 'vs/nls';
import { Registry } from 'vs/platform/registry/common/platform'; import { Registry } from 'vs/platform/registry/common/platform';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
import { subscriptionToDisposable } from 'sql/base/browser/lifecycle'; import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
import { PropertiesContainer, DisplayProperty } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component'; import { PropertiesContainer, PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
import { convertSizeToNumber } from 'sql/base/browser/dom'; import { convertSizeToNumber } from 'sql/base/browser/dom';
export interface PropertiesConfig { export interface PropertiesConfig {
@@ -86,9 +86,9 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
this._connection = this._bootstrap.connectionManagementService.connectionInfo; this._connection = this._bootstrap.connectionManagementService.connectionInfo;
this.setLoadingStatus(true); this.setLoadingStatus(true);
this._register(subscriptionToDisposable(this._bootstrap.adminService.databaseInfo.subscribe(databaseInfo => { this._register(subscriptionToDisposable(this._bootstrap.adminService.databaseInfo.subscribe(databaseInfo => {
const displayProperties = this.parseProperties(databaseInfo); const propertyItems = this.parseProperties(databaseInfo);
if (this._inited) { if (this._inited) {
this._propertiesContainer.displayProperties = displayProperties; this._propertiesContainer.propertyItems = propertyItems;
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} else { } else {
this.logService.info('Database properties successfully retrieved but component not initialized yet'); this.logService.info('Database properties successfully retrieved but component not initialized yet');
@@ -100,7 +100,7 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
}))); })));
} }
private parseProperties(databaseInfo?: DatabaseInfo): DisplayProperty[] { private parseProperties(databaseInfo?: DatabaseInfo): PropertyItem[] {
const provider = this._config.provider; const provider = this._config.provider;
let propertyArray: Array<Property>; let propertyArray: Array<Property>;

View File

@@ -16,7 +16,7 @@ import * as TypeMoq from 'typemoq';
import * as assert from 'assert'; import * as assert from 'assert';
import { mssqlProviderName } from 'sql/platform/connection/common/constants'; import { mssqlProviderName } from 'sql/platform/connection/common/constants';
import { NullLogService } from 'vs/platform/log/common/log'; import { NullLogService } from 'vs/platform/log/common/log';
import { DisplayProperty } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component'; import { PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
class TestChangeDetectorRef extends ChangeDetectorRef { class TestChangeDetectorRef extends ChangeDetectorRef {
reattach(): void { reattach(): void {
@@ -104,10 +104,10 @@ suite('Dashboard Properties Widget Tests', () => {
return new Promise(resolve => { return new Promise(resolve => {
// because config parsing is done async we need to put our asserts on the thread stack // because config parsing is done async we need to put our asserts on the thread stack
setImmediate(() => { setImmediate(() => {
const displayProperties: DisplayProperty[] = (testComponent as any).parseProperties(databaseInfo); const propertyItems: PropertyItem[] = (testComponent as any).parseProperties(databaseInfo);
assert.equal(displayProperties.length, 1); assert.equal(propertyItems.length, 1);
assert.equal(displayProperties[0].displayName, 'Test'); assert.equal(propertyItems[0].displayName, 'Test');
assert.equal(displayProperties[0].value, 'Test Property'); assert.equal(propertyItems[0].value, 'Test Property');
resolve(); resolve();
}); });
}); });