refine repl watcher support

add onclick handler for badges
add some usefu generic css classes

Fixes #931
Fixes #932

Author: starpit

app/content/css/themes/ibm.css

@@ -65,6 +65,19 @@ body a:hover:not(.plain-anchor) {
     color: var(--color-support-02);
 }
 
+sidecar .sidecar-header badge.green-background {
+    background: var(--color-support-02);
+    color: var(--color-ui-01);
+}
+sidecar .sidecar-header badge.yellow-background {
+    background: var(--color-support-03);
+    color: var(--color-text-01);
+}
+sidecar .sidecar-header badge.red-background {
+    background: var(--color-support-01);
+    color: var(--color-ui-01);
+}
+
 .repl-block.valid-response .oops, sidecar.rule-enabled-false .sidecar-header-icon, .repl-block.error .oops, .clickable.oops, .oops .oops-text-on-oops, .red-text {
     color: var(--color-support-01);
 }

app/content/css/ui.css

@@ -735,9 +735,14 @@ sidecar .sidecar-header .badges {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
+    margin: 1rem 0 0 1rem;
 }
 sidecar .sidecar-header badge {
     /* badges next to the entity name */
+    transition: all 150ms ease-in-out;
+}
+sidecar .sidecar-header badge.clickable:hover {
+    filter: brightness(1.1);
 }
 sidecar .sidecar-header-name-content {
     overflow: hidden;
@@ -952,11 +957,34 @@ sidecar.no-limits-data .activation-estimated-cost-container {
 }
 
 /* generic */
+.flex-layout {
+    display: flex;
+    align-items: center;
+}
 .normal-text {
     font-weight: 400;
     opacity: 1;
     font-size: 1em;
 }
+.even-smaller-text {
+    font-size: 0.75em;
+}
+.smaller-text {
+    font-size: 0.875em;
+}
+.sub-text {
+    color: var(--color-text-02);
+}
+.lighter-text {
+    font-weight: 300;
+}
+.even-lighter-text {
+    color: var(--color-text-02);
+    font-weight: 300;
+}
+.nowrap {
+    white-space: nowrap;
+}
 .deemphasize {
     font-weight: 300;
     font-size: 0.75em;
@@ -969,6 +997,10 @@ sidecar.no-limits-data .activation-estimated-cost-container {
 .sans-serif {
     font-family: var(--font-sans-serif);
 }
+.min-width-8em {
+    min-width: 8em !important;
+    display: block;
+}
 .min-width-10em {
     min-width: 10em !important;
     display: block;
@@ -985,6 +1017,9 @@ sidecar.no-limits-data .activation-estimated-cost-container {
     font-size: inherit;
     font-weight: inherit;
 }
+.tiny-top-pad {
+    margin-top: 0.125em;
+}
 .small-top-pad {
     margin-top: 1ex;
 }

app/content/js/repl.js

@@ -86,11 +86,18 @@ const formatOneListResult = options => (entity, idx, A) => {
     prefix.appendChild(prettyType)*/
 
     /** add a cell to the current row of the list view we] are generating. "entityName" is the current row */
-    const addCell = (className, value, innerClassName='', parent=entityName, onclick, watch) => {
+    const addCell = (className, value, innerClassName='', parent=entityName, onclick, watch, key) => {
         const cell = document.createElement('span'),
               inner = document.createElement('span')
+
         cell.className = className
         inner.className = innerClassName
+        inner.classList.add('cell-inner')
+
+        if (key) {
+            inner.setAttribute('data-key', key)
+        }
+
         if (value) {
             Promise.resolve(value)
                 .then(value => inner.appendChild(value.nodeName ? value : document.createTextNode(value.toString())))
@@ -116,7 +123,14 @@ const formatOneListResult = options => (entity, idx, A) => {
             const interval = setInterval(() => {
                 try {
                     Promise.resolve(watch())
-                        .then(({ value, done=false, css }) => {
+                        .then(({ value, done=false, css, others=[] }) => {
+                            // are we done polling for updates?
+                            if (!value || done) {
+                                clearInterval(interval)
+
+                                const toRemove = cell.querySelector('.fa-spinner')
+                                cell.removeChild(toRemove)
+                            }
 
                             // update the styling
                             if (css) {
@@ -129,13 +143,14 @@ const formatOneListResult = options => (entity, idx, A) => {
                                 inner.appendChild(value.nodeName ? value : document.createTextNode(value.toString()))
                             }
 
-                            // are we done polling for updates?
-                            if (!value || done) {
-                                clearInterval(interval)
-
-                                const toRemove = cell.querySelector('.fa-spinner')
-                                cell.removeChild(toRemove)
-                            }
+                            // any other cells to update?
+                            others.forEach(({key, value}) => {
+                                const otherInner = parent.querySelector(`.cell-inner[data-key="${key}"]`)
+                                if (otherInner) {
+                                    otherInner.innerText = ''
+                                    otherInner.appendChild(value.nodeName ? value : document.createTextNode(value.toString()))
+                                }
+                            })
                         })
 
                 } catch (err) {
@@ -154,7 +169,7 @@ const formatOneListResult = options => (entity, idx, A) => {
 
     // add any attributes that should appear *before* the name column
     if (entity.beforeAttributes) {
-        entity.beforeAttributes.forEach(({value, css='', outerCSS='', onclick}) => addCell(outerCSS, value, css, undefined, onclick))
+        entity.beforeAttributes.forEach(({key, value, css='', outerCSS='', onclick}) => addCell(outerCSS, value, css, undefined, onclick, undefined, key))
     }
 
     // now add the clickable name
@@ -199,7 +214,7 @@ const formatOneListResult = options => (entity, idx, A) => {
     // case-specific cells
     //
     if (entity.attributes) {
-        entity.attributes.forEach(({value, css='', outerCSS='', watch, onclick}) => addCell(outerCSS, value, css, undefined, onclick, watch))
+        entity.attributes.forEach(({key, value, css='', outerCSS='', watch, onclick}) => addCell(outerCSS, value, css, undefined, onclick, watch, key))
 
     } else if (entity.type === 'actions') {
         // action-specific cells
@@ -1146,6 +1161,18 @@ self.doCancel = () => {
     ui.installBlock(block.parentNode, block, nextBlock)()
 }
 
+/**
+ * Add quotes if the argument needs it; compare to encodeURIComponent
+ *
+ */
+self.encodeComponent = (component, quote='"') => {
+    if (component.match(patterns.whitespace)) {
+        return `${quote}${component}${quote}`
+    } else {
+        return component
+    }
+}
+
 module.exports = self
 
 debug('loading done')

app/content/js/ui.js

@@ -1125,17 +1125,28 @@ const ui = (function() {
      * Sidecar badges
      *
      */
-    const addBadge = badgeText => {
+    const addBadge = (badgeText, { css, onclick }={}) => {
         const sidecar = document.querySelector('#sidecar'),
               header = sidecar.querySelector('.sidecar-header'),
               badges = header.querySelector('.badges')
 
         const badge = document.createElement('badge')
+
         if (typeof badgeText === 'string') {
             badge.innerText = badgeText
         } else {
             badge.appendChild(badgeText)
         }
+
+        if (css) {
+            badge.classList.add(css)
+        }
+
+        if (onclick) {
+            badge.classList.add('clickable')
+            badge.onclick = onclick
+        }
+
         badges.appendChild(badge)
         return badge
     }

app/plugins/ui/commands/openwhisk-usage.js

@@ -101,6 +101,7 @@ const skipAndLimit = [{ name: '--limit', alias: '-l', numeric: true, docs: 'show
  */
 module.exports = {
     skipAndLimit,
+    params,
 
     // this is the ascii art for OpenWhisk, with backslashes escaped
     wsk: { //header: `        ____      ___                   _    _ _     _     _\r\n       /\\   \\    / _ \\ _ __   ___ _ __ | |  | | |__ (_)___| | __\r\n  /\\  /__\\   \\  | | | | '_ \\ / _ \\ '_ \\| |  | | '_ \\| / __| |/ /\r\n /  \\____ \\  /  | |_| | |_) |  __/ | | | |/\\| | | | | \\__ \\   <\r\n \\   \\  /  \\/    \\___/| .__/ \\___|_| |_|__/\\__|_| |_|_|___/_|\\_\\\r\n  \\___\\/ tm           |_|`,