[OS-951, OS-971, OS-958] PoC Make Art chromium selenium web driver

.editorconfig

@@ -3,9 +3,9 @@ root = true
 
 # Matches multiple files with brace expansion notation
 # Set default charset
-[*.{js,json}]
+[*.{js,json, styl, jade}]
 charset = utf-8
 indent_style = space
 indent_size = 4
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true

.gitignore

@@ -1,12 +1,15 @@
 www/*.html
-www/*/*.html
+www/**/*.html
 www/css/*.css
 www/js/index.js
+www/assets/challenges/descriptors
+www/components/**/**
 .tmp
 node_modules
 npm-debug.log
 **.DS_Store
 **.sublime-workspace
 *.pyc
 *.swp
-dist
+dist
+bower_components

.jshintrc

@@ -1,6 +1,5 @@
-{
+{ "esversion": 9,
   "browser": true,
-  "esnext": true,
   "globals": { "angular": true, 
   		"describe": true,
         "xdescribe": true,

Jenkinsfile

@@ -0,0 +1,55 @@
+#!groovy
+node {
+    stage('check environment') {
+        if (env.BRANCH_NAME=="master" || env.BRANCH_NAME=="jenkins") {
+            env.NODE_ENV = "staging"
+        } else if (env.BRANCH_NAME=="prod") {
+            env.NODE_ENV = "production"
+        }
+
+        if (env.NODE_ENV == "staging") {
+            load "/var/lib/jenkins/userContent/make-art-config/staging.env"
+        } else if (env.NODE_ENV == "production") {
+            load "/var/lib/jenkins/userContent/make-art-config/prod.env"
+        }
+    }
+
+    stage('checkout') {
+        checkout scm
+    }
+
+    stage('clean') {
+        sh "rm -rf node_modules"
+    }
+
+    stage('install dependencies') {
+        sh "npm install --ignore-scripts"
+        sh "bower i"
+    }
+
+    stage('build') {
+        sh "gulp default"
+    }
+
+    stage('compress') {
+        sh "gulp compress"
+    }
+
+    stage('deploy') {
+        if (env.BRANCH_NAME == "jenkins") {
+            echo 'deploy skipped'
+        } else if (env.NODE_ENV=="staging") {
+            deploy_staging()
+        } else if (env.NODE_ENV=="production") {
+            deploy_prod()
+        }
+    }
+}
+
+def deploy_staging() {
+    sh 'aws s3 sync ./www s3://art-staging.kano.me --region eu-west-1 --cache-control "max-age=600"'
+}
+
+def deploy_prod() {
+    sh 'aws s3 sync ./www s3://make-art-site-prod --region us-west-1 --cache-control "max-age=600"'
+}

README.md

@@ -11,21 +11,63 @@ You can try the app [here »](http://art.kano.me/)
     git clone [email protected]:KanoComputing/make-art.git
     cd make-art
     npm install
+    bower install
+        - if you are linux you may use `sudo npm install bower`
 
 ## Build
 
 Build the app before running it
 
-    npm run build
+- `npm run build`
+    - run again the command everytime you update the html structure
 
 ## Run
 
-    npm start
+- `npm start`
 
 Open your browser at [http://localhost:3000](http://localhost:3000)
 
 ## Develop
 
 Run the watch script when developing
 
-    npm run watch
+- `npm run watch`
+
+## Offline
+
+To build in the offline mode for Kano OS add these ENV vars:
+
+    OFFLINE=true NODE_ENV=production gulp
+
+Since Node JS isn't included by default on the kit and the offline backend is
+[implemented in Python](/kano_draw/server.py), the easiest way to
+debug on the kit is to build the static assets on your machine and rsync them
+over to the kit as follows:
+
+    rsync -av make-art "user@ip:~/make-art"
+
+On Kano OS, go to the `bin/` directory and launch the `kano-draw` script
+which will start the server and open a
+[python-webkit](https://wiki.python.org/moin/PythonWebKit) browser with Make
+Art.
+
+    user@kano-os ~ $ cd ~/make-art/bin
+    user@kano-os ~ $ ./kano-draw
+
+# Automatic Test
+
+Tool used: **Selenium Web driver**
+
+Follow this [Setting up your own test automation environment](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
+
+- selenium-webdriver should be installed when you run `npm install ` inside your local repo
+- install in the kano-kit `sudo apt-get install chromium-chromedriver` - [reference](https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver)
+- Add the chromedriver driver's location to your system PATH variable. 
+    - Open your .bash_profile (or .bashrc) file
+
+    ```
+    #Add WebDriver browser drivers to PATH
+
+    export PATH=$PATH:/Users/bob
+
+    ```

TRANSLATION.md

@@ -0,0 +1,52 @@
+# Translation
+
+Translation files are found in the following directories:
+- `lib/challenges/locales`: translation of the challenges
+- `locales`: translation of the views
+- `content/docs.json`: translation of the documentation
+
+## i18n not released yet
+
+Kano OS is not fully i18n-aware and locales are not installed for end users, yet. You can translate this application, but as of now, users will still see the default English message strings.
+
+## Build
+
+Translations are part of the normal build process: when you type `npm run build`, the translated challenges and docs will be copied in the `www` directory; and the view templates will be localized by mapping the resources _for each language_.  So it means that all resources (views, challenges and docs translations) are prepared in advance.
+
+## Runtime
+
+At runtime, the proper translation will be picked based on the browser language. 
+
+## How to add a new translation
+
+You need to add the new language in 4 places:
+
+1. Create `lib/challenges/locales/<locale>` and copy the whole `worlds` directory and `index.json` 
+   These are the translations of the challenges, the main content of Make-Art.
+
+2. Create new .po files for each locale - one from the `messages.pot` and one
+   from the `messages-doc.pot`. These are the translations of the views and
+   documentation.
+
+3. After translation run the `po/lang-po-to-json` and `po/lang-docs-po-to-json`
+   to create the necessary json files from the po files.
+
+4. Add your language to `SUPPORTED_LOCALES` array in `lib/i18n.js`
+
+## How to make sure your code is i18n-aware
+
+For the challenges, if you create a new challenge in English, there is nothing special to do, it can be translated to other languages by copying the .json file to the other locales directories.
+
+For the views (jade templates), you need to enclose all your strings in `${{` and `}}$` as this is the convention used by gulp-html-i18n plugin to find and replace the messages in the view templates.  Then, you need to add the new string to the corresponding .json file in the (top-level) `locales` directory.  Let's say you want to add a string "Happy Birthday" to the challenge.jade template; you would write it as follows in the challenge.jade: `${{ challenge.hapy_birthday }}$`.  Then, you would add an entry to the challenge.json map, like:
+```
+{
+    ...
+    "happy_birthday": "Happy Birthday"
+}
+```
+
+Finally, for the documentation, if you add / modify text in `content/docs.json` the translations will need to be added for other languages, in the same file.
+
+## To-Do
+
+Tool to make it easier to add new languages.

bin/kano-draw

@@ -1,39 +1,93 @@
-#!/usr/bin/kano-splash /usr/share/kano-draw/media/splash.png /usr/bin/env python
+#!/usr/bin/kano-splash loader-animation /usr/bin/env python
 
 # kano-draw
 #
-# Copyright (C) 2014 Kano Computing Ltd.
-# License: http://www.gnu.org/licenses/gpl-2.0.txt GNU General Public License v2
+# Copyright (C) 2014-2018 Kano Computing Ltd.
+# License: http://www.gnu.org/licenses/gpl-2.0.txt GNU GPL v2
 #
 # The Draw App implementation
 #
 
+
 # Before loading anything else, declare a profiling timepoint
-from kano.profiling import declare_timepoint
-declare_timepoint("load",True)
+# from kano.profiling import declare_timepoint
+# declare_timepoint("load", True)
 
 import os
 import sys
 import multiprocessing
 import signal
+import time
+import atexit
 
 if __name__ == '__main__' and __package__ is None:
     DIR_PATH = os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))
 
     if not DIR_PATH.startswith('/usr'):
-        sys.path.insert(1, DIR_PATH)
+        sys.path.insert(0, DIR_PATH)
 
 from kano_profile.tracker import Tracker
 kanotracker = Tracker()
 
+from kano.utils import run_cmd
+from kano.logging import logger
 from kano_draw.video import play_intro
-from kano_draw.draw import Draw
+from kano_draw.draw import start_draw
 import kano_draw.server
+import kano_draw
+
+SERVER_PROC = None
+UI_PROC = None
+
+
+def _kill_subprocess(proc_handle):
+    if proc_handle is not None and proc_handle.is_alive():
+        logger.warn('_kill_subprocess() terminating app')
+        proc_handle.terminate()
+        os.kill(proc_handle.pid, signal.SIGKILL)
+
+
+def _kill_lingering_processes():
+    """ Look for processes still attached to port 8000 whose name starts with
+    'dbus-' and kill them
+    """
+    pid_no, dummy, dummy2 = run_cmd(
+        "lsof -i :8000 | grep 'dbus-' | awk '{ print $2 }'"
+    )
+    if pid_no:
+        pids = pid_no.splitlines()
+        for pid in pids:
+            try:
+                logger.warn('_kill_lingering_processes() killing pid:{}'.format(pid))
+                os.kill(int(pid), signal.SIGTERM)
+            except ValueError:
+                pass
+
+
+def _at_exit_hook():
+    """ Ensure that the two subprocesses are killed before this process exits
+    """
+
+    logger.warn('_at_exit_hook() cleanup process space')
+
+    _kill_subprocess(UI_PROC)
 
+    # Give the server subprocess 10 secs to die
+    SERVER_PROC.join(5)
 
+    # Now kill it anyway
+    _kill_subprocess(SERVER_PROC)
+
+    # Cleanup the lingering processes (usually produced by omxplayer)
+    _kill_lingering_processes()
+
+
+# At this point cleaning up just exits. This is triggered once the server
+# (which is a child process) notifies us to exit
 def cleanup(signum, frame):
     sys.exit(0)
 
+atexit.register(_at_exit_hook)
 signal.signal(signal.SIGINT, cleanup)
 
 play_intro()
@@ -44,12 +98,33 @@ SERVER_PROC = multiprocessing.Process(target=kano_draw.server.start,
                                       kwargs={
                                           'parent_pid': APP_PID
                                       })
-SERVER_PROC.daemon = True
 SERVER_PROC.start()
 
 # Init the web app
+kwargs = {}
 if len(sys.argv) > 1:
-    DRAW = Draw(load_path=sys.argv[1])
-else:
-    DRAW = Draw()
-DRAW.run()
+    arg = sys.argv[1]
+
+    if arg == 'make':
+        kwargs['make'] = True
+    elif arg == 'play':
+        kwargs['play'] = True
+    else:
+        kwargs['load_path'] = arg
+
+UI_PROC = multiprocessing.Process(target=start_draw, kwargs=kwargs)
+
+UI_PROC.daemon = True
+UI_PROC.start()
+
+# This process is really a factory/watchdog process. It launches the UI and
+# server processes as children and makes sure to terminate both once they have
+# one of them has been terminated
+try:
+    while UI_PROC.is_alive() and SERVER_PROC.is_alive():
+        time.sleep(3)
+    sys.exit(0)
+except Exception as exc:
+    # the SIGINT handler has executed here
+    logger.error('Error while in the main waiting loop: [{}]'.format(exc))
+    sys.exit(0)

bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "make-art",
+  "description": "App to learn programming using a basic CoffeeScript drawing API",
+  "main": "lib/index.js",
+  "authors": [
+    "Kano Computing"
+  ],
+  "license": "MIT2",
+  "homepage": "http://art.kano.me/challenges",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "web-components": "[email protected]:KanoComputing/web-components",
+    "iron-image": "PolymerElements/iron-image#^1.2.5"
+  },
+  "resolutions": {
+    "iron-image": "^2.1.2",
+    "iron-flex-layout": "^2.0.0",
+    "polymer": "1.9 - 2",
+    "webcomponentsjs": "^v1.0.19"
+  }
+}