Files
threshold-ui/ui/desktop/app/components/credentials-panel/index.hbs
T
Cameron PereraandDharini Jeeva d5d2045fb5 Icu 10315 add credentials panel (#1855)
* feat: 🎸 add credentials panel for session detail screen

✅ Closes: ICU-10315

* fix: 🐛 remove use of A in sessions list array

* refactor: 💡 fix class name to apply style to both detail screen

* refactor: 💡 add comment to resetController on session route

* refactor: 💡 add @value to HDS Toggle in session detail page

* refactor: 💡 class name refactor for credential panel

* refactor: 💡 remove unneeded div around CodeEditor

* refactor: 💡 change border units from rem to px

* feat: 🎸 create CredentialsPanel component

* Update ui/desktop/tests/integration/components/credentials-panel-test.js

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>

* refactor: 💡 update credential panel styles

* style: 💄 fix lint error for desktop styles

* chore: 🤖 yarn.lock update

---------

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>
2023-09-22 18:58:13 -04:00

88 lines
2.5 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<div class='credential-panel-header'>
<div class='title hds-typography-display-400'>
{{t 'resources.session.credential.title_plural'}}
</div>
<Hds::Form::Toggle::Field
data-test-toggle-credentials
@value={{this.isRawApiVisible}}
{{on 'change' this.toggleCredentials}}
as |F|
>
<F.Label>
{{t 'resources.session.credential.actions.raw-api.show'}}
</F.Label>
</Hds::Form::Toggle::Field>
</div>
<div class='hds-typography-body-200'>
{{t 'resources.session.credential.description'}}
</div>
{{#each @credentials as |credential|}}
{{#if this.isRawApiVisible}}
<div class='raw-credential-panel-body'>
<div class='raw-credential-header'>
<div class='raw-credential-title'>
<div class='credential-name hds-typography-display-200'>
{{#if credential.source.name}}
{{credential.source.name}}
{{else}}
{{credential.source.id}}
{{/if}}
</div>
<Hds::Copy::Button
@text='Copy'
@isIconOnly={{true}}
@textToCopy={{raw-json credential.rawCredential}}
/>
</div>
<div class='hds-typography-body-100'>
{{credential.source.description}}
</div>
</div>
<Rose::CodeEditor @codeValue={{raw-json credential.rawCredential}} as |c|>
<c.fieldEditor
class='rose-autosize raw-secret'
@options={{hash
mode='application/json'
readOnly=true
lineNumbers=false
cursorBlinkRate=-1
styleActiveLine=false
autoRefresh=true
}}
/>
</Rose::CodeEditor>
</div>
{{else}}
<div class='credential-panel-body'>
<div class='credential-header'>
<div class='credential-name hds-typography-display-200'>
{{#if credential.source.name}}
{{credential.source.name}}
{{else}}
{{credential.source.id}}
{{/if}}
</div>
<div class='hds-typography-body-100'>
{{credential.source.description}}
</div>
</div>
<ul class='credential-secret'>
{{#if credential.secrets}}
{{#each credential.secrets as |secret|}}
<li class='secret-container'>
<span class='secret-key'>{{secret.key}}</span>
<HiddenSecret @secret={{secret.value}} />
</li>
{{/each}}
{{/if}}
</ul>
</div>
{{/if}}
{{/each}}