upstream/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2026-06-09 00:33:28 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

UI: fix dropdown triggered flyout (#12933) (#13011)

Browse source 
* fix dropdown triggered flyout

* update tests

* hide policy generator action on community

Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>
This commit is contained in:
Vault Automation 2026-03-13 17:08:42 -04:00 committed by GitHub
parent 346e1386e9
commit 83b6e12d81
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 49 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/lib/core/addon/components/code-generator/policy/flyout.ts
View file

@ -93,7 +93,7 @@ export default class CodeGeneratorPolicyFlyout extends Component<Args> {
models: ['acl', this.policyName],
},
});
this.showFlyout = false;
this.closeFlyout();
this.resetFlyoutState();
} catch (e) {
const { message } = yield this.api.parseError(e);

25
ui/lib/kv/addon/components/page/list.hbs
View file

@ -12,15 +12,16 @@
</:badges>
<:actions>
<ManageDropdown @model={{@backendModel}} @configRoute="configuration" as |D|>
<CodeGenerator::Policy::Flyout @onClose={{D.close}}>
<:customTrigger as |openFlyout|>
<D.Interactive @icon="shield-check" {{on "click" openFlyout}} data-test-popup-menu="Generate policy">
Generate policy
</D.Interactive>
</:customTrigger>
</CodeGenerator::Policy::Flyout>
{{#unless this.version.isCommunity}}
<D.Interactive
@icon="shield-check"
{{on "click" (fn (mut this.showPolicyFlyout) true)}}
data-test-popup-menu="Generate policy"
>
Generate policy
</D.Interactive>
{{/unless}}
</ManageDropdown>
<Hds::Button
@text="Create secret"
@icon="plus"
@ -32,6 +33,14 @@
</:actions>
</Page::Header>
<CodeGenerator::Policy::Flyout @onClose={{(fn (mut this.showPolicyFlyout) false)}}>
<:customTrigger as |openFlyout|>
{{#if this.showPolicyFlyout}}
<div {{did-insert openFlyout}} />
{{/if}}
</:customTrigger>
</CodeGenerator::Policy::Flyout>
<KvTabsToolbar>
<:tabs>
<li><LinkTo @route="list" data-test-tab="Secrets" @model={{@backend}}>Secrets</LinkTo></li>

2
ui/lib/kv/addon/components/page/list.js
View file

@ -28,9 +28,11 @@ export default class KvListPageComponent extends Component {
@service flashMessages;
@service('app-router') router;
@service api;
@service version;
@tracked secretPath;
@tracked metadataToDelete = null; // set to the metadata intended to delete
@tracked showPolicyFlyout = false;
// used for KV list and list-directory view
// ex: beep/

51
ui/tests/integration/components/code-generator/policy/flyout-test.js
View file

@ -113,21 +113,30 @@ module('Integration | Component | code-generator/policy/flyout', function (hooks
// This test is to demonstrate how to implement closing the dropdown when the flyout trigger is a dropdown element
test('it closes dropdown if custom trigger is a dropdown item', async function (assert) {
this.showPolicyFlyout = false;
await render(hbs`<Hds::Dropdown as |D|>
<D.ToggleButton @text="Toolbox" data-test-dropdown="Toolbox" />
<CodeGenerator::Policy::Flyout @onClose={{D.close}} >
<:customTrigger as |openFlyout|>
<D.Interactive @icon="shield-check" {{on "click" openFlyout}} data-test-button="Make me a policy!">
Make me a policy!
</D.Interactive>
</:customTrigger>
</CodeGenerator::Policy::Flyout>
<D.Interactive @icon="shield-check" {{on "click" (fn (mut this.showPolicyFlyout) true)}} data-test-button="Make me a policy!">
Make me a policy!
</D.Interactive>
<D.Interactive @icon="wand" data-test-button="Magic stuff">Magic stuff</D.Interactive>
</Hds::Dropdown>`);
</Hds::Dropdown>
<CodeGenerator::Policy::Flyout @onClose={{(fn (mut this.showPolicyFlyout) false)}}>
<:customTrigger as |openFlyout|>
{{#if this.showPolicyFlyout}}
<div {{did-insert openFlyout}}/>
{{/if}}
</:customTrigger>
</CodeGenerator::Policy::Flyout>
`);
await click(GENERAL.dropdownToggle('Toolbox'));
assert.dom(GENERAL.dropdownToggle('Toolbox')).hasAttribute('aria-expanded', 'true');
await click(GENERAL.button('Make me a policy!'));
assert.dom(GENERAL.flyout).exists('flyout is open');
await fillIn(GENERAL.inputByAttr('name'), 'test-policy');
await click(GENERAL.submitButton);
assert.dom(GENERAL.messageError).exists();
await click(GENERAL.cancelButton);
assert.dom(GENERAL.flyout).doesNotExist('flyout is closed');
const dropdown = find(GENERAL.dropdownToggle('Toolbox'));
@ -139,20 +148,18 @@ module('Integration | Component | code-generator/policy/flyout', function (hooks
test('it does not render yielded custom trigger component on community', async function (assert) {
this.version.type = 'community';
await this.renderComponent({ open: false });
await render(hbs`<Hds::Dropdown as |D|>
<D.ToggleButton @text="Toolbox" data-test-dropdown="Toolbox" />
<CodeGenerator::Policy::Flyout>
<:customTrigger as |openFlyout|>
<D.Interactive @icon="shield-check" {{on "click" openFlyout}} data-test-button="Make me a policy!">
Make me a policy!
</D.Interactive>
</:customTrigger>
</CodeGenerator::Policy::Flyout>
<D.Interactive @icon="wand" data-test-button="Magic stuff">Magic stuff</D.Interactive>
</Hds::Dropdown>`);
await click(GENERAL.dropdownToggle('Toolbox'));
assert.dom(GENERAL.button('Magic stuff')).exists('dropdown opens');
await render(hbs`
<CodeGenerator::Policy::Flyout>
<:customTrigger>
<Hds::Button
@icon="shield-check"
@text="Make me a policy!"
@color="secondary"
data-test-button="Make me a policy!"
/>
</:customTrigger>
</CodeGenerator::Policy::Flyout>
`);
assert.dom(GENERAL.button('Make me a policy!')).doesNotExist();
});