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
This commit is contained in:
Angel Garbarino 2022-09-07 14:04:41 -07:00 committed by GitHub
parent e9768b6bc6
commit 41164a462f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 114 additions and 52 deletions

View File

@ -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);
}
}

View File

@ -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}}

View File

@ -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}}

View File

@ -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;
}

View File

@ -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}}

View File

@ -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();

View File

@ -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>
<LinkTo @route="vault.cluster.secrets">
secrets
</LinkTo>
{{#if @isEngine}}
{{link-to-external "secrets" "secrets"}}
{{else}}
<LinkTo @route="vault.cluster.secrets">
secrets
</LinkTo>
{{/if}}
</li>
</KeyValueHeader>
</p.top>
@ -28,35 +37,39 @@
{{#if options.tabs}}
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
<nav class="tabs" aria-label="secret tabs">
<ul>
{{#if options.hasOverview}}
<LinkTo @route="vault.cluster.secrets.backend.overview" data-test-tab="overview">
Overview
</LinkTo>
{{/if}}
{{#each options.tabs as |oTab|}}
{{#if oTab.tab}}
{{#if @isEngine}}
<ul>
{{#each options.tabs as |oTab|}}
<SecretListHeaderTab
@displayName={{options.displayName}}
@id={{@model.id}}
@path={{oTab.checkCapabilitiesPath}}
@label={{oTab.label}}
@tab={{oTab.tab}}
/>
{{else}}
<SecretListHeaderTab
@displayName={{options.displayName}}
@id={{@model.id}}
@path={{oTab.checkCapabilitiesPath}}
@label={{oTab.label}}
@tab={{""}}
@link={{oTab.link}}
@isEngine={{@isEngine}}
/>
{{/each}}
</ul>
{{else}}
<ul>
{{#if options.hasOverview}}
<LinkTo @route="vault.cluster.secrets.backend.overview" data-test-tab="overview">
Overview
</LinkTo>
{{/if}}
{{/each}}
<LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
Configuration
</LinkTo>
</ul>
{{#each options.tabs as |oTab|}}
<SecretListHeaderTab
@displayName={{options.displayName}}
@id={{@model.id}}
@path={{oTab.checkCapabilitiesPath}}
@label={{oTab.label}}
@tab={{or oTab.tab ""}}
/>
{{/each}}
<LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
Configuration
</LinkTo>
</ul>
{{/if}}
</nav>
</div>
{{else}}

View File

@ -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);
}
}

View File

@ -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]) {
const selected = SECRET_BACKENDS[backend];
export function optionsForBackend([backend, tab, isEngine]) {
const selected = isEngine ? ENGINE_SECRET_BACKENDS[backend] : SECRET_BACKENDS[backend];
let backendOptions;
if (selected && selected.tabs) {

View File

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

View File

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

View File

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

View File

@ -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}}
/>