DHFPROD-1433 make entity editor scrollable

Fixes entity editor extending beyond browser window
when there are too many properties, making buttons
not clickable:
- Make dialog body container scrollable after a max-height
- When new property is added, scroll to bottom

Author: wooldridge

quick-start/src/main/ui/app/entity-modeler/entity-editor.component.html

@@ -6,7 +6,7 @@
       <i class="fa fa-close"></i>
     </mdl-button>
   </div>
-  <div class="mdl-dialog__content">
+  <div class="mdl-dialog__content" #dialogContent>
     <div>
       <mdl-textfield type="text" autofocus label="Title" required [(ngModel)]="entity.info.title" floating-label></mdl-textfield>
     </div>

quick-start/src/main/ui/app/entity-modeler/entity-editor.component.scss

@@ -21,6 +21,13 @@ $bg-color: unquote("rgb(#{$palette-datahub-500})");
   bottom: 12px;
 }
 
+div.selected-entity div.mdl-dialog__content {
+  display:block;
+  overflow:auto;
+  max-height:596px;
+  width:100%;
+}
+
 table.properties {
   border-collapse: collapse;
   border: 1px solid #ccc;

quick-start/src/main/ui/app/entity-modeler/entity-editor.component.ts

@@ -2,6 +2,8 @@ import {
   Component,
   HostListener,
   Inject,
+  ElementRef,
+  ViewChild
 } from '@angular/core';
 
 import { MdlDialogService, MdlDialogReference } from '@angular-mdl/core';
@@ -17,7 +19,10 @@ import * as _ from 'lodash';
   templateUrl: './entity-editor.component.html',
   styleUrls: ['./entity-editor.component.scss']
 })
-export class EntityEditorComponent {
+export class EntityEditorComponent implements AfterViewChecked {
+
+  @ViewChild('dialogContent') el:ElementRef;
+
   entity: Entity;
   actions: any;
   dataTypes: Array<any>;
@@ -41,6 +46,8 @@ export class EntityEditorComponent {
     }
   ];
 
+  propAdded: boolean = false;
+
   // property name pattern: name cannot have space characters in it
   readonly PROPERTY_NAME_PATTERN = /^[^\s]+$/;
 
@@ -162,6 +169,14 @@ export class EntityEditorComponent {
 
   addProperty() {
     this.entity.definition.properties.push(new PropertyType());
+    this.propAdded = true;
+  }
+
+  ngAfterViewChecked() {
+    if (this.propAdded) {
+      this.el.nativeElement.scrollTop = this.el.nativeElement.scrollHeight;
+      this.propAdded = false;
+    }
   }
 
   deleteSelectedProperties() {