chore: 🤖 radio card migration - target and Credentials (#1502)
chore: 🤖 radio card migration - target and Credentials
This commit is contained in:
1 parent
28a43251ac
commit
e18b30a54e
12 files changed
+128
-95
No files matched your search
@@ -2,6 +2,8 @@ import GeneratedTargetModel from '../generated/models/target';
|
||||
import { attr } from '@ember-data/model';
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
export const types = ['tcp', 'ssh'];
|
||||
|
||||
export default class TargetModel extends GeneratedTargetModel {
|
||||
// =services
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<Hds::Form::RadioCard::Group @alignment='center' as |G|>
|
||||
<G.Legend>{{t 'form.type.label'}}</G.Legend>
|
||||
{{#each-in this.mapResourceTypewithIcon as |credentialStoreType icon|}}
|
||||
{{#each-in this.mapResourceTypeWithIcon as |credentialStoreType icon|}}
|
||||
<G.RadioCard
|
||||
@name={{credentialStoreType}}
|
||||
@value={{credentialStoreType}}
|
||||
|
||||
@@ -10,7 +10,7 @@ export default class FormStaticCredentialStoreIndexComponent extends Component {
|
||||
* maps resource type with icon
|
||||
* @type {object}
|
||||
*/
|
||||
get mapResourceTypewithIcon() {
|
||||
get mapResourceTypeWithIcon() {
|
||||
return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
|
||||
}
|
||||
}
|
||||
@@ -49,7 +49,7 @@
|
||||
{{#if @model.isNew}}
|
||||
<Hds::Form::RadioCard::Group @alignment='center' as |G|>
|
||||
<G.Legend>{{t 'form.type.label'}}</G.Legend>
|
||||
{{#each-in this.mapResourceTypewithIcon as |credentialStoreType icon|}}
|
||||
{{#each-in this.mapResourceTypeWithIcon as |credentialStoreType icon|}}
|
||||
<G.RadioCard
|
||||
@name={{credentialStoreType}}
|
||||
@value={{credentialStoreType}}
|
||||
|
||||
@@ -10,7 +10,7 @@ export default class FormVaultCredentialStoreIndexComponent extends Component {
|
||||
* maps resource type with icon
|
||||
* @type {object}
|
||||
*/
|
||||
get mapResourceTypewithIcon() {
|
||||
get mapResourceTypeWithIcon() {
|
||||
return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
|
||||
}
|
||||
}
|
||||
@@ -44,30 +44,27 @@
|
||||
{{/if}}
|
||||
</form.textarea>
|
||||
{{#if @model.isNew}}
|
||||
<form.fieldset>
|
||||
<:title>{{t 'form.type.label'}}</:title>
|
||||
<:body>
|
||||
<form.radioGroup
|
||||
@name='types'
|
||||
@selectedValue={{@model.type}}
|
||||
@changed={{@changeType}}
|
||||
as |radioGroup|
|
||||
<Hds::Form::RadioCard::Group @name='types' as |G|>
|
||||
<G.Legend>{{t 'form.type.label'}}</G.Legend>
|
||||
{{#each this.credentialTypes as |credentialType|}}
|
||||
<G.RadioCard
|
||||
@name={{credentialType}}
|
||||
@value={{credentialType}}
|
||||
@maxWidth='20rem'
|
||||
@checked={{eq credentialType @model.type}}
|
||||
{{on 'input' (fn @changeType credentialType)}}
|
||||
as |R|
|
||||
>
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.credential.types.username_password'}}
|
||||
@helperText={{t 'resources.credential.help.username_password'}}
|
||||
@value='username_password'
|
||||
@layout='wide'
|
||||
/>
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.credential.types.ssh_private_key'}}
|
||||
@helperText={{t 'resources.credential.help.ssh_private_key'}}
|
||||
@value='ssh_private_key'
|
||||
@layout='wide'
|
||||
/>
|
||||
</form.radioGroup>
|
||||
</:body>
|
||||
</form.fieldset>
|
||||
<R.Label>{{t
|
||||
(concat 'resources.credential.types.' credentialType)
|
||||
}}</R.Label>
|
||||
<R.Description>{{t
|
||||
(concat 'resources.credential.help.' credentialType)
|
||||
}}</R.Description>
|
||||
</G.RadioCard>
|
||||
|
||||
{{/each}}
|
||||
</Hds::Form::RadioCard::Group>
|
||||
{{else}}
|
||||
<InfoField
|
||||
@value={{t (concat 'resources.credential.help.' @model.type)}}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import Component from '@glimmer/component';
|
||||
import { types } from 'api/models/credential';
|
||||
|
||||
export default class FormSSHPrivateKeyCredentialComponent extends Component {
|
||||
// =attributes
|
||||
/**
|
||||
* @type {Array}
|
||||
*/
|
||||
credentialTypes = types;
|
||||
}
|
||||
@@ -44,30 +44,27 @@
|
||||
{{/if}}
|
||||
</form.textarea>
|
||||
{{#if @model.isNew}}
|
||||
<form.fieldset>
|
||||
<:title>{{t 'form.type.label'}}</:title>
|
||||
<:body>
|
||||
<form.radioGroup
|
||||
@name='types'
|
||||
@selectedValue={{@model.type}}
|
||||
@changed={{@changeType}}
|
||||
as |radioGroup|
|
||||
<Hds::Form::RadioCard::Group @name='types' as |G|>
|
||||
<G.Legend>{{t 'form.type.label'}}</G.Legend>
|
||||
{{#each this.credentialTypes as |credentialType|}}
|
||||
<G.RadioCard
|
||||
@name={{credentialType}}
|
||||
@value={{credentialType}}
|
||||
@maxWidth='20rem'
|
||||
@checked={{eq credentialType @model.type}}
|
||||
{{on 'input' (fn @changeType credentialType)}}
|
||||
as |R|
|
||||
>
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.credential.types.username_password'}}
|
||||
@helperText={{t 'resources.credential.help.username_password'}}
|
||||
@value='username_password'
|
||||
@layout='wide'
|
||||
/>
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.credential.types.ssh_private_key'}}
|
||||
@helperText={{t 'resources.credential.help.ssh_private_key'}}
|
||||
@value='ssh_private_key'
|
||||
@layout='wide'
|
||||
/>
|
||||
</form.radioGroup>
|
||||
</:body>
|
||||
</form.fieldset>
|
||||
<R.Label>{{t
|
||||
(concat 'resources.credential.types.' credentialType)
|
||||
}}</R.Label>
|
||||
<R.Description>{{t
|
||||
(concat 'resources.credential.help.' credentialType)
|
||||
}}</R.Description>
|
||||
</G.RadioCard>
|
||||
|
||||
{{/each}}
|
||||
</Hds::Form::RadioCard::Group>
|
||||
{{else}}
|
||||
<InfoField
|
||||
@value={{t (concat 'resources.credential.help.' @model.type)}}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import Component from '@glimmer/component';
|
||||
import { types } from 'api/models/credential';
|
||||
|
||||
export default class FormUserNamePasswordCredentialComponent extends Component {
|
||||
// =attributes
|
||||
/**
|
||||
* @type {Array}
|
||||
*/
|
||||
credentialTypes = types;
|
||||
}
|
||||
@@ -41,50 +41,38 @@
|
||||
{{/if}}
|
||||
</form.textarea>
|
||||
|
||||
<form.fieldset>
|
||||
<:title>{{t 'form.type.label'}}</:title>
|
||||
<:body>
|
||||
{{#if @model.isNew}}
|
||||
<form.radioGroup
|
||||
@name='types'
|
||||
@selectedValue={{@model.type}}
|
||||
@changed={{@changeType}}
|
||||
as |radioGroup|
|
||||
{{#if (and @model.isNew (feature-flag 'ssh-target'))}}
|
||||
<Hds::Form::RadioCard::Group @name='types' @alignment='center' as |G|>
|
||||
<G.Legend>{{t 'form.type.label'}}</G.Legend>
|
||||
{{#each-in this.mapResourceTypeWithIcon as |targetType icon|}}
|
||||
<G.RadioCard
|
||||
@name={{targetType}}
|
||||
@value={{targetType}}
|
||||
@maxWidth='20rem'
|
||||
@checked={{eq targetType @model.type}}
|
||||
{{on 'input' (fn @changeType targetType)}}
|
||||
as |R|
|
||||
>
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.target.types.tcp'}}
|
||||
@helperText={{t 'resources.target.help.tcp'}}
|
||||
@value='tcp'
|
||||
@layout='wide'
|
||||
/>
|
||||
{{#if (feature-flag 'ssh-target')}}
|
||||
<radioGroup.card
|
||||
@label={{t 'resources.target.types.ssh'}}
|
||||
@helperText={{t 'resources.target.help.ssh'}}
|
||||
@value='ssh'
|
||||
@layout='wide'
|
||||
/>
|
||||
{{/if}}
|
||||
</form.radioGroup>
|
||||
{{else}}
|
||||
<form.radioGroup
|
||||
@name='types'
|
||||
@selectedValue={{@model.type}}
|
||||
as |radioGroup|
|
||||
>
|
||||
<radioGroup.card
|
||||
@label={{t (concat 'resources.target.types.' @model.type)}}
|
||||
@helperText={{t (concat 'resources.target.help.' @model.type)}}
|
||||
@value={{@model.type}}
|
||||
@layout='wide'
|
||||
readonly={{true}}
|
||||
@disabled={{true}}
|
||||
/>
|
||||
<R.Label>{{t (concat 'resources.target.types.' targetType)}}</R.Label>
|
||||
<R.Description>{{t
|
||||
(concat 'resources.target.help.' targetType)
|
||||
}}</R.Description>
|
||||
<R.Icon @name={{icon}} />
|
||||
</G.RadioCard>
|
||||
{{/each-in}}
|
||||
</Hds::Form::RadioCard::Group>
|
||||
|
||||
</form.radioGroup>
|
||||
{{/if}}
|
||||
</:body>
|
||||
</form.fieldset>
|
||||
{{else}}
|
||||
<InfoField
|
||||
@value={{t (concat 'resources.target.help.' @model.type)}}
|
||||
@icon={{this.icon}}
|
||||
as |F|
|
||||
>
|
||||
<F.Label>{{t 'form.type.label'}}</F.Label>
|
||||
<F.HelperText>{{t (concat 'resources.target.types.' @model.type)}}
|
||||
</F.HelperText>
|
||||
</InfoField>
|
||||
{{/if}}
|
||||
|
||||
<form.input
|
||||
@name='session_max_seconds'
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import Component from '@glimmer/component';
|
||||
import { types } from 'api/models/target';
|
||||
|
||||
//Note: this is a temporary solution till we have resource type helper in place
|
||||
const icons = ['network', 'terminal'];
|
||||
|
||||
export default class FormTargetComponent extends Component {
|
||||
// =properties
|
||||
/**
|
||||
* maps resource type with icon
|
||||
* @type {object}
|
||||
*/
|
||||
get mapResourceTypeWithIcon() {
|
||||
return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
|
||||
}
|
||||
|
||||
/**
|
||||
* returns icons based on the model type
|
||||
* unlike other resources, this is needed as we use generic details component for both tcp and ssh
|
||||
* @type {string}
|
||||
*/
|
||||
get icon() {
|
||||
if (this.args.model.type === 'tcp') {
|
||||
return icons[0];
|
||||
} else {
|
||||
return icons[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@ module('Acceptance | targets | create', function (hooks) {
|
||||
test('defaults to a new TCP target when no query param provided', async function (assert) {
|
||||
assert.expect(1);
|
||||
await visit(urls.newTarget);
|
||||
assert.strictEqual(find('input[name=types]:checked').value, 'tcp');
|
||||
assert.strictEqual(find('input[name=tcp]:checked').value, 'tcp');
|
||||
});
|
||||
|
||||
test('can create new targets of type TCP', async function (assert) {
|
||||
@@ -176,8 +176,8 @@ module('Acceptance | targets | create', function (hooks) {
|
||||
'create'
|
||||
)
|
||||
);
|
||||
assert.dom('.rose-form-radio-card').exists({ count: 1 });
|
||||
assert.dom('.rose-form-radio-card label').includesText('TCP');
|
||||
assert.dom('.info-field').exists({ count: 1 });
|
||||
assert.dom('.hds-form-helper-text').includesText('TCP');
|
||||
});
|
||||
|
||||
test('can cancel create new TCP target', async function (assert) {
|
||||
|
||||
Reference in new issue
Block a user