UI: pki engine breadcrumbs (#18113)

* move mountPoint to parent PkiController and extend for engine routes

* breadcrumb attempt

* Revert "breadcrumb attempt"

This reverts commit d2140dcd3b7bd0ba8025960fcf4cc533cb3be3ab.

* make breadcrumb component

* revert extending pki controller

* move file import

* generalize breadcrumb component

* restructure files

* remove docs

* cleanup jsdoc and test

* add to pki role details page

* address comments

* fix test

ui/lib/core/addon/components/page/breadcrumbs.hbs

@@ -0,0 +1,18 @@
+<nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
+  <ul>
+    {{#each @breadcrumbs as |breadcrumb|}}
+      <li>
+        <span class="sep">/</span>
+        {{#if breadcrumb.linkExternal}}
+          <LinkToExternal @route={{breadcrumb.route}}>{{breadcrumb.label}}</LinkToExternal>
+        {{else if breadcrumb.route}}
+          <LinkTo @route={{breadcrumb.route}}>
+            {{breadcrumb.label}}
+          </LinkTo>
+        {{else}}
+          {{breadcrumb.label}}
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+</nav>

ui/lib/core/addon/components/page/breadcrumbs.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+/**
+ * @module Page::Breadcrumbs
+ * Page::Breadcrumbs components are used to display breadcrumb links. This is component will be replaced when HDS system is incorporated
+ *
+ * @example
+ * ```js
+ * <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}}  />
+ * ```
+ * @param {array} breadcrumbs - array of objects with a label and route to display as breadcrumbs
+ */
+
+export default class Breadcrumbs extends Component {
+  constructor() {
+    super(...arguments);
+    this.args.breadcrumbs.forEach((breadcrumb) => {
+      assert('breadcrumb has a label key', Object.keys(breadcrumb).includes('label'));
+    });
+  }
+}

ui/lib/core/app/components/page/breadcrumbs.js

@@ -0,0 +1 @@
+export { default } from 'core/components/page/breadcrumbs';

ui/lib/pki/addon/components/pki-key-details.hbs

@@ -1,26 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    {{! TODO: This should be replaced with HDS::Breadcrumbs }}
-    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs="key-details">
-      <ul>
-        <li>
-          <span class="sep">/</span>
-          <LinkToExternal @route="secrets">secrets</LinkToExternal>
-        </li>
-        {{#each this.breadcrumbs as |breadcrumb|}}
-          <li>
-            <span class="sep">/</span>
-            {{#if breadcrumb.path}}
-              <LinkTo @route={{breadcrumb.path}}>
-                {{breadcrumb.label}}
-              </LinkTo>
-            {{else}}
-              {{breadcrumb.label}}
-            {{/if}}
-          </li>
-        {{/each}}
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-key-details-title>
@@ -29,6 +9,7 @@
     </h1>
   </p.levelLeft>
 </PageHeader>
+
 <Toolbar>
   <ToolbarActions>
     <ConfirmAction

ui/lib/pki/addon/components/pki-key-details.ts

@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-
+import { inject as service } from '@ember/service';
 interface Args {
   key: {
     backend: string;
@@ -10,10 +10,13 @@ interface Args {
 }
 
 export default class PkiKeyDetails extends Component<Args> {
+  @service declare secretMountPath: { currentPath: string };
+
   get breadcrumbs() {
     return [
-      { label: this.args.key.backend || 'pki', path: 'overview' },
-      { label: 'keys', path: 'keys.index' },
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.secretMountPath.currentPath || 'pki', route: 'overview' },
+      { label: 'keys', route: 'keys.index' },
       { label: this.args.key.keyId },
     ];
   }

ui/lib/pki/addon/components/pki-role-details-page.hbs

@@ -1,26 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    {{! TODO: This should be replaced with HDS::Breadcrumbs }}
-    <nav class="key-value-header breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs="role-details">
-      <ul>
-        <li>
-          <span class="sep">/</span>
-          <LinkToExternal @route="secrets">secrets</LinkToExternal>
-        </li>
-        {{#each this.breadcrumbs as |breadcrumb|}}
-          <li>
-            <span class="sep">/</span>
-            {{#if breadcrumb.path}}
-              <LinkTo @route={{breadcrumb.path}}>
-                {{breadcrumb.label}}
-              </LinkTo>
-            {{else}}
-              {{breadcrumb.label}}
-            {{/if}}
-          </li>
-        {{/each}}
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-role-details-title>

ui/lib/pki/addon/components/pki-role-details-page.ts

@@ -19,8 +19,9 @@ interface Args {
 export default class DetailsPage extends Component<Args> {
   get breadcrumbs() {
     return [
-      { label: this.args.role.backend || 'pki', path: 'overview' },
-      { label: 'roles', path: 'roles.index' },
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.args.role.backend || 'pki', route: 'overview' },
+      { label: 'roles', route: 'roles.index' },
       { label: this.args.role.id },
     ];
   }

ui/lib/pki/addon/controllers/certificates/index.js

@@ -6,6 +6,7 @@ export default class PkiCertificatesIndexController extends Controller {
   get mountPoint() {
     return getOwner(this).mountPoint;
   }
+
   @action setFilter(val) {
     this.filter = val;
   }

ui/tests/helpers/pki/page-role-details.js

@@ -1,6 +1,6 @@
 export const SELECTORS = {
-  breadcrumbContainer: '[data-test-breadcrumbs="role-details"]',
-  breadcrumbs: '[data-test-breadcrumbs="role-details"] li',
+  breadcrumbContainer: '[data-test-breadcrumbs]',
+  breadcrumbs: '[data-test-breadcrumbs] li',
   title: '[data-test-role-details-title]',
   issuerLabel: '[data-test-row-label="Issuer"]',
   noStoreValue: '[data-test-value-div="Store in storage backend"]',

ui/tests/integration/components/page/breadcrumbs-test.js

@@ -0,0 +1,26 @@
+/* eslint-disable ember/no-private-routing-service */
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { findAll, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | page/breadcrumbs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.breadcrumbs = [
+      { label: 'Home', route: 'home', linkExternal: true },
+      { label: 'Details', route: 'home.details' },
+      { label: 'Edit item' },
+    ];
+
+    await render(hbs`<Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />`);
+    assert.dom('[data-test-breadcrumbs]').exists('renders passed in breadcrumbs');
+    assert.strictEqual(findAll('[data-test-breadcrumbs] li').length, 3, 'it renders 3 breadcrumbs');
+    assert.strictEqual(
+      findAll('[data-test-breadcrumbs] a').length,
+      2,
+      'it does not render a link if no path'
+    );
+  });
+});