chore: 🤖 remove ember radio btn, update it with hds (#2556)

* chore: 🤖 remove ember radio btn, update it with hds
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2024-11-19 13:03:29 -08:00
1 parent 415f638028
commit f8796b362e
21 files changed
+127 -612

No files matched your search

@@ -21,7 +21,6 @@
}}
{{yield
(hash
radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
checkboxGroup=(component
'rose/form/checkbox/group' disabled=this.disabled
@@ -1,17 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
{{yield
(hash
radio=(component
'rose/form/radio/radio'
name=@name
selectedValue=@selectedValue
disabled=@disabled
changed=@changed
inline=@inline
)
)
}}
@@ -1,43 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
<div class='{{this.className}} {{if @error " error"}} {{if @inline "inline"}}'>
<RadioButton
...attributes
@radioClass='rose-form-radio-field'
@radioId={{this.id}}
type='radio'
disabled={{@disabled}}
@name={{@name}}
@value={{@value}}
@groupValue={{@selectedValue}}
@disabled={{@disabled}}
@changed={{@changed}}
/>
<label class='rose-form-radio-label' for={{this.id}}>
{{#if @icon}}
<Rose::Icon @name={{@icon}} @size='medium' />
{{/if}}
{{@label}}
<span class='radio-card-overlay'></span>
{{#if @helperText}}
<Rose::Form::HelperText
@id='helper-text-{{this.id}}'
@error={{@error}}
@link={{@link}}
@linkText={{@linkText}}
>
{{@helperText}}
</Rose::Form::HelperText>
{{/if}}
</label>
{{yield}}
</div>
@@ -1,13 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import Component from '@glimmer/component';
import { generateComponentID } from '../../../../../utilities/component-auto-id';
export default class RoseFormRadioRadioComponent extends Component {
// =attributes
className = 'rose-form-radio';
id = generateComponentID();
}
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/form/radio/card';
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/form/radio/group';
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/form/radio/radio';
@@ -9,5 +9,4 @@
@import 'input';
@import 'checkbox';
@import 'select';
@import 'radio';
@import 'fieldset';
@@ -1,184 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
@use '../../variables/sizing';
@use '../../utilities/type';
@use '../../variables/typography';
$radio-svg: (
'default':
"<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'hover':
"<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'focus':
"<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
'disabled':
"<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'disabled-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
'error':
"<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'error-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
);
$data-svg-prefix: 'data:image/svg+xml;utf-8,';
.rose-form-radio {
&.inline {
display: inline-block;
.rose-form-radio-label {
margin-right: sizing.rems(s);
}
}
@include type.type(m);
position: relative;
margin-bottom: sizing.rems(xs);
color: var(--ui-gray);
.rose-form-radio-label {
display: flex;
align-items: center;
.rose-form-helper-text {
font-weight: normal;
margin-left: sizing.rems(xxs);
margin-bottom: 0;
}
@include type.type(s, semibold);
color: currentcolor;
padding-left: sizing.rems(l);
padding-top: sizing.rems(xxxs);
.rose-icon {
margin-right: sizing.rems(xxs);
margin-left: sizing.rems(xxs);
}
&::before {
position: absolute;
top: sizing.rems(xs);
left: 0;
display: block;
width: sizing.rems(m);
height: sizing.rems(m);
pointer-events: none;
content: ' ';
}
&::after {
position: absolute;
top: -#{sizing.rems(xxxxs)};
left: -#{sizing.rems(xxxs)};
display: block;
width: sizing.rems(l);
height: sizing.rems(l);
transform: scale(2);
pointer-events: none;
content: ' ';
background: no-repeat 50%/50% 50%;
background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
}
}
.rose-form-radio-field {
position: absolute;
left: 0;
z-index: -1;
width: sizing.rems(m);
height: sizing.rems(m);
opacity: 0;
&:not(:disabled) {
&:hover {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'hover'
));
}
}
}
&:focus {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'focus'
));
}
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'checked'
));
}
}
}
}
&:disabled {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'disabled'
));
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'disabled-checked'
));
}
}
}
}
}
&.error {
color: var(--failure);
.rose-form-radio-field {
&:not(:disabled, :focus) {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error'
));
}
}
&:checked {
~ .rose-form-radio-label {
&::after {
background-image: url($data-svg-prefix + map-get(
$radio-svg,
'error-checked'
));
}
}
}
}
}
}
}
-1
View File
@@ -40,7 +40,6 @@
"ember-composable-helpers": "^5.0.0",
"ember-focus-trap": "^1.0.1",
"ember-named-blocks-polyfill": "^0.2.5",
"ember-radio-button": "github:yapplabs/ember-radio-button.git#b2ab65f",
"ember-uuid": "^2.1.0",
"jsonlint": "^1.6.3",
"sass": "^1.69.5"
@@ -72,19 +72,12 @@ module('Integration | Component | rose/form', function (hooks) {
</Hds::Form::Select::Field>
<form.checkbox @label="Checkbox" @name="checkbox-field" />
<form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
<radioGroup.radio
@label="Red"
@value="red"
/>
</form.radioGroup>
</Rose::Form>
`);
assert.ok(find('[name="input-field"]'));
assert.ok(find('[name="textarea-field"]'));
assert.ok(find('[name="select-field"]'));
assert.ok(find('[name="checkbox-field"]'));
assert.ok(find('[name="radio-group-field"]'));
});
test('it supports an editability toggle when @showEditToggle is true', async function (assert) {
@@ -1,126 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, findAll } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | rose/form/radio/group', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`
<Rose::Form::Radio::Group @name="bird" as |radioGroup|>
<radioGroup.radio
@name="bird"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@name="bird"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.strictEqual(findAll('input').length, 2);
assert.strictEqual(findAll('input')[0].name, 'bird');
assert.strictEqual(findAll('input')[1].name, 'bird');
});
test('it renders with @selectedValue value selected', async function (assert) {
await render(hbs`
<Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
<radioGroup.radio
@name="bird"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@name="bird"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.false(findAll('[type="radio"]')[0].checked);
assert.true(findAll('[type="radio"]')[1].checked);
await click(findAll('[type="radio"]')[0]);
assert.true(findAll('[type="radio"]')[0].checked);
assert.false(findAll('[type="radio"]')[1].checked);
});
test('it reflects active radiofield value in @selectedValue and triggers a @changed function', async function (assert) {
assert.expect(5);
this.changed = (value) => {
this.selectedValue = value;
assert.ok(value);
};
await render(hbs`
<Rose::Form::Radio::Group
@name="bird"
@selectedValue={{this.selectedValue}}
@changed={{this.changed}}
as |radioGroup|>
<radioGroup.radio
@name="bird"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@name="bird"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.notOk(this.selectedValue);
await click(findAll('[type="radio"]')[0]);
assert.strictEqual(this.selectedValue, 'pegion');
await click(findAll('[type="radio"]')[1]);
assert.strictEqual(this.selectedValue, 'flamingo');
});
test('it uses @selectedValue value to set active radiofield', async function (assert) {
this.set('selectedValue', 'cat');
await render(hbs`
<Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
<radioGroup.radio
@name="bird"
@label="Pegion"
@value="pegion"
/>
<radioGroup.radio
@name="bird"
@label="flamingo"
@value="flamingo"
/>
</Rose::Form::Radio::Group>
`);
assert.false(findAll('[type="radio"]')[0].checked);
assert.false(findAll('[type="radio"]')[1].checked);
this.set('selectedValue', 'flamingo');
assert.false(findAll('[type="radio"]')[0].checked);
assert.true(findAll('[type="radio"]')[1].checked);
this.set('selectedValue', 'pegion');
assert.true(findAll('[type="radio"]')[0].checked);
assert.false(findAll('[type="radio"]')[1].checked);
this.set('selectedValue', 'dog');
assert.false(findAll('[type="radio"]')[0].checked);
assert.false(findAll('[type="radio"]')[1].checked);
});
});
@@ -1,71 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | rose/form/radio/radio', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.ok(await find('input'));
assert.strictEqual(await find('input').type, 'radio');
});
test('it renders with label', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @label="Label"/>`);
assert.strictEqual(await find('label').textContent.trim(), 'Label');
});
test('it supports an icon', async function (assert) {
await render(
hbs`<Rose::Form::Radio::Radio @icon="flight-icons/svg/user-circle-16" />`,
);
assert.ok(find('svg'));
});
test('it is checked when @value and @selectedValue values match', async function (assert) {
await render(
hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`,
);
assert.true(await find('input').checked);
});
test('it is not checked when @value and @selectedValue values are different', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
assert.false(await find('input').checked);
await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
assert.false(await find('input').checked);
await render(
hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`,
);
assert.false(await find('input').checked);
});
test('it is not disabled by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.false(await find('input').disabled);
});
test('it is not in error state by default', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio />`);
assert.notOk(await find('.error'));
});
test('it is disabled when @disabled={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @disabled={{true}}/>`);
assert.true(await find('input').disabled);
});
test('it is in error state when @error={{true}}', async function (assert) {
await render(hbs`<Rose::Form::Radio::Radio @error={{true}} />`);
assert.ok(await find('.error'));
});
});
@@ -4,40 +4,29 @@
}}
{{#if (or @model.isOIDC @model.isLDAP)}}
<Rose::Dropdown
@text={{t (concat 'states.' @model.state)}}
@icon={{if
@model.isInactive
'flight-icons/svg/x-circle-16'
(if
@model.isPrivate
'flight-icons/svg/lock-16'
'flight-icons/svg/check-circle-16'
)
}}
@dropdownRight={{true}}
as |dropdown|
>
<dropdown.section @title={{t 'actions.change-state'}}>
<Rose::Form as |form|>
<form.radioGroup
@name='theme'
@selectedValue={{@model.state}}
@changed={{fn @changeState @model}}
as |radioGroup|
>
{{#each @model.options.state as |state|}}
<dropdown.item>
<radioGroup.radio
@label={{t (concat 'states.' state)}}
@value={{state}}
/>
</dropdown.item>
{{/each}}
</form.radioGroup>
</Rose::Form>
</dropdown.section>
</Rose::Dropdown>
<Hds::Dropdown class='change-state' data-test-change-state as |dd|>
<dd.Title @text={{t 'actions.change-state'}} />
<dd.ToggleButton
@text={{t (concat 'states.' @model.state)}}
@color='secondary'
@icon={{if
@model.isInactive
'x-circle'
(if @model.isPrivate 'lock' 'check-circle')
}}
/>
{{#each @model.options.state as |state|}}
<dd.Radio
checked={{eq @model.state state}}
@value={{state}}
{{on 'change' (fn @changeState @model state)}}
>
{{t (concat 'states.' state)}}
</dd.Radio>
{{/each}}
</Hds::Dropdown>
{{/if}}
<Hds::Dropdown data-test-manage-auth-method as |dd|>
+23
View File
@@ -8,6 +8,21 @@ import { inject as service } from '@ember/service';
import { getOwner } from '@ember/application';
import { action } from '@ember/object';
const THEMES = [
{
label: 'system',
value: 'system-default-theme',
},
{
label: 'light',
value: 'light',
},
{
label: 'dark',
value: 'dark',
},
];
export default class ApplicationController extends Controller {
// =services
@@ -16,6 +31,14 @@ export default class ApplicationController extends Controller {
@service featureEdition;
@service flashMessages;
/**
* Returns available themes
* @type {array}
*/
get themes() {
return THEMES;
}
// =actions
/**
+3 -28
View File
@@ -4,7 +4,6 @@
*/
import Route from '@ember/routing/route';
import { getOwner } from '@ember/application';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { A } from '@ember/array';
@@ -65,7 +64,9 @@ export default class ApplicationRoute extends Route {
this.intl.setLocale(['en-us']);
await this.session.setup();
const theme = this.session.get('data.theme');
this.toggleTheme(theme);
/* eslint-disable-next-line ember/no-controller-access-in-routes */
const controller = this.controllerFor(this.routeName);
controller.toggleTheme(theme);
// Setup the DB from a successful authentication restoration
if (this.session.isAuthenticated) {
@@ -77,32 +78,6 @@ export default class ApplicationRoute extends Route {
}
}
/**
* Applies the specified color theme to the root ember element.
* @param {string} theme - "light", "dark", or nullish (system default)
*/
@action
toggleTheme(theme) {
const rootElementSelector = getOwner(this).rootElement;
const rootEl = getOwner(this)
.lookup('service:-document')
.querySelector(rootElementSelector);
this.session.set('data.theme', theme);
switch (theme) {
case 'light':
rootEl.classList.add('rose-theme-light');
rootEl.classList.remove('rose-theme-dark');
break;
case 'dark':
rootEl.classList.add('rose-theme-dark');
rootEl.classList.remove('rose-theme-light');
break;
default:
rootEl.classList.remove('rose-theme-dark');
rootEl.classList.remove('rose-theme-light');
}
}
/**
* Invalidates the session if a 401 error occurs and returns false to
* prevent further error handling.
+10
View File
@@ -1078,3 +1078,13 @@
margin-bottom: 0;
}
}
.change-state {
margin-right: 1rem;
}
.dropdown-radio-btn {
.hds-form-group__control-field {
padding: 0.25rem 0.75rem;
}
}
+33 -47
View File
@@ -34,36 +34,22 @@
<dropdown.separator />
<dropdown.section @title={{t 'actions.toggle-color-theme'}}>
<Rose::Form as |form|>
<form.radioGroup
@name='theme'
@selectedValue={{or
this.session.data.theme
'system-default-theme'
}}
@changed={{this.toggleTheme}}
as |radioGroup|
>
<dropdown.item>
<radioGroup.radio
@label={{t 'themes.system'}}
@value='system-default-theme'
/>
</dropdown.item>
<dropdown.item>
<radioGroup.radio
@label={{t 'themes.light'}}
@value='light'
/>
</dropdown.item>
<dropdown.item>
<radioGroup.radio
@label={{t 'themes.dark'}}
@value='dark'
/>
</dropdown.item>
</form.radioGroup>
</Rose::Form>
<Hds::Form::Radio::Group
@name='theme'
class='dropdown-radio-btn'
as |G|
>
{{#each this.themes as |theme|}}
<G.RadioField
@value={{theme.value}}
checked={{eq this.session.data.theme theme.value}}
{{on 'change' (fn this.toggleTheme theme.value)}}
as |F|
>
<F.Label>{{t (concat 'themes.' theme.label)}}</F.Label>
</G.RadioField>
{{/each}}
</Hds::Form::Radio::Group>
</dropdown.section>
</utilities.dropdown>
@@ -79,23 +65,23 @@
as |dropdown|
>
<dropdown.section @title={{t 'actions.toggle-feature-edition'}}>
<Rose::Form as |form|>
<form.radioGroup
@name='edition'
@selectedValue={{this.featureEdition.edition}}
@changed={{this.toggleEdition}}
as |radioGroup|
>
{{#each this.featureEdition.editions as |edition|}}
<dropdown.item>
<radioGroup.radio
@label={{edition}}
@value={{edition}}
/>
</dropdown.item>
{{/each}}
</form.radioGroup>
</Rose::Form>
<Hds::Form::Radio::Group
@name='edition'
class='dropdown-radio-btn'
as |G|
>
{{#each this.featureEdition.editions as |edition|}}
<G.RadioField
@value={{edition}}
checked={{eq this.featureEdition.edition edition}}
{{on 'change' (fn this.toggleEdition edition)}}
as |F|
>
<F.Label>{{edition}}</F.Label>
</G.RadioField>
{{/each}}
</Hds::Form::Radio::Group>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title={{t 'actions.toggle-licensed-features'}}>
@@ -25,6 +25,11 @@ import {
import { TYPE_AUTH_METHOD_OIDC } from 'api/models/auth-method';
const CHANGE_STATE_SELECTOR = '[data-test-change-state] button:first-child';
const CHANGE_STATE_INPUT_CHECKED = '[data-test-change-state] input:checked';
const CHANGE_STATE_INPUT_SELECTOR = '[data-test-change-state]';
module('Acceptance | auth-methods | oidc', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
@@ -67,9 +72,9 @@ module('Acceptance | auth-methods | oidc', function (hooks) {
test('can view oidc state', async function (assert) {
await visit(urls.authMethod);
await click('.rose-layout-page-actions .rose-dropdown-trigger');
await click(CHANGE_STATE_SELECTOR);
assert.strictEqual(
find('.rose-dropdown[open] input:checked').value,
find(CHANGE_STATE_INPUT_CHECKED).value,
instances.authMethod.attributes.state,
);
});
@@ -77,29 +82,45 @@ module('Acceptance | auth-methods | oidc', function (hooks) {
test('can update oidc state', async function (assert) {
const updateValue = 'inactive';
await visit(urls.authMethod);
await click('.rose-layout-page-actions .rose-dropdown-trigger');
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
await click(CHANGE_STATE_SELECTOR);
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
const authMethod = this.server.schema.authMethods.findBy({
id: instances.authMethod.id,
});
assert.strictEqual(authMethod.attributes.state, updateValue);
});
test('can update oidc state to active-private', async function (assert) {
const updateValue = 'active-private';
await visit(urls.authMethod);
await click('.rose-layout-page-actions .rose-dropdown-trigger');
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
await click(CHANGE_STATE_SELECTOR);
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
const authMethod = this.server.schema.authMethods.findBy({
id: instances.authMethod.id,
});
assert.strictEqual(
find(CHANGE_STATE_INPUT_CHECKED).value,
instances.authMethod.attributes.state,
);
assert.strictEqual(authMethod.attributes.state, updateValue);
});
test('can update oidc state to active-public', async function (assert) {
// Update default 'active-public' state to inactive
instances.authMethod.attributes.state = 'inactive';
const updateValue = 'active-public';
await visit(urls.authMethod);
await click('.rose-layout-page-actions .rose-dropdown-trigger');
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
await click(CHANGE_STATE_SELECTOR);
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
const authMethod = this.server.schema.authMethods.findBy({
id: instances.authMethod.id,
});
assert.strictEqual(
find(CHANGE_STATE_INPUT_CHECKED).value,
instances.authMethod.attributes.state,
);
assert.strictEqual(authMethod.attributes.state, updateValue);
});
@@ -53,7 +53,7 @@ module('Acceptance | workers | create', function (hooks) {
const featuresService = this.owner.lookup('service:features');
featuresService.enable('byow-pki-hcp-cluster-id');
await visit(newWorkerURL);
const labels = findAll('label.hds-form-label');
const labels = findAll('.worker-create-section label.hds-form-label');
assert.dom(labels[0]).hasText('Boundary Cluster ID (Optional)');
assert.dom(labels[2]).doesNotIncludeText('Initial Upstreams');
});
@@ -61,7 +61,7 @@ module('Acceptance | workers | create', function (hooks) {
test('initial upstreams input field is visible for `oss` binary', async function (assert) {
const featuresService = this.owner.lookup('service:features');
await visit(newWorkerURL);
const labels = findAll('label.hds-form-label');
const labels = findAll('.worker-create-section label.hds-form-label');
assert.false(featuresService.isEnabled('byow-pki-hcp-cluster-id'));
assert.dom(labels[0]).doesNotIncludeText('Boundary Cluster ID');
assert.dom(labels[2]).hasText('Initial Upstreams (Optional)');
-7
View File
@@ -9345,13 +9345,6 @@ ember-qunit@^8.1.0:
ember-cli-test-loader "^3.1.0"
qunit-theme-ember "^1.0.0"
"ember-radio-button@github:yapplabs/ember-radio-button.git#b2ab65f":
version "0.0.0"
resolved "https://codeload.github.com/yapplabs/ember-radio-button/tar.gz/b2ab65f81cae3b0f087cc99b8c01172b754cb181"
dependencies:
ember-cli-babel "^7.26.3"
ember-cli-htmlbars "^5.7.1"
ember-resolver@^10.0.0:
version "10.1.1"
resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-10.1.1.tgz#1106a2386337b13a9ee509a9ad2a18b53a728ab3"