fixes: CNVS-22276
what this change does:
* changes it so if you have a 'host' set in canvs_cdn.yml,
when you run brandable_css it will push the css
files directly to s3 instead of writing them all to
disk.
* fixes the bug where brandable_css thought it had
to re-compile css files that have not changed
* changes the way we load css bundles that don't include
any branding or use any of the variant variables
(like: $use-high-contrast or $use-new-styles).
before, we generated a unique css file for each
variant and each brand for any of those bundles.
this will instead point everyone to same url if
the file uses none of those variables.
test plan:
* with no canvas_cdn.yml file:
* run compile_assets
* run it again, it should say "no changes" quickly
* the css in canvas should work
* now, rm -rf public/dist/brandable_css
* save a canvas_cdn.yml with proper s3/cloudfront settings
* compile_assets
* canvas should work and use the css that was uploaded
to s3 in previous step
* compile_assets again, it should say "no changes"
within a few seconds.
* if you can, delete a css file from s3 & run
brandable_css again. it should see that it needs
to regenerate that file and do so correctly.
when testing the css in the UI, especially make sure
to look for:
* try loading the equation editor in different variants,
(e.g.: high contrast, new styles, legacy) the css
for it should always be loaded from <cdn>/dist/brandable_css/no_variables/...
* keep your js console open, there should not be any 404s
* check the screenreader_gradebook
most of the changes actually happened in brandable_css:
https://github.com/ryankshaw/brandable_css/compare/6e0ddc59...master
when code-reviewing, please do a thorough scan of
those changes too.
Change-Id: Ie6efcedd92c3783e0b2dd194ec222b9dc28d0838
Change-Id: Ie6efcedd92c3783e0b2dd194ec222b9dc28d0838
Reviewed-on: https://gerrit.instructure.com/61495
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Tested-by: Jenkins
QA-Review: August Thornton <august@instructure.com>
Product-Review: Rob Orton <rob@instructure.com>
fixes CNVS-22216
test plan:
- with k12 feature flag off
- go to theme editor
- it doesnt show k12 brand config
- turn flag on
- go back to theme editor
- it does show k12 brand conifg
- turn flag off and check that it goes away
(note: it may take a little bit for the
change to kick in)
Change-Id: Ic4ab4557d5330426128d26890d739ee6feb98a7b
Reviewed-on: https://gerrit.instructure.com/60783
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
fixes: CNVS-22185
Because the the update_progress callback from the
upload_to_s3 callback was happening inside a
Parallel.each thread, we'd get random errors where
it ran out of active record postgres connections.
eg:
ActiveRecord::ConnectionTimeoutError
could not obtain a database connection within 5
seconds (waited 5.000153379 seconds). The max pool
size is currently 5; consider increasing it.
the fix is to call the callback on the main thread so
any db queries are happening from the normal rails thread.
also, this adds a progress bar so if you run this from
the command line, you'll get a nice progress bar like
https://files.slack.com/files-pri/T028ZAGUD-F0896CFR9/screen_shot_2015-07-28_at_10.19.36_am.png
so that when deployers run the:
`rake brand_configs:generate_and_upload_all`
task, which takes a long time, they have an idea
of how long it is going to take
test plan:
note:this is something that only broke on beta and
not on local machines so to test that this fixes it,
you kinda need to just run it there:
* open theme editor
* make a change
* hit preview
* it should not say there was an error
Change-Id: Ife052ab9573aa677d49d8e5e6c637b0faa2b116e
Reviewed-on: https://gerrit.instructure.com/59407
Reviewed-by: Mike Nomitch <mnomitch@instructure.com>
Reviewed-by: Cody Cutrer <cody@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Tested-by: Jenkins
Product-Review: Ryan Shaw <ryan@instructure.com>
fixes CNVS-22073
test plan:
- go to theme editor
- add an image and then undo
having added that image
- if that is the only thing youve
changed so far, you do not get
a preview button
- once you change something else
you can hit preview and it saves
properly
- apply theme with a non-default image
- go to the editor and change back
to default
- you get an option to preview with
the default
- preview is successful
- color & image changes act normally
Change-Id: Ia5de701177137625e65434ac316c22aec0e1dd39
Reviewed-on: https://gerrit.instructure.com/59056
Reviewed-by: Jacob Fugal <jacob@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
...because apparently "it's preloading. for
autoloading, CDN will look for cdn or c_d_n.
then in prod mode, it's somewhat different. like
autoloading is disabled? and it just pre-requires
everything in the autoload dirs"
test plan:
run `RAILS_ENV=production bundle exec rake canvas:cdn:upload_to_s3`
it should work
Change-Id: I5deed1cc2b9daa678465b174af320cf1724fea8c
Reviewed-on: https://gerrit.instructure.com/59341
Reviewed-by: James Williams <jamesw@instructure.com>
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-21990
This is the rake task we call from a job server
once that has new code before restarting all the
app servers. It will make sure that our s3 bucket
has all static assets including the css for custom
themes people have created in the Theme Editor
test plan:
* make sure you have an config/canvas_cdn.yml file
* `rm -rf public/dist`
* run `bundle exec rake brand_configs:generate_and_upload_all`
* in log/development.log you should see it write
a _variables.scss file for each brand_config
in any shard to disk, compile the css for each
of those brands and push all the js/css/images/etc to s3
* browse pages in canvas, the css/images/js
should be served from your "host:" configured
in canvas_cdn.yml and none should 404
this change also includes:
better error message when brandable_css manifest doesn't exist
if the manifest file can't be found, this will
tell you the full path to the file it was looking
for so that if it can't find the manifest file,it
will tell you the path to the file it was looking for.
test plan:
with RAILS_ENV=production:
* rm -rf public/dist
* try to access a page
the error that it give you should tell you the
full path to the json file it tried to read.
if we haven't loaded rails yet, we still want
to look at RAILS_ENV to get which style of css
to generate
Change-Id: I2dbb12541d6a28e90a326a51f0cddb90f313842f
Reviewed-on: https://gerrit.instructure.com/58809
Reviewed-by: Rob Orton <rob@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Tested-by: Jenkins
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-21013
when the user hits 'preview' in the theme editor,
it fires off a delayed job to create the css files
and push them to s3. we need to show the user the
the progress of that job as it is working and
then reload the page when it is done.
I made a screencast to show how it should work and
what to look for:
http://screencast.com/t/x6EeOBiQT6d
test plan:
* go to the theme editor,
* make some changes (be sure to test both colors
and images)
* press 'preview'
* notice the ProgressBar that comes up in a modal
* try exiting the theme editor, it should warn
you if you have unsaved changes
Change-Id: I3f14beefba227b5ba23b33acf84e04542f48954e
Reviewed-on: https://gerrit.instructure.com/57626
Reviewed-by: Rob Orton <rob@instructure.com>
Tested-by: Jenkins
QA-Review: Adrian Foong <afoong@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-21804
this will also do a better job of cleaning up
the app/stylesheets/brandable_css_brands dir
(so when you compile sass, it won't do stuff
for brandConfigs that aren't being used anymore)
test plan:
open theme editor, make some changes, hit preview.
as a different user in a different browser,
open theme editor, make changes, press save.
now in the first window, try to hit save.
before it would break, now it will work
Change-Id: I094f737d35c854764a7c361bec4798b8a2203410
Reviewed-on: https://gerrit.instructure.com/58102
Reviewed-by: Mike Nomitch <mnomitch@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Nathan Rogowski <nathan@instructure.com>
what this does:
* Changes the way we generate css so we are able to generate custom
css for people that use the theme editor.
* Sets everything up so we can push all of our static assets
(js, fonts, css, images, etc) to s3 pre-deploy and serve them
from cloudfront. Yay! faster canvas for everyone!
* as part of that, this enables the rails asset pipeline just so we
can use it to put md5s in our urls. we don't use it for any of the
coffeescript/sass/sprockets transformer stuff.
* adds a new "Theme editor" functionality (only for people that have
have the use-new-styles feature flag turned on) where an admin for
an account can pick their own colors/images for all the users
at their account/school.
* when the user is done saving things in theme editor, it will,
in a delayed job, generate all the css with against the variables
that user specified and push it to s3 so it will be available to
anyone else that requests it. (the delayed job will shell
out to a node.js executable called `brandable_css`).
* ability to pick an existing shared theme and to reset to
blank theme. closes: CNVS-19685
* gets rid of jammit.
test plan:
(this is exaustive, so not every person has to do every step
but we should make sure at least someone does each of these things.
maybe as part of the review add a comment if you have done one of these
bulletpoints)
* before you check this out, compile all css and copy the
public/stylsheets_compiled directory somewhere. after you check out
this code and regenerate all the css. make sure there are no
significant changes to the css output. (we updated the versions of
node-sass and autoprefixer that we use so we want to make sure they
don't change things in a way we weren't expecting)
* make sure the way we load css for handlebars templates still works.
eg: if there is a handlebars template at
app/views/jst/some/template.handlebars
if there is also a scss file at
app/stylesheets/jst/some/template.scss
then that stylesheet should get loaded when that template is rendered
* check out the code and run migrations. browse around canvas,
make sure css and js files load correctly as before.
* cody, jacob, or someone on queso: look at the db migrations and
make sure everything looks good and that I am handling sharding
correctly.
* verify that both rake canvas:compile_assets and guard, works as well
as `node_modules/.bin/brandable_css` (note: if you have
"node_modules/.bin" in your PATH (which you should), it will also
work with just `brandable_css`)
* verify that passing the --watch option to
`.bin/node_modules/brandable_css` works and picks up changes to
sass files, images, fonts, or any other resource that goes into
a css file. and that it only recompiles the css files that actually
depend on that file.
* go to https://github.com/ryankshaw/brandable_css and check out the
code there. that is what is actually doing the sass compiling
* create a config/canvas_cdn.yml file and add aws access creds and
an s3 bucket and cdn hostname (for testing, you can use the credentials
for instructure_uploads_engineering from
https://gollum.instructure.com/OtherServiceTestAccounts ). for a test
cdn hostname you can use https://diu0rq5m1weh1.cloudfront.net. that
is a cloudfront bucket I set up on my personal account that points to
instructure_uploads_engineering
* run rake canvas:compile_assets again, this time, at the end, you
should see it run the assets:precompile task that puts md5s in filenames
and, gzipps them, and copys them to public/assets.
then you should see it run canvas:cdn:upload_to_s3
(look at log/development.log for progress),
which pushes everything to s3.
closes: CNVS-17333 CNVS-17430 CNVS-17337
* try out the theme editor: turn on new styles, go to accounts/x
(where x is the @domain root acount you are testing from) and click
the "theme editor" button on the right side of the page.
that should take you to a page that has the ability to pick colors/images
on the left side and preview your changes in an iframe on the right
closes: CNVS-19360 CNVS-20551
* test the "preview", "save", "reset", and "choose existing" functionality
closes: CNVS-17339 CNVS-17338 CNVS-19685
* make sure that the themeeditor works both if you have
config/canvas_cdn.yml set up and enabled as well as if you don't.
if it is enabled, you should see it push the css for just that new
brand config to s3 when you hit preview, and the css
should be accessible from the cdn you configured.
Change-Id: Ie0a812d04f5eeb40e7df7e71941ff63ea51a4d22
Reviewed-on: https://gerrit.instructure.com/53873
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Ryan Shaw
