Develop update (#920)

* DHFPROD-496 fix QuickStart naming in app

“QuickStart”, not “Quick Start”

* DHFPROD-497 fix property index selection

Add flags to property to keep track of what indexes are set (instead of using name).
Set flags based on entity state when editor opens.
Set entity state based on flags on save.

* Fixes #582 - should be reviewed for UX before merging. (#906)

* Fix tab bar layout issue #798 (#909)

* Rework of fix for issue #557 where URI in request to /doc API (#915)

Now matches other implementations throughout codebase which leverage encodeURIComponent()

* Fixing Issue #578: Adding deletion dialog (#889) (#917)

Adding an additional dialog message to the 2.0 development branch
that will require the user to press yes twice before the entity
and all associated flows and code are deleted

* DHFPROD-664 adjust offset, size of new entities in UI (#918)

Author: aebadirad

quick-start/src/main/ui/app/entities/entity.model.ts

@@ -138,8 +138,8 @@ export class Entity {
       },
       'filename': null,
       'hubUi': {
-        x: 100,
-        y: 100,
+        x: 10,
+        y: 115,
         width: 350,
         height: 100
       },

quick-start/src/main/ui/app/entities/property.model.ts

@@ -13,6 +13,11 @@ export class PropertyType {
 
   // ui only
   showCollation: boolean = false;
+  isPrimaryKey: boolean = false;
+  hasElementRangeIndex: boolean = false;
+  hasRangeIndex: boolean = false;
+  hasWordLexicon: boolean = false;
+  required: boolean = false;
 
   UNICODE_COLLATION: string = 'http://marklogic.com/collation/codepoint';
 

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

@@ -44,11 +44,11 @@ <h4>Properties</h4>
       <tbody>
         <tr *ngFor="let property of entity.definition.properties; let i = index">
           <td><input type="checkbox" [(ngModel)]="property.selected"></td>
-          <td class="col-toggler" (click)="togglePrimaryKey(property)"><i [ngClass]="{'active': isPrimaryKey(property.name)}" class="fa fa-key"></i></td>
-          <td class="col-toggler" (click)="toggleRangeIndex(property)"><i [ngClass]="{'active': isRangeIndex(property.name)}" class="fa fa-bolt"></i></td>
-          <td class="col-toggler" (click)="togglePathRangeIndex(property)"><i [ngClass]="{'active': isPathRangeIndex(property.name)}" class="fa fa-code"></i></td>
-          <td class="col-toggler" (click)="toggleWordLexicon(property)"><i [ngClass]="{'active': isWordLexicon(property.name)}" class="fa fa-won"></i></td>
-          <td class="col-toggler" (click)="toggleRequired(property)"><i [ngClass]="{'active': isRequired(property.name)}" class="fa fa-exclamation"></i></td>
+          <td class="col-toggler" (click)="togglePrimaryKey(property)"><i [ngClass]="{'active': property.isPrimaryKey}" class="fa fa-key"></i></td>
+          <td class="col-toggler" (click)="property.hasElementRangeIndex = !property.hasElementRangeIndex"><i [ngClass]="{'active': property.hasElementRangeIndex}" class="fa fa-bolt"></i></td>
+          <td class="col-toggler" (click)="property.hasRangeIndex = !property.hasRangeIndex"><i [ngClass]="{'active': property.hasRangeIndex}" class="fa fa-code"></i></td>
+          <td class="col-toggler" (click)="property.hasWordLexicon = !property.hasWordLexicon"><i [ngClass]="{'active': property.hasWordLexicon}" class="fa fa-won"></i></td>
+          <td class="col-toggler" (click)="property.required = !property.required"><i [ngClass]="{'active': property.required}" class="fa fa-exclamation"></i></td>
 
           <td><input type="text" [(ngModel)]="property.name"></td>
           <td>

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

@@ -51,6 +51,14 @@ export class EntityEditorComponent {
     this.actions = actions;
     this.dataTypes = dataTypes;
     this.entityBackup = JSON.stringify(this.entity);
+    // Set property ui flags based on entity state
+    this.entity.definition.properties.forEach(function(property) {
+      property.isPrimaryKey = this.entity.definition.primaryKey === property.name;
+      property.hasElementRangeIndex = this.entity.definition.elementRangeIndex.indexOf(property.name) >= 0;
+      property.hasRangeIndex = this.entity.definition.rangeIndex.indexOf(property.name) >= 0;
+      property.hasWordLexicon = this.entity.definition.wordLexicon.indexOf(property.name) >= 0;
+      property.required = this.entity.definition.required.indexOf(property.name) >= 0;
+    }, this);
   }
 
   getType(property: PropertyType) {
@@ -147,26 +155,6 @@ export class EntityEditorComponent {
     });
   }
 
-  isPrimaryKey(key: string) {
-    return this.entity.definition.primaryKey === key;
-  }
-
-  isRangeIndex(key: string) {
-    return this.entity.definition.elementRangeIndex.indexOf(key) >= 0;
-  }
-
-  isPathRangeIndex(key: string) {
-    return this.entity.definition.rangeIndex.indexOf(key) >= 0;
-  }
-
-  isWordLexicon(key: string) {
-    return this.entity.definition.wordLexicon.indexOf(key) >= 0;
-  }
-
-  isRequired(key: string) {
-    return this.entity.definition.required.indexOf(key) >= 0;
-  }
-
   addProperty() {
     this.entity.definition.properties.push(new PropertyType());
   }
@@ -212,6 +200,29 @@ export class EntityEditorComponent {
 
   saveEntity() {
     if (this.actions.save) {
+      // Set entity state based on property ui flags
+      this.entity.definition.primaryKey = null;
+      this.entity.definition.elementRangeIndex = [];
+      this.entity.definition.rangeIndex = [];
+      this.entity.definition.wordLexicon = [];
+      this.entity.definition.required = [];
+      this.entity.definition.properties.forEach(function(property) {
+        if (property.isPrimaryKey) {
+          this.entity.definition.primaryKey = property.name;
+        }
+        if (property.hasElementRangeIndex) {
+          this.entity.definition.elementRangeIndex.push(property.name);
+        }
+        if (property.hasRangeIndex) {
+          this.entity.definition.rangeIndex.push(property.name);
+        }
+        if (property.hasWordLexicon) {
+          this.entity.definition.wordLexicon.push(property.name);
+        }
+        if (property.required) {
+          this.entity.definition.required.push(property.name);
+        }
+      }, this);
       this.actions.save();
     }
     this.dialog.hide();
@@ -243,28 +254,14 @@ export class EntityEditorComponent {
   }
 
   togglePrimaryKey(property: PropertyType) {
-    if (this.entity.definition.primaryKey === property.name) {
-      this.entity.definition.primaryKey = null;
+    if (property.isPrimaryKey) {
+      property.isPrimaryKey = false;
     } else {
-      this.entity.definition.primaryKey = property.name;
-    }
-  }
-
-  toggleRangeIndex(property: PropertyType) {
-    let idx = this.entity.definition.elementRangeIndex.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.elementRangeIndex.splice(idx, 1);
-    } else {
-      this.entity.definition.elementRangeIndex.push(property.name);
-    }
-  }
-
-  togglePathRangeIndex(property: PropertyType) {
-    let idx = this.entity.definition.rangeIndex.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.rangeIndex.splice(idx, 1);
-    } else {
-      this.entity.definition.rangeIndex.push(property.name);
+      // Unset any existing primary key
+      this.entity.definition.properties.map(function(prop) {
+        prop.isPrimaryKey = false;
+      });
+      property.isPrimaryKey = true;
     }
   }
 
@@ -314,24 +311,6 @@ export class EntityEditorComponent {
     }
   }
 
-  toggleWordLexicon(property: PropertyType) {
-    let idx = this.entity.definition.wordLexicon.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.wordLexicon.splice(idx, 1);
-    } else {
-      this.entity.definition.wordLexicon.push(property.name);
-    }
-  }
-
-  toggleRequired(property: PropertyType) {
-    let idx = this.entity.definition.required.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.required.splice(idx, 1);
-    } else {
-      this.entity.definition.required.push(property.name);
-    }
-  }
-
   onDescKey($event: KeyboardEvent, propertyIndex: number) {
     if (
       (propertyIndex === (this.entity.definition.properties.length - 1)) &&

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

@@ -299,7 +299,10 @@ export class EntityModelerComponent implements AfterViewChecked {
   deleteEntity(entity: Entity) {
     let result = this.dialogService.confirm(`Really delete ${entity.name}?`, 'No', 'Yes');
     result.subscribe(() => {
-      this.entitiesService.deleteEntity(entity);
+      let confirmResult = this.dialogService.confirm(`Are you sure really want to delete the ${entity.name} entity as it will delete the entity and all associated flows and code?`, 'No', 'Yes');
+      confirmResult.subscribe(() => {
+        this.entitiesService.deleteEntity(entity);
+      }, () => {});
     }, () => {});
   }
 
@@ -353,9 +356,28 @@ export class EntityModelerComponent implements AfterViewChecked {
     this.saveUiState();
   }
 
+  /**
+   * Adjust entity container coordinates based on number of entities already in UI
+   * @param {Entity} entity
+   */
+  adjustCoords(entity: Entity) {
+    entity.hubUi.x += 20*this.entities.length;
+    entity.hubUi.y += 30*this.entities.length;
+  }
+
+  /**
+   * Adjust entity container size based on its number of properties
+   * @param {Entity} entity
+   */
+  adjustSize(entity: Entity) {
+    entity.hubUi.height += 22*entity.definition.properties.length;
+  }
+
   addEntity() {
     let entity = new Entity().defaultValues();
     this.entitiesService.editEntity(entity).subscribe(() => {
+      this.adjustCoords(entity);
+      this.adjustSize(entity);
       this.entitiesService.saveEntity(entity);
     },
     // cancel... do nothing

quick-start/src/main/ui/app/flows/flows.component.scss

@@ -363,6 +363,11 @@ li.flow.mdl-list__item div ul li {
   height: 100%;
 }
 
+/deep/ .mdl-tabs__tab {
+  padding: 0 12px;
+  white-space: nowrap;
+}
+
 /deep/ mdl-tab-panel-title {
   .fa {
     margin-right: 5px;

quick-start/src/main/ui/app/header/header.component.html

@@ -1,7 +1,7 @@
 <header class="mdl-layout__header">
   <div class="mdl-layout__header-row">
     <img src="assets/img/odh.svg">
-    <span class="mdl-layout-title">Data Hub Quick Start</span>
+    <span class="mdl-layout-title">Data Hub QuickStart</span>
     <!-- Add spacer, to align navigation to the right -->
     <div class="mdl-layout-spacer"></div>
     <div *ngIf="getRunningJobCount() !== 0" layout="row" layout-align="center center" class="job-progress" (click)="gotoJobs()">

quick-start/src/main/ui/app/jobs/job-output.component.scss

@@ -6,4 +6,5 @@
 
 pre {
   overflow: auto;
+  white-space: pre-wrap;
 }

quick-start/src/main/ui/app/login/login.component.html

@@ -4,7 +4,7 @@
   </div>
   <div class="login-wrapper" layout="row" layout-align="center start">
     <section layout="column" layout-align="center center" class="left-pane">
-      <h1 id="mla-loginPage-Text">Data Hub Quick Start</h1>
+      <h1 id="mla-loginPage-Text">Data Hub QuickStart</h1>
       <img class="odh-icon" src="assets/img/odh.svg">
       <section flex layout-padding class="install-status" *ngIf="installationStatus">
         <pre>{{installationStatus}}</pre>
@@ -165,7 +165,7 @@ <h3>Choose Your Project Environment</h3>
 
             <p class="help-text">Each Hub Project can be deployed to multiple environments. Environments are
             determined by the presence of a gradle-env.properties file in your hub project
-            directory. By default the Quick Start only creates a local environment file.
+            directory. By default QuickStart only creates a local environment file.
             Read more <a target="_blank" href="https://github.com/marklogic/marklogic-data-hub/wiki/Data-Hub-QuickStart-Project-Environments">on the Data Hub Framework Wiki</a>.
             </p>
             <app-select-list

quick-start/src/main/ui/app/search/search.service.ts

@@ -31,8 +31,7 @@ export class SearchService {
   }
 
   getDoc(database: string, docUri: string) {
-    let encodedURI = encodeURI(docUri);
-    return this.get(`/api/search/doc?database=${database}&docUri=${encodedURI}`);
+    return this.get(`/api/search/doc?database=${database}&docUri=${encodeURIComponent(docUri)}`);
   }
 
   private extractData = (res: Response) => {