Feature #5493

[Workbench] Add "Getting Started" modal inside Workbench

Added by Nancy Ouyang over 4 years ago. Updated over 4 years ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Radhika Chippada
Category:
Workbench
Target version:
Start date:
03/30/2015
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
Story points:
0.5

Description

1) Workbench should be self-explanatory & guide first time-users through discovering key features. Solution: Add modal for first-time users instead of bouncing them through documentation first.
NOTE: Should be "prev / next" not carousel, unless carousel is well-designed and user-tested.

2) Determine size of images (aspect ratio) & word limit.

NOTE: First slide should say "Or get started by running a public pipeline now" to allow exit of modal with clear next step.

NOTE: Last slide should say "click � to find this dialogue again." Also "Click ? > User Guide" to learn more. & screenshot should be of other hidden features (e.g. CLI).

3) Add link to modal in "?" (see screenshot) titled "Getting Started").

5) Clean-up conflicting documentation: Remove duplicate "getting started" sections in doc.arvados.org

gettingstarted.png (17.7 KB) gettingstarted.png Nancy Ouyang, 03/17/2015 08:41 PM
mockup-workbench-intro.png (196 KB) mockup-workbench-intro.png Nancy Ouyang, 03/17/2015 08:42 PM
gettingstarted+publiclisting.png (61.2 KB) gettingstarted+publiclisting.png Nancy Ouyang, 03/20/2015 07:38 PM
Screenshot from 2015-04-09 11_04_32.png (312 KB) Screenshot from 2015-04-09 11_04_32.png Nancy Ouyang, 04/09/2015 03:04 PM
Screenshot from 2015-04-13 11_04_34.png (182 KB) Screenshot from 2015-04-13 11_04_34.png page 1 Nancy Ouyang, 04/13/2015 03:07 PM
Screenshot from 2015-04-13 11_04_37.png (176 KB) Screenshot from 2015-04-13 11_04_37.png page 2 Nancy Ouyang, 04/13/2015 03:07 PM
Screenshot from 2015-04-13 15_35_03.png (190 KB) Screenshot from 2015-04-13 15_35_03.png Nancy Ouyang, 04/13/2015 07:35 PM
Screenshot from 2015-04-13 15_34_59.png (175 KB) Screenshot from 2015-04-13 15_34_59.png Nancy Ouyang, 04/13/2015 07:35 PM
Screenshot from 2015-04-13 15_33_39.png (133 KB) Screenshot from 2015-04-13 15_33_39.png Nancy Ouyang, 04/13/2015 07:35 PM
Screenshot from 2015-04-13 15_33_35.png (143 KB) Screenshot from 2015-04-13 15_33_35.png Nancy Ouyang, 04/13/2015 07:35 PM

Subtasks

Task #5608: Review branch: 5493-getting-started-modal (without the actual html in place)ResolvedRadhika Chippada


Related issues

Related to Arvados - Bug #5211: [Documentation] Top Navbar of docs homepage not suitable for small windowResolved02/13/2015

Related to Arvados - Feature #5370: [Workbench] If anonymous config is enabled, logged-out workbench homepage should list publicly accessible projects, collections, etc. and de-emphasize the "welcome, please log in" presentation.Resolved03/03/2015

Related to Arvados - Task #5440: [Documentation] Revert doc-to-homepageResolved03/11/2015

Related to Arvados - Feature #5495: [Workbench] Change "recent pipelines" to curated selection of "public pipelines"New03/17/2015

Related to Arvados - Feature #5647: [Workbench] Log-in on anonymous redirects to google sign-in with no warning; feels like phishingResolved04/14/2015

Associated revisions

Revision 0d1d51b9
Added by Radhika Chippada over 4 years ago

refs #5493
Merge branch '5493-getting-started-modal'

Revision 8e2150eb (diff)
Added by Tom Clegg over 4 years ago

Fix indentation. Remove errant unclosed <p> tag. refs #5493

Revision b6f54ccb
Added by Nancy Ouyang over 4 years ago

refs #5493: Merge branch '5493-fix-yellow-gif'

History

#1 Updated by Nancy Ouyang over 4 years ago

Mockup of modal attached.

#2 Updated by Nancy Ouyang over 4 years ago

  • File gettingstarted+publiclisting.png added

Mockup of navbar with #5370 quickfix, link to wiki page https://arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets in navbar (so this menu is same for both logged-in and not-logged-in -- getting started modal + wiki page list of public stuff)

#3 Updated by Nancy Ouyang over 4 years ago

  • File deleted (gettingstarted+publiclisting.png)

#5 Updated by Nancy Ouyang over 4 years ago

Last page of modal should have direct link to not just doc.arvados.org but also the port-a-pipeline step-by-step tutorial specifically.

#6 Updated by Tom Clegg over 4 years ago

  • Target version set to Arvados Future Sprints

#7 Updated by Tom Clegg over 4 years ago

  • Target version changed from Arvados Future Sprints to 2015-04-29 sprint

#8 Updated by Tom Clegg over 4 years ago

  • Target version changed from 2015-04-29 sprint to 2015-04-01 sprint

#9 Updated by Tom Clegg over 4 years ago

  • Story points set to 1.0

#10 Updated by Tom Clegg over 4 years ago

  • Category set to Workbench
  • Assigned To set to Radhika Chippada

#11 Updated by Tom Clegg over 4 years ago

Implementation notes / details

No notification bar ("new here?" etc). Instead, show the modal itself if it hasn't been shown yet. (cf. email)

Make a "getting started" modal in a partial, so it can be invoked the same way as "report issue" et al.

Next/previous buttons flip pages, and are disabled when viewing the last/first page respectively.
  • Make sure the modal doesn't change its height when flipping pages. Perhaps the content goes in a div with "height: X !important"?
In layouts/body.html.erb, if the user is logged in and the "getting_started_shown" preferences entry is not set and we have passed the "fill in your profile" stage of the new user flow:
  • Render the "getting started" modal partial inline (so it shows up, already open, in the initial page render -- without an additional AJAX call).
  • Set the user's "getting_started_shown" preferences entry to the current time.

Most user fixtures (active, admin, spectator, etc) should have the prefs flag set. The "new" users (like "inactive") should not have it set. A few existing tests will probably need to be updated to hit "close".

The "welcome" change should be done in the default welcome page and in the Curoverse theme.

Optional: The button in the "thank you" message on the user profile page should say "Get started" instead of "Back to work" if the "getting_started_shown" flag is not set.

#12 Updated by Tom Clegg over 4 years ago

Suggestion for app/assets/javascripts/modal_pager.js

// Usage:
//
// 1. Add some buttons to your modal, one with class="pager-next" and
// one with class="pager-prev".
//
// 2. Put multiple .modal-body sections in your modal.

$(document).on('click', '.modal .pager-next', function() {
    var $modal = $(this).parents('.modal');
    $modal.data('page', ($modal.data('page') || 0) + 1).trigger('pager:render');
    return false;
}).on('click', '.modal .pager-prev', function() {
    var $modal = $(this).parents('.modal');
    $modal.data('page', ($modal.data('page') || 1) - 1).trigger('pager:render');
    return false;
}).on('ready ajax:success', function() {
    $('.modal').trigger('pager:render');
}).on('pager:render', '.modal', function() {
    var $modal = $(this);
    var page = $modal.data('page') || 0;
    var $panes = $('.modal-body', $modal);
    if (page >= $panes.length) {
        // Somehow moved past end
        page = $panes.length - 1;
        $modal.data('page', page);
    } else if (page < 0) {
        page = 0;
    }
    var selected = $panes.hide().eq(page).show();
    enableButton($('.pager-prev', $modal), page > 0);
    enableButton($('.pager-next', $modal), page < $panes.length - 1);
    function enableButton(btn, ok) {
        btn.prop('disabled', !ok).
            toggleClass('btn-primary', ok).
            toggleClass('btn-default', !ok);
    }
});

#13 Updated by Radhika Chippada over 4 years ago

  • Status changed from New to In Progress

#14 Updated by Nancy Ouyang over 4 years ago

Update: Modal with pre/next buttons now on branch by Radhika. I will implement HTML content for model over the next few days using existing deployed modals + inspector tool on Chrome/Firefox.

Future story, perhaps: How someone can get "just workbench" branch on localhost running very quickly, like with the /docs portion of Arvados.
"you need to first start the api server and the sso server and the workbench" (or point workbench to existing api server)
http://doc.arvados.org/install/index.html
https://arvados.org/projects/arvados/wiki/Hacking_Workbench

#15 Updated by Radhika Chippada over 4 years ago

Implementation notes:

  • The workbench dialog is implemented in arvados repository branch 5493-getting-started-modal
  • The curoverse welcome page is updated (and manually tested locally) in curoverse-private repository branch 5493-welcome-page-links-to-arvados-wiki

#16 Updated by Brett Smith over 4 years ago

Radhika Chippada wrote:

  • The workbench dialog is implemented in arvados repository branch 5493-getting-started-modal

Reviewing 1f225f2c

  • Because Tom specified that the modal content should live in the main layout HTML, we can just always include it there directly. This would reduce the amount of code necessary for this feature: we won't need a new route, a new method for that route on application controller, etc. Here's how to do this:
    • In getting_started_popup, give the <div class="modal"> a unique id attribute. (You should be able to make this getting-started-modal-window and get rid of the <div> in body.html.erb.)
    • In body.html.erb, always render the getting_started_popup partial.
    • Move the user condition down. When the condition is true, the <script> inside the condition only needs to call .modal('show'). No rendering is necessary, since the modal HTML will always be included in the body.
    • In the Help menu, the link to bring up the Getting Started modal should have the attributes data-toggle="modal" data-target="#yourModalId". Bootstrap's provided JavaScript will automatically make the correct hookups to show the modal when this link is clicked. data-toggle tells it to toggle the shown state of a modal, and data-target tells it which modal to render.
  • The mockup shows the "Prev" and "Next" modal buttons at the far left and right of the modal, respectively. Could we achieve the same effect with pull-left and pull-right? And then the page count could probably be centered between them.
  • I'm not sure arvados_wikisite is the right level of configurability we want for the "Public Pipelines and Datasets" link. Other sites may have their public data documented on different wiki software (e.g., Mediawiki); on a static HTML page; or they may not have public data at all. I think this feature will be more adaptable if it specified a full URL for the documentation page, and if Workbench did not render the link when the configuration value was unset. The name could be something like public_data_doc_url.
  • This branch renames the active_prefs_no_profile user fixture, but there are still several Workbench and API server tests looking for it. Try git grep '\bactive_prefs_no_profile\b'.

#17 Updated by Brett Smith over 4 years ago

Radhika Chippada wrote:

  • The curoverse welcome page is updated (and manually tested locally) in curoverse-private repository branch 5493-welcome-page-links-to-arvados-wiki

Reviewing commit:e2c004e

I see that you implemented Nancy's text verbatim. I have some concerns about this text:

  • I don't think we should say we are "based on" Arvados. I'm concerned it could give readers the impression that we have secret proprietary components, which is not true.
  • "open-source" should not be hyphenated.
  • "datasets" should be two words according to my dictionary.
  • I think talking about data that can be "viewed anonymously" is a little too technical for people who may not already be familiar with Arvados.

I would suggest the following as an alternative: "We use the Arvados [link] open source platform. For a curated list of public pipelines and data sets, please visit the Arvados wiki [link]."

Thanks.

#18 Updated by Radhika Chippada over 4 years ago

Brett: Made all the suggested updates, except the placement of Next and Prev buttons. When these buttons are placed using pull-right and pull-left respectively, accessing them was tedious. To go back and forth, I need to move the mouse from one end of the dialog to the other. This was quite bad user experience. Checked with Nancy also and she also liked them this way and not having to move the mouse too much. Thanks.

#19 Updated by Brett Smith over 4 years ago

Reviewing 1f5a673.

  • The changes to ApplicationController are no longer needed now that the modal is included in the layout HTML. Please revert them.
  • In body.html.erb, the comment next to the partial <%# requires JS support below %> is not applicable in this case, and should be removed.
  • In user_profile_test.rb, the different tests "visit home page when profile is configured for user #{token}" have a new boolean variable, but it's never unwrapped or used, so I don't think anything's happening with it. The signatures of several helper methods changed, but none of the calls did, so I suspect they're running unchanged.
  • In other Workbench integration tests that perviously used the active_prefs_no_profile token (application_layout_test, report_issue_test), you've extended them to use both tokens. Since none of the tests are expected to change their behavior in either case, I believe it would be better to choose one or the other and use that, not both. The time expense of trying with both variations of the user doesn't seem worthwhile for testing these common UI elements that are relatively static.
  • In the test "test getting started help menu item", nothing reads the variable foundDisabledNext. I believe it can be removed.

Thanks.

#20 Updated by Radhika Chippada over 4 years ago

Brett: thanks for your patience, the third comment above uncovered a bug in code which was uncovered once the test is corrected :). Yes, you are right; since user_profile_test is covering all scenarios, no need to add additional test cases to application_layout and report_issue and hence they are now removed. Deleted "foundDisabledNext" from test since I am no longer relying on it to verify that the Next button indeed is disabled. Thanks.

#21 Updated by Brett Smith over 4 years ago

a89c721 is good to merge. Thank you.

#22 Updated by Tom Clegg over 4 years ago

  • Target version changed from 2015-04-01 sprint to 2015-04-29 sprint

#23 Updated by Tom Clegg over 4 years ago

  • Story points changed from 1.0 to 0.5

#24 Updated by Nancy Ouyang over 4 years ago

Update: mockup now in Workbench.
!Screenshot from 2015-04-09 11_04_32.png!

#27 Updated by Nancy Ouyang over 4 years ago

  • File deleted (Screenshot from 2015-04-13 15_34_55.png)

#28 Updated by Radhika Chippada over 4 years ago

  • Status changed from In Progress to Resolved

#29 Updated by Nancy Ouyang over 4 years ago

personally, I really hate the "popup and overlay everything when you first login" modal behavior we implemented right now. It's especially terrible if your window is small and the modal takes up the entire screen almost. Then

"What you're looking at right now is Workbench,"

doesn't make any sense, because "what you're looking at right now" is a modal, not the Dashboard...

A little red circle like for ssh, or small blue bar "New here? Check out our sweet getting started guide"[link to modal], or something would be much nicer, so people can see what is going on before they get this confusing modal overlay.

Will confirm with user testing my intuition next week.

Also available in: Atom PDF