UI: Moving CTA buttons out of toolbars for keymgmt + add manage button (#31466)

* moving CTA buttons out of toolbar

* adding flag check, using dropdown

* moving flag computations into computed property
This commit is contained in:
Dan Rivera 2025-08-11 14:05:37 -04:00 committed by GitHub
parent 6b1a6b2efd
commit 6d7968a7aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 12 deletions

View file

@ -10,6 +10,7 @@ import Controller from '@ember/controller';
import BackendCrumbMixin from 'vault/mixins/backend-crumb';
import ListController from 'core/mixins/list-controller';
import { keyIsFolder } from 'core/utils/key-utils';
import engineDisplayData from 'vault/helpers/engines-display-data';
export default Controller.extend(ListController, BackendCrumbMixin, {
flashMessages: service(),
@ -17,6 +18,11 @@ export default Controller.extend(ListController, BackendCrumbMixin, {
tab: '',
// Check if the current engine is an old engine - for showing old UI designs
get isOldEngine() {
return engineDisplayData(this.backendType)?.isOldEngine;
},
// callback from HDS pagination to set the queryParams page
get paginationQueryParams() {
return (page) => {

View file

@ -39,21 +39,46 @@
{{/if}}
</ToolbarFilters>
<ToolbarActions>
<ToolbarSecretLink
@secret=""
@mode="create"
@backend={{this.backendModel.id}}
@type="add"
@queryParams={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
data-test-create-secret-link
>
{{options.create}}
</ToolbarSecretLink>
</ToolbarActions>
{{! Old Engines will keep the existing toolbar actions }}
{{#if this.isOldEngine}}
<ToolbarActions>
<ToolbarSecretLink
@secret=""
@mode="create"
@backend={{this.backendModel.id}}
@type="add"
@queryParams={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
data-test-create-secret-link
>
{{options.create}}
</ToolbarSecretLink>
</ToolbarActions>
{{/if}}
</Toolbar>
{{/if}}
{{! Display CTA buttons if isOldEngine flag is not set }}
{{#unless this.isOldEngine}}
<div class="flex column-gap-16 top-right-absolute has-top-margin-s">
{{! TODO: Hook dropdown actions to the appropriate routes & actions }}
<Hds::Dropdown as |D|>
<D.ToggleButton @text="Manage" @color="secondary" data-test-manage-dropdown />
<D.Interactive @icon="settings" @route="vault.cluster.secrets.backend.configuration.index">Configure</D.Interactive>
<D.Interactive {{on "click" D.close}} @color="critical" @icon="trash">Delete</D.Interactive>
</Hds::Dropdown>
<Hds::Button
@text={{options.create}}
@icon="plus"
{{! This route would be set in secret-link.js but we're using an HDS button instead of the ToolbarSecretLink wrapper so we're explicitly setting it here }}
@route="vault.cluster.secrets.backend.create-root"
@query={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
{{! TODO: rename this test identifier when updating tests }}
data-test-create-secret-link
/>
</div>
{{/unless}}
{{#if this.model.meta.total}}
{{#each this.model as |item|}}
{{! Because of the component helper cannot use glimmer nested SecretList::Item }}