Started work on the property editors area

- added initial implementation of ViewPropertyEditorsComponent that is the UI for editing view, column, and join properties
- created ViewEditorI18n to keep all text that should eventually be localized
- fixed some lint errors

ngapp/src/app/dataservices/dataservices.module.ts

@@ -70,6 +70,7 @@ import { VirtualizationComponent } from "./virtualization/virtualization.compone
 import { ConnectionTreeSelectorComponent } from './virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component';
 import { ConnectionTableDialogComponent } from './virtualization/view-editor/connection-table-dialog/connection-table-dialog.component';
 import { ProgressDialogComponent } from "@shared/progress-dialog/progress-dialog.component";
+import { ViewPropertyEditorsComponent } from './virtualization/view-editor/view-property-editors/view-property-editors.component';
 
 @NgModule({
   imports: [
@@ -119,7 +120,8 @@ import { ProgressDialogComponent } from "@shared/progress-dialog/progress-dialog
     MessageLogComponent,
     EditorViewsComponent,
     ConnectionTreeSelectorComponent,
-    ConnectionTableDialogComponent
+    ConnectionTableDialogComponent,
+    ViewPropertyEditorsComponent
   ],
   providers: [
     {

ngapp/src/app/dataservices/odata-control/odata-control.component.ts

@@ -205,14 +205,13 @@ export class OdataControlComponent implements OnChanges {
   }
 
   public get metadataFailureMsg(): string {
-    let msg = this.i18n.metadataFetchFailure + '<br/>';
+    const msg = this.i18n.metadataFetchFailure + '<br/>';
     if (_.isEmpty(this.dataservice.getOdataRootUrl()))
       return msg + this.i18n.metadataFetchFailureNoOdataRoot;
 
     if (_.isEmpty(this.dataservice.getServiceViewModel()))
       return msg + this.i18n.metadataFetchFailureNoViewModel;
 
-
     return msg + this.i18n.metadataFetchFailureUrl + '<br/>' +
       '<a href="' + this.metadataUrl + '">' + this.metadataUrl + '</a>';
   }

ngapp/src/app/dataservices/virtualization/view-editor/command/command-factory.ts

@@ -184,10 +184,10 @@ export class CommandFactory {
 
         for ( const entry of json[ Command.argsPropJson ] ) {
           if ( entry[ Command.argNameJson ] === UpdateViewNameCommand.newName ) {
-            newViewName = entry[ "value" ];
+            newViewName = entry[ Command.argValueJson ];
           }
           else if ( entry[ Command.argNameJson ] === UpdateViewNameCommand.oldName ) {
-            replacedViewName = entry[ "value" ];
+            replacedViewName = entry[ Command.argValueJson ];
           }
 
           if ( newViewName && replacedViewName ) {

ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.html

@@ -5,12 +5,12 @@ <h4 class="modal-title pull-left">{{ title }}</h4>
   </button>
 </div>
 <div class="modal-body">
-  <strong>Expand connection and select a source for your view</strong>
+  <strong>{{message}}</strong>
   <app-connection-tree-selector
     (nodeSelected)="onTreeNodeSelected($event)"
     (nodeDeselected)="onTreeNodeDeselected($event)"></app-connection-tree-selector>
   <div>
-    <h4>Current Selection:</h4>
+    <h4>{{currentSelectionMsg}}</h4>
     <strong>{{ selectionText }}</strong>
   </div>
 </div>

ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.ts

@@ -25,6 +25,7 @@ import { ConnectionsConstants } from "@connections/shared/connections-constants"
 import { LoadingState } from "@shared/loading-state.enum";
 import { ConnectionService } from "@connections/shared/connection.service";
 import { LoggerService } from "@core/logger.service";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   selector: "app-connection-table-dialog",
@@ -52,12 +53,14 @@ export class ConnectionTableDialogComponent implements OnInit {
 
   @Output() public okAction = new EventEmitter();
 
-  public title = "Select Source for View";
-  public cancelButtonText = "Cancel";
-  public okButtonText = "OK";
+  public readonly title = ViewEditorI18n.connectionTableSelectionDialogTitle;
+  public readonly message = ViewEditorI18n.connectionTableSelectionDialogMessage;
+  public readonly cancelButtonText = ViewEditorI18n.cancelButtonText;
+  public readonly okButtonText = ViewEditorI18n.okButtonText;
   public okButtonEnabled = false;
   public bsModalRef: BsModalRef;
-  public selectionText = "Nothing selected";
+  public selectionText = ViewEditorI18n.noSelection;
+  public readonly currentSelectionMsg = ViewEditorI18n.currentSelection;
 
   private connectionService: ConnectionService;
   private selectedTreeNodes: SchemaNode[] = [];

ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component.spec.ts

@@ -10,7 +10,7 @@ import { VdbService } from "@dataservices/shared/vdb.service";
 import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
 import { AppSettingsService } from "@core/app-settings.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
-import { SchemaNode } from "@connections/shared/schema-node.model";
+import { MockAppSettingsService } from "@core/mock-app-settings.service";
 
 describe("ConnectionTreeSelectorComponent", () => {
   let component: ConnectionTreeSelectorComponent;
@@ -20,7 +20,10 @@ describe("ConnectionTreeSelectorComponent", () => {
     TestBed.configureTestingModule({
       imports: [ HttpModule, TreeModule ],
       declarations: [ ConnectionTreeSelectorComponent ],
-      providers: [ AppSettingsService, LoggerService, NotifierService,
+      providers: [
+        { provide: AppSettingsService, useClass: MockAppSettingsService },
+        LoggerService,
+        NotifierService,
         { provide: ConnectionService, useClass: MockConnectionService },
         { provide: VdbService, useClass: MockVdbService },
       ]

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.html

@@ -4,7 +4,7 @@
        (deselect)="tabSelected(tabs[0], false)">
     <ng-template tabHeading>
       <span class="fa fa-list-alt editor-views-tab-icon"></span>
-      <span class="editor-views-tab-heading">Preview</span>
+      <span class="editor-views-tab-heading">{{previewTabName}}</span>
     </ng-template>
     <app-view-preview></app-view-preview>
   </tab>
@@ -13,7 +13,7 @@
        (deselect)="tabSelected(tabs[1], false)">
     <ng-template tabHeading>
       <span class="pficon pficon-info editor-views-tab-icon"></span>
-      <span class="editor-views-tab-heading">Messages</span>
+      <span class="editor-views-tab-heading">{{messagesTabName}}</span>
     </ng-template>
     <app-message-log></app-message-log>
   </tab>

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.ts

@@ -16,11 +16,12 @@
  */
 
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subscription } from "rxjs/Subscription";
-import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service";
-import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event";
 import { LoggerService } from "@core/logger.service";
+import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service";
 import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-editor-part.enum";
+import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event";
+import { Subscription } from "rxjs/Subscription";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -30,6 +31,10 @@ import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-ed
 })
 export class EditorViewsComponent implements OnInit, OnDestroy {
 
+  // text used by html
+  public readonly messagesTabName = ViewEditorI18n.messagesTabName;
+  public readonly previewTabName = ViewEditorI18n.previewTabName;
+
   private readonly previewIndex = 0;
   private readonly messagesIndex = 1;
 

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.css

@@ -1,5 +1,5 @@
 /*
- * The container for the mesage log table.
+ * The container for the message log table.
  */
 #view-editor-message-log {
   align-items: center;

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.ts

@@ -20,6 +20,7 @@ import { LoggerService } from "@core/logger.service";
 import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service";
 import { EmptyStateConfig, NgxDataTableConfig, TableConfig } from "patternfly-ng";
 import { Message } from "@dataservices/virtualization/view-editor/editor-views/message-log/message";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -49,19 +50,19 @@ export class MessageLogComponent implements OnInit {
   public ngOnInit(): void {
     this.columns = [
       {
-        name: "ID",
+        name: ViewEditorI18n.idColumnName,
         prop: Message.ID_PROP_NAME
       },
       {
-        name: "Type",
+        name: ViewEditorI18n.typeColumnName,
         prop: Message.TYPE_PROP_NAME
       },
       {
-        name: "Description",
+        name: ViewEditorI18n.descriptionColumnName,
         prop: Message.DESCRIPTION_PROP_NAME
       },
       {
-        name: "Context",
+        name: ViewEditorI18n.contextColumnName,
         prop: Message.CONTEXT_PROP_NAME
       },
     ];
@@ -74,7 +75,7 @@ export class MessageLogComponent implements OnInit {
     } as NgxDataTableConfig;
 
     this.emptyStateConfig = {
-      title: "No messages found"
+      title: ViewEditorI18n.noMessagesFound
     } as EmptyStateConfig;
 
     this.tableConfig = {

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/problem.ts

@@ -15,18 +15,13 @@
  * limitations under the License.
  */
 import { MessageType } from "@dataservices/virtualization/view-editor/editor-views/message-log/message-type.enum";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 export class Problem {
 
-  public static readonly ERR0100 = new Problem( "ERR0100",
-                                                MessageType.ERROR,
-                                                "There must be a virtualization selected in order to use this editor." );
-  public static readonly ERR0110 = new Problem( "ERR0110",
-                                                MessageType.ERROR,
-                                                "A view must have a name." );
-  public static readonly ERR0120 = new Problem( "ERR0120",
-                                                 MessageType.ERROR,
-                                                 "A view must have at least one source." );
+  public static readonly ERR0100 = new Problem( "ERR0100", MessageType.ERROR, ViewEditorI18n.error0100 );
+  public static readonly ERR0110 = new Problem( "ERR0110", MessageType.ERROR, ViewEditorI18n.error0110 );
+  public static readonly ERR0120 = new Problem( "ERR0120", MessageType.ERROR, ViewEditorI18n.error0120 );
 
   private readonly _id: string;
   private readonly _description: string;

ngapp/src/app/dataservices/virtualization/view-editor/editor-views/view-preview/view-preview.component.ts

@@ -24,6 +24,7 @@ import { ColumnData } from "@dataservices/shared/column-data.model";
 import { RowData } from "@dataservices/shared/row-data.model";
 import { EmptyStateConfig, NgxDataTableConfig, TableConfig } from "patternfly-ng";
 import { Subscription } from "rxjs/Subscription";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -102,7 +103,7 @@ export class ViewPreviewComponent implements OnInit, OnDestroy {
     } as NgxDataTableConfig;
 
     this.emptyStateConfig = {
-      title: "Preview data unavailable"
+      title: ViewEditorI18n.previewDataUnavailable
     } as EmptyStateConfig;
 
     this.tableConfig = {
@@ -129,7 +130,7 @@ export class ViewPreviewComponent implements OnInit, OnDestroy {
 
     // Define the row data
     let firstTime = true;
-    const rowNumHeader = "ROW #";
+    const rowNumHeader = ViewEditorI18n.rowNumberColumnName;
 
     for ( let rowIndex = 0; rowIndex < rowData.length; rowIndex++ ) {
       const row = rowData[ rowIndex ];

ngapp/src/app/dataservices/virtualization/view-editor/event/view-editor-save-progress-change-id.enum.ts

@@ -20,7 +20,7 @@ export enum ViewEditorSaveProgressChangeId {
   /**
    * Indicates the view save is in progress.
    */
-  IN_PROGESS = "IN_PROGRESS",
+  IN_PROGRESS = "IN_PROGRESS",
 
   /**
    * Indicates the view save has completed successfully.

ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.html

@@ -8,7 +8,7 @@
       <div class="alert-padding" *ngIf="!hasViewSources">
         <div class="alert alert-info text-center">
           <span class="pficon pficon-info"></span>
-          <strong>Select a source for the view</strong>
+          <strong>{{noSourcesAlert}}</strong>
         </div>
       </div>
       <div class="object-card-container" *ngIf="hasViewSources">
@@ -20,7 +20,8 @@
   <!-- ========== Properties ========== -->
   <!-- ================================ -->
   <div class="view-editor-area"
-       id="view-editor-properties-container">Properties
+       id="view-editor-properties-container">
+    <app-view-property-editors></app-view-property-editors>
   </div>
 
 </div>

ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts

@@ -19,6 +19,8 @@ import {
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
+import { ViewPropertyEditorsComponent } from "@dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component";
+import { TabsModule } from "ngx-bootstrap";
 
 describe('ViewCanvasComponent', () => {
   let component: ViewCanvasComponent;
@@ -36,9 +38,14 @@ describe('ViewCanvasComponent', () => {
         SortModule,
         TableModule,
         WizardModule,
-        HttpModule
+        HttpModule,
+        TabsModule.forRoot()
+      ],
+      declarations: [
+        SelectedNodeComponent,
+        ViewCanvasComponent,
+        ViewPropertyEditorsComponent
       ],
-      declarations: [ ViewCanvasComponent, SelectedNodeComponent ],
       providers: [
         { provide: AppSettingsService, useClass: MockAppSettingsService },
         LoggerService,

ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.ts

@@ -23,6 +23,7 @@ import { Subscription } from "rxjs/Subscription";
 import { SchemaNode } from "@connections/shared/schema-node.model";
 import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-editor-part.enum";
 import { ViewStateChangeId } from "@dataservices/virtualization/view-editor/event/view-state-change-id.enum";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -32,6 +33,9 @@ import { ViewStateChangeId } from "@dataservices/virtualization/view-editor/even
 })
 export class ViewCanvasComponent implements OnInit, OnDestroy {
 
+  // used by html
+  public readonly noSourcesAlert = ViewEditorI18n.noSourcesAlert;
+
   private readonly logger: LoggerService;
   private readonly editorService: ViewEditorService;
   private subscription: Subscription;

ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.html

@@ -19,13 +19,13 @@
   <div class="form-group">
     <label class="col-sm-2 control-label view-editor-header-label required-field"
            id="view-editor-header-name"
-           for="view-name-input">View Name:
+           for="view-name-input">{{viewNameLabel}}
     </label>
     <div class="col-sm-5 view-editor-header-input-div">
       <input type="text"
              id="view-name-input"
              name="view-name-input"
-             placeholder="Enter a view name"
+             placeholder={{viewNamePlaceholder}}
              autofocus
              [(ngModel)]="viewName"
              [readonly]="readOnly"
@@ -41,7 +41,7 @@
            for="view-editor-header-show-description">
       <input type="checkbox"
              id="view-editor-header-show-description"
-             (change)="showDescription = $event.target.checked">Show Description
+             (change)="showDescription = $event.target.checked">{{showDescriptionCheckbox}}
     </label>
   </div>
 
@@ -52,13 +52,13 @@
        *ngIf="showDescription">
     <label class="col-sm-2 control-label view-editor-header-label"
            id="view-editor-header-description"
-           for="view-editor-header-description-input">Description:
+           for="view-editor-header-description-input">{{descriptionLabel}}
     </label>
     <div class="col-sm-7 view-editor-header-input-div">
         <textarea class="form-control"
                   id="view-editor-header-description-input"
                   name="view-editor-header-description-input"
-                  placeholder="Enter a view description"
+                  placeholder={{descriptionPlaceholder}}
                   [(ngModel)]="viewDescription"
                   [readonly]="readOnly"
                   (input)="viewDescriptionChanged($event.target.value)"

ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.ts

@@ -22,6 +22,7 @@ import { ViewEditorService } from "@dataservices/virtualization/view-editor/view
 import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event";
 import { ViewStateChangeId } from "@dataservices/virtualization/view-editor/event/view-state-change-id.enum";
 import { Subscription } from "rxjs/Subscription";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -31,6 +32,13 @@ import { Subscription } from "rxjs/Subscription";
 })
 export class ViewEditorHeaderComponent implements OnInit, OnDestroy {
 
+  // used by html
+  public readonly descriptionLabel = ViewEditorI18n.descriptionLabel;
+  public readonly descriptionPlaceholder = ViewEditorI18n.descriptionPlaceholder;
+  public readonly showDescriptionCheckbox = ViewEditorI18n.showDescriptionCheckbox;
+  public readonly viewNameLabel = ViewEditorI18n.viewNameLabel;
+  public readonly viewNamePlaceholder = ViewEditorI18n.viewNamePlaceholder;
+
   private readonly logger: LoggerService;
   private readonly editorService: ViewEditorService;
   public showDescription = false;