DSS-6552 Modifies user interface on DatasetAuthor component to support edit and read only mode for userName field. resets default TH styling. Creates global sass list variable for font-awesome font stack.

wherehows-web/app/components/dataset-author.js

@@ -1,6 +1,13 @@
 import Ember from 'ember';
 
-export default Ember.Component.extend({
+const {
+  Component,
+  set
+} = Ember;
+
+const userNameEditableClass = 'dataset-author-cell--editing';
+
+export default Component.extend({
   $ownerTable: null,
 
   didInsertElement() {
@@ -37,6 +44,40 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    /**
+     * Handles the user intention to update the owner userName, by
+     *   adding a class signifying edit to the DOM td classList.
+     *   The click event is handled on the TD which is the parent
+     *   of the target label.
+     * @param {DOMTokenList} classList passed in from the HTMLBars template
+     *   currentTarget.classList
+     */
+    willEditUserName(classList) {
+      // Add the className so the input element is visible in the DOM
+      classList.add(userNameEditableClass);
+    },
+
+    /**
+     * Mutates the owner.userName property, setting it to the value entered
+     *   in the table field
+     * @param {Object} owner the owner object rendered for this table row
+     * @param {String|void} value user entered value from the ui
+     * @param {Node} parentNode DOM node wrapping the target user input field
+     *   this is expected to be a TD node
+     */
+    editUserName(owner, {target: {value, parentNode = {}}}) {
+      const {nodeName, classList} = parentNode;
+      if (value) {
+        set(owner, 'userName', value);
+      }
+
+      // The containing TD should have the className that allows the user
+      //   to see the input element, remove this to revert to readonly mode
+      if (String(nodeName).toLowerCase() === 'td') {
+        classList.remove(userNameEditableClass);
+      }
+    },
+
     addOwner: function (data) {
       var owners = data;
       var controller = this.get("parentController");

wherehows-web/app/styles/abstracts/_variables.scss

@@ -9,6 +9,13 @@ $text-font-stack: (
   sans-serif
 ) !default;
 
+/// font family for font-awesome
+///@type list
+$font-awesome-stack: (
+  'FontAwesome',
+  sans-serif
+);
+
 /// Color Scheme
 /// @type Map
 /// @prop {String} key - Scheme name

wherehows-web/app/styles/base/_typography.scss

@@ -8,4 +8,8 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 100;
+}
+
+th {
+  font-weight: normal;
 }

wherehows-web/app/templates/components/dataset-author.hbs

@@ -31,7 +31,19 @@
   <tbody data-attribute="owner-table">
   {{#each owners as |owner|}}
     <tr>
-      <td>{{input class="userEntity" value=owner.userName}}</td>
+      <td class="dataset-author-cell"
+          onclick={{action "willEditUserName" value="currentTarget.classList"}}>
+        <label class="dataset-author-cell__name-tag">
+          {{owner.userName}}
+        </label>
+        <input class="userEntity dataset-author-cell__user-name"
+               type="text"
+               placeholder="username"
+               autofocus="autofocus"
+               title="{{owner.userName}}"
+               value="{{owner.userName}}"
+               onblur={{action "editUserName" owner}}/>
+      </td>
       <td>{{owner.name}}</td>
       <td>{{owner.idType}}</td>
       <td>{{owner.source}}</td>