Make a dedicated fs-breadcrumbs component

ui/app/components/fs-breadcrumbs.js

@@ -0,0 +1,42 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+
+export default Component.extend({
+  tagName: 'nav',
+  classNames: ['breadcrumb'],
+
+  'data-test-fs-breadcrumbs': true,
+
+  task: null,
+  path: null,
+
+  breadcrumbs: computed('path', function() {
+    const breadcrumbs = this.path
+      .split('/')
+      .reject(isEmpty)
+      .reduce((breadcrumbs, pathSegment, index) => {
+        let breadcrumbPath;
+
+        if (index > 0) {
+          const lastBreadcrumb = breadcrumbs[index - 1];
+          breadcrumbPath = `${lastBreadcrumb.path}/${pathSegment}`;
+        } else {
+          breadcrumbPath = pathSegment;
+        }
+
+        breadcrumbs.push({
+          name: pathSegment,
+          path: breadcrumbPath,
+        });
+
+        return breadcrumbs;
+      }, []);
+
+    if (breadcrumbs.length) {
+      breadcrumbs[breadcrumbs.length - 1].isLast = true;
+    }
+
+    return breadcrumbs;
+  }),
+});

ui/app/controllers/allocations/allocation/task/fs.js

@@ -1,7 +1,6 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
 import { filterBy } from '@ember/object/computed';
-import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
   queryParams: {
@@ -42,33 +41,4 @@ export default Controller.extend({
       }
     }
   ),
-
-  breadcrumbs: computed('path', function() {
-    const breadcrumbs = this.path
-      .split('/')
-      .reject(isEmpty)
-      .reduce((breadcrumbs, pathSegment, index) => {
-        let breadcrumbPath;
-
-        if (index > 0) {
-          const lastBreadcrumb = breadcrumbs[index - 1];
-          breadcrumbPath = `${lastBreadcrumb.path}/${pathSegment}`;
-        } else {
-          breadcrumbPath = pathSegment;
-        }
-
-        breadcrumbs.push({
-          name: pathSegment,
-          path: breadcrumbPath,
-        });
-
-        return breadcrumbs;
-      }, []);
-
-    if (breadcrumbs.length) {
-      breadcrumbs[breadcrumbs.length - 1].isLast = true;
-    }
-
-    return breadcrumbs;
-  }),
 });

ui/app/templates/allocations/allocation/task/fs.hbs

@@ -3,42 +3,12 @@
   {{#if task.isRunning}}
     {{#if isFile}}
       {{#task-file allocation=task.allocation task=task file=path stat=stat class="fs-explorer"}}
-        <nav class="breadcrumb" data-test-fs-breadcrumbs>
-          <ul>
-            <li class={{if breadcrumbs "" "is-active"}}>
-              {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
-                {{task.name}}
-              {{/link-to}}
-            </li>
-            {{#each breadcrumbs as |breadcrumb|}}
-              <li class={{if breadcrumb.isLast "is-active"}}>
-                {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
-                  {{breadcrumb.name}}
-                {{/link-to}}
-              </li>
-            {{/each}}
-          </ul>
-        </nav>
+        {{fs-breadcrumbs task=task path=path}}
       {{/task-file}}
     {{else}}
       <div class="fs-explorer boxed-section">
         <div class="boxed-section-head">
-          <nav class="breadcrumb" data-test-fs-breadcrumbs>
-            <ul>
-              <li class={{if breadcrumbs "" "is-active"}}>
-                {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
-                  {{task.name}}
-                {{/link-to}}
-              </li>
-              {{#each breadcrumbs as |breadcrumb|}}
-                <li class={{if breadcrumb.isLast "is-active"}}>
-                  {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
-                    {{breadcrumb.name}}
-                  {{/link-to}}
-                </li>
-              {{/each}}
-            </ul>
-          </nav>
+          {{fs-breadcrumbs task=task path=path}}
         </div>
         {{#list-table
           source=sortedDirectoryEntries

ui/app/templates/components/fs-breadcrumbs.hbs

@@ -0,0 +1,14 @@
+<ul>
+  <li class={{if breadcrumbs "" "is-active"}}>
+    {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
+      {{task.name}}
+    {{/link-to}}
+  </li>
+  {{#each breadcrumbs as |breadcrumb|}}
+    <li class={{if breadcrumb.isLast "is-active"}}>
+      {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
+        {{breadcrumb.name}}
+      {{/link-to}}
+    </li>
+  {{/each}}
+</ul>