Fix status images popup

After recent refactorings status images popup started to fetch branches
info whenever a repo page was opened, resulting in additional HTTP
requests. Furthermore, because of a way we load branches, it could
result in builds view displaying very old builds, because in API V2 we
essentially download last build for each branch for branches request.

This commit fixes the situation in 2 ways:

1. We wait with downloading branhes till the popup is open
2. We use a V3 requests to download branches and we don't put that data
into the store

app/components/status-images.js

@@ -1,14 +1,51 @@
 import Ember from 'ember';
 import { format as formatStatusImage } from 'travis/utils/status-image-formats';
+import Config from 'travis/config/environment';
 
 export default Ember.Component.extend({
   popup: Ember.inject.service(),
+  auth: Ember.inject.service(),
+  popupNameBinding: 'popup.popupName',
 
   id: 'status-images',
   attributeBindings: ['id'],
   classNames: ['popup', 'status-images'],
   formats: ['Image URL', 'Markdown', 'Textile', 'Rdoc', 'AsciiDoc', 'RST', 'Pod', 'CCTray'],
 
+  branches: function() {
+    let repoId = this.get('repo.id'),
+        popupName = this.get('popupName');
+
+    if(popupName === 'status-images') {
+      let array = Ember.ArrayProxy.create({ content: [] }),
+          apiEndpoint = Config.apiEndpoint,
+          options = {};
+
+      array.set('isLoaded', false);
+
+      if (this.get('auth.signedIn')) {
+        options.headers = {
+          Authorization: "token " + (this.auth.token())
+        };
+      }
+
+      $.ajax(apiEndpoint + "/v3/repo/" + repoId + "/branches?limit=100", options).then(function(response) {
+        if(response.branches.length) {
+          array.pushObjects(response.branches.map((branch) => { return branch.name; }));
+        } else {
+          array.pushObject('master');
+        }
+
+        array.set('isLoaded', true);
+      });
+
+      return array;
+    } else {
+      // if status images popup is not open, don't fetch any branches
+      return [];
+    }
+  }.property('popupName', 'repo'),
+
   actions: {
     close() {
       return this.get('popup').close();

app/services/popup.js

@@ -5,10 +5,12 @@ export default Ember.Service.extend({
     var ref;
     this.close();
     name = (typeof event !== "undefined" && event !== null ? (ref = event.target) != null ? ref.name : void 0 : void 0) || name;
-    return $("#" + name).toggleClass('display');
+    this.set('popupName', name);
+    $("#" + name).toggleClass('display');
   },
 
   close() {
-    return $('.popup').removeClass('display');
+    this.set('popupName', null);
+    $('.popup').removeClass('display');
   }
 });

app/templates/components/status-images.hbs

@@ -4,7 +4,7 @@
   {{#if branches.isLoaded}}
     {{#x-select value=branch}}
       {{#each branches as |branch|}}
-        {{#x-option value=branch.commit.branch}}{{branch.commit.branch}}{{/x-option}}
+        {{#x-option value=branch}}{{branch}}{{/x-option}}
       {{/each}}
     {{/x-select}}
   {{else}}

app/templates/repo.hbs

@@ -42,4 +42,4 @@
 {{/if}}
 {{/repo-wrapper}}
 
-{{status-images repo=repo branches=repo.branches}}
+{{status-images repo=repo}}