CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update auth methods form (#1981)

Browse Source 
Update auth methods form (#1981)
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2023-11-07 11:27:48 -08:00
1 parent f102e7fca2
commit c5edd4dd52
23 files changed
+477 -555
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/core/translations/form/en-us.yaml
+2 -2
View File
@@ -93,7 +93,7 @@ disable_discovered_config_validation:
If the Authorization Server's discovered configuration contains values that do not match the configuration set on this auth method, this can be set to force the local configuration to override the discovered values. This is useful in the case of slow-changing or incorrect values announced by the Authorization Server. NOTE: For safety, not providing this value will be treated the same as "false"; that is, every time the method is updated or the state is changed, this value must be set to "true" or it will be disabled.
idp_ca_certs:
label: Certificates
help: Optional PEM-encoded X.509 CA certificates that can be used as trust anchors when connecting to an OIDC provider.
help: PEM-encoded X.509 CA certificates that can be used as trust anchors when connecting to an OIDC provider.
certificate:
label: Certificate
allowed_audiences:
@@ -103,7 +103,7 @@ claim:
label: Claim
claims_scopes:
label: Claims Scopes
help: Optional claims scopes that will be requested during authentication.
help: Claims scopes that will be requested during authentication.
claims_scope:
label: Claims Scope
account_claim_maps:
ui/admin/app/components/form/auth-method/ldap/index.hbs
+31 -67
View File
@@ -76,73 +76,37 @@
{{/if}}
</Hds::Form::TextInput::Field>
<Hds::Form::Fieldset @isOptional={{true}} as |F|>
<F.Legend>{{t 'resources.auth-method.form.certificates.label'}}</F.Legend>
<F.HelperText>{{t
'resources.auth-method.form.certificates.help'
}}</F.HelperText>
{{#let (unique-id) as |valueHeaderID|}}
<F.Control>
<Hds::Table class='list-wrapper-field' name='certificates'>
<:head as |H|>
<H.Tr>
<H.Th id={{valueHeaderID}}>{{t 'titles.value'}}</H.Th>
<H.Th>{{t 'titles.actions'}}</H.Th>
</H.Tr>
</:head>
<:body as |B|>
{{#each @model.certificates as |cert i|}}
<B.Tr>
<B.Td>
<Hds::Form::Textarea::Field
@value={{cert.value}}
@isOptional={{true}}
disabled={{form.disabled}}
aria-labelledby={{valueHeaderID}}
/>
</B.Td>
<B.Td>
<Hds::Button
@text={{t 'actions.remove'}}
@color='critical'
@icon='trash'
@isIconOnly={{true}}
disabled={{form.disabled}}
{{on 'click' (fn @removeItemByIndex 'certificates' i)}}
/>
</B.Td>
</B.Tr>
{{/each}}
<B.Tr>
<B.Td>
<Hds::Form::Textarea::Field
@value={{this.newCertificate}}
@isOptional={{true}}
disabled={{form.disabled}}
aria-labelledby={{valueHeaderID}}
/>
</B.Td>
<B.Td>
<Hds::Button
@text={{t 'actions.add'}}
@color='secondary'
disabled={{or form.disabled (not this.newCertificate)}}
{{on 'click' this.addCertificate}}
/>
</B.Td>
</B.Tr>
</:body>
</Hds::Table>
</F.Control>
{{/let}}
{{#if @model.errors.certificates}}
<F.Error as |E|>
{{#each @model.errors.certificates as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</Hds::Form::Fieldset>
<Form::Field::ListWrapper
@layout='horizontal'
@isOptional={{true}}
@disabled={{form.disabled}}
>
<:fieldset as |F|>
<F.Legend>
{{t 'resources.auth-method.form.certificates.label'}}
</F.Legend>
<F.HelperText>
{{t 'resources.auth-method.form.certificates.help'}}
</F.HelperText>
{{#if @model.errors.certificates}}
<F.Error as |E|>
{{#each @model.errors.certificates as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</:fieldset>
<:field as |F|>
<F.Textarea
@name='certificates'
@options={{@model.certificates}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
{{#if @model.isNew}}
<Hds::Form::TextInput::Field
ui/admin/app/components/form/auth-method/oidc/index.hbs
+91 -253
View File
@@ -255,176 +255,71 @@
</Rose::Form::Fieldset>
{{! Allowed Audiences }}
<Rose::Form::Fieldset>
<:title>{{t 'form.allowed_audiences.label'}}</:title>
<:description>{{t 'form.allowed_audiences.help'}}</:description>
<:body>
{{#if @model.errors.allowed_audiences}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.allowed_audiences as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.allowed_audiences as |audience i|}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@name='allowed_audiences'
@value={{audience.value}}
@error={{@model.errors.allowed_audiences}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.claim.label'}}</field.label>
<field.field />
</form.input>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on 'click' (fn @removeItemByIndex 'allowed_audiences' i)}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<Form::Field::ListWrapper
@layout='horizontal'
@isOptional={{true}}
@disabled={{form.disabled}}
>
<:fieldset as |F|>
<F.Legend>
{{t 'form.allowed_audiences.label'}}
</F.Legend>
<F.HelperText>
{{t 'form.allowed_audiences.help'}}
</F.HelperText>
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@name='allowed_audiences'
@value={{this.newAllowedAudience}}
@label={{t 'resources.auth-method.titles.new-allowed-audience'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn
@addStringItem 'allowed_audiences' this.newAllowedAudience
)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{#if @model.errors.allowed_audiences}}
<F.Error as |E|>
{{#each @model.errors.allowed_audiences as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</:fieldset>
<:field as |F|>
<F.TextInput
@name='allowed_audiences'
@options={{@model.allowed_audiences}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
{{! Claims Scopes }}
<Rose::Form::Fieldset>
<:title>{{t 'form.claims_scopes.label'}}</:title>
<:description>{{t 'form.claims_scopes.help'}}</:description>
<:body>
{{#if @model.errors.claims_scopes}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.claims_scopes as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell />
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.claims_scopes as |claimsScope i|}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@name='claims_scopes'
@value={{claimsScope.value}}
@error={{@model.errors.claims_scopes}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.claims_scope.label'}}</field.label>
<field.field />
</form.input>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on 'click' (fn @removeItemByIndex 'claims_scopes' i)}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@name='claims_scopes'
@value={{this.newClaimsScope}}
@label={{t 'resources.auth-method.titles.new-claims-scope'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @addStringItem 'claims_scopes' this.newClaimsScope)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
<Form::Field::ListWrapper
@layout='horizontal'
@isOptional={{true}}
@disabled={{form.disabled}}
>
<:fieldset as |F|>
<F.Legend>
{{t 'form.claims_scopes.label'}}
</F.Legend>
<F.HelperText>
{{t 'form.claims_scopes.help'}}
</F.HelperText>
{{#if @model.errors.claims_scopes}}
<F.Error as |E|>
{{#each @model.errors.claims_scopes as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</:fieldset>
<:field as |F|>
<F.TextInput
@name='claims_scopes'
@options={{@model.claims_scopes}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
{{! Account Claim Maps }}
<Rose::Form::Fieldset>
@@ -561,94 +456,37 @@
</Rose::Form::Fieldset>
{{! Certificates }}
<Rose::Form::Fieldset>
<:title>{{t 'form.idp_ca_certs.label'}}</:title>
<:description>{{t 'form.idp_ca_certs.help'}}</:description>
<:body>
{{#if @model.errors.idp_ca_certs}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.idp_ca_certs as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.idp_ca_certs as |cert i|}}
<body.row as |row|>
<row.cell>
<Hds::Form::Textarea::Field
@value={{cert.value}}
@isOptional={{true}}
@isInvalid={{@model.errors.idp_ca_certs}}
disabled={{form.disabled}}
aria-label={{t 'form.certificate.label'}}
as |F|
>
{{#if @model.errors.idp_ca_certs}}
<F.Error as |E|>
{{#each @model.errors.idp_ca_certs as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</Hds::Form::Textarea::Field>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on 'click' (fn @removeItemByIndex 'idp_ca_certs' i)}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<Form::Field::ListWrapper
@layout='horizontal'
@isOptional={{true}}
@disabled={{form.disabled}}
>
<:fieldset as |F|>
<F.Legend>
{{t 'form.idp_ca_certs.label'}}
</F.Legend>
<F.HelperText>
{{t 'form.idp_ca_certs.help'}}
</F.HelperText>
<body.row as |row|>
<row.cell>
<Hds::Form::Textarea::Field
@value={{this.newCertificate}}
@isOptional={{true}}
disabled={{form.disabled}}
aria-label={{t 'resources.auth-method.titles.new-certificate'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @addStringItem 'idp_ca_certs' this.newCertificate)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{#if @model.errors.idp_ca_certs}}
<F.Error as |E|>
{{#each @model.errors.idp_ca_certs as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</:fieldset>
<:field as |F|>
<F.Textarea
@name='idp_ca_certs'
@options={{@model.idp_ca_certs}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
<form.input
@name='max_age'
ui/admin/app/components/form/credential-library/vault-ssh-certificate/index.hbs
+2 -5
View File
@@ -262,8 +262,7 @@
<F.KeyValue
@name='critical_options'
@options={{@model.critical_options}}
@addOption={{fn this.addOption 'critical_options'}}
@removeOptionByIndex={{fn this.removeOptionByIndex 'critical_options'}}
@model={{@model}}
@disabled={{form.disabled}}
/>
</:field>
@@ -295,9 +294,7 @@
<F.KeyValue
@name='extensions'
@options={{@model.extensions}}
@addOption={{fn this.addOption 'extensions'}}
@removeOptionByIndex={{fn this.removeOptionByIndex 'extensions'}}
@disabled={{form.disabled}}
@model={{@model}}
/>
</:field>
ui/admin/app/components/form/credential-library/vault-ssh-certificate/index.js
+1 -27
View File
@@ -4,7 +4,7 @@
*/
import Component from '@glimmer/component';
import { action, set } from '@ember/object';
import {
options,
TYPES_CREDENTIAL_LIBRARY,
@@ -31,30 +31,4 @@ export default class FormCredentialLibraryVaultSshCertComponent extends Componen
const keyType = this.args.model.key_type;
return keyType === 'rsa' || keyType === 'ecdsa';
}
/**
* Adds a key/value option object. We recreate a new array after adding
* so that ember is aware that the array has been modified.
* @param field {string}
* @param key {string}
* @param value {string}
*/
@action
addOption(field, { key, value }) {
const existingArray = this.args.model[field] ?? [];
const newArray = [...existingArray, { key, value }];
set(this.args.model, field, newArray);
}
/**
* Removes an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param field {string}
* @param index {number}
*/
@action
removeOptionByIndex(field, index) {
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
}
ui/admin/app/components/form/field/list-wrapper/index.hbs
+3
View File
@@ -21,6 +21,9 @@
TextInput=(component
'form/field/list-wrapper/text-input' disabled=@disabled
)
Textarea=(component
'form/field/list-wrapper/textarea' disabled=@disabled
)
)
to='field'
}}
ui/admin/app/components/form/field/list-wrapper/key-value/index.hbs
+5 -7
View File
@@ -10,15 +10,13 @@
<H.Th id={{keyHeaderID}}>{{t 'form.key.label'}}</H.Th>
<H.Th id={{valueHeaderID}}>{{t 'form.value.label'}}</H.Th>
<H.Th>
{{#if @removeOptionByIndex}}
{{t 'titles.actions'}}
{{/if}}
{{t 'titles.actions'}}
</H.Th>
</H.Tr>
</:head>
<:body as |B|>
{{#each @options as |option index|}}
{{#each this.options as |option index|}}
<B.Tr>
<B.Td>
<Hds::Form::TextInput::Field
@@ -41,7 +39,7 @@
</B.Td>
<B.Td>
{{#if @removeOptionByIndex}}
{{#if this.removeOptionByIndex}}
<Hds::Button
data-test-remove-button
@text={{t 'actions.remove'}}
@@ -49,7 +47,7 @@
@icon='trash'
@isIconOnly={{true}}
disabled={{@disabled}}
{{on 'click' (fn @removeOptionByIndex index)}}
{{on 'click' (fn this.removeOptionByIndex index)}}
/>
{{/if}}
</B.Td>
ui/admin/app/components/form/field/list-wrapper/key-value/index.js
+44 -12
View File
@@ -6,7 +6,7 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { assert } from '@ember/debug';
import { set } from '@ember/object';
export default class MappingListComponent extends Component {
// =attributes
@@ -21,27 +21,59 @@ export default class MappingListComponent extends Component {
*/
@tracked newOptionValue = '';
/**
* Returns an array of key/value pair that the user enters
* @type {object}
*/
get options() {
return this.args?.options || this.args?.model?.[this.args.name];
}
// =actions
/**
* If a new key value is entered and an addOption method was specified,
* calls addOption with the new key and value. Resets key and value.
* calls addOption with the new key and value. Resets key and value.
* Otherwise use the model argument to create the array and update the model
*/
@action
addOption() {
assert(
'[boundary-admin-list-wrapper] `@addOption` is required.',
this.args.addOption
);
if (this.newOptionKey) {
this.args.addOption({
key: this.newOptionKey,
value: this.newOptionValue,
});
if (this.args.addOption) {
if (this.newOptionKey) {
this.args.addOption({
key: this.newOptionKey,
value: this.newOptionValue,
});
}
} else {
const field = this.args.name;
const existingArray = this.args.model[field] ?? [];
const newArray = [
...existingArray,
{ key: this.newOptionKey, value: this.newOptionValue },
];
set(this.args.model, field, newArray);
}
this.newOptionKey = '';
this.newOptionValue = '';
}
/**
* If removeOptionByIndex method was passed, use that.
* Otherwise, use the model to remove an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param index {number}
*/
@action
removeOptionByIndex(index) {
if (this.args.removeOptionByIndex) {
this.args.removeOptionByIndex(index);
} else {
const field = this.args.name;
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
}
}
ui/admin/app/components/form/field/list-wrapper/text-input/index.hbs
+42 -46
View File
@@ -3,64 +3,60 @@
SPDX-License-Identifier: MPL-2.0
}}
{{#let (unique-id) as |valueHeaderID|}}
<Hds::Table class='list-wrapper-field' name={{@name}}>
<Hds::Table class='list-wrapper-field' name={{@name}}>
<:body as |B|>
{{#each @options as |option index|}}
<B.Tr>
<B.Td>
<Hds::Form::TextInput::Field
@value={{option.value}}
@type='text'
disabled={{@disabled}}
aria-labelledby={{valueHeaderID}}
{{on 'input' (set-from-event option 'value')}}
/>
</B.Td>
<B.Td>
{{#if @removeOptionByIndex}}
<Hds::Button
data-test-remove-button
@text={{t 'actions.remove'}}
@color='critical'
@icon='trash'
@isIconOnly={{true}}
disabled={{@disabled}}
{{on 'click' (fn @removeOptionByIndex index)}}
/>
{{/if}}
</B.Td>
</B.Tr>
{{/each}}
<:body as |B|>
{{#each @options as |option index|}}
<B.Tr>
<B.Td>
<Hds::Form::TextInput::Field
@value={{this.newOptionValue}}
@value={{option.value}}
@type='text'
disabled={{@disabled}}
aria-labelledby={{valueHeaderID}}
{{on 'input' (set-from-event this 'newOptionValue')}}
aria-label={{t 'titles.value'}}
{{on 'input' (set-from-event option 'value')}}
/>
</B.Td>
<B.Td>
<Hds::Button
@text={{t 'actions.add'}}
@color='secondary'
type='button'
disabled={{or @disabled (not this.newOptionValue)}}
{{on 'click' this.addOption}}
/>
{{#if this.removeOptionByIndex}}
<Hds::Button
data-test-remove-button
@text={{t 'actions.remove'}}
@color='critical'
@icon='trash'
@isIconOnly={{true}}
disabled={{@disabled}}
{{on 'click' (fn this.removeOptionByIndex index)}}
/>
{{/if}}
</B.Td>
</B.Tr>
{{/each}}
</:body>
</Hds::Table>
<B.Tr>
{{/let}}
<B.Td>
<Hds::Form::TextInput::Field
@value={{this.newOptionValue}}
@type='text'
disabled={{@disabled}}
aria-label={{t 'titles.value'}}
{{on 'input' (set-from-event this 'newOptionValue')}}
/>
</B.Td>
<B.Td>
<Hds::Button
@text={{t 'actions.add'}}
@color='secondary'
type='button'
disabled={{or @disabled (not this.newOptionValue)}}
{{on 'click' this.addOption}}
/>
</B.Td>
</B.Tr>
</:body>
</Hds::Table>
ui/admin/app/components/form/field/list-wrapper/text-input/index.js
+31 -11
View File
@@ -6,7 +6,7 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { assert } from '@ember/debug';
import { set } from '@ember/object';
export default class MappingListTextInputComponent extends Component {
// =attributes
@@ -20,22 +20,42 @@ export default class MappingListTextInputComponent extends Component {
/**
* If a new input is entered and an addOption method was specified,
* calls addOption with the new input. Resets previous value.
* calls addOption with the new input. Resets previous value.
* Otherwise use the model argument to create the array and update the model
*/
@action
addOption() {
assert(
'[boundary-admin-list-wrapper] `@addOption` is required.',
this.args.addOption
);
if (this.newOptionValue) {
this.args.addOption({
value: this.newOptionValue,
});
if (this.args.addOption) {
if (this.newOptionValue) {
this.args.addOption({
value: this.newOptionValue,
});
}
} else {
const field = this.args.name;
const existingArray = this.args.model[field] ?? [];
const newArray = [...existingArray, { value: this.newOptionValue }];
set(this.args.model, field, newArray);
}
this.newOptionValue = '';
}
/**
* If removeOptionByIndex method was passed, use that.
* Otherwise, use the model to remove an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param index {number}
*/
@action
removeOptionByIndex(index) {
if (this.args.removeOptionByIndex) {
this.args.removeOptionByIndex(index);
} else {
const field = this.args.name;
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
}
}
ui/admin/app/components/form/field/list-wrapper/textarea/index.hbs
+60
View File
@@ -0,0 +1,60 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<Hds::Table class='list-wrapper-field' name={{@name}}>
<:body as |B|>
{{#each @options as |option index|}}
<B.Tr>
<B.Td>
<Hds::Form::Textarea::Field
@value={{option.value}}
@type='text'
disabled={{@disabled}}
aria-label={{t 'titles.value'}}
/>
</B.Td>
<B.Td>
{{#if this.removeOptionByIndex}}
<Hds::Button
data-test-remove-button
@text={{t 'actions.remove'}}
@color='critical'
@icon='trash'
@isIconOnly={{true}}
disabled={{@disabled}}
{{on 'click' (fn this.removeOptionByIndex index)}}
/>
{{/if}}
</B.Td>
</B.Tr>
{{/each}}
<B.Tr>
<B.Td>
<Hds::Form::Textarea::Field
@value={{this.newOptionValue}}
@type='text'
disabled={{@disabled}}
aria-label={{t 'titles.value'}}
/>
</B.Td>
<B.Td>
<Hds::Button
@text={{t 'actions.add'}}
@color='secondary'
type='button'
disabled={{or @disabled (not this.newOptionValue)}}
{{on 'click' this.addOption}}
/>
</B.Td>
</B.Tr>
</:body>
</Hds::Table>
ui/admin/app/components/form/field/list-wrapper/textarea/index.js
+61
View File
@@ -0,0 +1,61 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { set } from '@ember/object';
export default class MappingListTextAreaComponent extends Component {
// =attributes
/**
* @type {string}
*/
@tracked newOptionValue = '';
// =actions
/**
* If a new input is entered and an addOption method was specified,
* calls addOption with the new input. Resets previous value.
* Otherwise use the model argument to create the array and update the model
*/
@action
addOption() {
if (this.args.addOption) {
if (this.newOptionValue) {
this.args.addOption({
value: this.newOptionValue,
});
}
} else {
const field = this.args.name;
const existingArray = this.args.model[field] ?? [];
const newArray = [...existingArray, { value: this.newOptionValue }];
set(this.args.model, field, newArray);
}
this.newOptionValue = '';
}
/**
* If removeOptionByIndex method was passed, use that.
* Otherwise, use the model to remove an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param index {number}
*/
@action
removeOptionByIndex(index) {
if (this.args.removeOptionByIndex) {
this.args.removeOptionByIndex(index);
} else {
const field = this.args.name;
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
}
}
ui/admin/app/components/form/host-set/aws/index.hbs
+2 -6
View File
@@ -94,9 +94,7 @@
<F.TextInput
@name='preferred_endpoints'
@options={{@model.preferred_endpoints}}
@addOption={{fn @addOption 'preferred_endpoints'}}
@removeOptionByIndex={{fn @removeOptionByIndex 'preferred_endpoints'}}
@disabled={{form.disabled}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
@@ -122,9 +120,7 @@
<F.TextInput
@name='filters'
@options={{@model.filters}}
@addOption={{fn @addOption 'filters'}}
@removeOptionByIndex={{fn @removeOptionByIndex 'filters'}}
@disabled={{form.disabled}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
ui/admin/app/components/form/host-set/azure/index.hbs
+1 -3
View File
@@ -95,9 +95,7 @@
<F.TextInput
@name='preferred_endpoints'
@options={{@model.preferred_endpoints}}
@addOption={{fn @addOption 'preferred_endpoints'}}
@removeOptionByIndex={{fn @removeOptionByIndex 'preferred_endpoints'}}
@disabled={{form.disabled}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
ui/admin/app/components/form/host-set/index.hbs
-2
View File
@@ -9,6 +9,4 @@
edit=@edit
submit=@submit
cancel=@cancel
addOption=this.addOption
removeOptionByIndex=this.removeOptionByIndex
}}
ui/admin/app/components/form/host-set/index.js
-39
View File
@@ -1,39 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { set } from '@ember/object';
export default class FormHostSetComponent extends Component {
// =attributes
// =actions
/**
* Adds a string to the array. We recreate a new array after adding
* so that ember is aware that the array has been modified.
* @param field {string}
* @param value {string}
*/
@action
addOption(field, { value }) {
const existingArray = this.args.model[field] ?? [];
const newArray = [...existingArray, { value }];
set(this.args.model, field, newArray);
}
/**
* Removes an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param field {string}
* @param index {number}
*/
@action
removeOptionByIndex(field, index) {
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
}
ui/admin/app/components/form/storage-bucket/index.hbs
+1 -3
View File
@@ -393,9 +393,7 @@
<F.TextInput
@name='role_tags'
@options={{@model.role_tags}}
@addOption={{fn this.addOption 'role_tags'}}
@removeOptionByIndex={{fn this.removeOptionByIndex 'role_tags'}}
@disabled={{form.disabled}}
@model={{@model}}
/>
</:field>
</Form::Field::ListWrapper>
ui/admin/app/components/form/storage-bucket/index.js
-26
View File
@@ -51,32 +51,6 @@ export default class FormStorageBucketComponent extends Component {
this.args.changeType(type);
}
/**
* Adds a key/value option object. We recreate a new array after adding
* so that ember is aware that the array has been modified.
* @param field {string}
* @param key {string}
* @param value {string}
*/
@action
addOption(field, { key, value }) {
const existingArray = this.args.model[field] ?? [];
const newArray = [...existingArray, { key, value }];
set(this.args.model, field, newArray);
}
/**
* Removes an option by index. We recreate a new array after
* splicing out the item so that ember is aware that the array has been modified.
* @param field {string}
* @param index {number}
*/
@action
removeOptionByIndex(field, index) {
const newArray = this.args.model[field].filter((_, i) => i !== index);
set(this.args.model, field, newArray);
}
updateScopeFieldDescription() {
if (this.args.model.scopeModel.isGlobal) {
this.scopeFieldDescription = this.intl.t(
ui/admin/tests/acceptance/auth-methods/create-test.js
+22 -8
View File
@@ -33,6 +33,16 @@ module('Acceptance | auth-methods | create', function (hooks) {
const ERROR_MSG_SELECTOR = '.rose-notification-body';
const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message';
const CERTIFICATES_BTN_SELECTOR = '[name="certificates"] button';
const CERTIFICATES_INPUT_SELECTOR = '[name="certificates"] textarea';
const IDP_CERTS_INPUT_SELECTOR = '[name="idp_ca_certs"] textarea';
const IDP_CERTS_BTN_SELECTOR = '[name="idp_ca_certs"] button';
const ALLOWED_AUDIENCES_BTN_SELECTOR = '[name="allowed_audiences"] button';
const ALLOWED_AUDIENCES_INPUT_SELECTOR = '[name="allowed_audiences"] input';
const CLAIMS_SCOPES_BTN_SELECTOR = '[name="claims_scopes"] button';
const CLAIMS_SCOPES_INPUT_SELECTOR = '[name="claims_scopes"] input';
let getAuthMethodsCount;
let featuresService;
@@ -110,15 +120,18 @@ module('Acceptance | auth-methods | create', function (hooks) {
await fillIn('[name="client_secret"]', 'client_secret');
await select('form fieldset:nth-of-type(1) select', 'RS384');
await click('form fieldset:nth-of-type(1) [title="Add"]');
await fillIn('[name="allowed_audiences"]', 'allowed_audiences');
await click('form fieldset:nth-of-type(2) [title="Add"]');
await fillIn('[name="claims_scopes"]', 'claims_scopes');
await click('form fieldset:nth-of-type(3) [title="Add"]');
await fillIn(ALLOWED_AUDIENCES_INPUT_SELECTOR, 'allowed_audiences');
await click(ALLOWED_AUDIENCES_BTN_SELECTOR, 'allowed_audiences');
await fillIn(CLAIMS_SCOPES_INPUT_SELECTOR, 'claims_scopes');
await click(CLAIMS_SCOPES_BTN_SELECTOR, 'claims_scopes');
await fillIn('[name="from_claim"]', 'from_claim');
await select('form fieldset:nth-of-type(4) select', 'email');
await click('form fieldset:nth-of-type(4) [title="Add"]');
await fillIn('form fieldset:nth-of-type(5) textarea', 'certificates');
await click('form fieldset:nth-of-type(5) [title="Add"]');
await fillIn(IDP_CERTS_INPUT_SELECTOR, 'certificates');
await click(IDP_CERTS_BTN_SELECTOR);
await fillIn('[name="max_age"]', '5');
await fillIn('[name="api_url_prefix"]', 'api_url_prefix');
await click(SAVE_BTN_SELECTOR);
@@ -154,8 +167,8 @@ module('Acceptance | auth-methods | create', function (hooks) {
await fillIn(NAME_INPUT_SELECTOR, name);
await fillIn(DESC_INPUT_SELECTOR, 'description');
await fillIn('[name="urls"]', 'url1,url2');
await fillIn('[name="certificates"] textarea', 'certificate');
await click('[name="certificates"] button');
await fillIn(CERTIFICATES_INPUT_SELECTOR, 'certificate');
await click(CERTIFICATES_BTN_SELECTOR);
await fillIn('[name="client_certificate"]', 'client cert');
await fillIn('[name="client_certificate_key"]', 'client cert key');
await click('[name="start_tls"]');
@@ -404,6 +417,7 @@ module('Acceptance | auth-methods | create', function (hooks) {
'Primary auth method is set.'
);
await click(DROPDOWN_SELECTOR_ICON);
await click(DROPDOWN_SELECTOR_OPTION);
scope = this.server.schema.scopes.find(instances.orgScope.id);
ui/admin/tests/acceptance/auth-methods/read-test.js
+1 -6
View File
@@ -8,12 +8,7 @@ import { visit, currentURL, click } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import a11yAudit from 'ember-a11y-testing/test-support/audit';
import {
authenticateSession,
// // These are left here intentionally for future reference.
// //currentSession,
// //invalidateSession,
} from 'ember-simple-auth/test-support';
import { authenticateSession } from 'ember-simple-auth/test-support';
import {
TYPE_AUTH_METHOD_LDAP,
TYPE_AUTH_METHOD_OIDC,
ui/admin/tests/acceptance/auth-methods/update-test.js
+52 -22
View File
@@ -33,7 +33,24 @@ module('Acceptance | auth-methods | update', function (hooks) {
const DESC_INPUT_SELECTOR = '[name="description"]';
const ERROR_MSG_SELECTOR = '.rose-notification-body';
const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message';
const CERTIFICATES_REMOVE_BTN_SELECTOR =
'[name="certificates"] [data-test-remove-button]';
const CERTIFICATES_BTN_SELECTOR = '[name="certificates"] button';
const CERTIFICATES_INPUT_SELECTOR = '[name="certificates"] textarea';
const IDP_CERTS_INPUT_SELECTOR = '[name="idp_ca_certs"] textarea';
const IDP_CERTS_REMOVE_BTN_SELECTOR =
'[name="idp_ca_certs"] [data-test-remove-button]';
const IDP_CERTS_BTN_SELECTOR = '[name="idp_ca_certs"] button';
const ALLOWED_AUDIENCES_REMOVE_BTN_SELECTOR =
'[name="allowed_audiences"] [data-test-remove-button]';
const ALLOWED_AUDIENCES_BTN_SELECTOR = '[name="allowed_audiences"] button';
const ALLOWED_AUDIENCES_INPUT_SELECTOR = '[name="allowed_audiences"] input';
const CLAIMS_SCOPES_REMOVE_BTN_SELECTOR =
'[name="claims_scopes"] [data-test-remove-button]';
const CLAIMS_SCOPES_BTN_SELECTOR = '[name="claims_scopes"] button';
const CLAIMS_SCOPES_INPUT_SELECTOR = '[name="claims_scopes"] input';
const instances = {
scopes: {
global: null,
@@ -115,21 +132,26 @@ module('Acceptance | auth-methods | update', function (hooks) {
await select('form fieldset:nth-of-type(1) select', 'RS384');
await click('form fieldset:nth-of-type(1) [title="Add"]');
// Remove all allowed audiences
await Promise.all(
findAll('form fieldset:nth-of-type(2) [title="Remove"]').map((element) =>
click(element)
)
);
await fillIn('[name="allowed_audiences"]', 'allowed_audiences');
await click('form fieldset:nth-of-type(2) [title="Add"]');
const allowedAudiencesList = findAll(ALLOWED_AUDIENCES_REMOVE_BTN_SELECTOR);
for (const element of allowedAudiencesList) {
await click(element);
}
await fillIn(ALLOWED_AUDIENCES_INPUT_SELECTOR, 'allowed_audiences');
await click(ALLOWED_AUDIENCES_BTN_SELECTOR, 'allowed_audiences');
// Remove all claims scopes
await Promise.all(
findAll('form fieldset:nth-of-type(3) [title="Remove"]').map((element) =>
click(element)
)
const claimsScopeList = await Promise.all(
findAll(CLAIMS_SCOPES_REMOVE_BTN_SELECTOR)
);
await fillIn('[name="claims_scopes"]', 'claims_scopes');
await click('form fieldset:nth-of-type(3) [title="Add"]');
for (const element of claimsScopeList) {
await click(element);
}
await fillIn(CLAIMS_SCOPES_INPUT_SELECTOR, 'claims_scopes');
await click(CLAIMS_SCOPES_BTN_SELECTOR, 'allowed_audiences');
// Remove all claim maps
await Promise.all(
findAll('form fieldset:nth-of-type(4) [title="Remove"]').map((element) =>
@@ -139,14 +161,16 @@ module('Acceptance | auth-methods | update', function (hooks) {
await fillIn('[name="from_claim"]', 'from_claim');
await select('form fieldset:nth-of-type(4) select', 'email');
await click('form fieldset:nth-of-type(4) [title="Add"]');
// Remove all certificates
await Promise.all(
findAll('form fieldset:nth-of-type(5) [title="Remove"]').map((element) =>
click(element)
)
);
await fillIn('form fieldset:nth-of-type(5) textarea', 'certificates');
await click('form fieldset:nth-of-type(5) [title="Add"]');
const certificatesList = findAll(IDP_CERTS_REMOVE_BTN_SELECTOR);
for (const element of certificatesList) {
await click(element);
}
await fillIn(IDP_CERTS_INPUT_SELECTOR, 'certificates');
await click(IDP_CERTS_BTN_SELECTOR);
await fillIn('[name="max_age"]', '5');
await fillIn('[name="api_url_prefix"]', 'api_url_prefix');
await click('form [type="submit"]:not(:disabled)');
@@ -181,9 +205,15 @@ module('Acceptance | auth-methods | update', function (hooks) {
await fillIn(DESC_INPUT_SELECTOR, 'description');
await fillIn('[name="urls"]', 'url1,url2');
await click('[name="certificates"] .hds-button--color-critical');
// Remove certificate
await fillIn('[name="certificates"] textarea', 'certificate');
await click('[name="certificates"] button');
const certificatesList = findAll(CERTIFICATES_REMOVE_BTN_SELECTOR);
for (const element of certificatesList) {
await click(element);
}
await fillIn(CERTIFICATES_INPUT_SELECTOR, 'certificate');
await click(CERTIFICATES_BTN_SELECTOR);
await click('[name="start_tls"]');
await click('[name="insecure_tls"]');
await fillIn('[name="bind_dn"]', 'bind dn');
ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
+2 -6
View File
@@ -184,9 +184,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
const name = 'aws host set';
await fillIn('[name="name"]', name);
const endpointList = await Promise.all(
findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR)
);
const endpointList = findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR);
for (const element of endpointList) {
await click(element);
@@ -235,9 +233,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
await fillIn('[name="name"]', name);
// Remove all the preferred endpoints
const endpointList = await Promise.all(
findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR)
);
const endpointList = findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR);
for (const element of endpointList) {
await click(element);
ui/admin/tests/integration/components/form/field/list-wrapper-test.js
+23 -4
View File
@@ -58,8 +58,6 @@ module('Integration | Component | list-wrapper', function (hooks) {
<:field as |F|>
<F.KeyValue @options={{this.options}}></F.KeyValue>
</:field>
</Form::Field::ListWrapper>
`);
@@ -68,7 +66,6 @@ module('Integration | Component | list-wrapper', function (hooks) {
test('it renders multiple options with a single text field', async function (assert) {
this.options = [{ value: 'one' }, { value: 'three' }];
this.fn = () => {};
await render(hbs`
@@ -76,7 +73,7 @@ module('Integration | Component | list-wrapper', function (hooks) {
<:field as |F|>
<F.TextInput
@options={{this.options}}
@removeOptionByIndex={{this.fn}}>
>
</F.TextInput>
</:field>
</Form::Field::ListWrapper>
@@ -88,4 +85,26 @@ module('Integration | Component | list-wrapper', function (hooks) {
assert.dom('tbody tr').exists({ count: 3 });
});
test('it renders multiple options with a single textarea field', async function (assert) {
this.options = [{ value: 'one' }, { value: 'three' }];
await render(hbs`
<Form::Field::ListWrapper>
<:field as |F|>
<F.Textarea
@options={{this.options}}
>
</F.Textarea>
</:field>
</Form::Field::ListWrapper>
`);
assert
.dom('.list-wrapper-field [data-test-remove-button]')
.exists({ count: 2 });
assert.dom('tbody tr').exists({ count: 3 });
});
});