DHFPROD-1422 UX updates to mapping source

- Add “URI:” label to source URI
- Add tooltip to URI label describing source URI
- Update tooltip for URI and only show it when truncated
- Update save button label to read “SAVE MAPPING”
- Expose help icon for Source heading, link to source info

Author: wooldridge

quick-start/src/main/ui/app/mappings/map.component.html

@@ -21,8 +21,8 @@ <h1>
       </div>
 
       <div id="save-map">
-        <mdl-button *ngIf="mapChanged()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple ng-class="btn-save-map" (click)="saveMap()">Save Map</mdl-button>
-        <mdl-button *ngIf="!mapChanged()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple ng-class="btn-save-map" disabled>Save Map</mdl-button>
+        <mdl-button *ngIf="mapChanged()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple ng-class="btn-save-map" (click)="saveMap()">Save Mapping</mdl-button>
+        <mdl-button *ngIf="!mapChanged()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple ng-class="btn-save-map" disabled>Save Mapping</mdl-button>
         <mdl-button *ngIf="mapChanged()" mdl-button-type="raised" mdl-colored mdl-ripple ng-class="btn-cancel-map" (click)="resetMap()">Reset</mdl-button>
         <mdl-button *ngIf="!mapChanged()" mdl-button-type="raised" mdl-colored mdl-ripple ng-class="btn-cancel-map" disabled>Reset</mdl-button>
       </div>
@@ -33,16 +33,17 @@ <h1>
       <div id="src-heading" #srcheading>
         <div class="item-title">
           <div class="item-type">Source</div>
-          <!-- TODO help icon for when docs are avail -->
-          <!-- <span class="help-icon">
-            <i class="fa fa-question-circle fa-lg"></i>
-          </span> -->
+          <span class="help-icon">
+            <a href="https://marklogic.github.io/marklogic-data-hub/harmonize/mapping/#changing-the-mapping-source-document" target="_blank"><i class="fa fa-question-circle fa-lg"></i></a>
+          </span>
         </div>
         <p *ngIf="!editingURI" class="item-identifying-info">
-          <span (click)="editingURI=true" ng-class="sample-doc-uri" class="sample-doc-uri" title="{{ sampleDocURI }}">{{ getLastChars(sampleDocURI, 40, '...') }}</span>
+          <span class="uri-label" tooltip="The URI of the source document from which QuickStart generates the list of source property names." container="body">URI:</span>
+          <span (click)="editingURI=true" ng-class="sample-doc-uri" class="sample-doc-uri" tooltip="{{ getURITooltip(sampleDocURI, 45) }}" container="body">{{ getLastChars(sampleDocURI, 45, '...') }}</span>
           <span class="fa fa-pencil edit-item" (click)="editingURI=true"></span>
         </p>
         <p *ngIf="editingURI" class="edit-uri">
+          <span class="uri-label" tooltip="The URI of the source document from which QuickStart generates the list of source property names." container="body">URI:</span>
           <input type="text" class="edit-uri-val" [(ngModel)]="editURIVal" (keypress)="keyPressURI($event)" />
           <span class="edit-save" (click)="updateSampleDoc();"><i class="fa fa-check"></i></span>
           <span class="edit-cancel" (click)="cancelEditURI()"><i class="fa fa-remove"></i></span>

quick-start/src/main/ui/app/mappings/map.component.scss

@@ -12,7 +12,7 @@
   font-weight: normal;
   margin: 10px 0;
   padding: 0;
-  width: 685px;
+  width: 651px;
   position: relative;
   float: left;
 }
@@ -258,6 +258,12 @@ p.edit-uri {
   margin: 0 0 6px 2px;
 }
 
+span.uri-label {
+  font-weight: bold;
+  margin: 0 4px 0 0;
+  font-size: 15px;
+}
+
 .edit-desc {
   font-size: 16px;
   padding-left: 0;
@@ -267,7 +273,7 @@ p.edit-uri {
 }
 
 .edit-uri-val, .edit-desc-val {
-  width: 411px;
+  width: 376px;
   padding: 3px 1px;
   height: 28px;
 }
@@ -296,5 +302,5 @@ p.edit-uri {
 
 /* Widen tooltip container for long phrases */
 /deep/ .tooltip .tooltip-inner {
-  max-width: 250px;
+  max-width: 350px;
 }

quick-start/src/main/ui/app/mappings/map.component.ts

@@ -416,6 +416,20 @@ export class MapComponent implements OnInit {
     return result;
   }
 
+  /**
+   * Return string if sufficiently long, otherwise empty string
+   * @param str String to return
+   * @param num Character threshold
+   * @returns {any} string
+   */
+  getURITooltip(str, num) {
+    let result = '';
+    if (typeof str === 'string' && str.length > num) {
+      result = str;
+    }
+    return result;
+  }
+
   /**
    * Does entity property have an element range index set?
    * @param name Name of property