Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ui/transit key versions update #8480

Merged
merged 4 commits into from
Mar 5, 2020
Merged

Ui/transit key versions update #8480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e32aee
feat: Update transit versions list styling and add ability to copy pu…
chelshaw Mar 4, 2020
5c73096
Update transit versions list styling and add ability to copy public k…
chelshaw Mar 4, 2020
6af227a
Remove copy key option from symmetrical encryption sources
chelshaw Mar 5, 2020
a76c0cd
Cursor is default if list item row has no destination
chelshaw Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui/app/styles/components/list-item-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,8 @@ a.list-item-row,
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow,
$box-shadow-middle;
}

&.no-destination {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this made me lol. nice! 🚀

cursor: default;
}
}
173 changes: 60 additions & 113 deletions ui/app/templates/partials/transit-form-show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,135 +99,82 @@
(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 class="linked-block list-item-row no-destination" data-test-transit-key-version-row={{version}}>
<div class="columns is-mobile">
<div class="column is-3">
<div class="level level-left">
<Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
<strong class="has-padding is-size-5">Version {{version}}</strong>
</div>
</div>
<div class="column is-one-third">
<div class="th">
Name
<div class="column is-4">
<div class="td is-borderless">
<small class="help has-text-grey">
{{date-from-now creationTimestamp addSuffix=true }}
</small>
</div>
</div>
<div class="column is-one-third">
<div class="th">
Created at
<div class="column is-5">
<div class="td is-borderless">
{{#if (coerce-eq key.minDecryptionVersion version)}}
<p class="help level level-left">
<Icon @glyph="check-circle-fill" class="has-text-success" />
Current minimum decryption version
</p>
{{/if}}
</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}}
{{else}}
{{#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 class="linked-block list-item-row" data-test-transit-key-version-row={{version}}>
<div class="columns is-mobile">
<div class="column is-3">
<div class="level level-left">
<Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
<strong class="has-padding is-size-5">Version {{version}}</strong>
</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 class="column is-4">
<div class="td is-borderless">
<small class="help has-text-grey">
{{date-from-now meta.creation_time addSuffix=true }}
</small>
</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 class="column is-4">
<div class="td is-borderless">
{{#if (coerce-eq key.minDecryptionVersion version)}}
<p class="help level level-left">
<Icon @glyph="check-circle-fill" class="has-text-success" />
Current minimum decryption version
</p>
{{/if}}
</div>
</div>
<div class="column is-1 is-flex-end">
<PopupMenu name="secret-menu">
<nav class="menu">
<ul class="menu-list">
<li class="action">
{{#copy-button
clipboardText=meta.public_key
class="link button is-transparent"
buttonType="button"
success=(action (set-flash-message 'Public key copied!'))
}}
Copy Public Key
{{/copy-button}}
</li>
</ul>
</nav>
</PopupMenu>
</div>
</div>
{{/if}}
</div>
{{/each-in}}
{{/if}}
{{else}}
Expand Down