Merged UI portions of workbench into tutorial (#173)

Workbench/Tutorial UI:
  * Made Workbench and Tutorial share a single UI/sidebar component
    Data can be loaded either from workbench or a .cwct file
  * Greyed out completed steps
  * Sidebar icon is now numbered list to coorispond to the content
    that gets displayed

  Tutorial Features/Operation:
  * Tutorial now allows per-step validation
  * Tutorial now supports loading code into editor for each step
  * Tutoiral validation runs in dedicated webview instead of preview
  * setTutorial() now automatically starts the tuorial when async
    operations are complete instead of requiring separate all to
    startTutorial()

  Logging:
  * Messenger displays a warning instead of an error for unknown messages
    because tutorial validation posts messages to the main CwC window, which
    messenger does not recognize

  Testing:
  * Added tests for Workbench/Tutorial UI
  * Added builder.getHelper() function to aid in unit testing
  * Exported various functions to aid in unit testing

Author: adamcarheden

AUTHORS

@@ -9,4 +9,5 @@
 
 Google Inc.
 Shenzhen Maker Works Co, Ltd.
+cwist, Inc. (d/b/a Workbench)
 and other contributors

build/cwc/tutorials.js

@@ -63,10 +63,15 @@ let replacePlaceholders = function(obj, pwd) {
   if (obj === null || typeof obj !== 'object') {
     return;
   }
+  let templateRE = /^___TEMPLATE___:(binary:)?/;
   for (let k in obj) {
-    if (k.match(/^___TEMPLATE___:/)) {
-      obj[k.replace('___TEMPLATE___:', '')] =
+    if (!Object.prototype.hasOwnProperty.call(obj, k)) continue;
+    const matches = k.match(templateRE);
+    if (matches) {
+      const data = matches[1] ?
+        fs.readFileSync(pwd+'/'+obj[k]).toString('base64') :
         fs.readFileSync(pwd+'/'+obj[k], 'utf8');
+      obj[k.replace(matches[0], '')] = data;
       delete obj[k];
     } else {
       replacePlaceholders(obj[k], pwd);

src/addon/workbench/workbench.js

@@ -20,11 +20,11 @@
 goog.provide('cwc.addon.Workbench');
 
 goog.require('cwc.addon.WorkbenchLoader');
-goog.require('cwc.addon.WorkbenchProject');
 goog.require('cwc.mode.Type');
 goog.require('cwc.soy.SelectScreenTemplate');
 goog.require('cwc.ui.SelectScreen.Events');
 goog.require('cwc.utils.Database');
+goog.require('cwc.utils.I18n');
 goog.require('cwc.utils.Logger');
 
 
@@ -154,6 +154,9 @@ cwc.addon.Workbench = function(helper) {
 
   /** @private {!cwc.utils.Logger} */
   this.log_ = new cwc.utils.Logger(this.name);
+
+  /** @private {!string} */
+  this.projectDetailLinkBase_ = 'https://edu.workbencheducation.com/cwists/preview/';
 };
 
 
@@ -210,7 +213,6 @@ cwc.addon.Workbench.prototype.filterProjectsByTag_ = function(
   ));
 };
 
-
 /**
  * @private
  */
@@ -223,7 +225,10 @@ cwc.addon.Workbench.prototype.showRelevantProjects_ = async function() {
     if (!tabNode) return;
 
     const mode = tagMap[tag].mode;
-    const matchingProjects = this.filterProjectsByTag_(allProjects, tag);
+    const userLanguage = this.helper.getUserLanguage();
+    const userLanguageName = cwc.utils.I18n.getEnglishName()[userLanguage];
+    let matchingProjects = this.filterProjectsByTag_(allProjects.filter(
+      (project) => project.language == userLanguageName), tag);
 
     matchingProjects.forEach((project) => {
       const card = goog.soy.renderAsElement(
@@ -236,15 +241,35 @@ cwc.addon.Workbench.prototype.showRelevantProjects_ = async function() {
         });
 
       card.addEventListener('click', () => {
+        let tutorialInstance = this.helper.getInstance('tutorial');
         this.helper.getInstance('mode')
           .loadMode(mode)
           .then(() => {
-            const projectUI = new cwc.addon.WorkbenchProject(
-              this.helper,
-              project,
-              this.imagesDb_,
-            );
-            projectUI.decorate();
+            // Map Workbench project data structure into CwC Tutorial structure
+            let tutorialSpec = {
+              'url': this.projectDetailLinkBase_ + project.id,
+              'description': {
+                'text': project['description'],
+                'mime_type': 'text/html',
+              },
+              'steps': project['steps'].sort((a, b) => {
+                return a.order - b.order;
+              }).map((step) => {
+                return {
+                  'title': step['title'],
+                  'description': {
+                    'text': step['description'],
+                    'mime_type': 'text/html',
+                  },
+                  'images': step['images'],
+                  'videos': step['videos'],
+                };
+              }),
+            };
+            return tutorialInstance.setTutorial(tutorialSpec, this.imagesDb_);
+          })
+          .then(() => {
+            tutorialInstance.startTutorial();
           });
       });
 
@@ -254,7 +279,6 @@ cwc.addon.Workbench.prototype.showRelevantProjects_ = async function() {
   });
 };
 
-
 /**
  * @private
  */