Merge lp:~rharding/juju-gui/qa-ant-onboarding into lp:juju-gui/experimental

[Richard Harding]

Add support for an initial onboarding walkthrough

- Submitting for Ant
- Under the feature flag :flags:/onboard

https://codereview.appspot.com/14700043/

[Richard Harding (rharding)]

Reviewers: mp+191208_code.launchpad.net,

Message:
Please take a look.

Description:
Add support for an initial onboarding walkthrough

- Submitting for Ant

https://code.launchpad.net/~rharding/juju-gui/qa-ant-onboarding/+merge/191208

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/14700043/

Affected files (+447, --6 lines):
   A [revision details]
   M app/app.js
   A app/assets/images/close-inspector-click.png
   A app/assets/images/close-inspector-hover.png
   A app/assets/images/close-inspector-normal.png
   A app/assets/images/non-sprites/onboarding/2-service-blocks.png
   A app/assets/images/non-sprites/onboarding/3-inspector.png
   A app/assets/images/non-sprites/onboarding/3-service-block.png
   M app/index.html
   M app/modules-debug.js
   M app/store/env/base.js
   A app/templates/onboarding.handlebars
   A app/views/onboarding.js
   M lib/views/stylesheet.less

[Richard Harding (rharding)]

Feedback below.

https://codereview.appspot.com/14700043/diff/1/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1095
app/app.js:1095:
remove this blank line

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1129
app/app.js:1129: initialise_onboarding: function() {
initialize (I know it's a US/UK english thing, but initialize is used
throughout the app already)

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1131
app/app.js:1131: if (!this._onboarding) {
this is where I'd add the feature flag check.

if (!this._onboarding && window.flags.onboard) { ...

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1132
app/app.js:1132: // Need to check onboarding exists due to the double
dispatch bug.
this comment kind of goes above this line where the if is.

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1140
app/app.js:1140: this._onboarding.close();
why do we need to close here? If you hit the root url, and we render.
You close it with the button/control in the UI. If you're not at the /
url then we never show this and there's nothing to close?

https://codereview.appspot.com/14700043/diff/1/app/store/env/base.js
File app/store/env/base.js (right):

https://codereview.appspot.com/14700043/diff/1/app/store/env/base.js#newcode170
app/store/env/base.js:170: 'onboardDismissed': {value: false},
you had mentioned that it's not saving this value. This comes in to
where I'd create a valueFn that could check against your storage
location (session storage or localstorage) and pull the value out of
there. If it's not defined, then you show, else you don't show. The
render method would do a check when you hit it.

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js
File app/views/onboarding.js (right):

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode31
app/views/onboarding.js:31: var onboardingIndex = 0;
this is specific to the current view. I think this should be an
attribute created or set on initialize, or maybe another ATTR.

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode53
app/views/onboarding.js:53: '.onboarding-cross': {
can this not be done with css using :hover state?

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode71
app/views/onboarding.js:71: this.close();
is there any way to get back to the onboarding dialog after it's been
closed? Could this actually do a this.destroy() and remove itself from
the dom as well?

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode94
app/views/onboarding.js:94: this.onboardingIndex = 0;
you set this.onboardingIndex here, but you use the unattached version
elsewhere?

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode110
app/views/onboarding.js:110: onboardingIndex = onboardingIndex + 1;
this.onboardingIndex

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode135
app/views/onboarding.js:135: crossHandler: function(ev) {
yea, I'd think this whole function could go away if the css was updated
per https://develop...

[Richard Harding (rharding)]

QA Notes:

I didn't get the mask until I hit "Get Started" it seems like it would
mask to start out with?

Once when I got to the second step did it mask over the sidebar?

https://codereview.appspot.com/14700043/

[lp:~rharding/juju-gui/qa-ant-onboarding]

1128. By Richard Harding on 2013-10-15

Fix the reference to the class

[Anthony Dillon (ya-bo-ng)]

Comments back to Rick's review. Any uncommented are complete.

https://codereview.appspot.com/14700043/diff/1/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1140
app/app.js:1140: this._onboarding.close();
On 2013/10/15 14:55:34, rharding wrote:
> why do we need to close here? If you hit the root url, and we render.
You close
> it with the button/control in the UI. If you're not at the / url then
we never
> show this and there's nothing to close?

This is used when the user use's the browsers navigation buttons to jump
form build and browse.

https://codereview.appspot.com/14700043/diff/1/app/store/env/base.js
File app/store/env/base.js (right):

https://codereview.appspot.com/14700043/diff/1/app/store/env/base.js#newcode170
app/store/env/base.js:170: 'onboardDismissed': {value: false},
On 2013/10/15 14:55:34, rharding wrote:
> you had mentioned that it's not saving this value. This comes in to
where I'd
> create a valueFn that could check against your storage location
(session storage
> or localstorage) and pull the value out of there. If it's not defined,
then you
> show, else you don't show. The render method would do a check when you
hit it.

I created this value in the storage for this purpose but did not manage
to set or get it from app.js when rendering.

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js
File app/views/onboarding.js (right):

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode53
app/views/onboarding.js:53: '.onboarding-cross': {
On 2013/10/15 14:55:34, rharding wrote:
> can this not be done with css using :hover state?

These events are used to update the spirited background image, therefore
need to update the class on the element.

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode71
app/views/onboarding.js:71: this.close();
On 2013/10/15 14:55:34, rharding wrote:
> is there any way to get back to the onboarding dialog after it's been
closed?
> Could this actually do a this.destroy() and remove itself from the dom
as well?

There is going to be a drop down in the header that contains an option
to display the onboarding message again.

https://codereview.appspot.com/14700043/diff/1/app/views/onboarding.js#newcode135
app/views/onboarding.js:135: crossHandler: function(ev) {
On 2013/10/15 14:55:34, rharding wrote:
> yea, I'd think this whole function could go away if the css was
updated per
> https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Required for sprite updates.

https://codereview.appspot.com/14700043/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/14700043/diff/1/lib/views/stylesheet.less#newcode2043
lib/views/stylesheet.less:2043: &.state-1 {
On 2013/10/15 14:55:34, rharding wrote:
> this seems like it could be done using a .active flag or something.
Where one of
> the divs is marked .active and .active picks up things like display
block and
> sets background color?

The reason I did it this way is because the different states control the
screen-mask which I outside the panels.

https://codereview.appspot.com/14700043/...

[Richard Harding (rharding)]

Comment

https://codereview.appspot.com/14700043/diff/1/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1140
app/app.js:1140: this._onboarding.close();
On 2013/10/15 16:13:05, Ant wrote:
> On 2013/10/15 14:55:34, rharding wrote:
> > why do we need to close here? If you hit the root url, and we
render. You
> close
> > it with the button/control in the UI. If you're not at the / url
then we never
> > show this and there's nothing to close?

> This is used when the user use's the browsers navigation buttons to
jump form
> build and browse.

When they go from browse to build though the url changes and will no
longer be /. So I think it's safe to leave this out.

https://codereview.appspot.com/14700043/

[Anthony Dillon (ya-bo-ng)]

https://codereview.appspot.com/14700043/diff/1/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/1/app/app.js#newcode1140
app/app.js:1140: this._onboarding.close();
On 2013/10/15 16:27:00, rharding wrote:
> On 2013/10/15 16:13:05, Ant wrote:
> > On 2013/10/15 14:55:34, rharding wrote:
> > > why do we need to close here? If you hit the root url, and we
render. You
> > close
> > > it with the button/control in the UI. If you're not at the / url
then we
> never
> > > show this and there's nothing to close?
> >
> > This is used when the user use's the browsers navigation buttons to
jump form
> > build and browse.

> When they go from browse to build though the url changes and will no
longer be
> /. So I think it's safe to leave this out.

Ok, taking it out.

https://codereview.appspot.com/14700043/

[Anthony Dillon (ya-bo-ng)]

On 2013/10/15 15:00:22, rharding wrote:
> QA Notes:

> I didn't get the mask until I hit "Get Started" it seems like it would
mask to
> start out with?

> Once when I got to the second step did it mask over the sidebar?

That is a UX/design decision. It is the behaviour I was given to
implement. Testing may prove you right :)

https://codereview.appspot.com/14700043/

[lp:~rharding/juju-gui/qa-ant-onboarding]

1129. By Richard Harding on 2013-10-16

Sync with upstream

1130. By Richard Harding on 2013-10-16

Lint

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/14700043/

[lp:~rharding/juju-gui/qa-ant-onboarding]

1131. By Richard Harding on 2013-10-16

Sync

1132. By Richard Harding on 2013-10-16

Adjust

1133. By Richard Harding on 2013-10-16

Sync lint changes

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/14700043/

[Richard Harding (rharding)]

LGTM, couple of small tweaks I think.

https://codereview.appspot.com/14700043/diff/15001/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/app.js#newcode84
app/app.js:84: onboarding: {
we manually run the view so this doesn't need to be here.

https://codereview.appspot.com/14700043/diff/15001/app/store/env/base.js
File app/store/env/base.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/store/env/base.js#newcode170
app/store/env/base.js:170: 'onboardDismissed': {value: false},
is this used? If not can we get rid of this as well?

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js
File app/views/onboarding.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode175
app/views/onboarding.js:175: this.onboardingIndex + 1, this.stateCount);
this should just be this.states.length

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode204
app/views/onboarding.js:204: this.stateCount = this.states.length - 1;
I'd just move this up to the incrementIndex since you don't need/use it
elsewhere.

https://codereview.appspot.com/14700043/diff/15001/test/test_onboarding.js
File test/test_onboarding.js (right):

https://codereview.appspot.com/14700043/diff/15001/test/test_onboarding.js#newcode159
test/test_onboarding.js:159: onboard.closeHandler({halt: function()
{}});
What you can do here is to do a onboardingCross.simulate('click') and it
should fire the click event and it'll close.

https://codereview.appspot.com/14700043/

[Gary Poster (gary)]

LGTM if you change the route check code in app.js. I'll try to look up
the proper spelling and post it here in a few minutes. Everything else
is trivial and/or just suggestions or ideas.

https://codereview.appspot.com/14700043/diff/15001/app/app.js
File app/app.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/app.js#newcode1132
app/app.js:1132: if (path === '/' || path === '/:flags:/onboard/') {
Technically, this should use the routing code to get the path in the
default namespace. I'll try to dig up how to do that later.

I say "technically" because we are interested in removing the namespace
code. We aren't doing that right now, though, so using the routing's
parsing code is the right thing to do.

https://codereview.appspot.com/14700043/diff/15001/app/store/env/base.js
File app/store/env/base.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/store/env/base.js#newcode170
app/store/env/base.js:170: 'onboardDismissed': {value: false},
On 2013/10/16 17:01:11, rharding wrote:
> is this used? If not can we get rid of this as well?

Looks like it is part of a nascent plan to persist the flag, but I agree
that we ought to keep this out until/unless it's used.

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js
File app/views/onboarding.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode72
app/views/onboarding.js:72: this.close();
I don't yet see the value of separating closeHandler and close. Even
for testing this doesn't seem like a huge win. OTOH, maybe I'm missing
something.

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode119
app/views/onboarding.js:119: * @method nextHandler
prevHandler

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode136
app/views/onboarding.js:136: crossHandler: function(ev) {
(1) this is also registered for mouseup. Why?
(2) Other than the blasted documentation blather :-D, this feels like it
would be cleaner as separate methods, one for each event. That's a
suggestion: take it or leave it.
(3) .replaceClass(..., ...) could make each type into single calls.
(4) I hope the close-inspector-click style wins over the -hover or
-normal styles, or that they get along somehow. I'll assume they do.

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode175
app/views/onboarding.js:175: this.onboardingIndex + 1, this.stateCount);
On 2013/10/16 17:01:11, rharding wrote:
> this should just be this.states.length

you mean, "this.stateCount" should be "this.states.length - 1". Sounds
good to me.

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode204
app/views/onboarding.js:204: this.stateCount = this.states.length - 1;
On 2013/10/16 17:01:11, rharding wrote:
> I'd just move this up to the incrementIndex since you don't need/use
it
> elsewhere.

+1

https://codereview.appspot.com/14700043/diff/15001/test/test_onboarding.js
File test/test_onboarding.js (right):

https://codereview.appspot.com/14700043/diff/15001/test/test_onboarding.js#newcode74
test/test_onboarding.js:74: assert.equal(onboard.onbo...

[Gary Poster (gary)]

QA not ok, but if you apply the following patch and write associated
tests, it will be good.

http://paste.ubuntu.com/6247161/

This makes the flag handling much less fragile
(http://localhost:8888/sidebar/:flags:/charmworldv3/onboard/ shows
onboarding as it should, for instance) and disables onboarding for the
fullscreen view, where it will be broken. Please merge this and then
write a few associated tests.

Thank you!

https://codereview.appspot.com/14700043/

[lp:~rharding/juju-gui/qa-ant-onboarding]

1134. By Richard Harding on 2013-10-17

Sync with trunk

1135. By Richard Harding on 2013-10-17

Sync with Ant

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/14700043/

[Anthony Dillon (ya-bo-ng)]

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js
File app/views/onboarding.js (right):

https://codereview.appspot.com/14700043/diff/15001/app/views/onboarding.js#newcode136
app/views/onboarding.js:136: crossHandler: function(ev) {
On 2013/10/16 17:52:32, gary.poster wrote:
> (1) this is also registered for mouseup. Why?
> (2) Other than the blasted documentation blather :-D, this feels like
it would
> be cleaner as separate methods, one for each event. That's a
suggestion: take
> it or leave it.
> (3) .replaceClass(..., ...) could make each type into single calls.
> (4) I hope the close-inspector-click style wins over the -hover or
-normal
> styles, or that they get along somehow. I'll assume they do.

1. The mouse up event calls closeHandler
2. I'll leave this for now but happy to update if required
3. Brilliant, done.
4. The close-inspector-click displays a brighter cross.

https://codereview.appspot.com/14700043/

[lp:~rharding/juju-gui/qa-ant-onboarding]

1136. By Richard Harding on 2013-10-17

Add quick lint

[Richard Harding (rharding)]

*** Submitted:

Add support for an initial onboarding walkthrough

- Submitting for Ant
- Under the feature flag :flags:/onboard

R=Ant, gary.poster
CC=
https://codereview.appspot.com/14700043

https://codereview.appspot.com/14700043/

=== modified file 'app/app.js'
--- app/app.js	2013-10-17 00:17:47 +0000
+++ app/app.js	2013-10-17 15:15:29 +0000
@@ -372,6 +372,7 @@
       this.cookieHandler = null;
 
       this.renderEnvironment = true;
+
       // If this property has a value other than '/' then
       // navigate to it after logging in.
       this.redirectPath = '/';
@@ -1109,13 +1110,37 @@
          */
         callback: function() {
           this.views.environment.instance.rendered();
+          this.initializeOnboarding();
         },
         render: true
       });
+
       next();
     },
 
     /**
+     * Create a 'welcome' message walkthrough for new usersl.
+     *
+     * @method initialize_onboarding
+     */
+    initializeOnboarding: function() {
+      var path = window.location.pathname;
+      // Need to check onboarding exists due to the double dispatch bug.
+      if (!this._onboarding && window.flags.onboard) {
+        if (path === '/' || path === '/:flags:/onboard/') {
+          var paths = this.nsRouter.parse(window.location.toString());
+          path = paths.charmbrowser;
+          if (path === '/sidebar/' ||
+              (this.get('defaultViewmode') === 'sidebar' && path === '/')) {
+            this._onboarding = new Y.juju.views.OnboardingView(
+                {'container': '#onboarding'});
+            this._onboarding.render();
+          }
+        }
+      }
+    },
+
+    /**
      * Object routing support
      *
      * This utility helps map from model objects to routes
@@ -1334,6 +1359,7 @@
     'juju-views',
     'juju-view-environment',
     'juju-view-login',
+    'juju-view-onboarding',
     'juju-landscape',
     'juju-websocket-logging',
     'io',
 
=== added file 'app/assets/images/close-inspector-click.png'
 Binary files app/assets/images/close-inspector-click.png	1970-01-01 00:00:00 +0000 and app/assets/images/close-inspector-click.png	2013-10-17 15:15:29 +0000 differ
=== added file 'app/assets/images/close-inspector-hover.png'
 Binary files app/assets/images/close-inspector-hover.png	1970-01-01 00:00:00 +0000 and app/assets/images/close-inspector-hover.png	2013-10-17 15:15:29 +0000 differ
=== added file 'app/assets/images/close-inspector-normal.png'
 Binary files app/assets/images/close-inspector-normal.png	1970-01-01 00:00:00 +0000 and app/assets/images/close-inspector-normal.png	2013-10-17 15:15:29 +0000 differ
=== added directory 'app/assets/images/non-sprites/onboarding'
=== added file 'app/assets/images/non-sprites/onboarding/2-service-blocks.png'
 Binary files app/assets/images/non-sprites/onboarding/2-service-blocks.png	1970-01-01 00:00:00 +0000 and app/assets/images/non-sprites/onboarding/2-service-blocks.png	2013-10-17 15:15:29 +0000 differ
=== added file 'app/assets/images/non-sprites/onboarding/3-inspector.png'
 Binary files app/assets/images/non-sprites/onboarding/3-inspector.png	1970-01-01 00:00:00 +0000 and app/assets/images/non-sprites/onboarding/3-inspector.png	2013-10-17 15:15:29 +0000 differ
=== added file 'app/assets/images/non-sprites/onboarding/3-service-block.png'
 Binary files app/assets/images/non-sprites/onboarding/3-service-block.png	1970-01-01 00:00:00 +0000 and app/assets/images/non-sprites/onboarding/3-service-block.png	2013-10-17 15:15:29 +0000 differ
=== modified file 'app/index.html'
--- app/index.html	2013-10-17 00:17:47 +0000
+++ app/index.html	2013-10-17 15:15:29 +0000
@@ -101,6 +101,9 @@
           </div>
         </div>
       </div>
+
+      <div id="onboarding"></div>
+
       <div class="cookie-policy" style="display:none;">
         <div class="wrapper">
           <a href="" class="link-cta">Close</a>
 
=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-10-02 16:26:20 +0000
+++ app/modules-debug.js	2013-10-17 15:15:29 +0000
@@ -249,6 +249,10 @@
           fullpath: '/juju-ui/views/login.js'
         },
 
+        'juju-view-onboarding': {
+          fullpath: '/juju-ui/views/onboarding.js'
+        },
+
         'juju-templates': {
           fullpath: '/juju-ui/templates.js'
         },
 
=== added file 'app/templates/onboarding.handlebars'
--- app/templates/onboarding.handlebars	1970-01-01 00:00:00 +0000
+++ app/templates/onboarding.handlebars	2013-10-17 15:15:29 +0000
@@ -0,0 +1,33 @@
+
+<div id="onboarding-background" class="state-0">
+	<div id="onboarding-screen-mask"></div>
+	<div id="onboarding-message">
+	  <a class="onboarding-cross sprite close-inspector-normal" href="" ></a>
+	  <div class="panel panel-0">
+	    <h3 class="header type3">Welcome to Juju</h3>
+	    <p class="text type11">Juju enables you to configure, manage, maintain, deploy and scale efficiently with best-practice Charms on any cloud or your own Ubuntu laptop.</p>
+	  </div>
+	  <div class="panel panel-1">
+	    <h3 class="header type3">Build your environment</h3>
+	    <p class="text type11">The Charm browser has hundreds of Charms allowing you to build complex services which can be visualised in Juju.</p>
+	    <p class=" text type11">Drag them from the Charm browser onto your canvas to start building your environments.</p>
+	  </div>
+	  <div class="panel panel-2">
+	    <h3 class="header type3">Connect services</h3>
+	    <p class="text type11">Configure and deploy your services and connect them with intelligent relationship lines to build your environment.</p>
+	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/2-service-blocks.png" class="service-blocks" />
+	  </div>
+	  <div class="panel panel-3">
+	    <h3 class="header type3">Monitor and manage</h3>
+	    <p class="text type11">The Juju GUI inspector offers comprehensive tools that give you ability to scale out, triage errors and update your services.</p>
+	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/3-service-block.png" class="service-block" />
+	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/3-inspector.png" class="inspector" />
+	  </div>
+	  <ul>
+		<li><a href="" class="onboarding-close">Get started</a></li>
+		<li><a href="" class="onboarding-start highlight">Quick tour of Juju</a></li>
+		<li><a href="" class="onboarding-next highlight">Next</a></li>
+		<li><a href="" class="onboarding-prev">Prev</a></li>
+	  </ul>
+	</div>
+</div>
 \ No newline at end of file
 
=== added file 'app/views/onboarding.js'
--- app/views/onboarding.js	1970-01-01 00:00:00 +0000
+++ app/views/onboarding.js	2013-10-17 15:15:29 +0000
@@ -0,0 +1,210 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/**
+ * Provide the OnboardingView class.
+ *
+ * @module onboarding
+ * @submodule views.onboarding
+ */
+
+YUI.add('juju-view-onboarding', function(Y) {
+
+  var views = Y.namespace('juju.views');
+
+  /**
+   * The OnboardingView class.
+   *
+   * @class OnboardingView
+   */
+  views.OnboardingView = Y.Base.create('OnboardingView', Y.View, [], {
+    template: views.Templates.onboarding,
+    events: {
+      '.onboarding-close': {
+        click: 'closeHandler'
+      },
+      '.onboarding-start': {
+        click: 'nextHandler'
+      },
+      '.onboarding-next': {
+        click: 'nextHandler'
+      },
+      '.onboarding-prev': {
+        click: 'prevHandler'
+      },
+      '.onboarding-cross': {
+        mousedown: 'crossHandler',
+        mouseout: 'crossHandler',
+        mouseover: 'crossHandler',
+        mouseup: 'closeHandler'
+      }
+    },
+    onboardingIndex: 0,
+    states: ['state-0', 'state-1', 'state-2', 'state-3'],
+
+    /**
+     * Onboarding event handler. When clicking the close button,
+     * remove the onboarding and put the user back into the environment,
+     *
+     * @method closeHandler
+     * @param {Object} ev An event object (with a "currentTarget" attribute).
+     * @return {undefined} Mutates only.
+     */
+    closeHandler: function(ev) {
+      ev.halt();
+      var container = this.get('container');
+      container.hide();
+      Y.one('#environment-help').removeClass('hidden');
+    },
+
+    /**
+     * Show the container and hide the enviroment help.
+     *
+     * @method open
+     * @return {undefined} Mutates only.
+     */
+    open: function() {
+      this.onboardingIndex = 0;
+      this.drawContent();
+      this.onboarding.show();
+      Y.one('#environment-help').addClass('hidden');
+    },
+
+    /**
+     * Onboarding event handler. When clicking the next button,
+     * update the index counter, and update to the next step of onboarding.
+     *
+     * @method nextHandler
+     * @param {Object} ev An event object (with a "currentTarget" attribute).
+     * @return {undefined} Mutates only.
+     */
+    nextHandler: function(ev) {
+      ev.halt();
+      this.incrementIndex();
+      this.drawContent();
+    },
+
+    /**
+     * Onboarding event handler. When clicking the prev button,
+     * update the index counter, and update to the prev step of onboarding.
+     *
+     * @method prevHandler
+     * @param {Object} ev An event object (with a "currentTarget" attribute).
+     * @return {undefined} Mutates only.
+     */
+    prevHandler: function(ev) {
+      ev.halt();
+      this.decrementIndex();
+      this.drawContent();
+    },
+
+    /**
+     * Onboarding event handler. When hover and click the close cross.
+     *
+     * @method crossHandler
+     * @param {Object} ev An event object (with a "currentTarget" attribute).
+     * @return {undefined} Mutates only.
+     */
+    crossHandler: function(ev) {
+      var container = this.get('container');
+      var close_button = container.one('.onboarding-cross');
+      switch (ev._event.type) {
+        case 'mouseover':
+          close_button.replaceClass('close-inspector-normal',
+              'close-inspector-hover');
+          break;
+        case 'mouseout':
+          close_button.replaceClass('close-inspector-hover',
+              'close-inspector-normal');
+          break;
+        case 'mousedown':
+          close_button.replaceClass('close-inspector-hover',
+              'close-inspector-click');
+          break;
+      }
+    },
+
+    /**
+     * @method drawContent
+     * @return {undefined} Mutates only.
+     */
+    drawContent: function() {
+      var container = this.get('container');
+      var container_bg = container.one('#onboarding-background');
+
+      this.states.forEach(function(state, idx) {
+        container_bg.removeClass(state);
+      });
+      container_bg.addClass(this.states[this.onboardingIndex]);
+    },
+
+    /**
+     * @method incrementIndex
+     * @return {undefined} Mutates only.
+     */
+    incrementIndex: function() {
+      this.onboardingIndex = Math.min(
+          this.onboardingIndex + 1, this.states.length - 1);
+    },
+
+    /**
+     * @method decrementIndex
+     * @return {undefined} Mutates only.
+     */
+    decrementIndex: function() {
+      this.onboardingIndex = Math.max(this.onboardingIndex - 1, 0);
+
+    },
+
+    /**
+     * Render the page.
+     *
+     * Reveal the mask element, and show the onboarding window.
+     *
+     * @method render
+     * @return {undefined} Mutates only.
+     */
+    render: function() {
+      // In order to have the mask cover everything, it needs to be an
+      // immediate child of the body.  In order for it to render immediately
+      // when the app loads, it needs to be in index.html.
+      this.onboarding = Y.one('body > #onboarding');
+      if (!this.onboarding) {
+        // No mask in the DOM, as is the case in tests.
+        return this;
+      }
+
+      this.get('container').setHTML(this.template());
+      this.open();
+
+      return this;
+    }
+
+  });
+
+
+}, '0.1.0', {
+  requires: [
+    'juju-templates',
+    'juju-view-utils',
+    'node',
+    'view'
+  ]
+});
 
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-10-17 00:17:47 +0000
+++ lib/views/stylesheet.less	2013-10-17 15:15:29 +0000
@@ -2003,6 +2003,178 @@
         font-size: 8pt;
     }
 }
+#onboarding-background {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+
+    #onboarding-screen-mask {
+      display: block;
+      position: absolute;
+      top: 80px;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10000;
+    }
+
+    #onboarding-message {
+        .create-border-radius(@border-radius);
+        display: block;
+        z-index: 10001;
+        position: relative;
+        top: 100px;
+        left: 350px;
+        width: 320px;
+        background-color: @inspector-background-color;
+        padding: 20px;
+
+        .onboarding-cross {
+            float: right;
+        }
+
+        .header {
+            margin-bottom: 20px;
+        }
+
+        .header,
+        .text {
+            color: @charm-panel-configure-title-color;
+        }
+
+        img {
+          position: absolute;
+        }
+
+        .panel {
+          display: none;
+          height: 169px;
+        }
+
+        ul {
+            position: relative;
+            list-style: none;
+            margin-left: 0;
+            height: 57px;
+
+            li {
+              display: inline;
+            }
+
+            a {
+                @box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3);
+                .create-box-shadow(@box-shadow);
+                .create-border-radius(@bws-corner);
+                background-color: @inspector-dark;
+                display: inline-block;
+                height: 40px;
+                margin-top: 17px;
+                padding: 0 30px;
+                color: #fff;
+                line-height: 40px;
+
+                &.onboarding-next,
+                &.onboarding-start,
+                &.onboarding-prev {
+                    float: right;
+                }
+                &.highlight {
+                    background-color: @charm-panel-orange;
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+    &.state-0 {
+        #onboarding-message {
+            .panel-0 {
+                display: block;
+            }
+            ul a.onboarding-next,
+            ul a.onboarding-prev {
+                display: none;
+            }
+        }
+
+    }
+
+    &.state-1 {
+        #onboarding-screen-mask {
+            left: 290px;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-1 {
+                display: block;
+            }
+            ul a.onboarding-next {
+                display: inline-block;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+        }
+    }
+
+    &.state-2 {
+        #onboarding-screen-mask {
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-2 {
+                display: block;
+            }
+            ul a.onboarding-next {
+                display: inline-block;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+            .service-blocks {
+                top: 210px;
+                left: 125px;
+            }
+        }
+    }
+
+    &.state-3 {
+        #onboarding-screen-mask {
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-3 {
+                display: block;
+            }
+            ul a.onboarding-close {
+                background-color: @charm-panel-orange;
+                margin-left: 10px;
+                float: right;
+            }
+            ul a.onboarding-next {
+                display: none;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+            .service-block {
+                top: 320px;
+                left: 90px;
+            }
+            .inspector {
+                right: -370px;
+                top: 0;
+            }
+        }
+    }
+
+}
 .alert {
     letter-spacing: normal;
 }
 
=== modified file 'test/index.html'
--- test/index.html	2013-10-08 23:14:08 +0000
+++ test/index.html	2013-10-17 15:15:29 +0000
@@ -91,6 +91,7 @@
   <script src="test_model.js"></script>
   <script src="test_model_bundle.js"></script>
   <script src="test_model_controller.js"></script>
+  <script src="test_onboarding.js"></script>
   <script src="test_topology.js"></script>
   <script src="test_topology_relation.js"></script>
 
 
=== added file 'test/test_onboarding.js'
--- test/test_onboarding.js	1970-01-01 00:00:00 +0000
+++ test/test_onboarding.js	2013-10-17 15:15:29 +0000
@@ -0,0 +1,164 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+
+(function() {
+
+  describe('onboarding process', function() {
+    var container, env_help, OnboardingView, views, utils, Y;
+
+    before(function(done) {
+      Y = YUI(GlobalConfig).use(
+          'node-event-simulate',
+          'juju-tests-utils',
+          'juju-view-onboarding',
+          function(Y) {
+            utils = Y.namespace('juju-tests.utils');
+            views = Y.namespace('juju.views');
+            OnboardingView = views.OnboardingView;
+            done();
+          });
+    });
+
+    beforeEach(function() {
+      container = utils.makeContainer('onboarding');
+      env_help = utils.makeContainer('environment-help');
+      window.flags.onboard = true;
+    });
+
+    afterEach(function() {
+      container.remove(true);
+      env_help.remove(true);
+      window.flags = {};
+    });
+
+    after(function() {
+
+    });
+
+    it('should exist in the views namespace', function() {
+      assert(views.OnboardingView);
+    });
+
+    it('inits values correctly', function() {
+      var onboard = new OnboardingView();
+      assert.equal(onboard.onboardingIndex, 0);
+    });
+
+    it('increments screen index correctly', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+      onboard.nextHandler({halt: function() {}});
+      assert.equal(onboard.onboardingIndex, 1);
+      onboard.nextHandler({halt: function() {}});
+      assert.equal(onboard.onboardingIndex, 2);
+    });
+
+    it('decrements screen index correctly', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+      onboard.onboardingIndex = 2;
+      onboard.prevHandler({halt: function() {}});
+      assert.equal(onboard.onboardingIndex, 1);
+      onboard.prevHandler({halt: function() {}});
+      assert.equal(onboard.onboardingIndex, 0);
+    });
+
+    it('renders correctly on first load', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+      var background = container.one('#onboarding-background');
+      assert.isTrue(background instanceof Y.Node);
+      assert.isTrue(env_help.hasClass('hidden'));
+      assert.equal(container.getComputedStyle('display'), 'block');
+      assert.isTrue(background.hasClass('state-0'));
+    });
+
+    it('updates background css properly', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+      var background = container.one('#onboarding-background');
+      onboard.nextHandler({halt: function() {}});
+      assert.isTrue(background.hasClass('state-1'), 'should be state 1');
+      onboard.nextHandler({halt: function() {}});
+      assert.isTrue(background.hasClass('state-2'), 'should be 2');
+      onboard.prevHandler({halt: function() {}});
+      assert.isTrue(background.hasClass('state-1'), 'should be 1 again');
+      onboard.prevHandler({halt: function() {}});
+      assert.isTrue(background.hasClass('state-0'), 'should be 0 again');
+      onboard.prevHandler({halt: function() {}});
+      assert.isTrue(background.hasClass('state-0'), 'should stick to 0');
+    });
+
+    it('displays correct stage of onboarding', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+
+      var panel0 = container.one('.panel-0');
+      var panel1 = container.one('.panel-1');
+      var panel2 = container.one('.panel-2');
+      assert.equal(
+          panel0.getComputedStyle('display'), 'block');
+      onboard.nextHandler({halt: function() {}});
+      assert.equal(
+          panel1.getComputedStyle('display'), 'block');
+      onboard.nextHandler({halt: function() {}});
+      assert.equal(
+          panel2.getComputedStyle('display'), 'block');
+      onboard.prevHandler({halt: function() {}});
+      assert.equal(
+          panel1.getComputedStyle('display'), 'block');
+      onboard.prevHandler({halt: function() {}});
+      assert.equal(
+          panel0.getComputedStyle('display'), 'block');
+      onboard.prevHandler({halt: function() {}});
+      assert.equal(
+          panel0.getComputedStyle('display'), 'block');
+    });
+
+    it('closes onboarding', function() {
+      var onboard = new OnboardingView({
+        container: container
+      });
+
+      onboard.render();
+      var onboardingCross = container.one('.onboarding-cross');
+      assert.isTrue(onboardingCross instanceof Y.Node);
+      onboard.closeHandler({halt: function() {}});
+      assert.equal(container.getComputedStyle('display'), 'none');
+      assert.isFalse(env_help.hasClass('hidden'));
+    });
+  });
+})();