From 60445ef22c66b69bd5e9b3941eb45f0450a5c01d Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe@wroten.me>
Date: Sun, 16 Dec 2018 15:10:24 -0600
Subject: [PATCH] Toggleable download alert, no content  yet

---
 app/components/file-table.js                  | 11 ++++++++++
 app/templates/components/file-table.hbs       | 22 ++++++++++++++++++-
 .../integration/components/file-table-test.js | 12 ++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/components/file-table.js b/app/components/file-table.js
index 4d0aabd..38ca04c 100644
--- a/app/components/file-table.js
+++ b/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);
diff --git a/app/templates/components/file-table.hbs b/app/templates/components/file-table.hbs
index 170cad2..e2f99fe 100644
--- a/app/templates/components/file-table.hbs
+++ b/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>
diff --git a/tests/integration/components/file-table-test.js b/tests/integration/components/file-table-test.js
index 3c22819..76624f5 100644
--- a/tests/integration/components/file-table-test.js
+++ b/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');
+  });
 });
\ No newline at end of file