VAULT-12127 Refactor breadcrumbs to use breadcrumb component

ui/lib/kubernetes/addon/components/page/configuration.hbs

@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}}>
+<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="configure" data-test-toolbar-config-action>
     {{if @config "Edit configuration" "Configure Kubernetes"}}
   </ToolbarLink>

ui/lib/kubernetes/addon/components/page/credentials.hbs

@@ -1,25 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li data-test-crumb="overview">
-          <span class="sep">/</span>
-          <LinkTo @route="overview">{{@backend}}</LinkTo>
-        </li>
-        <li data-test-crumb="roles">
-          <span class="sep">/</span>
-          <LinkTo @route="roles">roles</LinkTo>
-        </li>
-        <li data-test-crumb="details">
-          <span class="sep">/</span>
-          <LinkTo @route="roles.role.details">{{@roleName}}</LinkTo>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span>credentials</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3 has-bottom-margin-2" data-test-credentials-header>

ui/lib/kubernetes/addon/components/page/overview.hbs

@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}}>
+<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="configure">Configure Kubernetes</ToolbarLink>
 </TabPageHeader>
 

ui/lib/kubernetes/addon/components/page/role/details.hbs

@@ -1,21 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
-      <ul>
-        <li data-test-crumb="overview">
-          <span class="sep">/</span>
-          <LinkTo @route="overview">{{@model.backend}}</LinkTo>
-        </li>
-        <li data-test-crumb="roles">
-          <span class="sep">/</span>
-          <LinkTo @route="roles">roles</LinkTo>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span data-test-crumb="role">{{@model.name}}</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-header-title>

ui/lib/kubernetes/addon/components/page/roles.hbs

@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}}>
+<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="roles.create" @type="add" data-test-toolbar-roles-action>
     Create role
   </ToolbarLink>

ui/lib/kubernetes/addon/components/tab-page-header.hbs

@@ -1,17 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
-      <ul>
-        <li data-test-crumb="secrets">
-          <span class="sep">/</span>
-          <LinkToExternal @route="secrets">secrets</LinkToExternal>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span data-test-crumb="path">{{@model.id}}</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-header-title>

ui/lib/kubernetes/addon/routes/configuration.js

@@ -7,4 +7,13 @@ export default class KubernetesConfigureRoute extends FetchConfigRoute {
       config: this.configModel,
     };
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }

ui/lib/kubernetes/addon/routes/overview.js

@@ -10,4 +10,13 @@ export default class KubernetesOverviewRoute extends FetchConfigRoute {
       roles: this.store.query('kubernetes/role', { backend }).catch(() => []),
     });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }

ui/lib/kubernetes/addon/routes/roles/index.js

@@ -19,4 +19,13 @@ export default class KubernetesRolesRoute extends FetchConfigRoute {
       roles,
     });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }

ui/lib/kubernetes/addon/routes/roles/role/credentials.js

@@ -9,4 +9,15 @@ export default class KubernetesRoleCredentialsRoute extends Route {
       backend: this.secretMountPath.get(),
     };
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: resolvedModel.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: resolvedModel.roleName, route: 'roles.role.details' },
+      { label: 'credentials' },
+    ];
+  }
 }

ui/lib/kubernetes/addon/routes/roles/role/details.js

@@ -10,4 +10,14 @@ export default class KubernetesRoleDetailsRoute extends Route {
     const { name } = this.paramsFor('roles.role');
     return this.store.queryRecord('kubernetes/role', { backend, name });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: resolvedModel.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: resolvedModel.name },
+    ];
+  }
 }

ui/lib/kubernetes/addon/templates/configuration.hbs

@@ -1 +1 @@
-<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} />
+<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />

ui/lib/kubernetes/addon/templates/overview.hbs

@@ -1 +1,6 @@
-<Page::Overview @config={{this.model.config}} @backend={{this.model.backend}} @roles={{this.model.roles}} />
+<Page::Overview
+  @config={{this.model.config}}
+  @backend={{this.model.backend}}
+  @roles={{this.model.roles}}
+  @breadcrumbs={{this.breadcrumbs}}
+/>

ui/lib/kubernetes/addon/templates/roles/index.hbs

@@ -3,4 +3,5 @@
   @config={{this.model.config}}
   @backend={{this.model.backend}}
   @filterValue={{this.pageFilter}}
+  @breadcrumbs={{this.breadcrumbs}}
 />

ui/lib/kubernetes/addon/templates/roles/role/credentials.hbs

@@ -1 +1 @@
-<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} />
+<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />

ui/lib/kubernetes/addon/templates/roles/role/details.hbs

@@ -1 +1 @@
-<Page::Role::Details @model={{@model}} />
+<Page::Role::Details @model={{@model}} @breadcrumbs={{this.breadcrumbs}} />

ui/tests/acceptance/secrets/backend/kubernetes/credentials-test.js

@@ -30,13 +30,13 @@ module('Acceptance | kubernetes | credentials', function (hooks) {
   test('it should have correct breadcrumb links in credentials view', async function (assert) {
     assert.expect(3);
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="details"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(3) a');
     this.validateRoute(assert, 'roles.role.details', 'Transitions to role details route on breadcrumb click');
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="overview"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(1) a');
     this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
   });
 

ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js

@@ -46,10 +46,10 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     assert.expect(2);
     await this.visitRoles();
     await click('[data-test-list-item-link]');
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
     await click('[data-test-list-item-link]');
-    await click('[data-test-crumb="overview"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(1) a');
     this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
   });
 
@@ -68,7 +68,8 @@ module('Acceptance | kubernetes | roles', function (hooks) {
           `roles.role.${action}`,
           `Transitions to ${action} route on menu action click`
         );
-        const selector = action === 'details' ? '[data-test-crumb="roles"] a' : '[data-test-cancel]';
+        const selector =
+          action === 'details' ? '[data-test-breadcrumbs] li:nth-child(2) a' : '[data-test-cancel]';
         await click(selector);
       }
     }
@@ -84,7 +85,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     await fillIn('[data-test-input="allowedKubernetesNamespaces"]', '*');
     await click('[data-test-save]');
     this.validateRoute(assert, 'roles.role.details', 'Transitions to details route on save success');
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     assert.dom('[data-test-role="new-test-role"]').exists('New role renders in list');
   });
 
@@ -94,7 +95,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     await click('[data-test-list-item-link]');
     await click('[data-test-generate-credentials]');
     this.validateRoute(assert, 'roles.role.credentials', 'Transitions to credentials route');
-    await click('[data-test-crumb="details"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(3) a');
     await click('[data-test-edit]');
     this.validateRoute(assert, 'roles.role.edit', 'Transitions to edit route');
     await click('[data-test-cancel]');

ui/tests/integration/components/kubernetes/page/configuration-test.js

@@ -36,10 +36,18 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
       this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     };
 
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
+
     this.renderComponent = () => {
-      return render(hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} />`, {
-        owner: this.engine,
-      });
+      return render(
+        hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} @breadcrumbs={{this.breadcrumbs}} />`,
+        {
+          owner: this.engine,
+        }
+      );
     };
   });
 

ui/tests/integration/components/kubernetes/page/credentials-test.js

@@ -28,11 +28,19 @@ module('Integration | Component | kubernetes | Page::Credentials', function (hoo
         return new Response(400, {}, { errors });
       });
     };
-
+    this.breadcrumbs = [
+      { label: this.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: this.roleName, route: 'roles.role.details' },
+      { label: 'credentials' },
+    ];
     this.renderComponent = () => {
-      return render(hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} />`, {
-        owner: this.engine,
-      });
+      return render(
+        hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} @breadcrumbs={{this.breadcrumbs}}/>`,
+        {
+          owner: this.engine,
+        }
+      );
     };
   });
 

ui/tests/integration/components/kubernetes/page/overview-test.js

@@ -39,10 +39,13 @@ module('Integration | Component | kubernetes | Page::Overview', function (hooks)
     this.backend = this.store.peekRecord('secret-engine', 'kubernetes-test');
     this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     this.roles = this.store.peekAll('kubernetes/role');
-
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
     this.renderComponent = () => {
       return render(
-        hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} />`,
+        hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @breadcrumbs={{this.breadcrumbs}} />`,
         { owner: this.engine }
       );
     };

ui/tests/integration/components/kubernetes/page/role/details-test.js

@@ -38,7 +38,14 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
         ...data,
       });
       this.model = store.peekRecord('kubernetes/role', data.name);
-      return render(hbs`<Page::Role::Details @model={{this.model}} />`, { owner: this.engine });
+      this.breadcrumbs = [
+        { label: this.model.backend, route: 'overview' },
+        { label: 'roles', route: 'roles' },
+        { label: this.model.name },
+      ];
+      return render(hbs`<Page::Role::Details @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
+        owner: this.engine,
+      });
     };
 
     this.assertFilteredFields = (hiddenIndices, assert) => {
@@ -71,9 +78,13 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
   test('it should render header with role name and breadcrumbs', async function (assert) {
     await this.renderComponent();
     assert.dom('[data-test-header-title]').hasText(this.model.name, 'Role name renders in header');
-    assert.dom('[data-test-crumb="overview"] a').hasText(this.model.backend, 'Overview breadcrumb renders');
-    assert.dom('[data-test-crumb="roles"] a').hasText('roles', 'Roles breadcrumb renders');
-    assert.dom('[data-test-crumb="role"]').hasText(this.model.name, 'Role breadcrumb renders');
+    assert
+      .dom('[data-test-breadcrumbs] li:nth-child(1)')
+      .containsText(this.model.backend, 'Overview breadcrumb renders');
+    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('roles', 'Roles breadcrumb renders');
+    assert
+      .dom('[data-test-breadcrumbs] li:nth-child(3)')
+      .containsText(this.model.name, 'Role breadcrumb renders');
   });
 
   test('it should render toolbar actions', async function (assert) {

ui/tests/integration/components/kubernetes/page/roles-test.js

@@ -34,10 +34,14 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
     this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     this.roles = this.store.peekAll('kubernetes/role');
     this.filterValue = '';
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
 
     this.renderComponent = () => {
       return render(
-        hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} />`,
+        hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} @breadcrumbs={{this.breadcrumbs}} />`,
         { owner: this.engine }
       );
     };