Merge branch 'master' into 'add-sentry-js-again-with-vue'

# Conflicts:
#   db/schema.rb

10 files changed, 476 insertions, 107 deletions

diff --git a/spec/javascripts/deploy_keys/components/action_btn_spec.js b/spec/javascripts/deploy_keys/components/action_btn_spec.js
new file mode 100644
index 00000000000..5b93fbc5575
--- /dev/null
+++ b/spec/javascripts/deploy_keys/components/action_btn_spec.js
@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import eventHub from '~/deploy_keys/eventhub';
+import actionBtn from '~/deploy_keys/components/action_btn.vue';
+
+describe('Deploy keys action btn', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  const deployKey = data.enabled_keys[0];
+  let vm;
+
+  beforeEach((done) => {
+    const ActionBtnComponent = Vue.extend(actionBtn);
+
+    vm = new ActionBtnComponent({
+      propsData: {
+        deployKey,
+        type: 'enable',
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  it('renders the type as uppercase', () => {
+    expect(
+      vm.$el.textContent.trim(),
+    ).toBe('Enable');
+  });
+
+  it('sends eventHub event with btn type', (done) => {
+    spyOn(eventHub, '$emit');
+
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        eventHub.$emit,
+      ).toHaveBeenCalledWith('enable.key', deployKey);
+
+      done();
+    });
+  });
+
+  it('shows loading spinner after click', (done) => {
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        vm.$el.querySelector('.fa'),
+      ).toBeDefined();
+
+      done();
+    });
+  });
+
+  it('disables button after click', (done) => {
+    vm.$el.click();
+
+    setTimeout(() => {
+      expect(
+        vm.$el.classList.contains('disabled'),
+      ).toBeTruthy();
+
+      expect(
+        vm.$el.getAttribute('disabled'),
+      ).toBe('disabled');
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/deploy_keys/components/app_spec.js b/spec/javascripts/deploy_keys/components/app_spec.js
new file mode 100644
index 00000000000..700897f50b0
--- /dev/null
+++ b/spec/javascripts/deploy_keys/components/app_spec.js
@@ -0,0 +1,142 @@
+import Vue from 'vue';
+import eventHub from '~/deploy_keys/eventhub';
+import deployKeysApp from '~/deploy_keys/components/app.vue';
+
+describe('Deploy keys app component', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  let vm;
+
+  const deployKeysResponse = (request, next) => {
+    next(request.respondWith(JSON.stringify(data), {
+      status: 200,
+    }));
+  };
+
+  beforeEach((done) => {
+    const Component = Vue.extend(deployKeysApp);
+
+    Vue.http.interceptors.push(deployKeysResponse);
+
+    vm = new Component({
+      propsData: {
+        endpoint: '/test',
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, deployKeysResponse);
+  });
+
+  it('renders loading icon', (done) => {
+    vm.store.keys = {};
+    vm.isLoading = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(0);
+
+      expect(
+        vm.$el.querySelector('.fa-spinner'),
+      ).toBeDefined();
+
+      done();
+    });
+  });
+
+  it('renders keys panels', () => {
+    expect(
+      vm.$el.querySelectorAll('.deploy-keys-panel').length,
+    ).toBe(3);
+  });
+
+  it('does not render key panels when keys object is empty', (done) => {
+    vm.store.keys = {};
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(0);
+
+      done();
+    });
+  });
+
+  it('does not render public panel when empty', (done) => {
+    vm.store.keys.public_keys = [];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.deploy-keys-panel').length,
+      ).toBe(2);
+
+      done();
+    });
+  });
+
+  it('re-fetches deploy keys when enabling a key', (done) => {
+    const key = data.public_keys[0];
+
+    spyOn(vm.service, 'getKeys');
+    spyOn(vm.service, 'enableKey').and.callFake(() => new Promise((resolve) => {
+      resolve();
+
+      setTimeout(() => {
+        expect(vm.service.getKeys).toHaveBeenCalled();
+
+        done();
+      });
+    }));
+
+    eventHub.$emit('enable.key', key);
+
+    expect(vm.service.enableKey).toHaveBeenCalledWith(key.id);
+  });
+
+  it('re-fetches deploy keys when disabling a key', (done) => {
+    const key = data.public_keys[0];
+
+    spyOn(window, 'confirm').and.returnValue(true);
+    spyOn(vm.service, 'getKeys');
+    spyOn(vm.service, 'disableKey').and.callFake(() => new Promise((resolve) => {
+      resolve();
+
+      setTimeout(() => {
+        expect(vm.service.getKeys).toHaveBeenCalled();
+
+        done();
+      });
+    }));
+
+    eventHub.$emit('disable.key', key);
+
+    expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+  });
+
+  it('calls disableKey when removing a key', (done) => {
+    const key = data.public_keys[0];
+
+    spyOn(window, 'confirm').and.returnValue(true);
+    spyOn(vm.service, 'getKeys');
+    spyOn(vm.service, 'disableKey').and.callFake(() => new Promise((resolve) => {
+      resolve();
+
+      setTimeout(() => {
+        expect(vm.service.getKeys).toHaveBeenCalled();
+
+        done();
+      });
+    }));
+
+    eventHub.$emit('remove.key', key);
+
+    expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+  });
+
+  it('hasKeys returns true when there are keys', () => {
+    expect(vm.hasKeys).toEqual(3);
+  });
+});
diff --git a/spec/javascripts/deploy_keys/components/key_spec.js b/spec/javascripts/deploy_keys/components/key_spec.js
new file mode 100644
index 00000000000..793ab8c451d
--- /dev/null
+++ b/spec/javascripts/deploy_keys/components/key_spec.js
@@ -0,0 +1,92 @@
+import Vue from 'vue';
+import DeployKeysStore from '~/deploy_keys/store';
+import key from '~/deploy_keys/components/key.vue';
+
+describe('Deploy keys key', () => {
+  let vm;
+  const KeyComponent = Vue.extend(key);
+  const data = getJSONFixture('deploy_keys/keys.json');
+  const createComponent = (deployKey) => {
+    const store = new DeployKeysStore();
+    store.keys = data;
+
+    vm = new KeyComponent({
+      propsData: {
+        deployKey,
+        store,
+      },
+    }).$mount();
+  };
+
+  describe('enabled key', () => {
+    const deployKey = data.enabled_keys[0];
+
+    beforeEach((done) => {
+      createComponent(deployKey);
+
+      setTimeout(done);
+    });
+
+    it('renders the keys title', () => {
+      expect(
+        vm.$el.querySelector('.title').textContent.trim(),
+      ).toContain('My title');
+    });
+
+    it('renders human friendly formatted created date', () => {
+      expect(
+        vm.$el.querySelector('.key-created-at').textContent.trim(),
+      ).toBe(`created ${gl.utils.getTimeago().format(deployKey.created_at)}`);
+    });
+
+    it('shows remove button', () => {
+      expect(
+        vm.$el.querySelector('.btn').textContent.trim(),
+      ).toBe('Remove');
+    });
+
+    it('shows write access text when key has write access', (done) => {
+      vm.deployKey.can_push = true;
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.write-access-allowed'),
+        ).not.toBeNull();
+
+        expect(
+          vm.$el.querySelector('.write-access-allowed').textContent.trim(),
+        ).toBe('Write access allowed');
+
+        done();
+      });
+    });
+  });
+
+  describe('public keys', () => {
+    const deployKey = data.public_keys[0];
+
+    beforeEach((done) => {
+      createComponent(deployKey);
+
+      setTimeout(done);
+    });
+
+    it('shows enable button', () => {
+      expect(
+        vm.$el.querySelector('.btn').textContent.trim(),
+      ).toBe('Enable');
+    });
+
+    it('shows disable button when key is enabled', (done) => {
+      vm.store.keys.enabled_keys.push(deployKey);
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.btn').textContent.trim(),
+        ).toBe('Disable');
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/deploy_keys/components/keys_panel_spec.js b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
new file mode 100644
index 00000000000..a69b39c35c4
--- /dev/null
+++ b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import DeployKeysStore from '~/deploy_keys/store';
+import deployKeysPanel from '~/deploy_keys/components/keys_panel.vue';
+
+describe('Deploy keys panel', () => {
+  const data = getJSONFixture('deploy_keys/keys.json');
+  let vm;
+
+  beforeEach((done) => {
+    const DeployKeysPanelComponent = Vue.extend(deployKeysPanel);
+    const store = new DeployKeysStore();
+    store.keys = data;
+
+    vm = new DeployKeysPanelComponent({
+      propsData: {
+        title: 'test',
+        keys: data.enabled_keys,
+        showHelpBox: true,
+        store,
+      },
+    }).$mount();
+
+    setTimeout(done);
+  });
+
+  it('renders the title with keys count', () => {
+    expect(
+      vm.$el.querySelector('h5').textContent.trim(),
+    ).toContain('test');
+
+    expect(
+      vm.$el.querySelector('h5').textContent.trim(),
+    ).toContain(`(${vm.keys.length})`);
+  });
+
+  it('renders list of keys', () => {
+    expect(
+      vm.$el.querySelectorAll('li').length,
+    ).toBe(vm.keys.length);
+  });
+
+  it('renders help box if keys are empty', (done) => {
+    vm.keys = [];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.settings-message'),
+      ).toBeDefined();
+
+      expect(
+        vm.$el.querySelector('.settings-message').textContent.trim(),
+      ).toBe('No deploy keys found. Create one with the form above.');
+
+      done();
+    });
+  });
+
+  it('does not render help box if keys are empty & showHelpBox is false', (done) => {
+    vm.keys = [];
+    vm.showHelpBox = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.settings-message'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index 676bf61cfd9..596d812c724 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -4,7 +4,6 @@ import actionsComp from '~/environments/components/environment_actions.vue';
 describe('Actions Component', () => {
   let ActionsComponent;
   let actionsMock;
-  let spy;
   let component;
 
   beforeEach(() => {
@@ -26,13 +25,9 @@ describe('Actions Component', () => {
       },
     ];
 
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
     component = new ActionsComponent({
       propsData: {
         actions: actionsMock,
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
   });
@@ -48,13 +43,6 @@ describe('Actions Component', () => {
     ).toEqual(actionsMock.length);
   });
 
-  it('should call the service when an action is clicked', () => {
-    component.$el.querySelector('.dropdown').click();
-    component.$el.querySelector('.js-manual-action-link').click();
-
-    expect(spy).toHaveBeenCalledWith(actionsMock[0].play_path);
-  });
-
   it('should render a disabled action when it\'s not playable', () => {
     expect(
       component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 25397714a76..eb8e49d81fe 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -4,11 +4,9 @@ import rollbackComp from '~/environments/components/environment_rollback.vue';
 describe('Rollback Component', () => {
   const retryURL = 'https://gitlab.com/retry';
   let RollbackComponent;
-  let spy;
 
   beforeEach(() => {
     RollbackComponent = Vue.extend(rollbackComp);
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
   });
 
   it('Should render Re-deploy label when isLastDeployment is true', () => {
@@ -17,9 +15,6 @@ describe('Rollback Component', () => {
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: true,
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
 
@@ -32,28 +27,9 @@ describe('Rollback Component', () => {
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: false,
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
 
     expect(component.$el.querySelector('span').textContent).toContain('Rollback');
   });
-
-  it('should call the service when the button is clicked', () => {
-    const component = new RollbackComponent({
-      propsData: {
-        retryUrl: retryURL,
-        isLastDeployment: false,
-        service: {
-          postAction: spy,
-        },
-      },
-    }).$mount();
-
-    component.$el.click();
-
-    expect(spy).toHaveBeenCalledWith(retryURL);
-  });
 });
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 942e4aaabd4..8131f1e5b11 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -4,20 +4,15 @@ import stopComp from '~/environments/components/environment_stop.vue';
 describe('Stop Component', () => {
   let StopComponent;
   let component;
-  let spy;
   const stopURL = '/stop';
 
   beforeEach(() => {
     StopComponent = Vue.extend(stopComp);
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
     spyOn(window, 'confirm').and.returnValue(true);
 
     component = new StopComponent({
       propsData: {
         stopUrl: stopURL,
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
   });
@@ -26,9 +21,4 @@ describe('Stop Component', () => {
     expect(component.$el.tagName).toEqual('BUTTON');
     expect(component.$el.getAttribute('title')).toEqual('Stop');
   });
-
-  it('should call the service when an action is clicked', () => {
-    component.$el.click();
-    expect(spy).toHaveBeenCalled();
-  });
 });
diff --git a/spec/javascripts/fixtures/deploy_keys.rb b/spec/javascripts/fixtures/deploy_keys.rb
new file mode 100644
index 00000000000..16e598a4b29
--- /dev/null
+++ b/spec/javascripts/fixtures/deploy_keys.rb
@@ -0,0 +1,36 @@
+require 'spec_helper'
+
+describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project_empty_repo, namespace: namespace, path: 'todos-project') }
+  let(:project2) { create(:empty_project, :internal)}
+
+  before(:all) do
+    clean_frontend_fixtures('deploy_keys/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  render_views
+
+  it 'deploy_keys/keys.json' do |example|
+    create(:deploy_key, public: true)
+    project_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQCdMHEHyhRjbhEZVddFn6lTWdgEy5Q6Bz4nwGB76xWZI5YT/1WJOMEW+sL5zYd31kk7sd3FJ5L9ft8zWMWrr/iWXQikC2cqZK24H1xy+ZUmrRuJD4qGAaIVoyyzBL+avL+lF8J5lg6YSw8gwJY/lX64/vnJHUlWw2n5BF8IFOWhiw== dummy@gitlab.com')
+    internal_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQDNd/UJWhPrpb+b/G5oL109y57yKuCxE+WUGJGYaj7WQKsYRJmLYh1mgjrl+KVyfsWpq4ylOxIfFSnN9xBBFN8mlb0Fma5DC7YsSsibJr3MZ19ZNBprwNcdogET7aW9I0In7Wu5f2KqI6e5W/spJHCy4JVxzVMUvk6Myab0LnJ2iQ== dummy@gitlab.com')
+    create(:deploy_keys_project, project: project, deploy_key: project_key)
+    create(:deploy_keys_project, project: project2, deploy_key: internal_key)
+
+    get :index,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      format: :json
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
index 29370b974af..b532b48a95b 100644
--- a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
+++ b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
@@ -3,7 +3,7 @@
     Dropdown
 
   %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
-    .js-builds-dropdown-list.scrollable-menu
+    %li.js-builds-dropdown-list.scrollable-menu
 
-    .js-builds-dropdown-loading.builds-dropdown-loading.hidden
-      %span.fa.fa-spinner.fa-spin
+    %li.js-builds-dropdown-loading.hidden
+      %span.fa.fa-spinner
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index 2f1154bd999..a4f32a1faed 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -1,81 +1,86 @@
 import Vue from 'vue';
-import { SUCCESS_SVG } from '~/ci_status_icons';
-import Stage from '~/pipelines/components/stage';
+import stage from '~/pipelines/components/stage.vue';
+
+describe('Pipelines stage component', () => {
+  let StageComponent;
+  let component;
+
+  beforeEach(() => {
+    StageComponent = Vue.extend(stage);
+
+    component = new StageComponent({
+      propsData: {
+        stage: {
+          status: {
+            group: 'success',
+            icon: 'icon_status_success',
+            title: 'success',
+          },
+          dropdown_path: 'foo',
+        },
+        updateDropdown: false,
+      },
+    }).$mount();
+  });
 
-function minify(string) {
-  return string.replace(/\s/g, '');
-}
+  it('should render a dropdown with the status icon', () => {
+    expect(component.$el.getAttribute('class')).toEqual('dropdown');
+    expect(component.$el.querySelector('svg')).toBeDefined();
+    expect(component.$el.querySelector('button').getAttribute('data-toggle')).toEqual('dropdown');
+  });
 
-describe('Pipelines Stage', () => {
-  describe('data', () => {
-    let stageReturnValue;
+  describe('with successfull request', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({ html: 'foo' }), {
+        status: 200,
+      }));
+    };
 
     beforeEach(() => {
-      stageReturnValue = Stage.data();
+      Vue.http.interceptors.push(interceptor);
     });
 
-    it('should return object with .builds and .spinner', () => {
-      expect(stageReturnValue).toEqual({
-        builds: '',
-        spinner: '<span class="fa fa-spinner fa-spin"></span>',
-      });
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, interceptor,
+      );
     });
-  });
 
-  describe('computed', () => {
-    describe('svgHTML', function () {
-      let stage;
-      let svgHTML;
+    it('should render the received data', (done) => {
+      component.$el.querySelector('button').click();
 
-      beforeEach(() => {
-        stage = { stage: { status: { icon: 'icon_status_success' } } };
-
-        svgHTML = Stage.computed.svgHTML.call(stage);
-      });
-
-      it("should return the correct icon for the stage's status", () => {
-        expect(svgHTML).toBe(SUCCESS_SVG);
-      });
+      setTimeout(() => {
+        expect(
+          component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
+        ).toEqual('foo');
+        done();
+      }, 0);
     });
   });
 
-  describe('when mounted', () => {
-    let StageComponent;
-    let renderedComponent;
-    let stage;
+  describe('when request fails', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({}), {
+        status: 500,
+      }));
+    };
 
     beforeEach(() => {
-      stage = { status: { icon: 'icon_status_success' } };
-
-      StageComponent = Vue.extend(Stage);
-
-      renderedComponent = new StageComponent({
-        propsData: {
-          stage,
-        },
-      }).$mount();
+      Vue.http.interceptors.push(interceptor);
     });
 
-    it('should render the correct status svg', () => {
-      const minifiedComponent = minify(renderedComponent.$el.outerHTML);
-      const expectedSVG = minify(SUCCESS_SVG);
-
-      expect(minifiedComponent).toContain(expectedSVG);
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, interceptor,
+      );
     });
-  });
-
-  describe('when request fails', () => {
-    it('closes dropdown', () => {
-      spyOn($, 'ajax').and.callFake(options => options.error());
-      const StageComponent = Vue.extend(Stage);
 
-      const component = new StageComponent({
-        propsData: { stage: { status: { icon: 'foo' } } },
-      }).$mount();
+    it('should close the dropdown', () => {
+      component.$el.click();
 
-      expect(
-        component.$el.classList.contains('open'),
-      ).toEqual(false);
+      setTimeout(() => {
+        expect(component.$el.classList.contains('open')).toEqual(false);
+      }, 0);
     });
   });
 });