Row click toggles selection, aware in both components

app/components/file-table-item.js

@@ -5,10 +5,16 @@ const defaultFile = {};
 const defaultSelectedFilePaths = [];
 
 export default Component.extend({
+  tagName: 'tr',
+  attributeBindings: ['data-test-id', 'data-test-action'],
+
+  'data-test-id': 'file-table-item',
+  'data-test-action': 'file-table-item-toggle',
+
   file: defaultFile,
   selectedFilePaths: defaultSelectedFilePaths,
 
-  isSelected: computed('file.path', 'selectedFilePaths', function() {
+  isSelected: computed('file.path', 'selectedFilePaths.[]', function() {
     return this.selectedFilePaths.includes(this.file.path);
   }),
 });

app/components/file-table.js

@@ -6,4 +6,14 @@ const defaultSelectedFilePaths = [];
 export default Component.extend({
   files: defaultFiles,
   selectedFilePaths: defaultSelectedFilePaths,
+
+  actions: {
+    toggleSelectedPath(path) {
+      if (!this.selectedFilePaths.includes(path)) {
+        this.selectedFilePaths.pushObject(path);
+      } else {
+        this.selectedFilePaths.removeObject(path);
+      }
+    },
+  }
 });

app/controllers/application.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+
+const files = []; // Put sample data here...
+
+export default Controller.extend({
+  files,
+});

app/templates/application.hbs

@@ -1,5 +1,5 @@
-{{!-- The following component displays Ember's default welcome message. --}}
+<h1>Ember File Download List</h1>
-{{welcome-page}}
+
-{{!-- Feel free to remove this! --}}
+{{file-table files=files}}
 
 {{outlet}}

app/templates/components/file-table-item.hbs

@@ -1,25 +1,23 @@
-<tr data-test-id="file-table-item">
+<td data-test-id="file-table-item-selected">
-  <td data-test-id="file-table-item-selected">
   {{if isSelected "Selected"}}
-  </td>
+</td>
-  <td data-test-id="file-table-item-name">
+<td data-test-id="file-table-item-name">
   {{file.name}}
-  </td>
+</td>
-  <td data-test-id="file-table-item-device">
+<td data-test-id="file-table-item-device">
   {{file.device}}
-  </td>
+</td>
-  <td data-test-id="file-table-item-path">
+<td data-test-id="file-table-item-path">
   {{file.path}}
-  </td>
+</td>
-  <td>
+<td>
   <i
     class="file-table-item-status-{{file.status}}"
     data-test-id="file-table-status-icon"
   >
     &nbsp;
   </i>
-  </td>
+</td>
-  <td data-test-id="file-table-item-status">
+<td data-test-id="file-table-item-status">
   {{file.status}}
-  </td>
+</td>
-</tr>

app/templates/components/file-table.hbs

@@ -1,6 +1,7 @@
-
 <header data-test-id="file-table-action-bar">
-  <label data-test-action="file-table-select-all"></label>
+  <label data-test-action="file-table-select-all">
+    Selected {{selectedFilePaths.length}}
+  </label>
   <button data-test-action="file-table-download-selected">Download Selected</button>
 </header>
 
@@ -18,6 +19,7 @@
       {{file-table-item
         file=file
         selectedFilePaths=selectedFilePaths
+        click=(action "toggleSelectedPath" file.path)
       }}
     {{/each}}
   </tbody>

tests/integration/components/file-table-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find, findAll } from '@ember/test-helpers';
+import { render, find, findAll, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 const genericFile = () => {
@@ -32,4 +32,19 @@ module('Integration | Component | file-table', function(hooks) {
 
     assert.equal(findAll('[data-test-id=file-table-item]').length, 2, 'Found expected two rows');
   });
+
+  test('it can select toggle a row with clicks', async function(assert) {
+    this.set('files', [genericFile(), genericFile()]);
+    await render(hbs`{{file-table files=files}}`);
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
+
+    await click('[data-test-action=file-table-item-toggle]');
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 1');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Selected after click');
+
+    await click('[data-test-action=file-table-item-toggle]');
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Unselected after second click');
+  });
 });