From 547937df194d8ca4066125eed590d56e4fbce72d Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Tue, 29 Nov 2022 10:01:10 -0800 Subject: [PATCH] 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 --- .../addon/components/page/breadcrumbs.hbs | 18 +++++++++++++ .../core/addon/components/page/breadcrumbs.js | 22 ++++++++++++++++ .../core/app/components/page/breadcrumbs.js | 1 + .../pki/addon/components/pki-key-details.hbs | 23 ++-------------- .../pki/addon/components/pki-key-details.ts | 9 ++++--- .../components/pki-role-details-page.hbs | 22 +--------------- .../addon/components/pki-role-details-page.ts | 5 ++-- .../addon/controllers/certificates/index.js | 1 + ui/tests/helpers/pki/page-role-details.js | 4 +-- .../components/page/breadcrumbs-test.js | 26 +++++++++++++++++++ 10 files changed, 82 insertions(+), 49 deletions(-) create mode 100644 ui/lib/core/addon/components/page/breadcrumbs.hbs create mode 100644 ui/lib/core/addon/components/page/breadcrumbs.js create mode 100644 ui/lib/core/app/components/page/breadcrumbs.js create mode 100644 ui/tests/integration/components/page/breadcrumbs-test.js diff --git a/ui/lib/core/addon/components/page/breadcrumbs.hbs b/ui/lib/core/addon/components/page/breadcrumbs.hbs new file mode 100644 index 000000000..6ed6c51b6 --- /dev/null +++ b/ui/lib/core/addon/components/page/breadcrumbs.hbs @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/ui/lib/core/addon/components/page/breadcrumbs.js b/ui/lib/core/addon/components/page/breadcrumbs.js new file mode 100644 index 000000000..fddcad759 --- /dev/null +++ b/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 + * + * ``` + * @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')); + }); + } +} diff --git a/ui/lib/core/app/components/page/breadcrumbs.js b/ui/lib/core/app/components/page/breadcrumbs.js new file mode 100644 index 000000000..32f23541b --- /dev/null +++ b/ui/lib/core/app/components/page/breadcrumbs.js @@ -0,0 +1 @@ +export { default } from 'core/components/page/breadcrumbs'; diff --git a/ui/lib/pki/addon/components/pki-key-details.hbs b/ui/lib/pki/addon/components/pki-key-details.hbs index 070eb1dac..910df5fc9 100644 --- a/ui/lib/pki/addon/components/pki-key-details.hbs +++ b/ui/lib/pki/addon/components/pki-key-details.hbs @@ -1,26 +1,6 @@ - {{! TODO: This should be replaced with HDS::Breadcrumbs }} - +

@@ -29,6 +9,7 @@

+ { + @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 }, ]; } diff --git a/ui/lib/pki/addon/components/pki-role-details-page.hbs b/ui/lib/pki/addon/components/pki-role-details-page.hbs index 853b923be..56997374b 100644 --- a/ui/lib/pki/addon/components/pki-role-details-page.hbs +++ b/ui/lib/pki/addon/components/pki-role-details-page.hbs @@ -1,26 +1,6 @@ - {{! TODO: This should be replaced with HDS::Breadcrumbs }} - +

diff --git a/ui/lib/pki/addon/components/pki-role-details-page.ts b/ui/lib/pki/addon/components/pki-role-details-page.ts index 45279ee6d..174d33552 100644 --- a/ui/lib/pki/addon/components/pki-role-details-page.ts +++ b/ui/lib/pki/addon/components/pki-role-details-page.ts @@ -19,8 +19,9 @@ interface Args { export default class DetailsPage extends Component { 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 }, ]; } diff --git a/ui/lib/pki/addon/controllers/certificates/index.js b/ui/lib/pki/addon/controllers/certificates/index.js index 2b80479a8..545402d6a 100644 --- a/ui/lib/pki/addon/controllers/certificates/index.js +++ b/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; } diff --git a/ui/tests/helpers/pki/page-role-details.js b/ui/tests/helpers/pki/page-role-details.js index c6c028183..b1e3851c1 100644 --- a/ui/tests/helpers/pki/page-role-details.js +++ b/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"]', diff --git a/ui/tests/integration/components/page/breadcrumbs-test.js b/ui/tests/integration/components/page/breadcrumbs-test.js new file mode 100644 index 000000000..4d3bcaf76 --- /dev/null +++ b/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``); + 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' + ); + }); +});