From e6800c80c6c8add943fe2f50eb52f4c789e76d0f Mon Sep 17 00:00:00 2001
From: Piotr Sarnacki <drogus@gmail.com>
Date: Fri, 14 Nov 2014 00:42:18 +0100
Subject: [PATCH] Refactor our layout handling

Layout handling in travis-web was implemented in a dynamic way, so we
could change a main layout from any of the routes. This needed a
`rerender` call which was making things harder and needed some hacks. It
also broke a few transitions when upgrading to 1.8.1.

After examining our usage of layouts I've noticed that we don't need to
change the entire layout dynamically and instead we can set layout on
root routes (like "index", "profile" and other root routes).
---
 assets/scripts/app/controllers.coffee         |  8 ----
 assets/scripts/app/controllers/repos.coffee   |  5 +++
 assets/scripts/app/routes.coffee              | 39 ++++++++-----------
 assets/scripts/app/templates/accounts.hbs     |  1 +
 assets/scripts/app/templates/application.hbs  |  1 +
 assets/scripts/app/templates/index.hbs        |  1 +
 assets/scripts/app/templates/layouts/home.hbs |  2 +-
 .../scripts/app/templates/layouts/profile.hbs |  2 +-
 .../scripts/app/templates/layouts/simple.hbs  |  2 +-
 assets/scripts/app/templates/layouts/top.hbs  |  3 --
 .../scripts/app/templates/no_owned_repos.hbs  |  2 +-
 assets/scripts/app/templates/profile.hbs      |  1 +
 .../scripts/app/templates/profile/loading.hbs |  1 +
 assets/scripts/app/templates/profile/tabs.hbs |  2 +-
 .../scripts/app/templates/repos/list/tabs.hbs |  8 ++--
 assets/scripts/app/views.coffee               | 10 +++++
 assets/scripts/app/views/accounts.coffee      |  2 +-
 assets/scripts/app/views/application.coffee   |  7 ----
 assets/scripts/app/views/profile.coffee       |  2 +
 assets/scripts/app/views/repo/list.coffee     |  4 --
 assets/styles/app/loading.sass                |  2 +
 21 files changed, 51 insertions(+), 54 deletions(-)
 create mode 100644 assets/scripts/app/templates/accounts.hbs
 create mode 100644 assets/scripts/app/templates/application.hbs
 create mode 100644 assets/scripts/app/templates/index.hbs
 create mode 100644 assets/scripts/app/templates/profile.hbs
 create mode 100644 assets/scripts/app/templates/profile/loading.hbs

diff --git a/assets/scripts/app/controllers.coffee b/assets/scripts/app/controllers.coffee
index a8c9be07..79e5392b 100644
--- a/assets/scripts/app/controllers.coffee
+++ b/assets/scripts/app/controllers.coffee
@@ -25,14 +25,6 @@ Travis.TopController = Em.Controller.extend
     Travis.get('authState') == 'signing-in'
   ).property('Travis.authState')
 
-Travis.ApplicationController = Em.Controller.extend
-  templateName: 'layouts/home'
-
-  connectLayout: (name) ->
-    name = "layouts/#{name}"
-    if @get('templateName') != name
-      @set('templateName', name)
-
 Travis.MainController = Em.Controller.extend()
 Travis.StatsLayoutController = Em.Controller.extend()
 Travis.ProfileLayoutController = Em.Controller.extend()
diff --git a/assets/scripts/app/controllers/repos.coffee b/assets/scripts/app/controllers/repos.coffee
index 8bb5a377..7935067b 100644
--- a/assets/scripts/app/controllers/repos.coffee
+++ b/assets/scripts/app/controllers/repos.coffee
@@ -1,6 +1,11 @@
 require 'travis/limited_array'
 
 Travis.ReposController = Ember.ArrayController.extend
+  actions:
+    activate: (name) ->
+      @transitionToRoot()
+      @activate(name)
+
   defaultTab: ( ->
     if @get('currentUser.id')
       'owned'
diff --git a/assets/scripts/app/routes.coffee b/assets/scripts/app/routes.coffee
index 2ce50a2e..1b308214 100644
--- a/assets/scripts/app/routes.coffee
+++ b/assets/scripts/app/routes.coffee
@@ -74,8 +74,9 @@ Travis.Router.map ->
   @route 'auth', path: '/auth'
 
   @resource 'profile', path: '/profile', ->
-    @resource 'account', path: '/:login'
-    @route 'info', path: '/info'
+    @resource 'accounts', path: '/', ->
+      @resource 'account', path: '/:login'
+      @route 'info', path: '/info'
 
   @route 'notFound', path: "/*path"
 
@@ -130,7 +131,6 @@ Travis.SimpleLayoutRoute = Travis.Route.extend
   setupController: ->
     $('body').attr('id', 'home')
     @container.lookup('controller:repos').activate()
-    @container.lookup('controller:application').connectLayout 'simple'
     @_super.apply(this, arguments)
 
   renderTemplate: ->
@@ -295,11 +295,12 @@ Travis.IndexRoute = Travis.Route.extend
   renderTemplate: ->
     $('body').attr('id', 'home')
 
-    @render 'repos',   outlet: 'left'
+    @_super.apply this, arguments
+
+    @render 'repos',   outlet: 'left', into: 'index'
 
   setupController: (controller)->
     @container.lookup('controller:repos').activate()
-    @container.lookup('controller:application').connectLayout 'home'
 
 Travis.StatsRoute = Travis.Route.extend
   renderTemplate: ->
@@ -307,42 +308,39 @@ Travis.StatsRoute = Travis.Route.extend
 
     @render 'stats'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
 Travis.NotFoundRoute = Travis.Route.extend
   renderTemplate: ->
     $('body').attr('id', 'not-found')
 
     @render 'not_found'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
 Travis.ProfileRoute = Travis.Route.extend
   needsAuth: true
 
   setupController: (controller, model) ->
-    @container.lookup('controller:application').connectLayout('profile')
     @controllerFor('accounts').set('model', model)
 
+  renderTemplate: ->
+    $('body').attr('id', 'profile')
+    @_super.apply(this, arguments)
+    @render 'loading', outlet: 'left', into: 'profile'
+
+Travis.AccountsRoute = Travis.Route.extend
   model: ->
     Travis.Account.fetch(all: true)
 
   renderTemplate: ->
-    $('body').attr('id', 'profile')
-    @render 'accounts', outlet: 'left'
-
     @_super.apply(this, arguments)
+    @render 'profile_accounts', outlet: 'left', into: 'profile'
 
-Travis.ProfileIndexRoute = Travis.Route.extend
+Travis.AccountsIndexRoute = Travis.Route.extend
   redirect: ->
     # TODO: setting accounts model in ProfileRoute is wrong, but
     #       at this stage it's better than what we had before
-    accounts = @modelFor('profile')
+    accounts = @modelFor('accounts')
     login    = @controllerFor('currentUser').get('login')
     account  = accounts.find (account) -> account.get('login') == login
-    @transitionTo 'account', account
+    @replaceWith 'account', account
 
 Travis.AccountRoute = Travis.Route.extend
   setupController: (controller, account) ->
@@ -351,7 +349,7 @@ Travis.AccountRoute = Travis.Route.extend
     @controllerFor('profile').activate 'hooks'
 
   model: (params) ->
-    @modelFor('profile').find (account) -> account.get('login') == params.login
+    @modelFor('accounts').find (account) -> account.get('login') == params.login
 
   serialize: (account) ->
     if account && account.get
@@ -372,9 +370,6 @@ Travis.AuthRoute = Travis.Route.extend
 
     @render 'auth.signin'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
   deactivate: ->
     @controllerFor('auth').set('redirected', false)
 
diff --git a/assets/scripts/app/templates/accounts.hbs b/assets/scripts/app/templates/accounts.hbs
new file mode 100644
index 00000000..c24cd689
--- /dev/null
+++ b/assets/scripts/app/templates/accounts.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/assets/scripts/app/templates/application.hbs b/assets/scripts/app/templates/application.hbs
new file mode 100644
index 00000000..c24cd689
--- /dev/null
+++ b/assets/scripts/app/templates/application.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/assets/scripts/app/templates/index.hbs b/assets/scripts/app/templates/index.hbs
new file mode 100644
index 00000000..c24cd689
--- /dev/null
+++ b/assets/scripts/app/templates/index.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/assets/scripts/app/templates/layouts/home.hbs b/assets/scripts/app/templates/layouts/home.hbs
index 4e6fc0fe..3ce0b50f 100644
--- a/assets/scripts/app/templates/layouts/home.hbs
+++ b/assets/scripts/app/templates/layouts/home.hbs
@@ -8,5 +8,5 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet}}
+  {{yield}}
 </div>
diff --git a/assets/scripts/app/templates/layouts/profile.hbs b/assets/scripts/app/templates/layouts/profile.hbs
index 2a908308..9349d495 100644
--- a/assets/scripts/app/templates/layouts/profile.hbs
+++ b/assets/scripts/app/templates/layouts/profile.hbs
@@ -8,7 +8,7 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet main}}
+  {{yield}}
 </div>
 
 <div id="right">
diff --git a/assets/scripts/app/templates/layouts/simple.hbs b/assets/scripts/app/templates/layouts/simple.hbs
index cd930a31..839a526a 100644
--- a/assets/scripts/app/templates/layouts/simple.hbs
+++ b/assets/scripts/app/templates/layouts/simple.hbs
@@ -4,5 +4,5 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet main}}
+  {{yield}}
 </div>
diff --git a/assets/scripts/app/templates/layouts/top.hbs b/assets/scripts/app/templates/layouts/top.hbs
index 7f81285d..bc9c1e53 100644
--- a/assets/scripts/app/templates/layouts/top.hbs
+++ b/assets/scripts/app/templates/layouts/top.hbs
@@ -45,9 +45,6 @@
       {{/if}}
     </p>
     <ul>
-      <li>
-        {{#link-to "profile.index" class="signed-in"}}Accounts{{/link-to}}
-      </li>
       <li>
         <a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
       </li>
diff --git a/assets/scripts/app/templates/no_owned_repos.hbs b/assets/scripts/app/templates/no_owned_repos.hbs
index 534f3481..5e0127cf 100644
--- a/assets/scripts/app/templates/no_owned_repos.hbs
+++ b/assets/scripts/app/templates/no_owned_repos.hbs
@@ -11,7 +11,7 @@
     <div class="column-right">
       <span class="steps">Step 1: &nbsp; Enabling your projects</span>
       <p>
-        Start by going to your {{#link-to "profile.index"}}profile{{/link-to}} and enable one of your projects. We've been
+        Start by going to your {{#link-to "profile"}}profile{{/link-to}} and enable one of your projects. We've been
         synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it.
       </p>
     </div>
diff --git a/assets/scripts/app/templates/profile.hbs b/assets/scripts/app/templates/profile.hbs
new file mode 100644
index 00000000..c24cd689
--- /dev/null
+++ b/assets/scripts/app/templates/profile.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/assets/scripts/app/templates/profile/loading.hbs b/assets/scripts/app/templates/profile/loading.hbs
new file mode 100644
index 00000000..0277cf2e
--- /dev/null
+++ b/assets/scripts/app/templates/profile/loading.hbs
@@ -0,0 +1 @@
+<div class="loading"><span>Loading</span></div>
diff --git a/assets/scripts/app/templates/profile/tabs.hbs b/assets/scripts/app/templates/profile/tabs.hbs
index ac00dfcf..21ee1799 100644
--- a/assets/scripts/app/templates/profile/tabs.hbs
+++ b/assets/scripts/app/templates/profile/tabs.hbs
@@ -7,7 +7,7 @@
   {{#if view.displayUser}}
     <li id="tab_user" {{bind-attr class="view.classUser"}}>
       <h5>
-        {{#link-to "profile.info"}}Profile{{/link-to}}
+        {{#link-to "accounts.info"}}Profile{{/link-to}}
       </h5>
     </li>
   {{/if}}
diff --git a/assets/scripts/app/templates/repos/list/tabs.hbs b/assets/scripts/app/templates/repos/list/tabs.hbs
index 1cc6ff3b..44dde1f0 100644
--- a/assets/scripts/app/templates/repos/list/tabs.hbs
+++ b/assets/scripts/app/templates/repos/list/tabs.hbs
@@ -1,17 +1,17 @@
 <ul class="tabs">
   <li id="tab_owned" {{bind-attr class="view.classOwned"}}>
-    <h5><a {{action "activate" "owned" target="view"}}>My Repositories</a></h5>
+    <h5><a {{action "activate" "owned"}}>My Repositories</a></h5>
   </li>
 
   <li id="tab_recent" {{bind-attr class="view.classRecent"}}>
-    <h5><a {{action "activate" "recent" target="view"}}>Recent</a></h5>
+    <h5><a {{action "activate" "recent"}}>Recent</a></h5>
   </li>
 
   <li id="tab_search" {{bind-attr class="view.classSearch"}}>
-    <h5><a {{action "activate" "search" target="view"}}>Search</a></h5>
+    <h5><a {{action "activate" "search"}}>Search</a></h5>
   </li>
 
   <li id="tab_new" {{bind-attr class="view.classNew"}}>
-    <h5>{{#link-to "profile.index" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
+    <h5>{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
   </li>
 </ul>
diff --git a/assets/scripts/app/views.coffee b/assets/scripts/app/views.coffee
index bc04546c..cf505c91 100644
--- a/assets/scripts/app/views.coffee
+++ b/assets/scripts/app/views.coffee
@@ -21,10 +21,20 @@ Em.View.reopen
 
       $('.popup').removeClass('display')
 
+Travis.IndexView = Travis.View.extend
+  layoutName: 'layouts/home'
+  classNames: ['application']
+
 Travis.GettingStartedView = Travis.View.extend
   templateName: 'no_owned_repos'
 
+Travis.InsufficientOauthPermissionsView = Travis.View.extend
+  layoutName: 'layouts/simple'
+  classNames: ['application']
+
 Travis.FirstSyncView = Travis.View.extend
+  layoutName: 'layouts/simple'
+  classNames: ['application']
   didInsertElement: ->
     this.addObserver('controller.isSyncing', this, this.isSyncingDidChange)
 
diff --git a/assets/scripts/app/views/accounts.coffee b/assets/scripts/app/views/accounts.coffee
index cceb899b..3713eaf4 100644
--- a/assets/scripts/app/views/accounts.coffee
+++ b/assets/scripts/app/views/accounts.coffee
@@ -1,5 +1,5 @@
 @Travis.reopen
-  AccountsView: Travis.View.extend
+  ProfileAccountsView: Travis.View.extend
     tabBinding: 'controller.tab'
     templateName: 'profile/accounts'
     classAccounts: (->
diff --git a/assets/scripts/app/views/application.coffee b/assets/scripts/app/views/application.coffee
index aa07c99e..09a293a6 100644
--- a/assets/scripts/app/views/application.coffee
+++ b/assets/scripts/app/views/application.coffee
@@ -1,12 +1,5 @@
 Travis.reopen
   ApplicationView: Travis.View.extend
-    templateName: Ember.computed.alias('controller.templateName')
-    classNames: ['application']
-
-    templateNameDidChange: (->
-      @rerender()
-    ).observes('templateName')
-
     click: (event) ->
       # TODO: this solves the case of closing menus and popups,
       #       but I would like to rewrite it later, not sure how
diff --git a/assets/scripts/app/views/profile.coffee b/assets/scripts/app/views/profile.coffee
index e1dcbc67..0c4d7122 100644
--- a/assets/scripts/app/views/profile.coffee
+++ b/assets/scripts/app/views/profile.coffee
@@ -1,6 +1,8 @@
 Travis.reopen
   ProfileView: Travis.View.extend
     templateName: 'profile/show'
+    layoutName: 'layouts/profile'
+    classNames: ['application']
     accountBinding: 'controller.account'
 
     name: (->
diff --git a/assets/scripts/app/views/repo/list.coffee b/assets/scripts/app/views/repo/list.coffee
index e4867ae6..9b130163 100644
--- a/assets/scripts/app/views/repo/list.coffee
+++ b/assets/scripts/app/views/repo/list.coffee
@@ -29,10 +29,6 @@
     tabBinding: 'controller.tab'
     currentUserBinding: 'controller.currentUser.id'
 
-    activate: (name) ->
-      @get('controller').transitionToRoot()
-      @get('controller').activate(name)
-
     classRecent: (->
       'active' if @get('tab') == 'recent'
     ).property('tab')
diff --git a/assets/styles/app/loading.sass b/assets/styles/app/loading.sass
index a34b7f22..c3371a4e 100644
--- a/assets/styles/app/loading.sass
+++ b/assets/styles/app/loading.sass
@@ -17,3 +17,5 @@ span.loading, span.saving
   color: $color-text-lighter
   background: inline-image('ui/spinner.svg') no-repeat right 4px
 
+#profile #left .loading
+  padding-top: 30px