Change tabs to work with routes and outlets instead of helpers

When I started working on settings I had a bit different vision on tabs
and I've added that code prematurely. It seems that the best way to go
is to create separate routes and controllers for each tab - that way we
can just rely on Ember.js for customizing, not some custom code in tabs
helpers etc.

assets/scripts/app/controllers.coffee

@@ -50,27 +50,6 @@ Travis.FirstSyncController = Em.Controller.extend
 
 Travis.IndexErrorController = Em.Controller.extend()
 
-Travis.RepoSettingsTabController = Em.ObjectController.extend()
-Travis.RepoSettingsController = Em.ObjectController.extend
-  needs: ['repoSettingsTab']
-  tab: Ember.computed.alias('controllers.repoSettingsTab.model.tab')
-  settings: Ember.computed.alias('model.settings')
-
-  settingsChanged: (->
-    value = @get('settings.maximum_number_of_builds')
-    console.log value
-    if parseInt(value) > 0 || value == '0' || value == 0
-      @set('settings.maximum_number_of_builds_valid', '')
-      @get('model').saveSettings(@get('settings')).then null, ->
-        Travis.flash(error: 'There was an error while saving settings. Please try again.')
-    else
-      @set('settings.maximum_number_of_builds_valid', 'invalid')
-  ).observes('settings.maximum_number_of_builds')
-
-  save: ->
-    @get('model').saveSettings(@get('settings')).then null, ->
-      Travis.flash(error: 'There was an error while saving settings. Please try again.')
-
 require 'controllers/accounts'
 require 'controllers/auth'
 require 'controllers/account'
@@ -82,6 +61,7 @@ require 'controllers/job'
 require 'controllers/profile'
 require 'controllers/repos'
 require 'controllers/repo'
+require 'controllers/repo_settings'
 require 'controllers/stats'
 require 'controllers/current_user'
 require 'controllers/request'

assets/scripts/app/controllers/repo_settings.coffee

@@ -0,0 +1,30 @@
+Travis.RepoSettingsController = Em.ObjectController.extend
+  tabs:
+    index: "General Settings"
+    env_vars: "Environment variables"
+    ssh_key: "Ssh key"
+
+  init: ->
+    @_super.apply this, arguments
+
+    tabs = []
+    @set('_tabs', tabs)
+    for own id, name of @get('tabs')
+      tabs.pushObject Travis.Tab.create(id: id, name: name)
+
+  settings: Ember.computed.alias('model.settings')
+
+  settingsChanged: (->
+    value = @get('settings.maximum_number_of_builds')
+    console.log value
+    if parseInt(value) > 0 || value == '0' || value == 0
+      @set('settings.maximum_number_of_builds_valid', '')
+      @get('model').saveSettings(@get('settings')).then null, ->
+        Travis.flash(error: 'There was an error while saving settings. Please try again.')
+    else
+      @set('settings.maximum_number_of_builds_valid', 'invalid')
+  ).observes('settings.maximum_number_of_builds')
+
+  save: ->
+    @get('model').saveSettings(@get('settings')).then null, ->
+      Travis.flash(error: 'There was an error while saving settings. Please try again.')

assets/scripts/app/helpers/handlebars.coffee

@@ -4,83 +4,33 @@ safe = (string) ->
   new Handlebars.SafeString(string)
 
 Travis.Tab = Ember.Object.extend
-  show: ->
+  url: (->
-    @get('tabs').forEach( (t) -> t.hide() )
+    id = @get('id')
-    @set('visible', true)
+    if id == 'env_vars'
-
+      id
-  hide: ->
+    else
-    @set('visible', false)
+      "repo.settings.#{id}"
+  ).property('id')
 
 Travis.TabsView = Ember.View.extend
   tabBinding: 'controller.tab'
   tabsBinding: 'controller.tabs'
 
-  tabDidChange: (->
-    @activateTab(@get('tab'))
-  ).observes('tab')
-
-  tabsDidChange: (->
-    tab = @get('tab')
-    if tab
-      @activateTab(tab)
-    else if @get('tabs.length')
-      @activateTab(@get('tabs.firstObject.id'))
-  ).observes('tabs.length', 'tabs')
-
-  activateTab: (tabId) ->
-    tab = @get('tabs').findBy('id', tabId)
-
-    return unless tab
-
-    tab.show() unless tab.get('visible')
-
   # TODO: remove hardcoded link
   layout: Ember.Handlebars.compile(
     '<ul class="tabs">' +
-    '  {{#each tab in tabs}}' +
+    '  {{#each tab in _tabs}}' +
     '    <li {{bindAttr class="tab.visible:active"}}>' +
-    '      <h5>{{#link-to "repo.settings.tab" tab.id}}{{tab.name}}{{/link-to}}</h5>' +
+    '      <h5>{{#link-to tab.url}}{{tab.name}}{{/link-to}}</h5>' +
     '    </li>' +
     '  {{/each}}' +
     '</ul>' +
     '{{yield}}')
 
-Travis.TabView = Ember.View.extend
-  attributeBindings: ['style']
-
-  style: (->
-    if !@get('tab.visible')
-      'display: none'
-  ).property('tab.visible')
-
-Ember.Handlebars.registerHelper('travis-tab', (id, name, options) ->
-  controller = this
-  controller.set('tabs', []) unless controller.get('tabs')
-
-  tab = Travis.Tab.create(id: id, name: name, tabs: controller.get('tabs'))
-
-  view = Travis.TabView.create(
-    controller: this
-    tab: tab
-  )
-
-  controller = this
-  Ember.run.schedule('afterRender', ->
-    if controller.get('tabs.length') == 0
-      tab.show()
-    controller.get('tabs').pushObject(tab)
-  )
-
-  Ember.Handlebars.helpers.view.call(this, view, options)
-)
-
-
 Ember.Handlebars.registerHelper('travis-tabs', (options) ->
   template   = options.fn
   delete options.fn
 
-  @set('tabs', [])
-
   view = Travis.TabsView.create(
     controller: this
     template: template

assets/scripts/app/routes.coffee

@@ -64,7 +64,7 @@ Travis.Router.map ->
     # this can't be nested in repo, because we want a set of different
     # templates rendered for settings (for example no "current", "builds", ... tabs)
     @resource 'repo.settings', path: '/:owner/:name/settings', ->
-      @route 'tab', path: ':tab'
+      @route 'index', path: '/'
 
   @route 'first_sync'
   @route 'insufficient_oauth_permissions'
@@ -356,8 +356,8 @@ Travis.RepoSettingsRoute = Travis.Route.extend
     slug = "#{params.owner}/#{params.name}"
     Travis.Repo.fetchBySlug(slug)
 
-  afterModel: (repo) ->
+Travis.RepoSettingsIndexRoute = Travis.Route.extend
-    # I'm using afterModel to fetch settings, because model is not always called.
+  model: ->
-    # If link-to already provides a model, it will be just set as a route context.
+    repo = @modelFor('repo_settings')
     repo.fetchSettings().then (settings) ->
       repo.set('settings', settings)

assets/scripts/app/templates/repo/settings.hbs

@@ -2,32 +2,6 @@
   <h3>Settings: {{#link-to "repo" this}}{{slug}}{{/link-to}}</h3>
 
   {{#travis-tabs}}
-    {{#travis-tab "general" "General Settings"}}
+    {{outlet}}
-      {{#settings-form}}
-        <p class="settings-row">
-          Build only if .travis.yml is present
-          {{travis-switch action="save" active=settings.builds_only_with_travis_yml}}
-        </p>
-
-        <p class="settings-row">
-          Build pushes
-          {{travis-switch action="save" active=settings.build_pushes}}
-        </p>
-
-        <p class="settings-row">
-          Build pull requests
-          {{travis-switch action="save" active=settings.build_pull_requests}}
-        </p>
-
-        <p class="settings-row">
-          <p class="short-settings-element" {{bind-attr class="settings.maximum_number_of_builds_valid"}}>
-            {{input value=settings.maximum_number_of_builds size="4" pattern='/^[0-9]+$/'}}
-          </p>
-          <label>
-            Concurrent builds
-          </label>
-        </p>
-      {{/settings-form}}
-    {{/travis-tab}}
   {{/travis-tabs}}
 </div>

assets/scripts/app/templates/repo/settings/index.hbs

@@ -0,0 +1,25 @@
+{{#settings-form}}
+  <p class="settings-row">
+    Build only if .travis.yml is present
+    {{travis-switch action="save" active=settings.builds_only_with_travis_yml}}
+  </p>
+
+  <p class="settings-row">
+    Build pushes
+    {{travis-switch action="save" active=settings.build_pushes}}
+  </p>
+
+  <p class="settings-row">
+    Build pull requests
+    {{travis-switch action="save" active=settings.build_pull_requests}}
+  </p>
+
+  <p class="settings-row">
+    <p class="short-settings-element" {{bind-attr class="settings.maximum_number_of_builds_valid"}}>
+      {{input value=settings.maximum_number_of_builds size="4" pattern='/^[0-9]+$/'}}
+    </p>
+    <label>
+      Concurrent builds
+    </label>
+  </p>
+{{/settings-form}}