improve ability for wskflow to be incorporated into other views

Fixes #920

Author: starpit

app/content/js/bottom-stripe.js

@@ -32,7 +32,7 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
     const {mode, label, flush, selected, selectionController, visibleWhen,
            fontawesome, labelBelow,   // show label below the fontawesome?
            balloon, balloonLength, data, command=()=>mode, direct,
-           defaultMode, actAsButton, radioButton=false, echo=false, noHistory=true} = opts
+           defaultMode, actAsButton, radioButton=false, echo=false, noHistory=true, replSilence=true} = opts
 
     if (visibleWhen && visibleWhen !== show) {
         // only visible when a specific mode is active!
@@ -177,7 +177,7 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
                     })
                 }
             } else {
-                repl.pexec(command(entity), { leaveBottomStripeAlonex: true, echo, noHistory })
+                repl.pexec(command(entity), { leaveBottomStripeAlonex: true, echo, noHistory, replSilence })
             }
         }
     }

app/content/js/repl.js

@@ -86,20 +86,71 @@ 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) => {
+    const addCell = (className, value, innerClassName='', parent=entityName, onclick, watch) => {
         const cell = document.createElement('span'),
               inner = document.createElement('span')
         cell.className = className
         inner.className = innerClassName
-        inner.appendChild(value.nodeName ? value : document.createTextNode(value.toString()))
+        if (value) {
+            inner.appendChild(value.nodeName ? value : document.createTextNode(value.toString()))
+        } else {
+            console.error('Invalid cell model, no value field')
+        }
         cell.appendChild(inner)
         parent.appendChild(cell)
+
+        if (onclick) {
+            cell.classList.add('clickable')
+            cell.onclick = onclick
+        }
+
+        if (watch) {
+            const spinner = document.createElement('i')
+            spinner.className = 'fas fa-spinner fa-pulse small-left-pad deemphasize'
+            cell.appendChild(spinner)
+
+            const interval = setInterval(() => {
+                try {
+                    Promise.resolve(watch())
+                        .then(({ value, done=false, css }) => {
+
+                            // update the styling
+                            if (css) {
+                                inner.className = css
+                            }
+
+                            // update the text
+                            if (value) {
+                                inner.innerText = ''
+                                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)
+                            }
+                        })
+
+                } catch (err) {
+                    console.error('Error watching value', err)
+                    clearInterval(interval)
+
+                    const toRemove = cell.querySelector('.fa-spinner')
+                    cell.removeChild(toRemove)
+                }
+
+            }, 2000)
+        }
+
         return cell
     }
 
     // add any attributes that should appear *before* the name column
     if (entity.beforeAttributes) {
-        entity.beforeAttributes.forEach(({value, css='', outerCSS=''}) => addCell(outerCSS, value, css))
+        entity.beforeAttributes.forEach(({value, css='', outerCSS='', onclick}) => addCell(outerCSS, value, css, undefined, onclick))
     }
 
     // now add the clickable name
@@ -117,7 +168,7 @@ const formatOneListResult = options => (entity, idx, A) => {
     entityName.appendChild(entityNameGroup)
 
     // name of the entity
-    let name = entity.name
+    let name = entity.prettyName || entity.name
 
     // click handler for the list result
     if (typeof name === 'string') {
@@ -144,7 +195,7 @@ const formatOneListResult = options => (entity, idx, A) => {
     // case-specific cells
     //
     if (entity.attributes) {
-        entity.attributes.forEach(({value, css='', outerCSS=''}) => addCell(outerCSS, value, css))
+        entity.attributes.forEach(({value, css='', outerCSS='', watch, onclick}) => addCell(outerCSS, value, css, undefined, onclick, watch))
 
     } else if (entity.type === 'actions') {
         // action-specific cells
@@ -281,6 +332,8 @@ const printResults = (block, nextBlock, resultDom, echo=true, execOptions, parse
             if (echo) {
                 ui.showCustom(response, execOptions)
                 ui.ok(resultDom.parentNode)
+            } else if (execOptions && execOptions.replSilence) {
+                ui.showCustom(response, execOptions)
             }
 
         } else if (response.type === 'activations') {
@@ -345,7 +398,7 @@ self.init = (prefs={}) => {
     }
 
     // focus the current prompt no matter where the user clicks
-    document.body.onclick = evt => {
+    document.querySelector('#main-repl').onclick = evt => {
         if (!window.getSelection().toString()) {
             // if there is no selected text, then focus
             // this works, because the HTML (? or chrome?) section model behavior is to clear the selection upon click
@@ -607,7 +660,7 @@ self.exec = (commandUntrimmed, execOptions) => {
     debug('exec', commandUntrimmed)
 
     const echo = !execOptions || execOptions.echo !== false
-    const nested = execOptions && execOptions.noHistory
+    const nested = execOptions && execOptions.noHistory && !execOptions.replSilence
     if (nested) execOptions.nested = nested
 
     const block = execOptions && execOptions.block || ui.getCurrentBlock(),

app/content/js/ui.js

@@ -962,8 +962,8 @@ const ui = (function() {
             sidecar.entity = entity
             sidecar.entity.type = sidecar.entity.viewName
 
-            self.addNameToSidecarHeader(sidecar, entity.name, entity.packageName, undefined,
-                                        entity.prettyType || entity.type, undefined, entity)
+            self.addNameToSidecarHeader(sidecar, entity.prettyName || entity.name, entity.packageName, undefined,
+                                        entity.prettyType || entity.type, entity.subtext, entity)
 
             // render badges
             if (!entity.activationId) {

app/plugins/modules/composer/lib/composer.js

@@ -562,17 +562,21 @@ exports.handleError = (err, reject) => {
 }
 
 /**
- * Render the wskflow visualization for the given fsm
+ * Render the wskflow visualization for the given fsm.
+ *
+ * `container` is optional; wskflow will render in the default way in
+ * the sidecar if we don't pass a container in
  *
  * @return { view, controller } where controller is the API exported by graph2doms
  */
-exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, viewOptions }) => {
-    
-    const { view, controller } = visualize(fsm, undefined, undefined, undefined, undefined, viewOptions);
+exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, viewOptions, container }) => {
+    const { view, controller } = visualize(fsm, container, undefined, undefined, undefined, viewOptions);
 
-    const onclick = undefined
-    ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,
-                              'This is a preview of your app, it is not yet deployed')
+    if (!viewOptions || !viewOptions.noHeader) {
+        const onclick = undefined
+        ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,
+                                  'This is a preview of your app, it is not yet deployed')
+    }
 
     return { view, controller }
 }

app/plugins/modules/composer/lib/viz.js

@@ -38,7 +38,7 @@ const viewName = 'preview',               // for back button and sidecar header
  *
  */
 module.exports = (commandTree, prequire) => {
-    const render = (input, options) => new Promise((resolve, reject) => {
+    const render = (input, options, execOptions) => new Promise((resolve, reject) => {
          debug('options', options)         
          let fsmPromise, type, extraModes=[]
 
@@ -64,16 +64,21 @@ module.exports = (commandTree, prequire) => {
 
          // create a fake action/entity record
          const formatForUser = defaultMode => ({fsm,code}) => {
-
              // pass through cli options for the wskflow renderer
              const viewOptions = { }
+
              if (options.functions) {
                  // note we must be careful not to pass false; only undefined
                  viewOptions.renderFunctionsInView = options.functions // render all inline functions directly in the view?
              }
 
+             if (execOptions.container) {
+                 // if we're rendering this inside of a given viewport, then don't modify the sidecar header
+                 viewOptions.noHeader = true
+             }
+
              const {visualize} = prequire('wskflow')
-             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, viewOptions })
+             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, viewOptions, container: execOptions.container })
              extraModes = extraModes.concat(zoomToFitButtons(controller))
 
              const entity = {
@@ -177,7 +182,7 @@ module.exports = (commandTree, prequire) => {
                 options.alreadyWatching = execOptions.alreadyWatching;
              }             
 
-             render(input, options).then(resolve, reject)
+             render(input, options, execOptions).then(resolve, reject)
 
              // and set up a file watcher to re-render upon change of the file
              if (!execOptions || !execOptions.alreadyWatching) {

app/plugins/modules/wskflow/lib/fsm2graph.js

@@ -604,7 +604,7 @@ function fsm2graph(ir, containerElement, acts, options){
                     // warn user about not-deployed actions (but only if !activations, i.e. not for session flow)
                     if (notDeployed.length > 0 && !activations) {
                         const container = document.querySelector('#sidecar .sidecar-header .sidecar-header-secondary-content .custom-header-content')
-                        if (container) {
+                        if (container && !options.noHeader) {
                             const css = {
                                 message: 'wskflow-undeployed-action-warning',
                                 text: 'wskflow-undeployed-action-warning-text',

app/plugins/modules/wskflow/lib/graph2doms.js

@@ -81,7 +81,7 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 	let zoom = d3.behavior.zoom()
 	    .on("zoom", redraw);
 
-	let containerElement = $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`),
+	let containerElement = ifReuseContainer || $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`),
 		wskflowContainer = $('<div id="wskflowContainer"></div>'),
 		enterClickMode = false;