chore: 🤖 radio card migration - target and Credentials (#1502)

chore: 🤖 radio card migration - target and Credentials
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2022-12-08 11:17:44 -08:00
1 parent 28a43251ac
commit e18b30a54e
12 files changed
+128 -95

No files matched your search

+2
View File
@@ -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) {