open-vault/ui/app/templates/partials/transit-form-show.hbs
Noelle Daley b004a24cdf
UI: Redesign transit UX (#8304)
* add placeholder for Key actions tab

* navigate to key items by default

* add placeholder key actions list page

* remove extra whitespace from component blueprint

* add SelectableCard

* move key actions from side nav to top nav

* make tabs active

* remove toolbar from key actions pages

* add divs to link to each key action on key actions page

* move preview-head to gitignore

* use selectable card css

* remove key actions

* use css grid

* update selectable card styling

* update Key Actions page header

* make cards clickable

* refactor supportedActions to include glyph

* make header black on hover

* rename selectable-card transit card and update styling

* add description and glyph for other key types

* use human readable titles for key action names

* update tests; still need to fix failing ones

* use datakey instead of data-key

* fix some failing tests

* fix more tests

* remove extra chevron from rotate button

* remove whitespace

* remove pauseTest

* use rename export to export key in the template instead of the model

* fix last few failing tests

* WIP

* link to key actions page by default

* test for transit action title

* only add query params when viewing a transit secret

* update structure icons

* add missing structure icons

* resolve merge conflicts from rebase

* use filter and map for supported actions

* only add query params for transit secrets
2020-02-14 11:20:44 -06:00

242 lines
7.9 KiB
Handlebars

<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<ul>
<li class="{{if (eq tab 'actions') 'is-active'}}">
{{#secret-link
secret=key.id
mode="show"
replace=true
queryParams=(query-params tab='actions')
data-test-transit-key-actions-link=true
}}
Key Actions
{{/secret-link}}
</li>
<li class="{{if (eq tab 'details') 'is-active'}}">
{{#secret-link
secret=key.id
mode="show"
replace=true
queryParams=(query-params tab='details')
data-test-transit-link="details"
}}
Details
{{/secret-link}}
</li>
<li class="{{if (eq tab 'versions') 'is-active'}}">
{{#secret-link
secret=key.id
mode="show"
replace=true
queryParams=(query-params tab='versions')
data-test-transit-link="versions"
}}
Versions
{{/secret-link}}
</li>
</ul>
</nav>
</div>
{{#unless (eq tab 'actions')}}
<Toolbar>
<ToolbarActions>
{{#if (eq tab 'versions')}}
<TransitKeyActions
@key={{key}}
@selectedAction="rotate"
@capabilities={{capabilities}}
@onRefresh={{action "refresh"}}
/>
{{/if}}
{{#if (eq mode "show") }}
{{#if (or capabilities.canUpdate capabilities.canDelete)}}
<ToolbarSecretLink
@secret={{key.id}}
@mode="edit"
replace=true
>
Edit encryption key
</ToolbarSecretLink>
{{/if}}
{{/if}}
</ToolbarActions>
</Toolbar>
{{/unless}}
{{#if (eq tab 'actions')}}
<div class="transit-card-container">
{{#each model.supportedActions as |supportedAction|}}
{{#linked-block
"vault.cluster.secrets.backend.actions"
model.id
queryParams=(hash action=supportedAction.name)
class="transit-card"
data-test-transit-card=supportedAction.name
}}
<div class="transit-icon">
<Icon
@glyph={{supportedAction.glyph}}
@size="l"
class="has-text-grey auto-width"
aria-label={{concat backend.path " options"}} />
</div>
<div class="transit-description">
<h2 class="title is-6" data-test-transit-action-title={{supportedAction.name}}>
{{if (eq supportedAction.name 'export') 'Export Key' (humanize supportedAction.name)}}
</h2>
<p class="transit-action-description">{{supportedAction.description}}</p>
</div>
{{/linked-block}}
{{/each}}
</div>
{{else if (eq tab 'versions')}}
{{#if (or
(eq key.type "aes256-gcm96")
(eq key.type "chacha20-poly1305")
)
}}
<div class="columns is-mobile is-gapless is-marginless table">
<div class="column is-half thead">
<div class="th">
Version
</div>
</div>
<div class="column is-half thead">
<div class="th">
Created at
</div>
</div>
</div>
{{#each-in key.keys as |version creationTimestamp|}}
<div class="columns is-mobile is-gapless is-marginless table" data-test-transit-key-version-row={{version}}>
<div class="column is-half td">
<div class="td is-borderless">
{{version}}
{{#if (coerce-eq key.minDecryptionVersion version)}}
<p class="help has-text-grey">(current minimum decryption version)</p>
{{/if}}
</div>
</div>
<div class="column is-half td">
<div class="td is-borderless">
{{date-format creationTimestamp 'MMM DD, YYYY hh:mm:ss A'}}
<br />
<small class="is-font-mono has-text-grey">
{{date-format creationTimestamp }}
</small>
</div>
</div>
</div>
{{/each-in}}
{{else}}
<div class="columns is-gapless is-marginless table">
<div class="column is-11 thead">
<div class="columns is-marginless is-gapless">
<div class="column is-one-third">
<div class="th">
Version
</div>
</div>
<div class="column is-one-third">
<div class="th">
Name
</div>
</div>
<div class="column is-one-third">
<div class="th">
Created at
</div>
</div>
</div>
</div>
<div class="column is-1 thead is-hidden-mobile">
<div class="column thead is-narrow">
<div class="th"></div>
</div>
</div>
</div>
{{#each-in key.keys as |version meta|}}
<div class="columns is-gapless is-marginless table {{if (get this (concat version '-open')) 'has-background-grey-lighter' }}"
data-test-transit-key-version-row={{version}}>
<div class="column {{if (get this (concat version '-open')) '' 'td' }}">
<div class="columns is-marginless is-gapless">
<div class="column is-11">
<div class="columns is-marginless is-gapless">
<div class="column is-one-third">
<div class="td is-borderless">
{{version}}
{{#if (coerce-eq key.minDecryptionVersion version)}}
<p class="help has-text-grey">(current minimum decryption version)</p>
{{/if}}
</div>
</div>
<div class="column is-one-third">
<div class="td is-borderless">
{{meta.name}}
</div>
</div>
<div class="column is-one-third">
<div class="td is-borderless">
<div>
{{date-format meta.creation_time 'MMM DD, YYYY hh:mm:ss A'}}
<br />
<small class="is-font-mono has-text-grey">
{{date-format meta.creation_time}}
</small>
</div>
</div>
</div>
</div>
</div>
<div class="column is-1 has-text-centered is-flex-v-centered">
<button class="button is-transparent" type="button" {{action (toggle (concat version '-open') this)}}>
<Icon
@glyph="more-horizontal"
class="has-text-black auto-width"
aria-label={{concat backend.path " options"}}
/>
</button>
</div>
</div>
</div>
</div>
{{#if (get this (concat version '-open'))}}
<div class="table has-background-grey-lighter is-paddingless is-marginless">
<div class="td">
<div>
<span class="is-label">
Public Key
</span>
<pre class="has-background-transparent"><code class="is-paddingless">{{meta.public_key}}</code></pre>
<div class="box is-fullwidth has-background-transparent is-shadowless">
<div class="control">
{{#copy-button
clipboardText=meta.public_key
class="button"
buttonType="button"
success=(action (set-flash-message (concat 'Public key for version ' version ' copied!')))
}}
Copy
{{/copy-button}}
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/each-in}}
{{/if}}
{{else}}
{{info-table-row label="Type" value=key.type}}
{{info-table-row label="Deletion allowed" value=(stringify key.deletionAllowed)}}
{{#if key.derived}}
{{info-table-row label="Derived" value=key.derived}}
{{info-table-row label="Convergent encryption" value=key.convergentEncryption}}
{{/if}}
{{/if}}