Glimmerize KeyValueHeader (#16967)

* glimmerize

* pr cleanup

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

@@ -1,87 +1,65 @@
-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;
+  get currentPath() {
+    if (!this.args.mode || this.showCurrent === false) {
+      return this.args.path;
     }
-    return `vault.cluster.secrets.backend.${mode}`;
-  }),
-  secretPath: computed(
-    'baseKey',
-    'baseKey.{display,id}',
-    'currentPath',
-    'path',
-    'root',
-    'showCurrent',
-    function () {
-      let crumbs = [];
-      const root = this.root;
-      const baseKey = this.baseKey?.display || this.baseKey?.id;
-      const baseKeyModel = encodePath(this.baseKey?.id);
+    return `vault.cluster.secrets.backend.${this.args.mode}`;
+  }
 
-      if (root) {
-        crumbs.push(root);
-      }
+  get secretPath() {
+    let crumbs = [];
+    const root = this.args.root;
+    const baseKey = this.args.baseKey?.display || this.args.baseKey?.id;
+    const baseKeyModel = encodePath(this.args.baseKey?.id);
 
-      if (!baseKey) {
-        return crumbs;
-      }
+    if (root) {
+      crumbs.push(root);
+    }
 
-      const path = this.path;
-      const currentPath = this.currentPath;
-      const showCurrent = this.showCurrent;
-      const ancestors = utils.ancestorKeysForKey(baseKey);
-      const parts = utils.keyPartsForKey(baseKey);
-      if (ancestors.length === 0) {
-        crumbs.push({
-          label: baseKey,
-          text: this.stripTrailingSlash(baseKey),
-          path: currentPath,
-          model: baseKeyModel,
-        });
-
-        if (!showCurrent) {
-          crumbs.pop();
-        }
-
-        return crumbs;
-      }
-
-      ancestors.forEach((ancestor, index) => {
-        crumbs.push({
-          label: parts[index],
-          text: this.stripTrailingSlash(parts[index]),
-          path: path,
-          model: ancestor,
-        });
-      });
+    if (!baseKey) {
+      return crumbs;
+    }
 
+    const path = this.args.path;
+    const currentPath = this.currentPath;
+    const showCurrent = this.showCurrent;
+    const ancestors = utils.ancestorKeysForKey(baseKey);
+    const parts = utils.keyPartsForKey(baseKey);
+    if (ancestors.length === 0) {
       crumbs.push({
-        label: utils.keyWithoutParentKey(baseKey),
-        text: this.stripTrailingSlash(utils.keyWithoutParentKey(baseKey)),
+        label: baseKey,
+        text: this.stripTrailingSlash(baseKey),
         path: currentPath,
         model: baseKeyModel,
       });
@@ -92,5 +70,27 @@ export default Component.extend({
 
       return crumbs;
     }
-  ),
-});
+
+    ancestors.forEach((ancestor, index) => {
+      crumbs.push({
+        label: parts[index],
+        text: this.stripTrailingSlash(parts[index]),
+        path: path,
+        model: ancestor,
+      });
+    });
+
+    crumbs.push({
+      label: utils.keyWithoutParentKey(baseKey),
+      text: this.stripTrailingSlash(utils.keyWithoutParentKey(baseKey)),
+      path: currentPath,
+      model: baseKeyModel,
+    });
+
+    if (!showCurrent) {
+      crumbs.pop();
+    }
+
+    return crumbs;
+  }
+}