Updated select all to be more explicit

2 files changed, 21 insertions, 18 deletions

diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index 807b81c66e9..ff9f8871a8c 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -126,15 +126,21 @@ export default {
     showError(message) {
       createFlash(errorMessages[message]);
     },
-    selectAll() {
-      if (!this.selectAllChecked) {
-        this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx);
-        this.selectAllChecked = true;
+    onSelectAllChange() {
+      if (this.selectAllChecked) {
+        this.deselectAll();
       } else {
-        this.itemsToBeDeleted = [];
-        this.selectAllChecked = false;
+        this.selectAll();
       }
     },
+    selectAll() {
+      this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx);
+      this.selectAllChecked = true;
+    },
+    deselectAll() {
+      this.itemsToBeDeleted = [];
+      this.selectAllChecked = false;
+    },
     updateItemsToBeDeleted(idx) {
       const delIdx = this.itemsToBeDeleted.findIndex(x => x === idx);
 
@@ -162,7 +168,7 @@ export default {
               v-if="repo.canDelete"
               class="js-select-all-checkbox"
               :checked="selectAllChecked"
-              @change="selectAll"
+              @change="onSelectAllChange"
             />
           </th>
           <th>{{ s__('ContainerRegistry|Tag') }}</th>
diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
index 556a66c5666..a96a505a3a4 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -27,7 +27,8 @@ describe('table registry', () => {
     });
   };
 
-  const toggleSelectAll = () => vm.selectAll();
+  const selectAllCheckboxes = () => vm.selectAll();
+  const deselectAllCheckboxes = () => vm.deselectAll();
 
   beforeEach(() => {
     createComponent();
@@ -58,7 +59,7 @@ describe('table registry', () => {
   describe('multi select', () => {
     it('should support multiselect and selecting a row should enable delete button', done => {
       findSelectAllCheckbox().click();
-      toggleSelectAll();
+      selectAllCheckboxes();
 
       expect(findSelectAllCheckbox().checked).toBe(true);
 
@@ -69,8 +70,7 @@ describe('table registry', () => {
     });
 
     it('selecting all checkbox should select all rows and enable delete button', done => {
-      findSelectAllCheckbox().click();
-      toggleSelectAll();
+      selectAllCheckboxes();
 
       Vue.nextTick(() => {
         const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
@@ -81,9 +81,8 @@ describe('table registry', () => {
     });
 
     it('deselecting select all checkbox should deselect all rows and disable delete button', done => {
-      findSelectAllCheckbox().click();
-      toggleSelectAll(); // Select them all on
-      toggleSelectAll(); // Select them all off
+      selectAllCheckboxes();
+      deselectAllCheckboxes();
 
       Vue.nextTick(() => {
         const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
@@ -94,8 +93,7 @@ describe('table registry', () => {
     });
 
     it('should delete multiple items when multiple items are selected', done => {
-      findSelectAllCheckbox().click();
-      toggleSelectAll();
+      selectAllCheckboxes();
 
       Vue.nextTick(() => {
         expect(vm.itemsToBeDeleted).toEqual([0, 1]);
@@ -177,8 +175,7 @@ describe('table registry', () => {
     });
 
     it('should show the plural title and image count when deleting more than one image', done => {
-      findSelectAllCheckbox().click();
-      toggleSelectAll();
+      selectAllCheckboxes();
 
       Vue.nextTick(() => {
         expect(vm.modalTitle).toBe('Remove images');