Arvados

I haven't had a chance to look at the code yet, but here are notes on the UI:

• Use modal-header and modal-footer classes for title & buttons, like example at http://getbootstrap.com/javascript/#modals
• Looks a bit odd while loading the dialog content. Perhaps at least put a min-height on the box so it's not just a slit, and ideally say "Loading..." somehow. (Dialog title?)
• If you open the dialog, fill in some form fields, cancel, then re-open, the previous form input values appear for a moment until the new dialog content is reloaded. Should probably be reset to blank instead.
• Above center would be OK but below center looks a bit odd. Is this because the dialog is centered before the content is loaded? If it's easier than centering it, something like top=1/4 window height would probably work.
• Get rid of vertical scroll bar
• Cancel button should be btn-default, not btn-primary
• Use form styles/structure like http://getbootstrap.com/css/#forms

I added a branch 2272-setup-user-in-workbench-TC to add notes to apps/workbench/README about getting capybara-webkit/phantomjs to work. Consider merging that into your 2272 branch?

More notes

• Argh. Is it really worth incorporating into our project some code whose licence is "subject to the licensee inflecting a positive message unto someone"? http://licence.visualidiot.com/ (For that matter, what value does bootstrap-modal.css.scss provide for us that Bootstrap3 doesn't do?)
• Possible fixes for some of the above complaints:
  • put the "open modal" code in user_setup.js.erb after updating the div content, instead of using data-toggle in _show_admin.html.erb. Like http://richonrails.com/articles/basic-ajax-in-ruby-on-rails (should avoid showing dialog with stale/empty content)
  • Bootstrap says "Always try to place a modal's HTML code in a top-level position in your document" (might help positioning)

I pushed an updated 2272-setup-user-in-workbench-TC branch with my suggestions for using default styles and letting Bootstrap work its magic:

• Removed the bootstrap-modal.css file
• Moved the modal div into a footer_html section so it goes into the top level of the DOM like Bootstrap recommends (otherwise everything was being rendered strangely because it was inside a blockquote, etc.)
• Used the div structure from the Bootstrap modal docs (.modal .modal-dialog .modal-content .modal-header/body/footer)
• Used the form structure from the Bootstrap form docs (.form-group input.form-control)

IMO the result looks way better, and (perhaps more importantly) it will automatically get better instead of worse when we move to a non-default Bootstrap theme.

Other

• Noticed a small bug with validation: if you paste a valid email address, it doesn't trigger "keyup" so the javascript doesn't revalidate. (You can use $(selector).on('keyup paste', function(){...}) to fire on multiple events.)
• Instead of using <script> tags, it's a bit nicer to put javascript code in a <% content_for :js do %> block (or :footer_js to put it at the bottom of the HTML so the DOM already exists by the time it runs).
• Some whitespace complaints. (See git diff --check master...2272-setup-user-in-workbench) You can tell git not to commit these -- https://arvados.org/projects/arvados/wiki/Coding_Standards#Git-setup
• Before merge, rebase so our git history doesn't have the weird-licensed code that we didn't end up using
• Set proper email address in your git configuration → https://arvados.org/projects/arvados/wiki/Coding_Standards#Git-commits