open-vault/ui/app/templates/vault/cluster/policies/index.hbs
Noelle Daley 716f25162a
Ui/redesign delete confirmation (#7271)
* add initial Confirm component to secrets list page

* use ember-wormholes to render confirmation message

* use maybe-in-element instead of ember-wormhole

* hide overlay initially

* animate confirm overlay left and right on click

* hide overlay in the DOM to properly set height

* adjust height when showing/hiding confirm-overlay

* disable confirmation buttons until trigger has been rendered

* adjust height of confirm-wrapper instead of confirm

* move Confirm/ to core

* only add style attribute when a height property exists

* fix indentation

* wip - use new Confirm inside status menu

* add Confirm to Storybook

* ensure confirm links have proper styling in Storybook and outside popup-menu

* fix height transition

* disable no-inline-styles

* add test selector

* remove comment

* consolidate Message into Trigger to make Confirm easier to use

* use new Trigger API in status menu

* remove height transition

* fix binding inline style warning

* rename confirmMessage to message

* update Confirm for Storybook

* fix indentation

* do not pass in onCancel from outer template because it is static

* add jsdoc comments to Trigger

* wip - add trigger and confirm to storybook

* fix status menu styling

* fix styling of confirm stories

* use new Confirm on secrets engine list

* use bulma speed variable

* fix indentation

* re-renable eslint no-inline-styles

* showConfirm when rendered trigger matches id

* fix background color on namespace picker

* do not expose onTrigger

* Revert "re-renable eslint no-inline-styles"

This reverts commit c7b2a9097f177a2876afaaec6020f73b07bad3c7.

* rename Confirm Trigger to Message

* add tests

* update JSDocs

* focus trigger after cancelling the confirm message

* update Confirm JSDocs

* differentiate between ConfirmAction and Confirm

* add Message to Storybook

* re-enable eslint import/extensions

* update confirmButtonText to Revoke token

* remove linebreak and extra whitespace

* fix typo

* add loading to empty button

* fix more typos

* only show Message contents when showConfirm is true

* no need to disable the confirm buttons since they only render in the DOM when showConfirm is true

* use Confirm to delete aws roles

* use Confirm to delete pki roles

* use Confirm to delete ssh roles

* add Confirm to entity alias page

* fix confirm button text on Revoke token in status menu

* ensure you can use tab to revoke a token from status menu

* reset the open trigger after the confirm has been confirmed

* use Confirm on identity list pages

* fix Disable engine confirmation text

* use <PopupMenu /> angle brack syntax

* use Confirm on policies list page

* use Confirm for namespaces

* use Confirm for kmip scopes

* use Confirm for deleting kmip roles

* use Confirm for revoking KMIP credentials

* fix Revoke token triggerText
2019-08-27 15:50:53 -07:00

169 lines
6 KiB
Handlebars

{{#if (or (eq policyType "acl") (has-feature "Sentinel"))}}
<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3">
{{uppercase policyType}} Policies
{{#unless (eq policyType "acl")}}
<span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
Sentinel
</span>
{{/unless}}
</h1>
</p.levelLeft>
</PageHeader>
<Toolbar>
{{#if model.meta.total}}
<ToolbarFilters>
{{navigate-input
filterFocusDidChange=(action "setFilterFocus")
filterDidChange=(action "setFilter")
filter=filter
filterMatchesKey=filterMatchesKey
firstPartialMatch=firstPartialMatch
extraNavParams=policyType
placeholder="Filter policies"
mode="policy"
}}
{{#if filterFocused}}
{{#if filterMatchesKey}}
<p class="input-hint">
<kbd>ENTER</kbd> to go to <code>{{or pageFilter filter}}</code>
</p>
{{/if}}
{{#if firstPartialMatch}}
<p class="input-hint">
<kbd>TAB</kbd> to complete <code>{{firstPartialMatch.id}}</code>
</p>
{{/if}}
{{/if}}
</ToolbarFilters>
{{/if}}
<ToolbarActions>
<ToolbarLink
@type="add"
@params={{array 'vault.cluster.policies.create'}}
@data-test-policy-create-link=true
>
Create {{uppercase policyType}} policy
</ToolbarLink>
</ToolbarActions>
</Toolbar>
{{#if model.meta.total}}
{{#each model as |item|}}
{{#if (eq item.id "root")}}
<div class="list-item-row is-flex" data-test-policy-item>
<Icon
aria-hidden="true"
class="has-text-grey-light"
@glyph="file-outline"
/>
<div>
<span class="has-text-weight-semibold has-text-grey" data-test-policy-name>
{{item.id}}
</span>
<p class="help has-text-grey">
The <code>root</code> policy does not contain any rules but can
do anything within Vault. It should be used with extreme care.
</p>
</div>
</div>
{{else}}
{{#linked-block
"vault.cluster.policy.show"
policyType
item.id
class="list-item-row"
data-test-policy-link=item.id
}}
<div class="columns is-mobile">
<div class="column is-10">
{{#link-to "vault.cluster.policy.show" policyType item.id
class="has-text-black has-text-weight-semibold"
data-test-policy-item=true
}}<Icon
aria-hidden="true"
class="has-text-grey-light"
@glyph="file-outline"
/><span class="is-underline" data-test-policy-name>{{item.id}}</span>
{{/link-to}}
</div>
<div class="column has-text-right">
<PopupMenu name="policy-nav">
<Confirm as |c|>
<nav class="menu">
<ul class="menu-list">
{{#if item.updatePath.isPending}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
</li>
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
</li>
{{else}}
{{#if item.canRead}}
<li class="action">
{{#link-to "vault.cluster.policy.show" policyType item.id data-test-policy-link="show"}}
Details
{{/link-to}}
</li>
{{/if}}
{{#if item.canEdit}}
<li class="action">
{{#link-to "vault.cluster.policy.edit" policyType item.id data-test-policy-link="edit"}}
Edit
{{/link-to}}
</li>
{{/if}}
{{#if item.canDelete}}
<li class="action">
<c.Message
@id={{item.id}}
@confirmMessage="This will permanently delete this policy and may affect access to some data"
@onConfirm={{action "deletePolicy" item}}
data-test-policy-delete={{item.id}}/>
</li>
{{/if}}
{{/if}}
</ul>
</nav>
</Confirm>
</PopupMenu>
</div>
</div>
{{/linked-block}}
{{/if}}
{{else}}
<EmptyState
@title="No policies matching &quot;{{pageFilter}}&quot;"
/>
{{/each}}
{{#if (gt model.meta.lastPage 1) }}
{{list-pagination
page=model.meta.currentPage
lastPage=model.meta.lastPage
link="vault.cluster.policies.index"
}}
{{/if}}
{{else}}
<EmptyState
@title="No {{uppercase policyType}} policies yet"
@message="A list of policies will be listed here. Create your first {{uppercase policyType}} policy to get started."
>
{{#link-to "vault.cluster.policies.create" class="link"}}
Create {{uppercase policyType}} policy
<Chevron />
{{/link-to}}
<LearnLink @path="/vault/getting-started/policies">
Learn more
<Chevron />
</LearnLink>
</EmptyState>
{{/if}}
{{else}}
{{upgrade-page title="Sentinel" minimumEdition="Vault Enterprise Premium"}}
{{/if}}