Move SecretListHeader and SecretListHeaderTab to addon folder (#16981)

* move two components to add on and create new helper for engines

* change nmae of options-for-backend. will need conditional in template

* move options for backend

* pass through isEngine to secretListHeaderTab

* secret list header remove comments

* conditional options-for-backend

* missing part for documentation

* pr comments cleanup

* cleanup

* cleanup

* cleanup

ui/app/components/secret-list-header.js

@@ -1,15 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class SecretListHeader extends Component {
-  // api
-  isCertTab = false;
-  isConfigure = false;
-  baseKey = null;
-  backendCrumb = null;
-  model = null;
-  options = null;
-
-  get isKV() {
-    return ['kv', 'generic'].includes(this.args.model.engineType);
-  }
-}

ui/app/templates/components/secret-list-header-tab.hbs

@@ -1,5 +0,0 @@
-{{#unless this.dontShowTab}}
-  <LinkTo @route="vault.cluster.secrets.backend.list-root" @query={{hash tab=@tab}} data-test-secret-list-tab={{@label}}>
-    {{@label}}
-  </LinkTo>
-{{/unless}}

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

@@ -4,7 +4,7 @@
     {{#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}}
+        {{#if (and this.linkToPaths (not @isEngine))}}
           <LinkTo
             @route={{path.path}}
             @model={{path.model}}

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

@@ -16,12 +16,14 @@ import { encodePath } from 'vault/utils/path-encoding-helpers';
  * @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.
+ * @param {boolean} [isEngine=false] - Change the LinkTo if the path is coming from an engine.
  */
 
 export default class KeyValueHeader extends Component {
   get showCurrent() {
     return this.args.showCurrent || true;
   }
+
   get linkToPaths() {
     return this.args.linkToPaths || true;
   }

ui/lib/core/addon/components/secret-list-header-tab.hbs

@@ -0,0 +1,11 @@
+{{#unless this.dontShowTab}}
+  {{#if @isEngine}}
+    <LinkTo @route={{@link}}>
+      {{@label}}
+    </LinkTo>
+  {{else}}
+    <LinkTo @route="vault.cluster.secrets.backend.list-root" @query={{hash tab=@tab}} data-test-secret-list-tab={{@label}}>
+      {{@label}}
+    </LinkTo>
+  {{/if}}
+{{/unless}}

ui/lib/core/addon/components/secret-list-header-tab.js

@@ -14,6 +14,8 @@
  * @param {string} [path] - set on options-for-backend this tells us the specifics of the URL the query should hit.
  * @param {string} label - The name displayed on the tab.   Set on the options-for-backend.
  * @param {string} [tab] - The name of the tab.  Set on the options-for-backend.
+ * @param {boolean} [isEngine=false] - If used within an Ember engine, will need to modify how the links to routes are defined.
+ * @param {string} [link] - If within an engine provide the name of the link that is defined in the routes file fo the engine, example : 'overview'.
  *
  */
 import Component from '@glimmer/component';
@@ -23,6 +25,7 @@ import { inject as service } from '@ember/service';
 export default class SecretListHeaderTab extends Component {
   @service store;
   @tracked dontShowTab;
+
   constructor() {
     super(...arguments);
     this.fetchCapabilities();

ui/lib/core/addon/components/secret-list-header.hbs

@@ -1,14 +1,23 @@
-{{#let (options-for-backend @model.engineType) as |options|}}
+{{#let (options-for-backend @model.engineType "" @isEngine) as |options|}}
   <PageHeader as |p|>
     <p.top>
-      <KeyValueHeader @baseKey={{@baseKey}} @path="vault.cluster.secrets.backend.list" @root={{@backendCrumb}}>
+      <KeyValueHeader
+        @baseKey={{@baseKey}}
+        @path="vault.cluster.secrets.backend.list"
+        @root={{@backendCrumb}}
+        @isEngine={{@isEngine}}
+      >
         <li>
           <span class="sep">
             /
           </span>
+          {{#if @isEngine}}
+            {{link-to-external "secrets" "secrets"}}
+          {{else}}
             <LinkTo @route="vault.cluster.secrets">
               secrets
             </LinkTo>
+          {{/if}}
         </li>
       </KeyValueHeader>
     </p.top>
@@ -28,6 +37,19 @@
   {{#if options.tabs}}
     <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
       <nav class="tabs" aria-label="secret tabs">
+        {{#if @isEngine}}
+          <ul>
+            {{#each options.tabs as |oTab|}}
+              <SecretListHeaderTab
+                @displayName={{options.displayName}}
+                @id={{@model.id}}
+                @label={{oTab.label}}
+                @link={{oTab.link}}
+                @isEngine={{@isEngine}}
+              />
+            {{/each}}
+          </ul>
+        {{else}}
           <ul>
             {{#if options.hasOverview}}
               <LinkTo @route="vault.cluster.secrets.backend.overview" data-test-tab="overview">
@@ -35,28 +57,19 @@
               </LinkTo>
             {{/if}}
             {{#each options.tabs as |oTab|}}
-            {{#if oTab.tab}}
               <SecretListHeaderTab
                 @displayName={{options.displayName}}
                 @id={{@model.id}}
                 @path={{oTab.checkCapabilitiesPath}}
                 @label={{oTab.label}}
-                @tab={{oTab.tab}}
+                @tab={{or oTab.tab ""}}
               />
-            {{else}}
-              <SecretListHeaderTab
-                @displayName={{options.displayName}}
-                @id={{@model.id}}
-                @path={{oTab.checkCapabilitiesPath}}
-                @label={{oTab.label}}
-                @tab={{""}}
-              />
-            {{/if}}
             {{/each}}
             <LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
               Configuration
             </LinkTo>
           </ul>
+        {{/if}}
       </nav>
     </div>
   {{else}}

ui/lib/core/addon/components/secret-list-header.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+
+/**
+ * @module SecretListHeader
+ * SecretListHeader component is breadcrumb, title with icon and menu with tabs component.
+ *
+ * @example
+ * ```js
+ * <SecretListHeader
+   @model={{this.model}}
+   @backendCrumb={{hash
+    label=this.model.id
+    text=this.model.id
+    path="vault.cluster.secrets.backend.list-root"
+    model=this.model.id
+   }}
+  />
+ * ```
+ * @param {object} model - Model used to pull information about icon and title and backend type for navigation.
+ * @param {string} [baseKey] - Provided for navigation on the breadcrumbs.
+ * @param {object} [backendCrumb] - Includes label, text, path and model ID.
+ * @param {boolean} [isEngine=false] - Changes link type if the component is being used inside an Ember engine.
+ */
+
+export default class SecretListHeader extends Component {
+  get isKV() {
+    return ['kv', 'generic'].includes(this.args.model.engineType);
+  }
+}

ui/lib/core/addon/helpers/options-for-backend.js

@@ -10,6 +10,18 @@ const DEFAULT_DISPLAY = {
   editComponent: 'secret-edit',
   listItemPartial: 'secret-list/item',
 };
+const ENGINE_SECRET_BACKENDS = {
+  pki: {
+    displayName: 'PKI',
+    navigateTree: false,
+    tabs: [
+      {
+        label: 'Overview',
+        link: 'overview',
+      },
+    ],
+  },
+};
 const SECRET_BACKENDS = {
   aws: {
     displayName: 'AWS',
@@ -166,8 +178,8 @@ const SECRET_BACKENDS = {
   },
 };
 
-export function optionsForBackend([backend, tab]) {
+export function optionsForBackend([backend, tab, isEngine]) {
-  const selected = SECRET_BACKENDS[backend];
+  const selected = isEngine ? ENGINE_SECRET_BACKENDS[backend] : SECRET_BACKENDS[backend];
   let backendOptions;
 
   if (selected && selected.tabs) {

ui/lib/core/app/components/secret-list-header-tab.js

@@ -0,0 +1 @@
+export { default } from 'core/components/secret-list-header-tab';

ui/lib/core/app/components/secret-list-header.js

@@ -0,0 +1 @@
+export { default } from 'core/components/secret-list-header';

ui/lib/core/app/helpers/options-for-backend.js

@@ -0,0 +1 @@
+export { default } from 'core/helpers/options-for-backend';

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

@@ -1 +1,10 @@
-Overview WIP
+<SecretListHeader
+  @model={{this.model}}
+  @backendCrumb={{hash
+    label=this.model.id
+    text=this.model.id
+    path="vault.cluster.secrets.backend.list-root"
+    model=this.model.id
+  }}
+  @isEngine={{true}}
+/>