fixes for app preview syntax error messages not going away

Author: Kerry Chang

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

@@ -566,12 +566,9 @@ exports.handleError = (err, reject) => {
  *
  * @return { view, controller } where controller is the API exported by graph2doms
  */
-exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, reuseContainer}) => {
-    // wskflow's visualize function now returns the view as DOM and the controllers for mode buttons 
-    // container is only used in the app preview filewatch mode, where sidecar graph is updated by updating an existing wskflow container
-    // in other cases, container is undefined and wskflow generates a container itself
+exports.wskflow = (visualize, viewName, { fsm, input, name, packageName}) => {
 
-    const { view, controller } = visualize(fsm, reuseContainer);
+    const { view, controller } = visualize(fsm);
 
     const onclick = undefined
     ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,

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

@@ -66,7 +66,7 @@ module.exports = (commandTree, prequire) => {
          const formatForUser = defaultMode => ({fsm,code}) => {
 
              const {visualize} = prequire('wskflow')             
-             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, pk: undefined, reuseContainer: options.alreadyWatching})
+             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name })
              extraModes = extraModes.concat(zoomToFitButtons(controller))
 
              const entity = {
@@ -99,7 +99,15 @@ module.exports = (commandTree, prequire) => {
                  entity.type = 'actions'
              }
 
-             resolve(entity)
+             if(options.alreadyWatching && entity.type === 'custom'){  
+                // in filewatch mode (alreadyWatching), command echo is set to false
+                // calling ui.showCustom as the main repl does not do anything for custom type entity when echo is false 
+                ui.showCustom(entity);
+             }
+             else{
+                resolve(entity);
+             }             
+             
          }
          fsmPromise.then(formatForUser(defaultMode))
              .catch(err => {
@@ -158,16 +166,16 @@ module.exports = (commandTree, prequire) => {
                  debug('environment', environment)
              }
 
-             if(execOptions.alreadyWatching)
+             if(execOptions.alreadyWatching){
                 options.alreadyWatching = execOptions.alreadyWatching;
-
-             // render now
+             }             
+            
              render(input, options).then(resolve, reject)
-
+                          
              // and set up a file watcher to re-render upon change of the file
              if (!execOptions || !execOptions.alreadyWatching) {
                  chokidar.watch(expandHomeDir(input)).on('change', path => {
-                     repl.pexec(`preview ${path}`, { echo: false, alreadyWatching: true })
+                     repl.pexec(`preview ${path}`, { echo: false, alreadyWatching: true })                     
                  })
              }
          })

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

@@ -85,19 +85,9 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 	let zoom = d3.behavior.zoom()
 	    .on("zoom", redraw);
 
-	let containerElement,
+	let containerElement = $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`),
 		wskflowContainer = $('<div id="wskflowContainer"></div>'),
-		enterClickMode = false;
-
-	if(ifReuseContainer && $(`#${containerId}`).length>0){
-		containerElement = $(`#${containerId}`);
-		$(containerElement).html('').css('display', 'flex').css('flex', 1);
-		$("#wskflowSVG").remove();
-		$("#qtip").remove();
-	}
-	else{
-		containerElement = $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`);
-	}
+		enterClickMode = false;	
 
 	$(containerElement).append(wskflowContainer);	
 

tests/tests/passes/07/wskflow-tests.js

@@ -87,6 +87,21 @@ describe('app preview should actively watching an external file', function() {
       .then(verifyNodeExists('b'))
       .catch(common.oops(this)))
 
+
+    it('should update the temp file to composer.sequence("a", "c")asdfasdf', () => {
+      return new Promise((resolve, reject) => {
+        fs.writeFile(tempFileName, `composer.sequence("a", "c")asdfasdf`, (err) => {
+          if(err)
+            reject(err);
+          else
+            resolve(true);
+        });
+      });
+    });
+
+    // error message is shown as action code
+    it('should update preview with the error message', () => this.app.client.waitForVisible(`${ui.selectors.SIDECAR}.entity-is-actions`, 3000));
+
     it('should update the temp file to composer.sequence("a", "c")', () => {
       return new Promise((resolve, reject) => {
         fs.writeFile(tempFileName, `composer.sequence("a", "c")`, (err) => {
@@ -98,7 +113,8 @@ describe('app preview should actively watching an external file', function() {
       });
     });
 
-    it('should update preview', () => verifyNodeExists('a')(this.app)
+    it('should update preview', () => this.app.client.waitForVisible(ui.selectors.SIDECAR_CUSTOM_CONTENT)
+      .then(() => verifyNodeExists('a')(this.app))
       .then(verifyNodeExists('c'))
       .catch(common.oops(this)))