This reduces noise in test output
Test plan:
- All tests pass
flag=none
Change-Id: I15a9552915a75b75a1de32be40dfd3d38abd4439
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/277575
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ahmad Amireh <ahmad@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Product-Review: Syed Hussain <shussain@instructure.com>
This change adds support for typescript transpilation to our frontend
build via babel, and also updates eslint and canvas_i18nliner to be
able to understand typescript as well. The main goal of this PS is to
enable developers to add typescript code to the Canvas codebase but to
be unopinionated about how type-checking is done; at this stage types
will only be checked by running the new `check:ts` or `check:js`
scripts (which run the typescript compiler directly), or via
integration with an IDE like RubyMine or VS Code.
closes LS-2430
flag = none
Test plan:
BUILD STEPS:
- FE build, i18n build, and tests pass Jenkins
- `bin/rails canvas:compile_assets` still works
- `RAILS_ENV=production bin/rails convas:compile_assets` still works
SPOT CHECKING:
- Starting up rails and run `yarn build:js:watch`
- Click around Canvas and make sure the frontend still loads as
normal
Change-Id: I8bb1a0f065e09496a924708dead6fa4518b59496
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/270401
Reviewed-by: Ahmad Amireh <ahmad@instructure.com>
Reviewed-by: Nate Armstrong <narmstrong@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Ahmad Amireh <ahmad@instructure.com>
Product-Review: Jeff Largent <jeff.largent@instructure.com>
happened somewhere during our INSTUI7 upgrade, the fix is similar to
8b34e8b although it doesn't look like we need the decorator and
class-properties plugins that were needed for RCE
test plan: run webpack locally and verify you don't get any warnings
from babel at all
Change-Id: I3d736e3e8be16bdc8a3d1c976d4bf2f8598eaa00
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/267879
Reviewed-by: Charley Kline <ckline@instructure.com>
QA-Review: Charley Kline <ckline@instructure.com>
Product-Review: Charley Kline <ckline@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Test plan:
This should make jest run faster
Change-Id: I69b25931e754cd4dc5c32a4c3b0cf39c72a3f208
Reviewed-on: https://gerrit.instructure.com/209117
Tested-by: Jenkins
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Per https://github.com/tc39/proposal-optional-chaining
Test Plan:
- Jenkins passes
flag = none
Change-Id: I7b9fde7e91a9bd00a85397bcf791b8eccd528a5b
Reviewed-on: https://gerrit.instructure.com/209826
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Steven Burnett <sburnett@instructure.com>
closes: COREFE-209 COREFE-207 COREFE-230
this should help bugs, spec flakiness, and bundle sizes
test plan:
* make sure that the pages that are still using the old 5.x one from
@instructure/ui-core still work, namely:
app/jsx/account_course_user_search/components/CoursesToolbar.js
app/jsx/blueprint_courses/components/CourseFilter.js
app/jsx/grade_summary/SelectMenu.js
* make sure themeing of instUI components still works and picks up
theme editor settings
* make sure bundle sizes are smaller, not bigger
* check tinymce-a11y-checker that it still works the same
(With the rce-enhancements feature both on and off)
Perf test plan:
* make sure tree shaking is working
load it up in one of the webpack bundle visualizers to see
* make sure we are not loading *all* of the icons
this commit also updates the instUI6 version we use from 6.9 6o 6.10
which has fix for <Alert> unmounting that ed fixed:
Test plan:
* you should see less console arrows about react unmounting nodes
Associated with the CanvasSelect component
Change-Id: Ied2ff1d1521b0900126136170f103dea27bc554a
Reviewed-on: https://gerrit.instructure.com/204545
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Closes: CORE-1143
Test plan:
* load canvas in prod mode in a non-English language. Click around
And make sure everything works
* in prod mode, do a test to compare load time to what’s on beta.
* page load time and js bundle size should be smaller
* click around in the quizzes client apps and the ember grade book
And make sure those things work
Change-Id: I93c28c4a6d22db95cd1c7e59cd3f5221d46fe1ed
Reviewed-on: https://gerrit.instructure.com/143422
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Closes: CORE-2868 CORE-2869
This is needed because without
Doing that, our bundle sizes are going to blow up from the things we
Import from InstUI
Test plan:
* the result of a dynamic export will now give you a object grab bag
That has a “default” property. Not just the thing of whatever the
“default" export was.
* so to test this, go to some page that does a dynamic import (like
the dashboard page) and make sure that still works\
* run a prod build
* make sure that translations still work as before
Change-Id: I3dd1b32216052afd5fbc5d6cec40ea18264f65e9
Reviewed-on: https://gerrit.instructure.com/191578
Tested-by: Jenkins
Reviewed-by: Rob Orton <rob@instructure.com>
QA-Review: Rob Orton <rob@instructure.com>
Product-Review: Rob Orton <rob@instructure.com>
closes: CORE-2749
Now that we use babel-transform-runtime, we can also do this to improve
performance over the existing React.createElement calls by inlining the
result of what it would have returned.
see https://github.com/facebook/react/issues/3228 for why this improves
runtime perf
so for an example, say you have:
const foo = <div className="bar" style={{color: 'red'}}>The Text</div>
normally babel would transform that to:
var foo = React.createElement("div", {
className: "bar",
style: {
color: 'red'
}
}, "The Text");
but this will transform it to:
var foo = _jsx("div", {
className: "bar",
style: {
color: 'red'
}
}, void 0, "The Text");
That React.createElement is a lot more complex and slower at runtime,
This should make things faster at runtime
TEST PLAN:
* bundle sizes should stay the same but js runtime for react “render”ing
Should be faster in production mode
Change-Id: I075d249b9effd0af1b16b9e35c1ddd27696c6955
Reviewed-on: https://gerrit.instructure.com/188865
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CORE-2699 CORE-2700 UIDEV-99
This commit gets canvas-lms itself upgraded to babel 7. To do that we
also had to upgrade jest to v24. We had already got canvas-rce and
canvas-planner on jest24/babel7 but now this gets everything to babel 7.
so you will see a lot of things removed from yarn.lock since we don’t
don’t have to have different versions of everything for babel and jest
The other major thing this does is make it so any JS file in canvas
can become an @instructure/ui-themeable themeable component. This means
you no longer should have to put your css in app/stylesheets for any new
react components that you are writing.
Test plan:
1. Make sure that the perf of `yarn build:js` is on-par with what it was
before. We pass everything through the themeable babel transform now
so there is a chance it is slower. If it is majorly slower, we’ll have
to figure something out.
2. run a production weback build. The common (or any bundle for that
matter should get output exactly the same as it did before)
things to manually qa check:
* in a NODE_ENV=production enviornment, go to
/accounts/site_admin/developer_keys
* click the "+ Developer Key" button, it should open the modal.
(there are selenium tests that do this, but it was one thing that had
to be fixed to get jenkins to pass)
* on a course that is set up as a master course, click on the thing that
opens the blueprint courses tray.
* verify that when you click "Associations" and "Sync History" links in
that tray, that they dynamically load the webpack chunk for the
modal contents for that thing and then the modal is shown
(again, there are selenium specs that test that exact thing but it
is always good to manually test it too)
Change-Id: I802584228962b54480a500f8fe422f45c2dcac4c
Reviewed-on: https://gerrit.instructure.com/183965
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Aaron Shafovaloff