Add Vue with async deploy keys

app/assets/javascripts/dispatcher.js

@@ -48,6 +48,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
+import SettingsDeployKeys from './settings/settings_repository';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -343,6 +344,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
           // Initialize Protected Tag Settings
           new ProtectedTagCreate();
           new ProtectedTagEditList();
+          // Initialize deploy key ajax call
+          new SettingsDeployKeys();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();

app/assets/javascripts/settings/settings_repository.js

+/* eslint-disable no-new */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class SettingsDeployKeys {
+  constructor() {
+    this.initVue();
+  }
+
+  deployKeyRowTemplate() {
+    return `
+      <li>
+        <div class="pull-left append-right-10 hidden-xs">
+          <i aria-hidden="true" class="fa fa-key key-icon"></i>
+        </div>
+        <div class="deploy-key-content key-list-item-info">
+          <strong class="title">
+            {{deployKey.title}}
+          </strong>
+          <div class="description">
+            {{deployKey.fingerprint}}
+          </div>
+        </div>
+        <div class="deploy-key-content prepend-left-default deploy-key-projects">
+          <a class="label deploy-project-label" :href="project.full_path" v-for="project in deployKey.projects">{{project.full_name}}</a>
+        </div>
+        <div class="deploy-key-content">
+          <span class="key-created-at">
+            created {{deployKey.created_at}}
+          </span>
+          <div class="visible-xs-block visible-sm-block"></div>
+          <a v-if="!enabled" class="btn btn-sm prepend-left-10" rel="nofollow" data-method="put" href="enableURL">Enable
+</a>
+          <a v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned" class="btn btn-warning btn-sm prepend-left-10" rel="nofollow" data-method="put" :href="removeURL">Remove</a>
+          <a v-else class="btn btn-warning btn-sm prepend-left-10" rel="nofollow" data-method="put" :href="disableURL">Disable</a>
+        </div>
+      </li>`
+  }
+
+  deployKeyRowComponent() {
+    const self = this;
+    return {
+      props: {
+        deployKey: Object,
+        enabled: Boolean
+      },
+
+      computed: {
+        disableURL() {
+          return self.disableEndpoint.replace(':id', this.deployKey.id);
+        },
+
+        enableURL() {
+         return self.enableEndpoint.replace(':id', this.deployKey.id); 
+        }
+      },
+
+      template: this.deployKeyRowTemplate()
+    }
+  }
+
+  initVue() {
+    const self = this;
+    const el = document.getElementById('js-deploy-keys');
+    const endpoint = el.dataset.endpoint;
+    this.jsonEndpoint = `${endpoint}.json`;
+    this.disableEndpoint = `${endpoint}/:id/disable`;
+    this.enableEndpoint = `${endpoint}/:id/enable`;
+    new Vue({
+      el: el,
+      components: {
+        deployKeyRow: self.deployKeyRowComponent()
+      },
+      data () {
+        return {
+          enabledKeys: [],
+          availableKeys: []
+        }
+      },
+      created () {
+        this.$http.get(self.jsonEndpoint)
+          .then((res) => {
+            const keys = JSON.parse(res.body);
+            this.enabledKeys = keys.enabled_keys;
+            this.availableKeys = keys.available_project_keys;
+          });
+      }
+    })
+  }
+} 
\ No newline at end of file

app/views/projects/deploy_keys/_index.html.haml

@@ -10,25 +10,16 @@
     = render @deploy_keys.form_partial_path
   .col-lg-9.col-lg-offset-3
     %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys
+  #js-deploy-keys.col-lg-9.col-lg-offset-3.append-bottom-default{data:{endpoint: namespace_project_deploy_keys_path}}
     %h5.prepend-top-0
-      Enabled deploy keys for this project (#{@deploy_keys.enabled_keys_size})
-    - if @deploy_keys.any_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.enabled_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
+      Enabled deploy keys for this project ({{enabledKeys.length}})
+    %ul.well-list{"v-if" => "enabledKeys.length"}
+      %deploy-key-row{"v-for" => "deployKey in enabledKeys", ":deploy-key" => "deployKey", ":enabled" =>"true"}
+    .settings-message.text-center{"v-else" => true}
+      No deploy keys found. Create one with the form above.
+    %h5.prepend-top-0
+      Deploy keys from projects you have access to ({{availableKeys.length}})
+    %ul.well-list{"v-if" => "availableKeys.length"}
+      %deploy-key-row{"v-for" => "deployKey in availableKeys", ":deploy-key" => "deployKey", ":enabled" =>"false"}
+    .settings-message.text-center{"v-else" => true}
       No deploy keys found. Create one with the form above.
-    %h5.prepend-top-default
-      Deploy keys from projects you have access to (#{@deploy_keys.available_project_keys_size})
-    - if @deploy_keys.any_available_project_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_project_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
-        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
-    - if @deploy_keys.any_available_public_keys_enabled?
-      %h5.prepend-top-default
-        Public deploy keys available to any project (#{@deploy_keys.available_public_keys_size})
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_public_keys, as: :deploy_key