refactor: 💡 use hds checkbox field instead of rose checkbox (#1754)

* refactor: 💡 use hds checkbox field instead of rose checkbox

✅ Closes: ICU-9423

* Update ui/admin/app/components/form/auth-method/oidc/index.hbs

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

* Update ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js

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

* fix: 🐛 remove isInvalid arg

* refactor: 💡 move array conversion to model hook

---------

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>
This commit is contained in:
Lisbet AlvarezandDharini Jeeva authored and GitHub committed 2023-07-11 12:56:30 -07:00
1 parent e3824f8c16
commit ff2e320267
15 files changed
+212 -193

No files matched your search

@@ -12,6 +12,7 @@ import { TYPE_AUTH_METHOD_PASSWORD } from 'api/models/auth-method';
*/
export default Factory.extend({
type: TYPE_AUTH_METHOD_PASSWORD,
description: () => faker.random.words(),
created_time: () => faker.date.recent(),
updated_time: () => faker.date.recent(),
version: () => faker.datatype.number(),
+2
View File
@@ -172,10 +172,12 @@ export default function initializeMockIPC(server, config) {
/**
* Do nothing when attempting to minimize, toggle fullscreen,
* and close a browser window
* * Do nothing when canceling a session invokes the stop method
*/
minimizeWindow() {}
closeWindow() {}
toggleFullscreenWindow() {}
stop() {}
}
/**
@@ -81,15 +81,24 @@
{{/if}}
</form.input>
<form.checkbox
@label={{t 'form.disable_discovered_config_validation.label'}}
@helperText={{t 'form.disable_discovered_config_validation.help'}}
@checked={{@model.disable_discovered_config_validation}}
@onChange={{fn
(mut @model.disable_discovered_config_validation)
(if @model.disable_discovered_config_validation false true)
<Hds::Form::Checkbox::Field
name='disable_discovered_config_validation'
checked={{@model.disable_discovered_config_validation}}
disabled={{form.disabled}}
{{on
'change'
(fn
(mut @model.disable_discovered_config_validation)
(if @model.disable_discovered_config_validation false true)
)
}}
/>
as |F|
>
<F.Label>{{t 'form.disable_discovered_config_validation.label'}}</F.Label>
<F.HelperText>
{{t 'form.disable_discovered_config_validation.help'}}
</F.HelperText>
</Hds::Form::Checkbox::Field>
<form.input
@name='client_id'
@@ -199,25 +199,30 @@
{{/if}}
</form.input>
<form.checkbox
@label={{t 'resources.credential-store.form.tls_skip_verify.label'}}
@helperText={{t 'resources.credential-store.form.tls_skip_verify.help'}}
@checked={{@model.tls_skip_verify}}
@onChange={{fn
(mut @model.tls_skip_verify)
(if @model.tls_skip_verify false true)
<Hds::Form::Checkbox::Field
name='tls_skip_verify'
checked={{@model.tls_skip_verify}}
disabled={{form.disabled}}
{{on
'change'
(fn (mut @model.tls_skip_verify) (if @model.tls_skip_verify false true))
}}
@error={{@model.errors.tls_skip_verify}}
as |field|
as |F|
>
<F.Label>{{t
'resources.credential-store.form.tls_skip_verify.label'
}}</F.Label>
<F.HelperText>{{t
'resources.credential-store.form.tls_skip_verify.help'
}}</F.HelperText>
{{#if @model.errors.tls_skip_verify}}
<field.errors as |errors|>
<F.Error as |E|>
{{#each @model.errors.tls_skip_verify as |error|}}
<errors.message>{{error.message}}</errors.message>
<E.Message>{{error.message}}</E.Message>
{{/each}}
</field.errors>
</F.Error>
{{/if}}
</form.checkbox>
</Hds::Form::Checkbox::Field>
<Hds::Form::Textarea::Field
@value={{@model.client_certificate}}
@@ -136,12 +136,15 @@
readonly={{false}}
/>
<form.checkbox
@name='disable_credential_rotation'
@checked={{@model.disable_credential_rotation}}
@label={{t 'form.disable_credential_rotation.label'}}
@onChange={{fn this.toggleDisableCredentialRotation @model}}
/>
<Hds::Form::Checkbox::Field
name='disable_credential_rotation'
checked={{@model.disable_credential_rotation}}
disabled={{form.disabled}}
{{on 'change' (fn this.toggleDisableCredentialRotation @model)}}
as |F|
>
<F.Label>{{t 'form.disable_credential_rotation.label'}}</F.Label>
</Hds::Form::Checkbox::Field>
&nbsp;
@@ -147,13 +147,15 @@
readonly={{false}}
/>
<form.checkbox
@name='disable_credential_rotation'
@checked={{@model.disable_credential_rotation}}
@helperText={{t 'form.disable_credential_rotation.help'}}
@label={{t 'form.disable_credential_rotation.label'}}
@disabled={{true}}
/>
<Hds::Form::Checkbox::Field
name='disable_credential_rotation'
checked={{@model.disable_credential_rotation}}
disabled={{true}}
as |F|
>
<F.Label>{{t 'form.disable_credential_rotation.label'}}</F.Label>
<F.HelperText>{{t 'form.disable_credential_rotation.help'}}</F.HelperText>
</Hds::Form::Checkbox::Field>
{{#if (can 'save model' @model)}}
<form.actions
@@ -17,33 +17,31 @@
@cancelText={{t 'actions.cancel'}}
/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each this.filteredHosts as |host|}}
<body.row as |row|>
<row.cell>
<form.checkbox
@label={{host.id}}
@description={{host.description}}
@onChange={{fn this.toggleHost host}}
/>
</row.cell>
<row.cell>{{host.name}}</row.cell>
<row.cell>
<Hds::Badge @text={{host.type}} />
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
<Hds::Table
@model={{this.filteredHosts}}
@columns={{array
(hash label=(t 'form.id.label'))
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleHost B.data.id)}}
as |F|
>
<F.Label>{{B.data.id}}</F.Label>
<F.HelperText>{{B.data.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</B.Td>
<B.Td>{{B.data.name}}</B.Td>
<B.Td><Hds::Badge @text={{B.data.type}} /></B.Td>
</B.Tr>
</:body>
</Hds::Table>
</Rose::Form>
{{/if}}
@@ -41,14 +41,14 @@ export default class FormHostSetAddHostsIndexComponent extends Component {
/**
* Toggle host selection
* @param {HostModel} host
* @param {string} hostId
*/
@action
toggleHost(host) {
if (!this.selectedHostIDs.includes(host.id)) {
this.selectedHostIDs.addObject(host.id);
toggleHost(hostId) {
if (!this.selectedHostIDs.includes(hostId)) {
this.selectedHostIDs.addObject(hostId);
} else {
this.selectedHostIDs.removeObject(host.id);
this.selectedHostIDs.removeObject(hostId);
}
}
@@ -15,30 +15,29 @@
@cancelText={{t 'actions.cancel'}}
/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @filteredCredentialSources as |credentialSource|}}
<body.row as |row|>
<row.headerCell>
<form.checkbox
@label={{credentialSource.id}}
@description={{credentialSource.description}}
@onChange={{fn this.toggleCredentialSource credentialSource.id}}
/>
</row.headerCell>
<row.cell>{{credentialSource.name}}</row.cell>
<row.cell>
<CredSourceTypeBadge @model={{credentialSource}} />
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
<Hds::Table
@model={{@filteredCredentialSources}}
@columns={{array
(hash label=(t 'form.id.label'))
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleCredentialSource B.data.id)}}
as |F|
>
<F.Label>{{B.data.id}}</F.Label>
<F.HelperText>{{B.data.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</B.Td>
<B.Td>{{B.data.name}}</B.Td>
<B.Td><CredSourceTypeBadge @model={{B.data}} /></B.Td>
</B.Tr>
</:body>
</Hds::Table>
</Rose::Form>
@@ -17,37 +17,33 @@
@cancelText={{t 'actions.cancel'}}
/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
<row.headerCell>{{t 'resources.host-catalog.title'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each this.filteredHostSets as |hostSet|}}
<body.row as |row|>
<row.cell>
<form.checkbox
@label={{hostSet.id}}
@description={{hostSet.description}}
@onChange={{fn this.toggleHostSet hostSet}}
/>
</row.cell>
<row.cell>{{hostSet.name}}</row.cell>
<row.cell>
<HostCatalogTypeBadge @model={{hostSet}} />
</row.cell>
<row.cell>
<code>{{hostSet.host_catalog_id}}</code>
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
<Hds::Table
@model={{this.filteredHostSets}}
@columns={{array
(hash label=(t 'form.id.label'))
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
(hash label=(t 'resources.host-catalog.title'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleHostSet B.data.id)}}
as |F|
>
<F.Label>{{B.data.id}}</F.Label>
<F.HelperText>{{B.data.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</B.Td>
<B.Td>{{B.data.name}}</B.Td>
<B.Td><HostCatalogTypeBadge @model={{B.data}} /></B.Td>
<B.Td><code>{{B.data.host_catalog_id}}</code></B.Td>
</B.Tr>
</:body>
</Hds::Table>
</Rose::Form>
{{/if}}
@@ -52,12 +52,16 @@ export default class FormTargetAddHostSetsComponent extends Component {
// =actions
/**
* Add/Remove host set to current selection
* @param {string} hostSetId
*/
@action
toggleHostSet(hostSet) {
if (!this.selectedHostSetIDs.includes(hostSet.id)) {
this.selectedHostSetIDs.addObject(hostSet.id);
toggleHostSet(hostSetId) {
if (!this.selectedHostSetIDs.includes(hostSetId)) {
this.selectedHostSetIDs.addObject(hostSetId);
} else {
this.selectedHostSetIDs.removeObject(hostSet.id);
this.selectedHostSetIDs.removeObject(hostSetId);
}
}
@@ -17,30 +17,29 @@
@cancelText={{t 'actions.cancel'}}
/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @filteredCredentialSources as |credentialSource|}}
<body.row as |row|>
<row.headerCell>
<form.checkbox
@label={{credentialSource.id}}
@description={{credentialSource.description}}
@onChange={{fn this.toggleCredentialSource credentialSource.id}}
/>
</row.headerCell>
<row.cell>{{credentialSource.name}}</row.cell>
<row.cell>
<CredSourceTypeBadge @model={{credentialSource}} />
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
<Hds::Table
@model={{@filteredCredentialSources}}
@columns={{array
(hash label=(t 'form.id.label'))
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleCredentialSource B.data.id)}}
as |F|
>
<F.Label>{{B.data.id}}</F.Label>
<F.HelperText>{{B.data.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</B.Td>
<B.Td>{{B.data.name}}</B.Td>
<B.Td><CredSourceTypeBadge @model={{B.data}} /></B.Td>
</B.Tr>
</:body>
</Hds::Table>
</Rose::Form>
@@ -17,41 +17,37 @@
@cancelText={{t 'actions.cancel'}}
/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
<row.headerCell>{{t 'resources.auth-method.title'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each this.filteredAccounts as |account|}}
<body.row as |row|>
<row.cell>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleAccount account)}}
as |F|
>
<F.Label>{{account.id}}</F.Label>
<F.HelperText>{{account.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</row.cell>
<row.cell>{{account.accountName}}</row.cell>
<row.cell>
<Hds::Badge
@text={{t (concat 'resources.auth-method.types.' account.type)}}
/>
</row.cell>
<row.cell>
<code>{{account.auth_method_id}}</code>
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
<Hds::Table
@model={{this.filteredAccounts}}
@columns={{array
(hash label=(t 'form.id.label'))
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
(hash label=(t 'resources.auth-method.title'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<Hds::Form::Checkbox::Field
{{on 'change' (fn this.toggleAccount B.data.id)}}
as |F|
>
<F.Label>{{B.data.id}}</F.Label>
<F.HelperText>{{B.data.description}}</F.HelperText>
</Hds::Form::Checkbox::Field>
</B.Td>
<B.Td>{{B.data.accountName}}</B.Td>
<B.Td>
<Hds::Badge
@text={{t (concat 'resources.auth-method.types.' B.data.type)}}
/>
</B.Td>
<B.Td><code>{{B.data.auth_method_id}}</code></B.Td>
</B.Tr>
</:body>
</Hds::Table>
</Rose::Form>
{{/if}}
@@ -43,12 +43,16 @@ export default class FormUserAddAccountsComponent extends Component {
// =actions
/**
* Toggle account selection
* @param {string} accountId
*/
@action
toggleAccount(account) {
if (!this.selectedAccountIDs.includes(account.id)) {
this.selectedAccountIDs.addObject(account.id);
toggleAccount(accountId) {
if (!this.selectedAccountIDs.includes(accountId)) {
this.selectedAccountIDs.addObject(accountId);
} else {
this.selectedAccountIDs.removeObject(account.id);
this.selectedAccountIDs.removeObject(accountId);
}
}
@@ -8,6 +8,7 @@ import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { notifySuccess, notifyError } from 'core/decorators/notify';
import { resourceFilter } from 'core/decorators/resource-filter';
import { A } from '@ember/array';
export default class ScopesScopeProjectsSessionsRoute extends Route {
// =services
@@ -78,7 +79,7 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {
sessions = sessions.filter((s) => this.status.includes(s?.status));
}
return sessions;
return A(sessions);
}
// =actions