Merge pull request #6158 from hashicorp/f-ui/alloc-fs-empty-dir-state

UI: Use the standard empty message when an fs dir is empty
hashicorp · Aug 20, 2019 · 1783a7a · 1783a7a
2 parents 354da0f + 65aa475
commit 1783a7a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/ui/app/templates/allocations/allocation/task/fs.hbs b/ui/app/templates/allocations/allocation/task/fs.hbs
@@ -11,12 +11,12 @@
         <div class="boxed-section-head">
           {{fs-breadcrumbs task=task path=path}}
         </div>
-        {{#list-table
-          source=sortedDirectoryEntries
-          sortProperty=sortProperty
-          sortDescending=sortDescending
-          class="boxed-section-body is-full-bleed is-compact" as |t|}}
-          {{#if directoryEntries}}
+        {{#if directoryEntries}}
+          {{#list-table
+            source=sortedDirectoryEntries
+            sortProperty=sortProperty
+            sortDescending=sortDescending
+            class="boxed-section-body is-full-bleed is-compact" as |t|}}
             {{#t.head}}
               {{#t.sort-by prop="Name" class="is-two-thirds"}}Name{{/t.sort-by}}
               {{#t.sort-by prop="Size" class="has-text-right"}}File Size{{/t.sort-by}}
@@ -25,17 +25,17 @@
             {{#t.body as |row|}}
               {{fs-directory-entry path=path task=task entry=row.model}}
             {{/t.body}}
-          {{else}}
-            <tbody>
-              <tr data-test-entry>
-                <td colspan="3">
-                  {{x-icon "alert-circle-outline"}}
-                  <span class="name" data-test-name>Directory is empty</span>
-                </td>
-              </tr>
-            </tbody>
-          {{/if}}
-        {{/list-table}}
+          {{/list-table}}
+        {{else}}
+          <div class="boxed-section-body">
+            <div data-test-empty-directory class="empty-message">
+              <h3 data-test-empty-directory-headline class="empty-message-headline">No Files</h3>
+              <p data-test-empty-directory-body class="empty-message-body">
+                Directory is currently empty.
+              </p>
+            </div>
+          </div>
+        {{/if}}
       </div>
     {{/if}}
   {{else}}
@@ -46,4 +46,4 @@
       </p>
     </div>
   {{/if}}
-</section>
+</section>
diff --git a/ui/tests/acceptance/task-fs-test.js b/ui/tests/acceptance/task-fs-test.js
@@ -344,8 +344,7 @@ module('Acceptance | task fs', function(hooks) {
   test('viewing an empty directory', async function(assert) {
     await FS.visitPath({ id: allocation.id, name: task.name, path: '/empty-directory' });
 
-    assert.equal(FS.directoryEntries.length, 1);
-    assert.ok(FS.directoryEntries[0].isEmpty);
+    assert.ok(FS.isEmptyDirectory);
   });
 
   test('viewing paths that produce stat API errors', async function(assert) {

diff --git a/ui/tests/pages/allocations/task/fs.js b/ui/tests/pages/allocations/task/fs.js
@@ -42,7 +42,6 @@ export default create({
 
     isFile: isPresent('.icon-is-file-outline'),
     isDirectory: isPresent('.icon-is-folder-outline'),
-    isEmpty: isPresent('.icon-is-alert-circle-outline'),
 
     size: text('[data-test-size]'),
     lastModified: text('[data-test-last-modified]'),
@@ -51,6 +50,8 @@ export default create({
     path: attribute('href', 'a'),
   }),
 
+  isEmptyDirectory: isPresent('[data-test-empty-directory]'),
+
   directoryEntryNames() {
     return this.directoryEntries.toArray().mapBy('name');
   },