Toggleable download alert, no content yet

app/components/file-table.js

@@ -7,6 +7,8 @@ const defaultSelectedFilePaths = [];
 export default Component.extend({
   files: defaultFiles,
   selectedFilePaths: defaultSelectedFilePaths,
+  showDownloadAlert: false,
+
   selectAllStatus: computed('selectedFilePaths.[]', 'files.[]', function() {
     if (this.selectedFilePaths.length === this.files.length) {
       return 'all';
@@ -14,6 +16,14 @@ export default Component.extend({
   }),
 
   actions: {
+    downloadSelected() {
+      set(this, 'showDownloadAlert', true);
+    },
+
+    closeDownloadAlert() {
+      set(this, 'showDownloadAlert', false);
+    },
+
     toggleSelectAll() {
       if (this.selectedFilePaths.length === this.files.length) {
         set(this, 'selectedFilePaths', defaultSelectedFilePaths);
@@ -21,6 +31,7 @@ export default Component.extend({
         set(this, 'selectedFilePaths', this.files.map(file => file.path));
       }
     },
+
     toggleSelectedPath(path) {
       if (!this.selectedFilePaths.includes(path)) {
         this.selectedFilePaths.pushObject(path);

app/templates/components/file-table.hbs

@@ -1,3 +1,18 @@
+{{#if showDownloadAlert}}
+  <div
+    class="file-table-download-alert"
+    data-test-id="file-table-download-alert"
+  >
+    <button
+      data-test-action="file-table-download-close"
+      {{action "closeDownloadAlert"}}
+    >
+      Close
+    </button>
+    Foo
+  </div>
+{{/if}}
+
 <header data-test-id="file-table-action-bar">
   <button
     data-test-action="file-table-select-all"
@@ -11,7 +26,12 @@
     </i>
     Selected {{selectedFilePaths.length}}
   </button>
-  <button data-test-action="file-table-download-selected">Download Selected</button>
+  <button
+    data-test-action="file-table-download-selected"
+    {{action "downloadSelected"}}
+  >
+    Download Selected
+  </button>
 </header>
 
 <table>

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

@@ -87,4 +87,16 @@ module('Integration | Component | file-table', function(hooks) {
     await click('[data-test-action=file-table-select-all]');
     assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-none'), true, 'Shows NONE checkbox status icon');
   });
+
+  test('it handles showing download device/path for selected available files', async function(assert) {
+    this.set('files', [genericFile(), genericFile()]);
+    await render(hbs`{{file-table files=files}}`);
+    await click('[data-test-action=file-table-select-all]');
+    await click('[data-test-action=file-table-download-selected]');
+
+    assert.ok(find('[data-test-id=file-table-download-alert]'), 'Renders download alert wrapper');
+
+    await click('[data-test-action=file-table-download-close]');
+    assert.notOk(find('[data-test-id=file-table-download-alert]'), 'Closes download alert wrapper');
+  });
 });