Skip to content

Commit 8e416d3

Browse files
chelshawchelshaw
authored
Backport: Ui/transit key versions update (#8480) (#8579)
1 parent a83aba8 commit 8e416d3

File tree

2 files changed

+64
-113
lines changed

2 files changed

+64
-113
lines changed

‎ui/app/styles/components/list-item-row.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,8 @@ a.list-item-row,
2626
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow,
2727
$box-shadow-middle;
2828
}
29+
30+
&.no-destination {
31+
cursor: default;
32+
}
2933
}

‎ui/app/templates/partials/transit-form-show.hbs‎

Lines changed: 60 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -105,135 +105,82 @@
105105
(eq key.type "chacha20-poly1305")
106106
)
107107
}}
108-
<div class="columns is-mobile is-gapless is-marginless table">
109-
<div class="column is-half thead">
110-
<div class="th">
111-
Version
112-
</div>
113-
</div>
114-
<div class="column is-half thead">
115-
<div class="th">
116-
Created at
117-
</div>
118-
</div>
119-
</div>
120108
{{#each-in key.keys as |version creationTimestamp|}}
121-
<div class="columns is-mobile is-gapless is-marginless table" data-test-transit-key-version-row={{version}}>
122-
<div class="column is-half td">
123-
<div class="td is-borderless">
124-
{{version}}
125-
{{#if (coerce-eq key.minDecryptionVersion version)}}
126-
<p class="help has-text-grey">(current minimum decryption version)</p>
127-
{{/if}}
128-
</div>
129-
</div>
130-
<div class="column is-half td">
131-
<div class="td is-borderless">
132-
{{date-format creationTimestamp 'MMM DD, YYYY hh:mm:ss A'}}
133-
<br />
134-
<small class="is-font-mono has-text-grey">
135-
{{date-format creationTimestamp }}
136-
</small>
137-
</div>
138-
</div>
139-
</div>
140-
{{/each-in}}
141-
{{else}}
142-
<div class="columns is-gapless is-marginless table">
143-
<div class="column is-11 thead">
144-
<div class="columns is-marginless is-gapless">
145-
<div class="column is-one-third">
146-
<div class="th">
147-
Version
109+
<div class="linked-block list-item-row no-destination" data-test-transit-key-version-row={{version}}>
110+
<div class="columns is-mobile">
111+
<div class="column is-3">
112+
<div class="level level-left">
113+
<Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
114+
<strong class="has-padding is-size-5">Version {{version}}</strong>
148115
</div>
149116
</div>
150-
<div class="column is-one-third">
151-
<div class="th">
152-
Name
117+
<div class="column is-4">
118+
<div class="td is-borderless">
119+
<small class="help has-text-grey">
120+
{{date-from-now creationTimestamp addSuffix=true }}
121+
</small>
153122
</div>
154123
</div>
155-
<div class="column is-one-third">
156-
<div class="th">
157-
Created at
124+
<div class="column is-5">
125+
<div class="td is-borderless">
126+
{{#if (coerce-eq key.minDecryptionVersion version)}}
127+
<p class="help level level-left">
128+
<Icon @glyph="check-circle-fill" class="has-text-success" />
129+
Current minimum decryption version
130+
</p>
131+
{{/if}}
158132
</div>
159133
</div>
160134
</div>
161135
</div>
162-
<div class="column is-1 thead is-hidden-mobile">
163-
<div class="column thead is-narrow">
164-
<div class="th"></div>
165-
</div>
166-
</div>
167-
</div>
136+
{{/each-in}}
137+
{{else}}
168138
{{#each-in key.keys as |version meta|}}
169-
<div class="columns is-gapless is-marginless table {{if (get this (concat version '-open')) 'has-background-grey-lighter' }}"
170-
data-test-transit-key-version-row={{version}}>
171-
<div class="column {{if (get this (concat version '-open')) '' 'td' }}">
172-
<div class="columns is-marginless is-gapless">
173-
<div class="column is-11">
174-
<div class="columns is-marginless is-gapless">
175-
<div class="column is-one-third">
176-
<div class="td is-borderless">
177-
{{version}}
178-
{{#if (coerce-eq key.minDecryptionVersion version)}}
179-
<p class="help has-text-grey">(current minimum decryption version)</p>
180-
{{/if}}
181-
</div>
182-
</div>
183-
<div class="column is-one-third">
184-
<div class="td is-borderless">
185-
{{meta.name}}
186-
</div>
187-
</div>
188-
<div class="column is-one-third">
189-
<div class="td is-borderless">
190-
<div>
191-
{{date-format meta.creation_time 'MMM DD, YYYY hh:mm:ss A'}}
192-
<br />
193-
<small class="is-font-mono has-text-grey">
194-
{{date-format meta.creation_time}}
195-
</small>
196-
</div>
197-
</div>
198-
</div>
199-
</div>
139+
<div class="linked-block list-item-row" data-test-transit-key-version-row={{version}}>
140+
<div class="columns is-mobile">
141+
<div class="column is-3">
142+
<div class="level level-left">
143+
<Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
144+
<strong class="has-padding is-size-5">Version {{version}}</strong>
200145
</div>
201-
<div class="column is-1 has-text-centered is-flex-v-centered">
202-
<button class="button is-transparent" type="button" {{action (toggle (concat version '-open') this)}}>
203-
<Icon
204-
@glyph="more-horizontal"
205-
class="has-text-black auto-width"
206-
aria-label={{concat backend.path " options"}}
207-
/>
208-
</button>
146+
</div>
147+
<div class="column is-4">
148+
<div class="td is-borderless">
149+
<small class="help has-text-grey">
150+
{{date-from-now meta.creation_time addSuffix=true }}
151+
</small>
209152
</div>
210153
</div>
211-
</div>
212-
</div>
213-
{{#if (get this (concat version '-open'))}}
214-
<div class="table has-background-grey-lighter is-paddingless is-marginless">
215-
<div class="td">
216-
<div>
217-
<span class="is-label">
218-
Public Key
219-
</span>
220-
<pre class="has-background-transparent"><code class="is-paddingless">{{meta.public_key}}</code></pre>
221-
<div class="box is-fullwidth has-background-transparent is-shadowless">
222-
<div class="control">
223-
{{#copy-button
224-
clipboardText=meta.public_key
225-
class="button"
226-
buttonType="button"
227-
success=(action (set-flash-message (concat 'Public key for version ' version ' copied!')))
228-
}}
229-
Copy
230-
{{/copy-button}}
231-
</div>
232-
</div>
154+
<div class="column is-4">
155+
<div class="td is-borderless">
156+
{{#if (coerce-eq key.minDecryptionVersion version)}}
157+
<p class="help level level-left">
158+
<Icon @glyph="check-circle-fill" class="has-text-success" />
159+
Current minimum decryption version
160+
</p>
161+
{{/if}}
233162
</div>
234163
</div>
164+
<div class="column is-1 is-flex-end">
165+
<PopupMenu name="secret-menu">
166+
<nav class="menu">
167+
<ul class="menu-list">
168+
<li class="action">
169+
{{#copy-button
170+
clipboardText=meta.public_key
171+
class="link button is-transparent"
172+
buttonType="button"
173+
success=(action (set-flash-message 'Public key copied!'))
174+
}}
175+
Copy Public Key
176+
{{/copy-button}}
177+
</li>
178+
</ul>
179+
</nav>
180+
</PopupMenu>
181+
</div>
235182
</div>
236-
{{/if}}
183+
</div>
237184
{{/each-in}}
238185
{{/if}}
239186
{{else}}

0 commit comments

Comments
 (0)