Glimmerize KeyValueHeader (#16967)

* glimmerize

* pr cleanup

ui/lib/core/addon/components/key-value-header.hbs

@@ -0,0 +1,22 @@
+<nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    {{yield}}
+    {{#each this.secretPath as |path index|}}
+      <li class={{if (is-active-route path.path path.model isExact=true) "is-active"}}>
+        <span class="sep">&#x0002f;</span>
+        {{#if this.linkToPaths}}
+          <LinkTo
+            @route={{path.path}}
+            @model={{path.model}}
+            data-test-secret-root-link={{if (eq index 0) true false}}
+            data-test-secret-breadcrumb={{path.text}}
+          >
+            {{path.text}}
+          </LinkTo>
+        {{else}}
+          <span>{{path.text}}</span>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+</nav>

ui/lib/core/addon/components/key-value-header.js

@@ -1,46 +1,47 @@
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import utils from 'vault/lib/key-utils';
-import layout from '../templates/components/key-value-header';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
-export default Component.extend({
-  layout,
-  tagName: 'nav',
-  classNames: 'key-value-header breadcrumb',
-  ariaLabel: 'breadcrumbs',
-  attributeBindings: ['ariaLabel:aria-label', 'aria-hidden'],
+/**
+ * @module KeyValueHeader
+ * KeyValueHeader components show breadcrumbs for secret engines.
+ *
+ * @example
+ * ```js
+ <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{this.mode}} @root={{@root}}/>
+ * ```
+ * @param {string} [mode=null] - Used to set the currentPath.
+ * @param {string} [baseKey=null] - Used to generate the path backward.
+ * @param {string} [path=null] - The fallback path.
+ * @param {string} [root=null] - Used to set the secretPath.
+ * @param {boolean} [showCurrent=true] - Boolean to show the second part of the breadcrumb, ex: the secret's name.
+ * @param {boolean} [linkToPaths=true] - If true link to the path.
+ */
 
-  baseKey: null,
-  path: null,
-  showCurrent: true,
-  linkToPaths: true,
+export default class KeyValueHeader extends Component {
+  get showCurrent() {
+    return this.args.showCurrent || true;
+  }
+  get linkToPaths() {
+    return this.args.linkToPaths || true;
+  }
 
   stripTrailingSlash(str) {
     return str[str.length - 1] === '/' ? str.slice(0, -1) : str;
-  },
-
-  currentPath: computed('mode', 'path', 'showCurrent', function () {
-    const mode = this.mode;
-    const path = this.path;
-    const showCurrent = this.showCurrent;
-    if (!mode || showCurrent === false) {
-      return path;
   }
-    return `vault.cluster.secrets.backend.${mode}`;
-  }),
-  secretPath: computed(
-    'baseKey',
-    'baseKey.{display,id}',
-    'currentPath',
-    'path',
-    'root',
-    'showCurrent',
-    function () {
+
+  get currentPath() {
+    if (!this.args.mode || this.showCurrent === false) {
+      return this.args.path;
+    }
+    return `vault.cluster.secrets.backend.${this.args.mode}`;
+  }
+
+  get secretPath() {
     let crumbs = [];
-      const root = this.root;
-      const baseKey = this.baseKey?.display || this.baseKey?.id;
-      const baseKeyModel = encodePath(this.baseKey?.id);
+    const root = this.args.root;
+    const baseKey = this.args.baseKey?.display || this.args.baseKey?.id;
+    const baseKeyModel = encodePath(this.args.baseKey?.id);
 
     if (root) {
       crumbs.push(root);
@@ -50,7 +51,7 @@ export default Component.extend({
       return crumbs;
     }
 
-      const path = this.path;
+    const path = this.args.path;
     const currentPath = this.currentPath;
     const showCurrent = this.showCurrent;
     const ancestors = utils.ancestorKeysForKey(baseKey);
@@ -92,5 +93,4 @@ export default Component.extend({
 
     return crumbs;
   }
-  ),
-});
+}

ui/lib/core/addon/templates/components/key-value-header.hbs

@@ -1,20 +0,0 @@
-<ul>
-  {{yield}}
-  {{#each this.secretPath as |path index|}}
-    <li class={{if (is-active-route path.path path.model isExact=true) "is-active"}}>
-      <span class="sep">&#x0002f;</span>
-      {{#if this.linkToPaths}}
-        <LinkTo
-          @route={{path.path}}
-          @model={{path.model}}
-          data-test-secret-root-link={{if (eq index 0) true false}}
-          data-test-secret-breadcrumb={{path.text}}
-        >
-          {{path.text}}
-        </LinkTo>
-      {{else}}
-        <span>{{path.text}}</span>
-      {{/if}}
-    </li>
-  {{/each}}
-</ul>