Make deploy keys table more clearly structured

4 files changed, 184 insertions, 150 deletions

diff --git a/spec/javascripts/deploy_keys/components/action_btn_spec.js b/spec/javascripts/deploy_keys/components/action_btn_spec.js
index 7025c3d836c..5bf72cc0018 100644
--- a/spec/javascripts/deploy_keys/components/action_btn_spec.js
+++ b/spec/javascripts/deploy_keys/components/action_btn_spec.js
@@ -7,62 +7,64 @@ describe('Deploy keys action btn', () => {
   const deployKey = data.enabled_keys[0];
   let vm;
 
-  beforeEach((done) => {
-    const ActionBtnComponent = Vue.extend(actionBtn);
-
-    vm = new ActionBtnComponent({
-      propsData: {
-        deployKey,
-        type: 'enable',
+  beforeEach(done => {
+    const ActionBtnComponent = Vue.extend({
+      components: {
+        actionBtn,
+      },
+      data() {
+        return {
+          deployKey,
+        };
       },
-    }).$mount();
+      template: `
+        <action-btn
+          :deploy-key="deployKey"
+          type="enable">
+            Enable
+        </action-btn>`,
+    });
+
+    vm = new ActionBtnComponent().$mount();
 
-    setTimeout(done);
+    Vue.nextTick()
+      .then(done)
+      .catch(done.fail);
   });
 
-  it('renders the type as uppercase', () => {
-    expect(
-      vm.$el.textContent.trim(),
-    ).toBe('Enable');
+  it('renders the default slot', () => {
+    expect(vm.$el.textContent.trim()).toBe('Enable');
   });
 
-  it('sends eventHub event with btn type', (done) => {
+  it('sends eventHub event with btn type', done => {
     spyOn(eventHub, '$emit');
 
     vm.$el.click();
 
-    setTimeout(() => {
-      expect(
-        eventHub.$emit,
-      ).toHaveBeenCalledWith('enable.key', deployKey, jasmine.anything());
+    Vue.nextTick(() => {
+      expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', deployKey, jasmine.anything());
 
       done();
     });
   });
 
-  it('shows loading spinner after click', (done) => {
+  it('shows loading spinner after click', done => {
     vm.$el.click();
 
-    setTimeout(() => {
-      expect(
-        vm.$el.querySelector('.fa'),
-      ).toBeDefined();
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.fa')).toBeDefined();
 
       done();
     });
   });
 
-  it('disables button after click', (done) => {
+  it('disables button after click', done => {
     vm.$el.click();
 
-    setTimeout(() => {
-      expect(
-        vm.$el.classList.contains('disabled'),
-      ).toBeTruthy();
+    Vue.nextTick(() => {
+      expect(vm.$el.classList.contains('disabled')).toBeTruthy();
 
-      expect(
-        vm.$el.getAttribute('disabled'),
-      ).toBe('disabled');
+      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
index b870f87eab9..3f9e25a8862 100644
--- a/spec/javascripts/deploy_keys/components/app_spec.js
+++ b/spec/javascripts/deploy_keys/components/app_spec.js
@@ -8,12 +8,14 @@ describe('Deploy keys app component', () => {
   let vm;
 
   const deployKeysResponse = (request, next) => {
-    next(request.respondWith(JSON.stringify(data), {
-      status: 200,
-    }));
+    next(
+      request.respondWith(JSON.stringify(data), {
+        status: 200,
+      }),
+    );
   };
 
-  beforeEach((done) => {
+  beforeEach(done => {
     const Component = Vue.extend(deployKeysApp);
 
     Vue.http.interceptors.push(deployKeysResponse);
@@ -21,6 +23,7 @@ describe('Deploy keys app component', () => {
     vm = new Component({
       propsData: {
         endpoint: '/test',
+        projectId: '8',
       },
     }).$mount();
 
@@ -31,117 +34,112 @@ describe('Deploy keys app component', () => {
     Vue.http.interceptors = _.without(Vue.http.interceptors, deployKeysResponse);
   });
 
-  it('renders loading icon', (done) => {
+  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.querySelectorAll('.deploy-keys .nav-links li').length).toBe(0);
 
-      expect(
-        vm.$el.querySelector('.fa-spinner'),
-      ).toBeDefined();
+      expect(vm.$el.querySelector('.fa-spinner')).toBeDefined();
 
       done();
     });
   });
 
   it('renders keys panels', () => {
-    expect(
-      vm.$el.querySelectorAll('.deploy-keys-panel').length,
-    ).toBe(3);
+    expect(vm.$el.querySelectorAll('.deploy-keys .nav-links li').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('renders the titles with keys count', () => {
+    const textContent = selector => {
+      const element = vm.$el.querySelector(`${selector}`);
+
+      expect(element).not.toBeNull();
+      return element.textContent.trim();
+    };
+
+    expect(textContent('.js-deployKeys-tab-enabled_keys')).toContain('Enabled deploy keys');
+    expect(textContent('.js-deployKeys-tab-available_project_keys')).toContain(
+      'Privately accessible deploy keys',
+    );
+    expect(textContent('.js-deployKeys-tab-public_keys')).toContain(
+      'Publicly accessible deploy keys',
+    );
+
+    expect(textContent('.js-deployKeys-tab-enabled_keys .badge')).toBe(
+      `${vm.store.keys.enabled_keys.length}`,
+    );
+    expect(textContent('.js-deployKeys-tab-available_project_keys .badge')).toBe(
+      `${vm.store.keys.available_project_keys.length}`,
+    );
+    expect(textContent('.js-deployKeys-tab-public_keys .badge')).toBe(
+      `${vm.store.keys.public_keys.length}`,
+    );
   });
 
-  it('does not render public panel when empty', (done) => {
-    vm.store.keys.public_keys = [];
+  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(2);
+      expect(vm.$el.querySelectorAll('.deploy-keys .nav-links li').length).toBe(0);
 
       done();
     });
   });
 
-  it('re-fetches deploy keys when enabling a key', (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();
-      });
-    }));
+    spyOn(vm.service, 'enableKey').and.callFake(() => Promise.resolve());
 
     eventHub.$emit('enable.key', key);
 
-    expect(vm.service.enableKey).toHaveBeenCalledWith(key.id);
+    Vue.nextTick(() => {
+      expect(vm.service.enableKey).toHaveBeenCalledWith(key.id);
+      expect(vm.service.getKeys).toHaveBeenCalled();
+      done();
+    });
   });
 
-  it('re-fetches deploy keys when disabling a key', (done) => {
+  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();
-      });
-    }));
+    spyOn(vm.service, 'disableKey').and.callFake(() => Promise.resolve());
 
     eventHub.$emit('disable.key', key);
 
-    expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+    Vue.nextTick(() => {
+      expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+      expect(vm.service.getKeys).toHaveBeenCalled();
+      done();
+    });
   });
 
-  it('calls disableKey when removing a key', (done) => {
+  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();
-      });
-    }));
+    spyOn(vm.service, 'disableKey').and.callFake(() => Promise.resolve());
 
     eventHub.$emit('remove.key', key);
 
-    expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+    Vue.nextTick(() => {
+      expect(vm.service.disableKey).toHaveBeenCalledWith(key.id);
+      expect(vm.service.getKeys).toHaveBeenCalled();
+      done();
+    });
   });
 
   it('hasKeys returns true when there are keys', () => {
     expect(vm.hasKeys).toEqual(3);
   });
 
-  it('resets remove button loading state', (done) => {
+  it('resets disable button loading state', done => {
     spyOn(window, 'confirm').and.returnValue(false);
 
     const btn = vm.$el.querySelector('.btn-warning');
@@ -149,7 +147,7 @@ describe('Deploy keys app component', () => {
     btn.click();
 
     Vue.nextTick(() => {
-      expect(btn.querySelector('.fa')).toBeNull();
+      expect(btn.querySelector('.btn-warning')).not.toExist();
 
       done();
     });
diff --git a/spec/javascripts/deploy_keys/components/key_spec.js b/spec/javascripts/deploy_keys/components/key_spec.js
index b7aadf604a4..4279add21d1 100644
--- a/spec/javascripts/deploy_keys/components/key_spec.js
+++ b/spec/javascripts/deploy_keys/components/key_spec.js
@@ -7,7 +7,7 @@ describe('Deploy keys key', () => {
   let vm;
   const KeyComponent = Vue.extend(key);
   const data = getJSONFixture('deploy_keys/keys.json');
-  const createComponent = (deployKey) => {
+  const createComponent = deployKey => {
     const store = new DeployKeysStore();
     store.keys = data;
 
@@ -23,37 +23,42 @@ describe('Deploy keys key', () => {
   describe('enabled key', () => {
     const deployKey = data.enabled_keys[0];
 
-    beforeEach((done) => {
+    beforeEach(done => {
       createComponent(deployKey);
 
       setTimeout(done);
     });
 
     it('renders the keys title', () => {
-      expect(
-        vm.$el.querySelector('.title').textContent.trim(),
-      ).toContain('My 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 ${getTimeago().format(deployKey.created_at)}`);
+      expect(vm.$el.querySelector('.key-created-at').textContent.trim()).toBe(
+        `${getTimeago().format(deployKey.created_at)}`,
+      );
     });
 
-    it('shows edit button', () => {
-      expect(
-        vm.$el.querySelectorAll('.btn')[0].textContent.trim(),
-      ).toBe('Edit');
+    it('shows pencil button for editing', () => {
+      expect(vm.$el.querySelector('.btn .ic-pencil')).toExist();
     });
 
-    it('shows remove button', () => {
-      expect(
-        vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
-      ).toBe('Remove');
+    it('shows disable button when the project is not deletable', () => {
+      expect(vm.$el.querySelector('.btn .ic-cancel')).toExist();
     });
 
-    it('shows write access title when key has write access', (done) => {
+    it('shows remove button when the project is deletable', done => {
+      vm.deployKey.destroyed_when_orphaned = true;
+      vm.deployKey.almost_orphaned = true;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.btn .ic-remove')).toExist();
+        done();
+      });
+    });
+  });
+
+  describe('deploy key labels', () => {
+    it('shows write access title when key has write access', done => {
       vm.deployKey.deploy_keys_projects[0].can_push = true;
 
       Vue.nextTick(() => {
@@ -64,7 +69,7 @@ describe('Deploy keys key', () => {
       });
     });
 
-    it('does not show write access title when key has write access', (done) => {
+    it('does not show write access title when key has write access', done => {
       vm.deployKey.deploy_keys_projects[0].can_push = false;
 
       Vue.nextTick(() => {
@@ -74,36 +79,73 @@ describe('Deploy keys key', () => {
         done();
       });
     });
+
+    it('shows expandable button if more than two projects', () => {
+      const labels = vm.$el.querySelectorAll('.deploy-project-label');
+      expect(labels.length).toBe(2);
+      expect(labels[1].textContent).toContain('others');
+      expect(labels[1].getAttribute('data-original-title')).toContain('Expand');
+    });
+
+    it('expands all project labels after click', done => {
+      const length = vm.deployKey.deploy_keys_projects.length;
+      vm.$el.querySelectorAll('.deploy-project-label')[1].click();
+
+      Vue.nextTick(() => {
+        const labels = vm.$el.querySelectorAll('.deploy-project-label');
+        expect(labels.length).toBe(length);
+        expect(labels[1].textContent).not.toContain(`+${length} others`);
+        expect(labels[1].getAttribute('data-original-title')).not.toContain('Expand');
+        done();
+      });
+    });
+
+    it('shows two projects', done => {
+      vm.deployKey.deploy_keys_projects = [...vm.deployKey.deploy_keys_projects].slice(0, 2);
+
+      Vue.nextTick(() => {
+        const labels = vm.$el.querySelectorAll('.deploy-project-label');
+        expect(labels.length).toBe(2);
+        expect(labels[1].textContent).toContain(
+          vm.deployKey.deploy_keys_projects[1].project.full_name,
+        );
+        done();
+      });
+    });
   });
 
   describe('public keys', () => {
     const deployKey = data.public_keys[0];
 
-    beforeEach((done) => {
+    beforeEach(done => {
       createComponent(deployKey);
 
       setTimeout(done);
     });
 
-    it('shows edit button', () => {
-      expect(
-        vm.$el.querySelectorAll('.btn')[0].textContent.trim(),
-      ).toBe('Edit');
+    it('renders deploy keys without any enabled projects', done => {
+      vm.deployKey.deploy_keys_projects = [];
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.deploy-project-list').textContent.trim()).toBe('None');
+
+        done();
+      });
     });
 
     it('shows enable button', () => {
-      expect(
-        vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
-      ).toBe('Enable');
+      expect(vm.$el.querySelectorAll('.btn')[0].textContent.trim()).toBe('Enable');
     });
 
-    it('shows disable button when key is enabled', (done) => {
+    it('shows pencil button for editing', () => {
+      expect(vm.$el.querySelector('.btn .ic-pencil')).toExist();
+    });
+
+    it('shows disable button when key is enabled', done => {
       vm.store.keys.enabled_keys.push(deployKey);
 
       Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
-        ).toBe('Disable');
+        expect(vm.$el.querySelector('.btn .ic-cancel')).toExist();
 
         done();
       });
diff --git a/spec/javascripts/deploy_keys/components/keys_panel_spec.js b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
index 08357d2b547..f71f5ccf082 100644
--- a/spec/javascripts/deploy_keys/components/keys_panel_spec.js
+++ b/spec/javascripts/deploy_keys/components/keys_panel_spec.js
@@ -6,7 +6,7 @@ describe('Deploy keys panel', () => {
   const data = getJSONFixture('deploy_keys/keys.json');
   let vm;
 
-  beforeEach((done) => {
+  beforeEach(done => {
     const DeployKeysPanelComponent = Vue.extend(deployKeysPanel);
     const store = new DeployKeysStore();
     store.keys = data;
@@ -24,46 +24,38 @@ describe('Deploy keys panel', () => {
     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('.deploy-key').length).toBe(vm.keys.length);
   });
 
-  it('renders list of keys', () => {
-    expect(
-      vm.$el.querySelectorAll('li').length,
-    ).toBe(vm.keys.length);
+  it('renders table header', () => {
+    const tableHeader = vm.$el.querySelector('.table-row-header');
+
+    expect(tableHeader).toExist();
+    expect(tableHeader.textContent).toContain('Deploy key');
+    expect(tableHeader.textContent).toContain('Project usage');
+    expect(tableHeader.textContent).toContain('Created');
   });
 
-  it('renders help box if keys are empty', (done) => {
+  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')).toBeDefined();
 
-      expect(
-        vm.$el.querySelector('.settings-message').textContent.trim(),
-      ).toBe('No deploy keys found. Create one with the form above.');
+      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) => {
+  it('renders no table header if keys are empty', done => {
     vm.keys = [];
-    vm.showHelpBox = false;
 
     Vue.nextTick(() => {
-      expect(
-        vm.$el.querySelector('.settings-message'),
-      ).toBeNull();
+      expect(vm.$el.querySelector('.table-row-header')).not.toExist();
 
       done();
     });