Replace deprecated react-tools and jstransform with babel

[kilodalton]

Replace deprecated react-tools and jstransform with babel Babel: https://babeljs.io

Facebook re: deprecation: From June 12, 2015: "...deprecation of react-tools and JSTransform...We won't ship a new version for v0.14" https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

FB recommends migrating to babel (which we already use as a plugin for Sublime)

react-tools is a "very thin wrapper around JSTransform"

react-tools is used in the following places in our repo: -- jest/preprocessor.js -- package.json -- reactify.js

jstransform is only explicitly in: -- package.json

The babel package might(?) also be able to replace other packages like es5-shim and es6-promise (for ES6 promises support the polyfill must be used: https://babeljs.io/docs/usage/polyfill).

Useful links: https://github.com/addyosmani/es6-tools https://babeljs.io https://babeljs.io/docs/learn-es2015/ https://github.com/babel/grunt-babel

[kilodalton]

@forresttanaka If it is feasible, it would make a lot of sense to include this upgrade with the upgrade to React 0.14 in #288

[forresttanaka]

This is probably the first merge of babelify from ENCODE: https://github.com/ENCODE-DCC/encoded/commit/3cbbd5e4b7371d0ba5aea74e2e9d0a376ce50690

[jimmyzhen]

After sorting out some of the browserify configurations for babelify (by referencing some of the related changes made in ENCODE), I am now able to run bin/grunt to build the files and bring up the site locally.

However, I have noticed 2 issues so far. One is the following message upon running the grunt tasks:

Running "browserify:browser" (browserify) task
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jzhen/Projects/ClinGen/clincoded/src/clincoded/static/components/family_curation.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jzhen/Projects/ClinGen/clincoded/src/clincoded/static/components/experimental_curation.js" as it exceeds the max of "100KB".
Wrote ./src/clincoded/static/build/bundle.js

Running "browserify:server" (browserify) task
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jzhen/Projects/ClinGen/clincoded/src/clincoded/static/components/family_curation.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jzhen/Projects/ClinGen/clincoded/src/clincoded/static/components/experimental_curation.js" as it exceeds the max of "100KB".
Wrote ./src/clincoded/static/build/renderer.js

The second issue (technically a bug) is that the site does not automatically route the user to the Dashboard page upon successful Persona authentication. In Chrome on Mac, if I refresh the page, then I can access the Dashboard page. In IE11/Win7, reloading the page does not give the user access to the Dashboard page at all.

[kilodalton]

For the first issue you need to explore the compact option for babel/babelify transforms via pipe or options.

[jimmyzhen]

Hi @selinad, @wrightmw, @kilodalton, @kgliu0101, @mrmin123,

I have spun up an instance for this ticket: https://524-jz-babel-conversion-d75a705-jzhen.demo.clinicalgenome.org

Because switching to Babel from react-tools/JSTransform essentially impact all front-end code of the gene curation app, I would greatly appreciate if you can help testing all areas of the site and report any broken functionality due to this conversion. Having the Chrome DevTools console opened during testing will help to spot any unusual warnings/errors.

Thank you!

[selinad]

Hi @jimmyzhen Looking good for the most part. Just ran into an issue (more testing to go).

Showing View and Edit versions of same Group - the Edit version is missing the filled in terms that show on the View in the Method section (other sections look ok on Edit page):

URLs:

edit: https://524-jz-babel-conversion-d75a705-jzhen.demo.clinicalgenome.org/group-curation/?editsc&gdm=83d0ca0c-d991-4a9f-899c-18e252bc0f08&evidence=cc16a426-8400-4d73-af93-6ed8a5604952&group=388d52b5-1b22-4763-bb2e-d8d5c27c4692

view: https://524-jz-babel-conversion-d75a705-jzhen.demo.clinicalgenome.org/groups/388d52b5-1b22-4763-bb2e-d8d5c27c4692/

[selinad]

Repeated this problem for a Family (that was part of the group)

[jimmyzhen]

Hi @selinad,

I can reproduce the described problem on the curation-test site: https://curation-test.clinicalgenome.org/group-curation/?editsc&gdm=ef9a6fa1-16d9-11e5-9918-60f81dc5b05a&evidence=06492f29-568d-4257-b6ec-799203a3593d&group=50f09e1d-5f00-4a9f-8928-57cc5975b341 https://curation-test.clinicalgenome.org/family-curation/?editsc&gdm=ef9a6fa1-16d9-11e5-9918-60f81dc5b05a&evidence=06492f29-568d-4257-b6ec-799203a3593d&family=a805015a-5cb6-472e-b0ba-357563e1bf02

Would it make sense to have a separate ticket for this bug?

cc @kilodalton

[selinad]

whu woh. Gosh, I thought I checked that.

I'll make a new ticket.

oops - I see you had cc'd @kilodalton about a new ticket - will wait for answer

[kilodalton]

@jimmyzhen @selinad Any bug that can be reproduced in previous code (e.g. deployed to curation-test or a instance from the current dev branch [if the current branch has not been merged]) should be addressed in a separate ticket.

The developer should determine if the bug is a pre-existing bug and if so, create a new ticket and outline the steps to reproduce the bug (including any info discovered about likely causes and solutions) in a new ticket.

[jimmyzhen]

I have created a new ticket #645 for the Group/Family - Method edit form bug reported by @selinad.

[selinad]

Hi @jimmyzhen - I've done a comprehensive review and everything seems to be behaving well (excepting pre-existing bugs) - nice work!

[jimmyzhen]

Hi @selinad, @wrightmw,

Thank you for spending the time to test the site thoroughly!

[selinad]

@jimmyzhen thank you for all of your hard work! Looks great!

[selinad]

Upon thorough review, all is behaving well - @wrightmw and I thought we may have noticed one thing - he is investigating further. We have not been able to repeat, so it may be *ight craziness =:-0

[wrightmw]

I cannot repeat this now, so I think it must have been *ight craziness. All looks good to me.

[kilodalton]

Included in last release (R6). Nice job and thanks for your hard work.