Implement multi select deletion for container registry

Added checkboxes to each image row
Added delete selected images button
Changed row delete button to appear on row hover
Changed confirmation modal message
Changed delete logic to support multi
Added tests for multi select
Updated pot file
Updated rspec test for new functionality

2 files changed, 115 insertions, 11 deletions

diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
index 31ac970378e..9ee326325e0 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -3,15 +3,19 @@ import tableRegistry from '~/registry/components/table_registry.vue';
 import store from '~/registry/stores';
 import { repoPropsData } from '../mock_data';
 
-const [firstImage] = repoPropsData.list;
+const [firstImage, secondImage] = repoPropsData.list;
 
 describe('table registry', () => {
   let vm;
   let Component;
 
   const findDeleteBtn = () => vm.$el.querySelector('.js-delete-registry');
+  const findDeleteBtnRow = () => vm.$el.querySelector('.js-delete-registry-row');
+  const findSelectAllCheckbox = () => vm.$el.querySelector('.js-select-all-checkbox > input');
+  const findAllRowCheckboxes = () =>
+    Array.from(vm.$el.querySelectorAll('.js-select-checkbox input'));
 
-  beforeEach(() => {
+  const createComponent = () => {
     Component = Vue.extend(tableRegistry);
     vm = new Component({
       store,
@@ -19,6 +23,10 @@ describe('table registry', () => {
         repo: repoPropsData,
       },
     }).$mount();
+  };
+
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
@@ -41,23 +49,108 @@ describe('table registry', () => {
     expect(textRendered).toContain(repoPropsData.list[0].size);
   });
 
-  describe('delete registry', () => {
-    it('should be possible to delete a registry', () => {
-      expect(findDeleteBtn()).toBeDefined();
+  describe('multi select', () => {
+    beforeEach(() => {
+      vm.itemsToBeDeleted = [];
+    });
+
+    it('should support multiselect and selecting a row should enable delete button', done => {
+      findSelectAllCheckbox().click();
+
+      vm.selectAll();
+
+      expect(findSelectAllCheckbox().checked).toBe(true);
+
+      Vue.nextTick(() => {
+        expect(findDeleteBtn().disabled).toBe(false);
+        done();
+      });
     });
 
-    it('should call deleteItem and reset itemToBeDeleted when confirming deletion', done => {
-      findDeleteBtn().click();
-      spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+    it('selecting all checkbox should select all rows and enable delete button', done => {
+      findSelectAllCheckbox().click();
+      vm.selectAll();
 
       Vue.nextTick(() => {
-        document.querySelector(`#${vm.modalId} .btn-danger`).click();
+        const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
 
-        expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
-        expect(vm.itemToBeDeleted).toBeNull();
+        expect(checkedValues.length).toBe(repoPropsData.list.length);
         done();
       });
     });
+
+    it('deselecting select all checkbox should deselect all rows and disable delete button', done => {
+      findSelectAllCheckbox().click();
+      vm.selectAll(); // Select them all on
+      vm.selectAll(); // Select them all off
+
+      Vue.nextTick(() => {
+        const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
+
+        expect(checkedValues.length).toBe(0);
+        done();
+      });
+    });
+
+    it('should delete multiple items when multiple items are selected', done => {
+      findSelectAllCheckbox().click();
+      vm.selectAll();
+
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0, 1]);
+        expect(findDeleteBtn().disabled).toBe(false);
+
+        findDeleteBtn().click();
+        spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+
+        Vue.nextTick(() => {
+          const modal = document.querySelector(`#${vm.modalId}`);
+          document.querySelector(`#${vm.modalId} .btn-danger`).click();
+
+          expect(modal).toExist();
+
+          Vue.nextTick(() => {
+            expect(vm.itemsToBeDeleted).toEqual([]);
+            expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
+            expect(vm.deleteItem).toHaveBeenCalledWith(secondImage);
+            done();
+          });
+        });
+      });
+    });
+  });
+
+  describe('delete registry', () => {
+    beforeEach(() => {
+      vm.itemsToBeDeleted = [0];
+    });
+
+    it('should be possible to delete a registry', done => {
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0]);
+        expect(findDeleteBtn()).toBeDefined();
+        expect(findDeleteBtn().disabled).toBe(false);
+        expect(findDeleteBtnRow()).toBeDefined();
+        done();
+      });
+    });
+
+    it('should call deleteItem and reset itemsToBeDeleted when confirming deletion', done => {
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0]);
+        expect(findDeleteBtn().disabled).toBe(false);
+        findDeleteBtn().click();
+        spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+
+        Vue.nextTick(() => {
+          document.querySelector(`#${vm.modalId} .btn-danger`).click();
+
+          expect(vm.itemsToBeDeleted).toEqual([]);
+          expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
+          done();
+        });
+      });
+    });
   });
 
   describe('pagination', () => {
diff --git a/spec/javascripts/registry/mock_data.js b/spec/javascripts/registry/mock_data.js
index 22db203e77f..130ab298e89 100644
--- a/spec/javascripts/registry/mock_data.js
+++ b/spec/javascripts/registry/mock_data.js
@@ -108,6 +108,17 @@ export const repoPropsData = {
       destroyPath: 'path',
       canDelete: true,
     },
+    {
+      tag: 'test-image',
+      revision: 'b969de599faea2b3d9b6605a8b0897261c571acaa36db1bdc7349b5775b4e0b4',
+      shortRevision: 'b969de599',
+      size: 19,
+      layers: 10,
+      location: 'location-2',
+      createdAt: 1505828744434,
+      destroyPath: 'path-2',
+      canDelete: true,
+    },
   ],
   location: 'location',
   name: 'foo',